Flood Sting

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

Installation

$ pnpm dlx 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.

Props11

Prop	Type	Default
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	number2 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.

iconsGlyphName[]
Glyph names for the tiles in the row.
DefaultDEFAULT_ICONS
rollsGlyphName[][]
Glyph names each tile cycles through, one list per roll.
DefaultDEFAULT_ROLLS
picknumber
Index of the tile that is pressed and floods the frame.
Default2
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"
paperstring
Background colour of the row stage.
inkstring
Colour of the tiles and glyphs.
floodstring
Colour of the flood that fills the frame.
logoColorstring
Colour of the logo that lands after the flood.
hopsstring[]
Colours the highlight takes as it hops between tiles.
groundGshPresetId
Shader preset id for the gradients.sh background ground.
groundParamsPartial<GradientParams>
Custom shader parameters for the ground, used instead of the theme default.