Creative WebGL Blobs — 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.

Noise-deformed Three.js spheres banded in iridescent orange and blue, slowly warping as they float

• Install: git clone https://github.com/codrops/WebGLBlobs
• Registry: codrops · Framework: html · License: MIT (per demo repo)
• Docs and preview: https://tympanus.net/Tutorials/WebGLBlobs/
• Source: https://github.com/codrops/WebGLBlobs
• Example: https://skills.varg.ai/previews/lib-codrops-webgl-blobs.mp4?v=62005 (From the library’s repo (Codrops — Mario Carrillo))
• 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 Codrops' Creative WebGL Blobs by Mario Carrillo (demo https://tympanus.net/Tutorials/WebGLBlobs/, article https://tympanus.net/codrops/?p=52932, code https://github.com/codrops/WebGLBlobs, MIT) as a 3D backdrop: one large blob bleeding off a corner and two smaller ones floating near the title. Copy scripts/gl/Blob.js and the two GLSL shaders; each blob is an icosahedron displaced by noise in the vertex shader and coloured by a cosine palette from uHue. The demo feeds uTime from a THREE.Clock inside requestAnimationFrame: remove that loop and set uTime = frame / fps on every blob, rendering once per frame (HyperFrames: on the hf-seek event; Remotion: from useCurrentFrame() in a layout effect). Tune size, uSpeed, uHue, uNoiseDensity and uNoiseStrength per blob, and render the canvas with a transparent background so it composites over the frame.

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