Moire Reveal

A large figure resolves out of a rotating moire line pattern and locks sharp, with a small pill caption.

Installation

$ pnpm dlx shadcn@latest add @remocn/moire-reveal

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { MoireReveal } from "@/components/remocn/moire-reveal";
 
const MoireRevealScene = () => (
  <MoireReveal value="10×" caption="faster first frame on remocn render" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="MoireReveal"
    component={MoireRevealScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A field of fine lines turns and drifts until it locks into the figure, then a small pill caption fades in beneath. Pass value and caption, or set shape to mark to reveal the Remocn mark instead of text; it ships light and dark through theme.

Props6

Prop	Type	Default
value	string"10×" Figure that the line pattern resolves into.
shape	"text" \| "mark""text" Reveal the value as text or as the Remocn mark.
caption	string"faster first frame on remocn render" Small pill caption 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.

valuestring
Figure that the line pattern resolves into.
Default"10×"
shape"text" | "mark"
Reveal the value as text or as the Remocn mark.
Default"text"
captionstring
Small pill caption that fades in under the figure.
Default"faster first frame on remocn render"
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