Ring Align

Concentric dotted rings rotate until their slots align and a beam reveals a word in the channel

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RingAlign } from "@/components/remocn/ring-align";
 
const RingAlignScene = () => <RingAlign word="Aligned." rings={6} />;
 
export const RemotionRoot = () => (
  <Composition
    id="RingAlign"
    component={RingAlignScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

Rings of dots spin from offset angles and lock one by one, outer ring first, each with a small settle. Once the last ring locks, a bright beam sweeps through the aligned channel and leaves your word filled in a gradient. Pass word and rings (3 to 9). Ships dark and light via theme.

Props5

Prop	Type	Default
word	string"Aligned." Word revealed in the channel once every slot lines up.
rings	number6 Number of concentric rings, from 3 to 9.
accent	string"#3B5BFD" Color of the period at the end of the word.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme. Ships dark and light.

wordstring
Word revealed in the channel once every slot lines up.
Default"Aligned."
ringsnumber
Number of concentric rings, from 3 to 9.
Default6
accentstring
Color of the period at the end of the word.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"