# Cells — 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.

Lime and deep-green cell membranes glowing and shifting like a living microscope slide

- **Install:** `npm i vanta`
- **Registry:** vanta · **Framework:** html · **License:** MIT
- **Docs and preview:** https://www.vantajs.com/?effect=cells
- **Source:** https://github.com/tengbao/vanta/blob/master/src/vanta.cells.js
- **Example:** https://skills.varg.ai/previews/lib-vanta-cells.mp4?v=62506 (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 Cells effect (https://www.vantajs.com/?effect=cells, MIT, source github.com/tengbao/vanta/blob/master/src/vanta.cells.js) as a full-frame organic background for a science, health or playful brand beat. Load three.js r134 and vanta@0.5.24/dist/vanta.cells.min.js and mount VANTA.CELLS with mouse, touch and gyro controls off. It is one fragment shader clocked by the iTime uniform, so make it frame-exact: cancel effect.req and on each frame set effect.uniforms.iTime.value = seconds × speed, then call effect.renderer.render(effect.scene, effect.camera). Recolor it with color1, color2 and backgroundColor, use size 1–3 for bigger or smaller cells, and keep speed at 0.5–1. Darken the colors if text sits on top.

## Used in

- [Lyric video](https://skills.varg.ai/video/lyric-video.md)
- [Audio visualizer](https://skills.varg.ai/video/visualizer.md)
- [Logo sting](https://skills.varg.ai/video/logo-sting.md)
- [Brand intro & bumper](https://skills.varg.ai/video/brand-intro.md)
- [Stream overlay package](https://skills.varg.ai/video/stream-overlay.md)
- [News broadcast package](https://skills.varg.ai/video/news-package.md)
- [Countdown & launch timer](https://skills.varg.ai/video/countdown.md)
- [Shader loop](https://skills.varg.ai/video/shader-loop.md)

## More shaders

- [Blob](https://skills.varg.ai/component/hf.blob.md) — `npx hyperframes add blob`
- [Chrome Orb](https://skills.varg.ai/component/hf.chrome-orb.md) — `npx hyperframes add chrome-orb`
- [Color Wheel](https://skills.varg.ai/component/hf.color-wheel.md) — `npx hyperframes add color-wheel`
- [Falling Lines](https://skills.varg.ai/component/hf.falling-lines.md) — `npx hyperframes add falling-lines`
- [Frost](https://skills.varg.ai/component/hf.frost.md) — `npx hyperframes add frost`
- [Godrays](https://skills.varg.ai/component/hf.godrays.md) — `npx hyperframes add godrays`