Ndot Resolve

A headline scans in as a dot-matrix face, then refreshes letter by letter into solid type.

Installation

$ pnpm dlx shadcn@latest add @remocn/ndot-resolve

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { NdotResolve } from "@/components/remocn/ndot-resolve";
 
const NdotResolveScene = () => (
  <NdotResolve text="Less noise. More launch." emphasis="launch" accent="#3B5BFD" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="NdotResolve"
    component={NdotResolveScene}
    durationInFrames={135}
    fps={30}
    width={1280}
    height={720}
  />
);

The headline appears row by row as dot-matrix glyphs, then a wipe converts each letter to solid type in sequence, with emphasis in the accent. Pass text and emphasis; it ships light and dark through theme.

Props5

Prop	Type	Default
text	string"Less noise. More launch." Headline shown as dots, then solid type
emphasis	string"launch" Word in the text shown in the accent color
accent	string"#3B5BFD" Accent color (any valid CSS color)
speed	number1 Playback speed multiplier
theme	"dark" \| "light""dark" Ships light and dark palettes

textstring
Headline shown as dots, then solid type
Default"Less noise. More launch."
emphasisstring
Word in the text shown in the accent color
Default"launch"
accentstring
Accent color (any valid CSS color)
Default"#3B5BFD"
speednumber
Playback speed multiplier
Default1
theme"dark" | "light"
Ships light and dark palettes
Default"dark"