Net — component for generative & ascii (html)

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 nodes and connecting lines forming a loose 3D mesh that rotates slowly on dark purple

• Install: npm i vanta
• Registry: vanta · Framework: html · License: MIT
• Docs and preview: https://www.vantajs.com/?effect=net
• Source: https://github.com/tengbao/vanta/blob/master/src/vanta.net.js
• Example: https://skills.varg.ai/previews/lib-vanta-net.mp4?v=66605 (Rendered by varg from the library’s own code (Vanta.js · rendered by varg))
• 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 the Vanta.js Net effect (https://www.vantajs.com/?effect=net, MIT, source github.com/tengbao/vanta/blob/master/src/vanta.net.js) as a full-frame tech or 'connected' background behind titles and stats. Load three.js r134 and [email protected]/dist/vanta.net.min.js and mount VANTA.NET with mouse, touch and gyro controls off. The nodes advance a fixed step on every requestAnimationFrame call, so seed Math.random before init, cancel effect.req and step it yourself 60/fps times per video frame (twice at 30 fps), in order from frame 0: each step adds 1 to effect.t, calls effect.onUpdate() and then effect.renderer.render(effect.scene, effect.camera). Set color and backgroundColor from the brand, points 8–12 and maxDistance 18–24 for line density, and spacing to spread the mesh out.

Used in

• Math animation
• Whiteboard & hand-drawn
• Live-coded music video
• Shader loop
• Generative art loop
• ASCII & retro looks

More generative & ascii

• ASCII Render Pass — npx hyperframes add ascii-render-pass
• ASCII Trail Reveal — npx hyperframes add ascii-trail-reveal
• Fractal Noise — npx hyperframes add fractal-noise
• Gabor Noise — npx hyperframes add gabor-noise
• Worley Noise — npx hyperframes add worley-noise
• ASCII Render — npx shadcn@latest add @remocn/ascii-render