Pro

Orbit Rings

Five metal rings on tilted orbits, each turning at its own speed.

A gyroscope of thin rings under studio lighting. It suits pages about systems, platforms and data.

Buy all access, USD 10

What you get

The full source and any assets are delivered after checkout. One payment of USD 10 unlocks every pro element. The start of the file is shown here.

OrbitRings.tsxPro · full source after checkout
"use client";

/**
 * Orbit Rings — brushed-metal rings on tilted orbits.
 *
 * Self-contained: three, @react-three/fiber, @react-three/drei.
 * Reflections come from light panels in a procedural environment, so
 * nothing is fetched at runtime.
 *
 *   <OrbitRings color="#e4a256" rings={5} speed={1} />
 */
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { Environment, Lightformer } from "@react-three/drei";
import { useMemo, useRef } from "react";
import type { Group } from "three";

export type OrbitRingsProps = {
  color?: string;
  rings?: number;
  speed?: number;
  className?: string;
};

function Rings({ color, rings, speed }: Required<Omit<OrbitRingsProps, "className">>) {
  const group = useRef<Group>(null);
  const pointer = useThree((state) => state.pointer);

  // Each ring: radius, tilt, direction and rate. Deterministic, so the

Inside

  • Five torus rings on independent tilted orbits
  • Light-panel environment for the metal, no HDR file
  • Pointer parallax on the whole group
  • Props for colour, ring count and speed

Install

npm install three @react-three/fiber @react-three/drei

One file.

Kind
3D objects
Licence
Unlimited projects
Runs on
React 19
Price
USD 10, all access

More elements

All elements
3D objects
Pro
Chrome Blob: open the element page

Chrome Blob

A metallic sphere that distorts as it turns, with studio reflections.

Price
USD 10, all access
Built with
React Three Fiber

FAQ

What you get, what it runs on, what it costs to run and what the licence allows.

01

What do I get?

One React component file per element, plus any shader or asset files it needs. Members of a series also get the small engine file they share. Free elements are copied from the page. Pro elements are a download after one payment of USD 10, which unlocks all of them. Each element imports only public packages, which are listed on its page.

02

What does it run on?

React 19. The 3D and shader elements use three.js through React Three Fiber. The 2D ones use Framer Motion or plain CSS and canvas. They work in Next.js, Vite, Remix and any other React setup. Framer and Webflow users can embed an element as a code component.

03

Can I change the colours and speed?

Yes. Every element exposes its look as props, the same controls shown on its page. Anything beyond the props is yours to edit in the file.

04

Can I use these in a deck, a magazine or a film?

Yes. Every element page has a Save frame button that downloads the current frame as a PNG at the size shown. Make the browser window large for a print-size still. For motion, record the page or ask us for a rendered clip. The licence covers web, print, decks and video, for your own work and your clients' work.

05

How heavy is it?

The 3D elements mount when they scroll into view and unmount when they leave, so an element off screen costs nothing. The shader backgrounds cost a fraction of a video background. The 2D elements are a few kilobytes.

06

What is the licence?

Free elements are MIT. Use them anywhere, including client work. Pro elements are licensed to you for unlimited projects of your own and your clients'. You may not resell or redistribute the source itself.

07

Can you make one for us?

Yes. A custom element, such as your product in 3D or a branded shader, is a small project quoted up front. All-access members are asked first about what we build next.