Ring Cut

Concentric colored rings expand from a chosen point and the last ring carries in the next scene

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RingCut } from "@/components/remocn/ring-cut";
 
const RingCutScene = () => (
  <RingCut
    from="One idea"
    to="Now live"
    origin={{ x: 0.2, y: 0.74 }}
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="RingCut"
    component={RingCutScene}
    durationInFrames={96}
    fps={30}
    width={1280}
    height={720}
  />
);

The from headline holds, then a sequence of rings in alternating tones and thin lines expands from origin. The last ring carries the to scene across the frame and it settles into place; to="remocn" sets the Remocn logo. Place origin as fractions of the frame, for example on the control that triggers the cut. With the default origin the scene settles by frame 57.

Props6

Prop	Type	Default
from	string"One idea" Outgoing headline
to	string"remocn" Incoming headline; Remocn sets the logo
origin	{ x: number; y: number }{ x: 0.2, y: 0.74 } Center of the expanding rings as fractions of the frame
accent	string"#3B5BFD" Accent color used by the scenes
theme	"dark" \| "light""dark" Light or dark stage
speed	number1 Playback multiplier for the whole timeline

fromstring
Outgoing headline
Default"One idea"
tostring
Incoming headline; Remocn sets the logo
Default"remocn"
origin{ x: number; y: number }
Center of the expanding rings as fractions of the frame
Default{ x: 0.2, y: 0.74 }
accentstring
Accent color used by the scenes
Default"#3B5BFD"
theme"dark" | "light"
Light or dark stage
Default"dark"
speednumber
Playback multiplier for the whole timeline
Default1