Kinetic Center Build — 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.

Words arrive one at a time with a light blur, pushing the line along until the phrase sits centred

• Install: npx shadcn@latest add https://animata.design/r/text/kinetic-center-build.json
• Registry: animata · Framework: react · License: MIT
• Docs and preview: https://animata.design/docs/text/kinetic-center-build
• Source: https://github.com/codse/animata/blob/main/animata/text/kinetic-center-build.tsx
• Example: https://skills.varg.ai/previews/lib-animata-kinetic-center-build.mp4?v=28074 (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 Kinetic Center Build from Animata (https://animata.design/docs/text/kinetic-center-build, MIT) for punchy taglines on a beat: the first word lands in the centre, each new word slides in from the right and nudges the line until the whole phrase is centred. Like the other TextAnimator effects it chains Web Animations with timers and measures word widths at runtime. For a render, measure the words once, give each word a start time on your beat grid, and compute its x, opacity and blur from time (about 360 ms per entrance, 3.5 px blur); in HyperFrames put those tweens on the paused timeline, in Remotion use interpolate on the frame. Set the phrases, the word timing, font and colour.

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