Container Text Flip — 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 rounded pill resizes smoothly as the word inside flips to the next one in a list

• Install: npx shadcn@latest add @aceternity/container-text-flip
• Registry: aceternity · Framework: react · License: Aceternity License (free components)
• Docs and preview: https://ui.aceternity.com/components/container-text-flip
• Source: https://ui.aceternity.com/components/container-text-flip
• 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

Add Aceternity UI's Container Text Flip (https://ui.aceternity.com/components/container-text-flip; free component, Aceternity License, fine in commercial video, do not redistribute the code) as a word badge inside my headline, so the pill shrinks or grows to fit each new word. Install with npx shadcn@latest add @aceternity/container-text-flip. Words change on a setInterval and the width and letters animate with Motion, so for rendering pick the word index from frame / fps ÷ interval, measure each word's width once, and interpolate the pill width and letter blur from the frame (Remotion) or tween them on the HyperFrames timeline. Set words, interval, animationDuration, className and textClassName.

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