Text Flipping Board — 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.mdto its path. Before generating anything, show the person the options on the use-case page.
A split-flap departure board whose tiles flip through letters until a short quote spells out
- Install:
npx shadcn@latest add @aceternity/text-flipping-board - Registry: aceternity · Framework: react · License: Aceternity License (free components)
- Docs and preview: https://ui.aceternity.com/components/text-flipping-board
- Source: https://ui.aceternity.com/components/text-flipping-board
- 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
Spell out a short message on Aceternity UI's Text Flipping Board (https://ui.aceternity.com/components/text-flipping-board; free component, Aceternity License, fine in commercial video, do not redistribute the source), centered in the frame like an airport departure board. Install with npx shadcn@latest add @aceternity/text-flipping-board. Tiles advance on setTimeout steps through random intermediate letters, with Motion flip tweens, so for a render seed the random letters and compute each tile's current glyph and flip progress from frame / fps (Remotion), or schedule the flips on the HyperFrames timeline. Set text (use line breaks for rows) and duration, and change the board size and colors in its classes.
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