Lookbk picks

The best three.js hero sections to build with an AI agent

three.js makes a hero feel physical: glass that bends the page behind it, a product you can turn, particles with real depth. It also makes it easy to ship something heavy, unreadable or blank on a phone. These skills build three.js heroes with contrast checks, a still picture when WebGL isn’t there and a recorded video.

See the 8 picks

Free skills to start. Pro is $99 a year for every skill, or $19 a month for 10. See pricing

Written for

and 25 more

The picks

From the Lookbk catalog only: Motion Heroes whose live effect runs on three.js, loaded from a pinned CDN address with an integrity hash. We left out Scroll Film Hero, which uses three.js only to render stand-in footage on your machine. Each pick builds a page plus an embed, checks it at four widths and records a 1080p MP4.

web
Product Turntable HeroClaude CodeCodexCursor+3 more agents
01 · Motion Heroes · Pro
Product Turntable Hero
One HTML page + embed · MP4 + poster
Your product turning in a 3D studio, with spec callouts pinned to points on its surface that follow it round. It loads your own .glb model, or builds a bottle, jar or speaker in code.
Needs: Node.js 18+, Chrome for the checks and recording, ffmpeg for the video; optionally your product as a .glb
See what Product Turntable Hero makes
web
Frosted Glass HeroClaude CodeCodexCursor+3 more agents
02 · Motion Heroes · Pro
Frosted Glass Hero
Animated WebGL hero · HTML page + embed · MP4 recorder
A pane of frosted glass turns slowly beside your headline and bends and blurs the paper behind it. The build checks contrast against the effect itself, not just the background color.
Needs: Node.js 18+, Chrome, and ffmpeg for the video
See what Frosted Glass Hero makes
web
Particle Portrait HeroClaude CodeCodexCursor+3 more agents
03 · Motion Heroes · Pro
Particle Portrait Hero
One HTML page + embed · MP4 + poster
Your photo or logo as thousands of dots in 3D, each set forward or back by the brightness under it. As the visitor scrolls, the picture turns to show its depth.
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
web
Neon Bloom HeroClaude CodeCodexCursor+3 more agents
04 · Motion Heroes · Pro
Neon Bloom Hero
Animated WebGL hero · page + embed + 1080p video
A dark neon HUD with selective bloom, an RGB split and scanlines: post-processing that stays readable, with contrast checked at four widths.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Neon Bloom Hero makes
web
Pillar Terrain HeroClaude CodeCodexCursor+3 more agents
05 · Motion Heroes · Pro
Pillar Terrain Hero
One HTML page + embed · WebGL · 1080p MP4
Swiss-style columns in axonometric view shape themselves into one landform after another, with a ruled readout of each form. Calm and precise rather than flashy.
Needs: Node.js 18+, Chrome for the checks and recording, ffmpeg for the video
See what Pillar Terrain Hero makes
web
Particle Tree HeroClaude CodeCodexCursor+3 more agents
06 · Motion Heroes · Pro
Particle Tree Hero
Animated WebGL hero · page + embed + 1080p video
A seeded tree or neuron grows out of the dark from thousands of particles, then light pulses run along its branches. The same settings always grow the same shape.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Particle Tree Hero makes
web
Cutout Float HeroClaude CodeCodexCursor+3 more agents
07 · Motion Heroes · Pro
Cutout Float Hero
HTML hero + embed · MP4 1080p · your PNG/WebP/SVG cut-out
Brings your own product render or character cut-out to life: it floats, tilts toward the cursor and catches a rim light, while type and a floor grid move against it in depth.
Worth knowing: Bring a clean cut-out on a transparent background.
Needs: Node.js 18+, Chrome and ffmpeg, plus your cut-out on a transparent background (PNG, WebP or SVG, ideally 1000–1800 px tall)
See what Cutout Float Hero makes
web
Clay Mascot HeroClaude CodeCodexCursor+3 more agents
08 · Motion Heroes · Pro
Clay Mascot Hero
Animated 3D mascot hero · page + embed · MP4 + transparent PNG
A toy-like 3D mascot built from simple shapes waves, blinks and turns toward the cursor. A script also saves the mascot alone as a transparent PNG.
Needs: Node.js 18+, Chrome, and ffmpeg for the video
See what Clay Mascot 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 Product Turntable 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 "Product Turntable Hero" skill from Lookbk (https://lookbk.dev/skills/product-turntable-hero).
1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add product-turntable-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 product-turntable-hero

2. Start a new session

Agents load skills when a session starts. The installer writes the folder where your agent looks:

Claude Code: ~/.claude/skills/product-turntable-hero
Codex: ~/.agents/skills/product-turntable-hero
Cursor: ~/.agents/skills/product-turntable-hero

3. Ask for the result

Describe it in plain words, for example:

Make a Product Turntable hero for Orra, our steel field bottle: moss green with a burnt-orange stripe on warm sand, four specs (24 h cold, 750 ml, 340 g, a lid that never drips), turned by scrolling, and a 'Shop the Field Bottle' button. Record a video for the launch post.

Another agent? Install a skill in any agent

FAQ

Questions

Still stuck? The guides cover installing, agents and licensing in more detail.

Read the guides

What do visitors without WebGL see?

A still picture with the headline and buttons in place. Visitors who ask for reduced motion get one still frame of the real effect. The checks run Chrome without a GPU, so you see the no-WebGL picture before you ship and can check that it reads.

Do I need to install three.js?

No. The page loads a pinned three.js release from a CDN with an integrity hash, so there is nothing to add to your build. You need Node.js 18 or newer, Chrome for the checks and recording, and ffmpeg for the video.

Can I use my own 3D model?

Product Turntable Hero loads your .glb, and Cutout Float Hero takes a transparent PNG, WebP or SVG cut-out. The others draw their objects in code, in your colors.