Snap Click

The two halves of the logo slam together at a seam with a click, then a label types beneath.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SnapClick } from "@/components/remocn/snap-click";
 
const SnapClickScene = () => (
  <SnapClick
    text="emocn"
    label="Animations for Remotion"
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SnapClick"
    component={SnapClickScene}
    durationInFrames={105}
    fps={30}
    width={1280}
    height={720}
  />
);

The two halves of the lockup slam together at a seam with a flash and a small shake, then label types in beneath it with a caret. Pass text, label and, to move the split, seam. Ships light and dark.

Props6

Prop	Type	Default
text	string"emocn" Lowercase letters set after the R mark.
seam	[number, number]— Where the lockup splits: glyph index and fraction of its width.
label	string"Animations for Remotion" Small line typed under the lockup after the click.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
theme	"dark" \| "light""dark" Dark or light palette and ground.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.

textstring
Lowercase letters set after the R mark.
Default"emocn"
seam[number, number]
Where the lockup splits: glyph index and fraction of its width.
labelstring
Small line typed under the lockup after the click.
Default"Animations for Remotion"
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1