Text Orbit
A round photo encircled by rings of text set on SVG paths, each turning at its own speed and direction, with any ring tilted into a Saturn-like orbit that passes behind and in front of the photo. The whole object leans toward the cursor in 3D, sways on its own when nobody is pointing and floats over a faded reflection. Rings, speed, lean, sway and the reflection are props; the ring type takes its font from the component's own classes. Pauses offscreen and holds still for reduced motion.
The import and the props worth knowing about, in one place.
import { TextOrbit } from "@/components/beste/component/text-orbit";
<TextOrbit
className="mx-auto max-w-[520px] font-serif"
color="var(--primary)" // any CSS color, tokens included
image={{ src: "https://images.unsplash.com/photo-1622618991746-fe6004db3a47?w=2000&q=80", alt: "A perfume bottle" }}
imageScale={1.7} // zoom of the round photo
imageFocus="28% 56%" // where the zoom centers
rings={[
{ text: "Ember No. 9 · Eau de parfum ·", radius: 1.04, depth: 70 },
{ text: "Bitter orange · Fig leaf · Smoked amber ·", radius: 0.8, speed: 1.7, direction: "counterclockwise" },
{ text: "Composed in Grasse ·", radius: 1.32, speed: 0.7, tilt: 74 }, // tilted orbit
]}
speed={0.6} // global turning speed
tilt={0.8} // lean toward the cursor, 0 to 1
sway={0.3} // drift on its own, 0 to 1
reflection={false}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
rings | TextOrbitRing[] | — | Rings of text, outer first |
image | { src: string; alt: string } | — | Round photo at the center |
imageScale | number | — | Zoom of the center photo |
imageFocus | string | — | Point of the photo the zoom centers on, as a CSS position |
color | string | — | Color of the ring text. Any CSS color, tokens included |
speed | number | — | Global turning speed, 1 is the default pace |
tilt | number | — | How far the object leans toward the cursor, 0 to 1 |
sway | number | — | How much the object sways on its own, 0 to 1 |
reflection | boolean | — | Faded mirror image of the photo below the object |
interactive | boolean | — | Lean toward the cursor; otherwise it only sways |
paused | boolean | — | Stop turning and swaying |
className | string | — |