Search Reveal

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

Usage

Two fine construction circles expand, then snap into a short white dash. The dash stretches into a search pill, types remocn, and reveals a purple panel with contour rings and graphic accents. Corner markers follow the field and then the expanding panel.

import { SearchReveal } from "@/components/remocn/search-reveal";
 
export const Intro = () => <SearchReveal text="remocn" />;

This is a simulated search interface for video. It does not accept keyboard input or perform a search. Edit the text through props or the preview controls. All motion and cursor timing come from the Remotion frame; no assets, fonts, CSS animation clocks, or network requests are required.

Timing

At 30 fps and the default speed:

searchRevealLength is 90 frames for the default copy. Longer text or slower typing extends the animation. getSearchRevealDuration({ text, framesPerCharacter, speed }) returns the full preview duration, including an 18-frame hold, at 30 fps. For another frame rate, multiply by fps / 30 and round up. The docs preview updates its duration automatically. After completion the final pose stays visible, ready for a cut to the next scene.

Minimal variation

<SearchReveal
  text="Find your next idea"
  fieldWidth={640}
  showPanel={false}
  showGuides={false}
  framesPerCharacter={3}
/>

The scene scales to fit the composition while retaining its proportions. Long copy automatically reduces its font size to fit the field. Typing keeps Unicode grapheme clusters intact. reducedMotion immediately displays the finished composition, suitable when a host opts into a static preview.