Threads — component for shaders (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.

A bundle of fine pale threads waving and fraying across a dark frame like a slow string curtain

Install: npx shadcn@latest add @react-bits/Threads-JS-CSS
Registry: react-bits · Framework: react · License: MIT + Commons Clause
Docs and preview: https://reactbits.dev/backgrounds/threads
Source: https://github.com/DavidHDev/react-bits/blob/main/src/content/Backgrounds/Threads/Threads.jsx
Example: https://skills.varg.ai/previews/lib-react-bits-threads.mp4?v=104498 (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 Threads from React Bits (https://reactbits.dev/backgrounds/threads, MIT + Commons Clause: fine in videos, don't redistribute the component). Install with npx shadcn@latest add @react-bits/Threads-JS-CSS and place it full-frame behind minimal type, or as a texture band in the lower third. Tune color (an RGB array in 0–1), accentColor, lineCount 60–120, amplitude and angle to fit the layout. The WebGL loop adds the frame delta to state.time: replace that with time = frame / fps * speed, keep enableMouseInteraction off, and draw once per composition frame.

Used in

More shaders

Blob — npx hyperframes add blob
Chrome Orb — npx hyperframes add chrome-orb
Color Wheel — npx hyperframes add color-wheel
Falling Lines — npx hyperframes add falling-lines
Frost — npx hyperframes add frost
Godrays — npx hyperframes add godrays