Clock Sweep

$ pnpm dlx shadcn@latest add @remocn/clock-sweep

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ClockSweep } from "@/components/remocn/clock-sweep";
 
const ClockSweepScene = () => <ClockSweep minutes={4} title={"From idea to video\nin 4 minutes"} />;
 
export const RemotionRoot = () => (
  <Composition
    id="ClockSweep"
    component={ClockSweepScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A ticked clock dial draws in and its hand sweeps a glowing wedge across the given number of minutes while an mm:ss readout counts with it. The hand settles with a small kick, the dial glides to the left and a headline fades in word by word on the right with the number highlighted. Pass minutes and optionally title, which defaults to 'From idea to video in N minutes'. It ships light and dark through the theme prop.