Text Animate — 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.

A line of text appears letter by letter, each character rising out of a blur

• Install: npx shadcn@latest add @magicui/text-animate
• Registry: magic-ui · Framework: react · License: MIT
• Docs and preview: https://magicui.design/docs/components/text-animate
• Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/registry/magicui/text-animate.tsx
• Example: https://skills.varg.ai/previews/lib-magic-ui-text-animate.mp4?v=13176 (Captured from the library’s own demo page (Magic UI))
• 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 Text Animate from Magic UI (https://magicui.design/docs/components/text-animate, MIT) for titles and captions, centred or in the lower third. It splits text by character, word or line and plays motion variants (fadeIn, blurInUp, slideUp, scaleUp and others) with a stagger, triggered on mount or on view. For a render, give every segment its own start, i * stagger, and compute opacity, y and blur from the frame (Remotion: interpolate(frame - start, [0, durationFrames], [0, 1]) with an ease-out), or rebuild the same stagger on HyperFrames' paused timeline. Pick by (character for short words, word for sentences), the animation preset, duration and delay, and take the font and colour from the brand.

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