Tile Wave

A diagonal wave shrinks a grid of tiles away and regrows them as the next scene on a blue gradient

Installation

$ pnpm dlx shadcn@latest add @remocn/tile-wave

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TileWave } from "@/components/remocn/tile-wave";
 
const TileWaveScene = () => (
  <TileWave
    from="Idea."
    to="Shipped."
    rows={8}
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TileWave"
    component={TileWaveScene}
    durationInFrames={94}
    fps={30}
    width={1280}
    height={720}
  />
);

The from scene holds for delay frames, then a diagonal wave shrinks the tile grid of the outgoing scene to dots and regrows the tiles carrying the to scene on a cold blue gradient. Pass from and to as short text or any React node, and raise rows for finer tiles; theme sets the stage between the tiles. The wave lands by frame 64 and the gradient settles by frame 94 with the default delay.

Props7

Prop	Type	Default
from	React.ReactNode"Idea." Outgoing scene: a short headline or any React node
to	React.ReactNode"Shipped." Incoming scene, set on a blue gradient panel
rows	number8 Number of tile rows; columns follow the aspect ratio
delay	number16 Frames the outgoing scene holds before the wave
accent	string"#3B5BFD" Color of the trailing period on text headlines
speed	number1 Playback multiplier for the whole timeline
theme	"dark" \| "light""dark" Stage tone seen between tiles; the outgoing scene takes the other

fromReact.ReactNode
Outgoing scene: a short headline or any React node
Default"Idea."
toReact.ReactNode
Incoming scene, set on a blue gradient panel
Default"Shipped."
rowsnumber
Number of tile rows; columns follow the aspect ratio
Default8
delaynumber
Frames the outgoing scene holds before the wave
Default16
accentstring
Color of the trailing period on text headlines
Default"#3B5BFD"
speednumber
Playback multiplier for the whole timeline
Default1
theme"dark" | "light"
Stage tone seen between tiles; the outgoing scene takes the other
Default"dark"