Pattern Tile

A single quarter-disc tile is rotated, mirrored and translated into a wall of 72 tiles

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PatternTile } from "@/components/remocn/pattern-tile";
 
const PatternTileScene = () => (
  <PatternTile steps={["tile", "rotate 90°", "mirror", "translate"]} unit="tiles" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PatternTile"
    component={PatternTileScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

One quarter-disc tile appears, rotates into a rosette, mirrors across an axis and slides out into a full wall while a four-step label highlights the current operation. A counter ends on the total tile count with an accent marker. Pass steps (four labels) and unit. Ships dark and light via theme.

Props5

Prop	Type	Default
steps	[string, string, string, string]— Four step labels shown in order under the grid.
unit	string"tiles" Noun shown after the tile counter.
accent	string"#3B5BFD" Color of the counter marker and highlights.
theme	"dark" \| "light""dark" Color scheme. Ships dark and light.
speed	number1 Playback speed multiplier for the whole timeline.

steps[string, string, string, string]
Four step labels shown in order under the grid.
unitstring
Noun shown after the tile counter.
Default"tiles"
accentstring
Color of the counter marker and highlights.
Default"#3B5BFD"
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1