# Flood Sting
URL: https://remocn.dev/docs/logo-stings/flood-sting

A row of icons is picked through, then a flood of colour fills the frame and the logo lands.

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

## Installation

```bash
npx shadcn@latest add @remocn/flood-sting
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FloodSting } from "@/components/remocn/flood-sting";

const FloodStingScene = () => (
  <FloodSting
    icons={["cluster", "download", "globe", "gear", "brackets"]}
    pick={2}
    flood="#3B5BFD"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="FloodSting"
    component={FloodStingScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A row of icon tiles plays a selection game: a highlight hops across them and slot-style rolls swap their glyphs until a press picks one. The picked tile floods the frame with colour and the logo lands between two dots. Pass `icons` from the built-in glyph set (cluster, download, globe, gear, brackets, spark, grid, diamonds), `pick` and the colours. Ships light and dark.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `icons` | `GlyphName[]` | `DEFAULT_ICONS` | Glyph names for the tiles in the row. |
| `rolls` | `GlyphName[][]` | `DEFAULT_ROLLS` | Glyph names each tile cycles through, one list per roll. |
| `pick` | `number` | `2` | Index of the tile that is pressed and floods the frame. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |
| `paper` | `string` | — | Background colour of the row stage. |
| `ink` | `string` | — | Colour of the tiles and glyphs. |
| `flood` | `string` | — | Colour of the flood that fills the frame. |
| `logoColor` | `string` | — | Colour of the logo that lands after the flood. |
| `hops` | `string[]` | — | Colours the highlight takes as it hops between tiles. |
| `ground` | `GshPresetId` | — | Shader preset id for the gradients.sh background ground. |
| `groundParams` | `Partial<GradientParams>` | — | Custom shader parameters for the ground, used instead of the theme default. |

## Use when
- A tool-picker or integrations beat that should end by flooding into the brand.
- A playful sting with a tactile hop, roll and press before the logo arrives.
- A transition-like opener: UI selection into a full-frame colour reveal.

## Don't use when
- You want the logo to ease in with no UI metaphor — use `first-light`.
- A tagline must sit under the logo — use `introducing`.
- The rhythm should come from words rather than icons — use `blink-cut`.