Ring Text

$ pnpm dlx shadcn@latest add @remocn/ring-text

Usage

// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { RingText } from "@/components/remocn/ring-text";
 
const Ring = () => (
  <AbsoluteFill style={{ backgroundColor: "#d4ff1f" }}>
    <RingText text="Type in motion" color="#d4ff1f" band="#0a0a0a" />
  </AbsoluteFill>
);
 
export const RemotionRoot = () => (
  <Composition
    id="RingText"
    component={Ring}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

Every character sits on its own panel, placed around the ring with rotateY(θ) translateZ(radius), and the panel background forms the band. The text and separator repeat as many times as fit the circumference, and the remainder is spread as letter spacing so the band closes without a gap. A phrase longer than one lap grows the radius instead.

The ring is viewed from above: the near side reads left to right, and the far side shows the letters mirrored and dimmed. It turns once every period frames, and its tilt sways by six degrees. It arrives scaled down, spinning fast, and settles into its cruise speed by frame 30.

The ring is centered in its parent; place it with a wrapper. Sizes scale with height / 720.