Hyperspeed — component for 3d & objects (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.

Pink and cyan light trails streaking down a winding night highway toward the viewer

Prompt that renders it frame-exact

Use Hyperspeed from React Bits (https://reactbits.dev/backgrounds/hyperspeed, MIT + Commons Clause: OK to render, not to resell the code). Install with npx shadcn@latest add @react-bits/Hyperspeed-JS-CSS (it brings in three) and use it full-frame for a speed or launch intro or behind a countdown. Toggling boosting={true} on a beat widens the field of view for a hyperspace moment. Set tailColors and headColors to the brand palette, plus curve, speed and density. It runs a Three.js clock on requestAnimationFrame: drive uTime and the car offsets from frame / fps instead, set interactive={false}, and render the scene once per frame. For 9:16, raise fov so the road fills the frame.

Used in

More 3d & objects