Wave Reveal — primitive for text reveals (react)

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the use-case page.

Large letters drop into place one after another in a wave, each settling out of a short slide

• Install: npx shadcn@latest add https://animata.design/r/text/wave-reveal.json
• Registry: animata · Framework: react · License: MIT
• Docs and preview: https://animata.design/docs/text/wave-reveal
• Source: https://github.com/codse/animata/blob/main/animata/text/wave-reveal.tsx
• Example: https://skills.varg.ai/previews/lib-animata-wave-reveal.mp4?v=32531 (Captured from the library’s own demo page (Animata))
• Time: Drive from the frame. Runs on its own clock (requestAnimationFrame, timers, springs or CSS). Drive it from frame / fps before rendering, or the render drifts.
• Runs: local render, free
• Aspect: any

Prompt that renders it frame-exact

Use Wave Reveal from Animata (https://animata.design/docs/text/wave-reveal, MIT) for a headline that builds letter by letter or word by word, centred in the frame. It splits the text and plays a CSS keyframe per piece with an increasing animation-delay, with direction (up or down), mode (letter or word), duration, delay and an optional blur. HyperFrames' CSS adapter can seek these keyframes as they are, as long as the element mounts with the clip; in Remotion pause the animations and set each piece's animation-delay to (its delay - frame / fps) seconds. Set text, direction, mode, duration and blur, and use a bold display font.

Used in

• Product launch film
• Notes-app ad
• Text-message story
• CLI & terminal demo
• AI chat & agent demo
• Data story
• Math animation
• Whiteboard & hand-drawn

More text reveals

• Blur In — npx hyperframes add blur-in
• Blur Out Up — npx hyperframes add blur-out-up
• Bottom Up Letters — npx hyperframes add bottom-up-letters
• Caret Swap — npx hyperframes add caret-swap
• Focus Blur Resolve — npx hyperframes add focus-blur-resolve
• Line-by-Line Slide — npx hyperframes add line-by-line-slide