Word Rotate — primitive for kinetic type (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.

One word at a time drops in from above and slides out below, cycling through a short list

• Install: npx shadcn@latest add @magicui/word-rotate
• Registry: magic-ui · Framework: react · License: MIT
• Docs and preview: https://magicui.design/docs/components/word-rotate
• Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/registry/magicui/word-rotate.tsx
• Example: https://skills.varg.ai/previews/lib-magic-ui-word-rotate.mp4?v=11897 (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 Word Rotate from Magic UI (https://magicui.design/docs/components/word-rotate, MIT) for the changing word in a headline ("Build / Ship / Grow"). It swaps words on a setInterval and animates them with motion's AnimatePresence, so the timing follows the wall clock. For a render, index = floor((frame / fps) / duration) % words.length, and the local progress inside each slot drives y and opacity for the incoming and outgoing word; in HyperFrames lay the words out on the paused timeline as a sequence of in and out tweens. Set words, duration per word and the motionProps for the enter and exit move, and line the swaps up with the music beat.

Used in

• Product launch film
• Feature announcement
• Ad variants for testing
• Sale & offer promo
• Faceless narrated video
• Quiz, poll & would-you-rather
• Meme format
• Changelog & release notes

More kinetic type

• Char Slam Explode — npx hyperframes add char-slam-explode
• Extended Keyframe — npx hyperframes add extended-keyframe
• Kinetic Center Build — npx hyperframes add kinetic-center-build
• Kinetic Type — npx hyperframes init my-video --example kinetic-type
• Kinetic Type Swap — npx hyperframes add kinetic-type-swap
• Shutter Slam — npx hyperframes add shutter-slam