Flip Sting

The camera pulls out of a flip-book of frames inside the logo letters until the logo fills with gradient.

Installation

$ pnpm dlx shadcn@latest add @remocn/flip-sting

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FlipSting } from "@/components/remocn/flip-sting";
 
const FlipStingScene = () => (
  <FlipSting
    line="LAUNCH FILMS"
    accent="#3B5BFD"
    theme="dark"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="FlipSting"
    component={FlipStingScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

The camera pulls out of the R while flat graphic frames flip inside the letters, slowing page by page until the last one lands and the logo fills with the gradient. A small tracked line rises under it. Pass line and accent. Ships light and dark.

Props4

Prop	Type	Default
line	string"LAUNCH FILMS" Small tracked line under the logo; empty hides it.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.
theme	"dark" \| "light""dark" Dark or light palette and ground.

linestring
Small tracked line under the logo; empty hides it.
Default"LAUNCH FILMS"
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"