The best shader and WebGL backgrounds for websites (2026)
A shader paints every pixel of a background on the graphics card, so it can show light, depth and motion that an image or CSS can’t. It can also drain a phone’s battery, turn into a blank box without WebGL, or make the headline hard to read. These skills build shader backgrounds with those problems handled.
Free skills to start. Pro is $99 a year for every skill, or $19 a month for 10. See pricing
The picks
From the Lookbk catalog only: Motion Heroes whose background is drawn by shaders on the graphics card. Cloud Sky Hero and ASCII Signal Hero use raw WebGL with no library; the rest use three.js r180, loaded from a pinned CDN address with an integrity hash, with shaders written for each skill. All of them share one runtime that caps the drawing resolution at twice the screen’s pixels, draws fewer pixels on a slow machine, stops drawing when the hero is off screen or the tab is hidden, and shows a still picture with reduced motion or without WebGL.
- Cloud Sky HeroClaude CodeCodexCursor+3 more agents
01 · Motion Heroes · Pro
Cloud Sky Hero
One HTML file + embed · 1080p MP4 and poster
A whole sky as the background: a shader gradient warmed by the sun’s glow, with soft clouds drifting in three layers, one of them across the headline. Raw WebGL, no library. The build checks every line of text against every sky and cloud color that can sit behind it.
Needs: Node.js 18+, Chrome for the checks and recording, ffmpeg for the video
See what Cloud Sky Hero makes - Neon Bloom HeroClaude CodeCodexCursor+3 more agents
02 · Motion Heroes · Pro
Neon Bloom Hero
Animated WebGL hero · page + embed + 1080p video
A dark neon HUD graded like a monitor feed, with hand-written bloom and grade shaders: selective glow, an RGB split, scanlines and a rolling interference band. Two neon colors of your choice.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Neon Bloom Hero makes - Frosted Glass HeroClaude CodeCodexCursor+3 more agents
03 · Motion Heroes · Pro
Frosted Glass Hero
Animated WebGL hero · HTML page + embed · MP4 recorder
A pane of frosted glass that bends and blurs the contour-lined paper behind it, written as custom GLSL shaders. It cycles through your colorways, and contrast is checked against the effect itself.
Needs: Node.js 18+, Chrome, and ffmpeg for the video
See what Frosted Glass Hero makes - Pillar Terrain HeroClaude CodeCodexCursor+3 more agents
04 · Motion Heroes · Pro
Pillar Terrain Hero
One HTML page + embed · WebGL · 1080p MP4
A field of instanced columns with lit, contour-banded tops shapes itself into one landform after another. Calm and precise, and the page stays light: about 100 to 200 KB, most of it the still picture.
Needs: Node.js 18+, Chrome for the checks and recording, ffmpeg for the video
See what Pillar Terrain Hero makes - Particle Tree HeroClaude CodeCodexCursor+3 more agents
05 · Motion Heroes · Pro
Particle Tree Hero
Animated WebGL hero · page + embed + 1080p video
Thousands of soft particles grow a tree or a neuron out of the dark, then light pulses run along its branches. The particle, filament and pulse shaders are written for the skill, and a seed fixes the shape.
Worth knowing: A very large structure can be heavy on old phones; the build points it out when it is.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Particle Tree Hero makes - Particle Portrait HeroClaude CodeCodexCursor+3 more agents
06 · Motion Heroes · Pro
Particle Portrait Hero
One HTML page + embed · MP4 + poster
Your photo or logo as thousands of points drawn by a point shader, each set forward or back by its brightness, so the picture has real relief as it turns on scroll.
Worth knowing: A cut-out or a picture on a transparent background works best.
Needs: Node.js 18+, Chrome for the checks and recording, ffmpeg for the video, and your photo or logo (SVG, PNG, JPEG or WebP; a cut-out or transparent background works best)
See what Particle Portrait Hero makes - ASCII Signal HeroClaude CodeCodexCursor+3 more agents
07 · Motion Heroes · Pro
ASCII Signal Hero
WebGL2 glyph hero · page + embed · 1080p MP4
A 3D object or your own picture drawn live as ASCII glyphs or dither dots in raw WebGL2. The headline beside it stays real, selectable text.
Worth knowing: Visitors need WebGL2 for the live effect; without it they see the same scene as a still drawn in glyphs.
Needs: Node.js 18+, Chrome (or Chromium/Edge) and ffmpeg; visitors need WebGL2 for the live effect
See what ASCII Signal Hero makes
Install
Install a pick with your agent
Every pick is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses Cloud Sky Hero; each skill page has its own prompt.
1. Paste the install prompt
Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.
Install the "Cloud Sky Hero" skill from Lookbk (https://lookbk.dev/skills/cloud-sky-hero). 1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add cloud-sky-hero 2. If it prints a sign-in link, show it to me. When I say I approved it, run the same command again. 3. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.
Or run it in a terminal
curl -fsSL https://lookbk.dev/cli.js | node - add cloud-sky-hero2. Start a new session
Agents load skills when a session starts. The installer writes the folder where your agent looks:
- Claude Code
- ~/.claude/skills/cloud-sky-hero
- Codex
- ~/.agents/skills/cloud-sky-hero
- Cursor
- ~/.agents/skills/cloud-sky-hero
3. Ask for the result
Describe it in plain words, for example:
Build a Cloud Sky hero for our sunrise balloon flights: a dawn sky, the headline 'Rise with the morning.' big in Fraunces with clouds drifting past it, centered copy, then record the launch video.
Another agent? Install a skill in any agent
FAQ
Questions
Still stuck? The guides cover installing, agents and licensing in more detail.
Read the guidesShader, canvas or CSS: which should I use?
CSS gradients and animations are the lightest and fine for slow color shifts. A 2D canvas suits drawn, flat motion such as lines and particles. A shader is the choice when every pixel changes, as in light, glass, clouds or glow. The skills here use shaders; for canvas, see Ink Flow Hero or Pastel Orrery Hero.
Will a shader background slow down my site or drain batteries?
It costs graphics work for as long as it runs, so it should run only when it is seen. These skills cap the resolution at twice the screen’s pixels, lower it when frames come too slowly, and stop drawing when the hero is off screen or the tab is hidden.
What do visitors without WebGL see?
A still picture of the same scene with the headline and buttons in place. The checks run Chrome without a GPU, so you see that still before you ship and can make sure it reads.
What about reduced motion?
Visitors who ask for reduced motion get one still frame of the real effect and nothing moves.
Do I need to install three.js?
No. Cloud Sky Hero and ASCII Signal Hero use no library. The others load a pinned three.js release from a CDN with an integrity hash, so there is nothing to add to your build.