Puzzle Snap

$ pnpm dlx shadcn@latest add @remocn/puzzle-snap

Usage

PuzzleSnap draws its own mark: a quarter circle, a dot, a wedge and a small rounded square on a 2×2 grid. Each piece starts far off at a seeded angle, drifts in while it spins, then gets yanked onto its slot over three frames and throws a ring of six sparks. When the last piece lands the whole mark punches, then slides left while your wordmark wipes in on its right.

import { PuzzleSnap } from "@/components/remocn/puzzle-snap";
 
export const LogoSting = () => (
  <PuzzleSnap primaryColor="#E5322D" secondaryColor="#FFFFFF">
    <span
      style={{
        fontSize: 104,
        fontWeight: 800,
        letterSpacing: "-0.04em",
        color: "#FFFFFF",
      }}
    >
      remocn
    </span>
  </PuzzleSnap>
);

Pass only the wordmark as children, not a full lockup: the mark is the sting's own drawing. Without children the mark stays centered and no slide happens. The mark is 20% of the shorter side of the composition (144px at 720p), and the wordmark keeps its own size. Positions come from Remotion's seeded random(), so the same seed always renders the same frames.

Timing

At 30 fps, speed={1} and square on:

With square={false} there are three pieces and everything after the last contact starts 3 frames earlier. The docs preview runs 66 frames. speed scales the timeline.