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

A pink wireframe globe ringed with spikes, turning slowly off-centre over a faint net on dark purple

• Install: npm i vanta
• Registry: vanta · Framework: html · License: MIT
• Docs and preview: https://www.vantajs.com/?effect=globe
• Source: https://github.com/tengbao/vanta/blob/master/src/vanta.globe.js
• Example: https://skills.varg.ai/previews/lib-vanta-globe.mp4?v=144953 (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 Globe effect (https://www.vantajs.com/?effect=globe, MIT, source github.com/tengbao/vanta/blob/master/src/vanta.globe.js) as the full-frame background for a 'global' or network beat, with the headline on the side the globe leaves free. Load three.js r134 and [email protected]/dist/vanta.globe.min.js and mount VANTA.GLOBE with mouse, touch and gyro controls off. Its points, links and camera update a little on every requestAnimationFrame, so seed Math.random before init, replace performance.now and requestAnimationFrame with a virtual clock that advances 1000/fps ms per video frame, and render frames in order from frame 0. Set color (links), color2 (dots) and backgroundColor from the brand, and size 0.8–1.2 to scale the globe.

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