True Focus — 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.

Corner brackets jump from word to word, sharpening the framed word while the rest stay blurred

• Install: npx shadcn@latest add @react-bits/TrueFocus-JS-CSS
• Registry: react-bits · Framework: react · License: MIT + Commons Clause
• Docs and preview: https://reactbits.dev/text-animations/true-focus
• Source: https://github.com/DavidHDev/react-bits/blob/main/src/content/TextAnimations/TrueFocus/TrueFocus.jsx
• Example: https://skills.varg.ai/previews/lib-react-bits-true-focus.mp4?v=17592 (Captured from the library’s own demo page (React Bits))
• 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 True Focus from React Bits (https://reactbits.dev/text-animations/true-focus, MIT + Commons Clause: OK in a video). Install with npx shadcn@latest add @react-bits/TrueFocus-JS-CSS and use it on a short claim where each word should land on a beat ('Fast. Private. Yours.'). Set sentence, blurAmount, borderColor and glowColor from the brand, focusStyle, animationDuration and pauseBetweenAnimations. It moves the focus on setInterval with Motion. Compute the focused index as floor(t / (animationDuration + pauseBetweenAnimations)) % words, with t = frame / fps, ease the bracket position from the time inside that step, and keep manualMode off.

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