# Flip Sting
URL: https://remocn.dev/docs/logo-stings/flip-sting

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

- Install: `npx shadcn@latest add @remocn/flip-sting`
- Vibe: premium
- Natural length: 90f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |

## Use when
- A kinetic logo sting where the letters act as a stencil for rapid flat frames.
- An energetic opener that ends on a gradient logo and a small tracked line.
- A music-driven intro where the flip slows to land on the brand.

## Don't use when
- You want a single hard slam rather than a flip-book — use `bass-drop`.
- The reveal should be calm and quiet — use `first-light`.
- Words, not frames, should drive the rhythm — use `blink-cut`.