Trunk — 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.

Dozens of thin wobbling rings around an empty centre, like tree rings drawn in one pen

• Install: npm i vanta
• Registry: vanta · Framework: html · License: MIT
• Docs and preview: https://www.vantajs.com/?effect=trunk
• Source: https://github.com/tengbao/vanta/blob/master/src/vanta.trunk.js
• Example: https://skills.varg.ai/previews/lib-vanta-trunk.mp4?v=109394 (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 Trunk effect (https://www.vantajs.com/?effect=trunk, MIT, source github.com/tengbao/vanta/blob/master/src/vanta.trunk.js) as a full-frame line-art background; the empty centre suits a logo or a single word. It runs on p5.js, not three: load p5 1.x (vantajs.com uses 1.1.9) and [email protected]/dist/vanta.trunk.min.js, then mount VANTA.TRUNK with mouse, touch and gyro controls off. The rings move a fixed step per p5 draw call, so seed Math.random before init, call effect.p5.noLoop(), and per video frame call effect.p5.redraw() 60/fps times, in order from frame 0. Set color and backgroundColor from the brand, chaos 1–4 for how much the rings wobble, and spacing 0–5 to open them up.

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