Raster Paint

A pixelated figure is painted tile by tile in warm to blue colors as a scan line crosses it.

Installation

$ pnpm dlx shadcn@latest add @remocn/raster-paint

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RasterPaint } from "@/components/remocn/raster-paint";
 
const RasterPaintScene = () => (
  <RasterPaint title="10x" label="Faster renders in remocn 2.0" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="RasterPaint"
    component={RasterPaintScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A scan line sweeps down the frame, painting the pixelated figure tile by tile, with a warm to blue gradient trailing behind it. A label fades in once the scan is done. Pass title and label; it ships light and dark through theme.

Props5

Prop	Type	Default
title	string"10x" Figure that gets painted, as text.
label	string"Faster renders in remocn 2.0" Small line that fades in under the figure.
accent	string"#3B5BFD" Accent color for highlights and small marks.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".
speed	number1 Playback speed multiplier for the whole timeline.

titlestring
Figure that gets painted, as text.
Default"10x"
labelstring
Small line that fades in under the figure.
Default"Faster renders in remocn 2.0"
accentstring
Accent color for highlights and small marks.
Default"#3B5BFD"
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1