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

Flying low over a thick bank of volumetric clouds, with blue sky above

• Install: npm i vanta
• Registry: vanta · Framework: html · License: MIT
• Docs and preview: https://www.vantajs.com/?effect=clouds2
• Source: https://github.com/tengbao/vanta/blob/master/src/vanta.clouds2.js
• Example: https://skills.varg.ai/previews/lib-vanta-clouds2.mp4?v=46175 (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 Clouds2 effect (https://www.vantajs.com/?effect=clouds2, MIT, source github.com/tengbao/vanta/blob/master/src/vanta.clouds2.js) as a full-frame 'above the clouds' background for an intro or a calm outro. Load three.js r134 and [email protected]/dist/vanta.clouds2.min.js and mount VANTA.CLOUDS2 with mouse, touch and gyro controls off. It samples a noise texture: download gallery/noise.png from vantajs.com into the project and pass it as texturePath (a local file or data URI, so WebGL can read it without CORS). The shader is driven by iTime alone, so cancel effect.req and per frame set effect.uniforms.iTime.value = seconds × speed, then call effect.renderer.render(effect.scene, effect.camera). Set skyColor, cloudColor and lightColor from the palette and speed around 0.6–1.

Used in

• Lyric video
• Audio visualizer
• Logo sting
• Brand intro & bumper
• Stream overlay package
• News broadcast package
• Countdown & launch timer
• Shader loop

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