Lookbk picks

28 animated hero section examples your agent can build

Every example here is a real render, not a mock-up: the card plays the video the skill recorded of its own example page. Each one is a skill, so your agent can build the same hero with your words, colors, fonts and logo, and hand you a page, an embed for your site and an MP4.

See the 28 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

This is every hero skill in the Lookbk catalog, 28 in all, grouped by technique: product demos, scroll stories, 3D and WebGL, 2D canvas posters, and heroes on generated film. They all check the page at four screen widths, fall back to a still picture when the animation can’t run or the visitor asks for reduced motion, and record a 1080p video. Roller Diner Hero is free; the rest are Pro.

New
web
Cursor Tour HeroClaude CodeCodexCursor+3 more agents
01 · Motion Heroes · Pro
Cursor Tour Hero
One HTML file + embed · 1080p MP4 and poster
Product demo: a scripted cursor works through your own product’s window beside the headline. It checks off a list, flips a switch and presses the main button, while an event stream logs each step.
Needs: Node.js 18+, Chrome for the checks and recording, ffmpeg for the video
See what Cursor Tour Hero makes
New
web
Sunrise Pitch HeroClaude CodeCodexCursor+3 more agents
02 · Motion Heroes · Pro
Sunrise Pitch Hero
HTML hero + embed · 2D canvas · MP4 1080p
Product demo: your pitch plays itself over a sunrise sky. The sun rises on the title slide, a figure counts up, bars grow and slides change with an iris. Plain 2D canvas, no libraries.
Needs: Node.js 18+, Chrome (or Chromium/Edge) and ffmpeg; no npm installs
See what Sunrise Pitch Hero makes
New
web
Product Turntable HeroClaude CodeCodexCursor+3 more agents
03 · Motion Heroes · Pro
Product Turntable Hero
One HTML page + embed · MP4 + poster
Product demo: your product turns in a 3D studio on a reflective floor, with spec callouts pinned to points on its surface that follow it round.
Worth knowing: 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
New
web
Garment Rail HeroClaude CodeCodexCursor+3 more agents
04 · Motion Heroes · Pro
Garment Rail Hero
Animated WebGL hero · page + embed · 1080p MP4 + poster
Product demo: a 3D clothing rail hung with your own product cut-outs. Pieces sway and part as the pointer passes, and a swing tag gives each one’s name, price and link.
Worth knowing: Bring 2 to 7 transparent cut-outs of your pieces.
Needs: Node.js 18+, Chrome and ffmpeg, plus 2 to 7 transparent cut-outs of your pieces (PNG, WebP or SVG) with the shoulders at the top edge
See what Garment Rail Hero makes
New
web
Cutout Float HeroClaude CodeCodexCursor+3 more agents
05 · Motion Heroes · Pro
Cutout Float Hero
HTML hero + embed · MP4 1080p · your PNG/WebP/SVG cut-out
Product demo: your product render or character cut-out floats, tilts toward the cursor and catches a rim light, while a huge word 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
New
web
Curved Reel HeroClaude CodeCodexCursor+3 more agents
06 · Motion Heroes · Pro
Curved Reel Hero
Animated WebGL hero · page + embed · 1080p MP4
Product demo: your clips, screens or pictures on a strip bent into a 3D curve. It glides one card at a time, and a marker scribbles a note beside each one.
Needs: Node.js 18+, Chrome and ffmpeg; your images or short muted videos (drawn stand-ins otherwise)
See what Curved Reel Hero makes
New
web
Scroll Film HeroClaude CodeCodexCursor+3 more agents
07 · Motion Heroes · Pro
Scroll Film Hero
Scroll-scrubbed film hero · page + embed + frames · 1080p video
Scroll story: scrolling plays your own film. The hero pins and the clip scrubs forwards and back, with callouts and counting stats at up to six stops.
Worth knowing: It is a sequence of stills cut from your video, so every frame is a download. At the defaults that is 2.5 to 4.5 MB on desktop.
Needs: Node.js 18+, Chrome (or Chromium/Edge), ffmpeg, and your own video (or the built-in stand-in footage)
See what Scroll Film Hero makes
New
web
Scroll Route HeroClaude CodeCodexCursor+3 more agents
08 · Motion Heroes · Pro
Scroll Route Hero
One HTML page + embed · MP4 + poster
Scroll story: the hero pins and a travel-poster route draws itself station by station, with a ticket stub that tracks the journey.
Needs: Node.js 18+, Chrome for the checks and recording, ffmpeg for the video
See what Scroll Route Hero makes
New
web
Particle Portrait HeroClaude CodeCodexCursor+3 more agents
09 · Motion Heroes · Pro
Particle Portrait Hero
One HTML page + embed · MP4 + poster
Scroll story: your photo or logo as thousands of dots in 3D, each set forward or back by its brightness. 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
New
web
Frosted Glass HeroClaude CodeCodexCursor+3 more agents
10 · Motion Heroes · Pro
Frosted Glass Hero
Animated WebGL hero · HTML page + embed · MP4 recorder
3D: a pane of frosted glass turns beside your headline and bends and blurs the paper behind it. The build checks contrast against the effect itself.
Needs: Node.js 18+, Chrome, and ffmpeg for the video
See what Frosted Glass Hero makes
New
web
Neon Bloom HeroClaude CodeCodexCursor+3 more agents
11 · Motion Heroes · Pro
Neon Bloom Hero
Animated WebGL hero · page + embed + 1080p video
3D: a dark neon HUD with a turning gyroscope, selective bloom, an RGB split and scanlines, graded like a monitor feed.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Neon Bloom Hero makes
New
web
Pillar Terrain HeroClaude CodeCodexCursor+3 more agents
12 · Motion Heroes · Pro
Pillar Terrain Hero
One HTML page + embed · WebGL · 1080p MP4
3D: Swiss-style columns in axonometric view shape themselves into one landform after another, with a ruled readout of each form.
Needs: Node.js 18+, Chrome for the checks and recording, ffmpeg for the video
See what Pillar Terrain Hero makes
New
web
Particle Tree HeroClaude CodeCodexCursor+3 more agents
13 · Motion Heroes · Pro
Particle Tree Hero
Animated WebGL hero · page + embed + 1080p video
3D: a seeded tree or neuron grows out of the dark from thousands of particles, then light pulses run along its branches.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Particle Tree Hero makes
New
web
Cloud Sky HeroClaude CodeCodexCursor+3 more agents
14 · Motion Heroes · Pro
Cloud Sky Hero
One HTML file + embed · 1080p MP4 and poster
Shader: a whole sky behind a huge headline, with three layers of clouds and the nearest drifting across the words. Pick dawn, noon or dusk, or set the five colors.
Needs: Node.js 18+, Chrome for the checks and recording, ffmpeg for the video
See what Cloud Sky Hero makes
New
web
ASCII Signal HeroClaude CodeCodexCursor+3 more agents
15 · Motion Heroes · Pro
ASCII Signal Hero
WebGL2 glyph hero · page + embed · 1080p MP4
Shader: a 3D object or your own picture drawn live as ASCII glyphs or dither dots, beside a headline that types itself on and stays real text.
Worth knowing: Visitors need WebGL2 for the live effect.
Needs: Node.js 18+, Chrome (or Chromium/Edge) and ffmpeg; visitors need WebGL2 for the live effect
See what ASCII Signal Hero makes
New
web
Clay Mascot HeroClaude CodeCodexCursor+3 more agents
16 · Motion Heroes · Pro
Clay Mascot Hero
Animated 3D mascot hero · page + embed · MP4 + transparent PNG
3D: a toy-like clay mascot waves, blinks and turns toward the cursor on a pedestal. A script also saves the mascot alone as a transparent PNG.
Worth knowing: The mascot is built from simple shapes. It is not a sculpted or illustrated character.
Needs: Node.js 18+, Chrome, and ffmpeg for the video
See what Clay Mascot Hero makes
New
web
Bauhaus Timeline HeroClaude CodeCodexCursor+3 more agents
17 · Motion Heroes · Pro
Bauhaus Timeline Hero
Animated hero section · page + embed + MP4
2D canvas: a Bauhaus poster builds itself one shape at a time, with a timeline panel that shows every tween as a bar.
Needs: Node.js 18+, Chrome, and ffmpeg for the video
See what Bauhaus Timeline Hero makes
New
web
Ink Flow HeroClaude CodeCodexCursor+3 more agents
18 · Motion Heroes · Pro
Ink Flow Hero
Animated hero section · page + embed + 1080p video
2D canvas: a seeded flow field draws sumi brush strokes on washi paper. The same seed always draws the same scroll.
Needs: Node.js 18+, Chrome (or Chromium/Edge) for the checks and recording, ffmpeg for the video
See what Ink Flow Hero makes
New
web
Riso Stamp HeroClaude CodeCodexCursor+3 more agents
19 · Motion Heroes · Pro
Riso Stamp Hero
Animated hero section · 2D canvas · page + embed · 1080p MP4 + poster
2D canvas: a two-color risograph proof sheet prints your words one after another, slightly out of register. Visitors can type their own word.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Riso Stamp Hero makes
New
web
Pastel Orrery HeroClaude CodeCodexCursor+3 more agents
20 · Motion Heroes · Pro
Pastel Orrery Hero
HTML page + paste-in embed + 1080p MP4 · 2D canvas, no libraries
2D canvas: orbits draw themselves in, planets glide round and a smiling core morphs from planet to star to heart to flower.
Needs: Node.js 18+, Chrome (or Chromium/Edge) for checks and recording, ffmpeg for the video
See what Pastel Orrery Hero makes
FreeNew
web
Roller Diner HeroClaude CodeCodexCursor+3 more agents
21 · Footage Heroes · Free
Roller Diner Hero
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
Film, and free: a roller-skating waitress glides through a 1950s diner in front of a giant “UP!”, with a guest check that gets stamped PAID.
Needs: Node.js 18+, Chrome, and ffmpeg for the video; the page needs a web server (a local one is included)
See what Roller Diner Hero makes
New
web
Neon Motel HeroClaude CodeCodexCursor+3 more agents
22 · Footage Heroes · Pro
Neon Motel Hero
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
Film: a neon motel sign buzzes into life at dusk, cut out of every frame and drawn over a giant block headline.
Needs: Node.js 18+, Chrome, and ffmpeg for the video; the page needs a web server (a local one is included)
See what Neon Motel Hero makes
New
web
Arcade Raccoon HeroClaude CodeCodexCursor+3 more agents
23 · Footage Heroes · Pro
Arcade Raccoon Hero
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
Film: a raccoon plays an arcade cabinet in front of a chrome synthwave headline, with 1UP and HI-SCORE counters.
Needs: Node.js 18+, Chrome, and ffmpeg for the video; the page needs a web server (a local one is included)
See what Arcade Raccoon Hero makes
New
web
Mixtape HeroClaude CodeCodexCursor+3 more agents
24 · Footage Heroes · Pro
Mixtape Hero
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
Film: a slow macro push across shag carpet over a cassette and a tape player, in front of a 1970s rainbow-striped headline.
Needs: Node.js 18+, Chrome, and ffmpeg for the video; the page needs a web server (a local one is included)
See what Mixtape Hero makes
New
web
Shuttle Launch HeroClaude CodeCodexCursor+3 more agents
25 · Footage Heroes · Pro
Shuttle Launch Hero
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
Film: a shuttle lifts off past the tower in front of a striped 1970s headline, with a console card that counts down to liftoff.
Needs: Node.js 18+, Chrome, and ffmpeg for the video; the page needs a web server (a local one is included)
See what Shuttle Launch Hero makes
New
web
Surf Van HeroClaude CodeCodexCursor+3 more agents
26 · Footage Heroes · Pro
Surf Van Hero
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
Film: a golden retriever in sunglasses leans out of a camper van at sunset, with a chunky 1970s headline over the picture and a ticket-style surf report.
Needs: Node.js 18+, Chrome, and ffmpeg for the video; the page needs a web server (a local one is included)
See what Surf Van Hero makes
New
web
Disco Rink HeroClaude CodeCodexCursor+3 more agents
27 · Footage Heroes · Pro
Disco Rink Hero
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
Film: a flamingo in a gold jumpsuit spins under a mirror ball, and its light ribbons pass through a gold serif headline.
Needs: Node.js 18+, Chrome, and ffmpeg for the video; the page needs a web server (a local one is included)
See what Disco Rink Hero makes
New
web
Den Computer HeroClaude CodeCodexCursor+3 more agents
28 · Footage Heroes · Pro
Den Computer Hero
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
Film: an early-1980s home computer in a wood-paneled den, with an amber headline behind it and a terminal card that types a short conversation.
Needs: Node.js 18+, Chrome, and ffmpeg for the video; the page needs a web server (a local one is included)
See what Den Computer 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 Roller Diner Hero, which is free; 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 "Roller Diner Hero" skill from Lookbk (https://lookbk.dev/skills/roller-diner-hero).
1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add roller-diner-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 roller-diner-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/roller-diner-hero
Codex: ~/.agents/skills/roller-diner-hero
Cursor: ~/.agents/skills/roller-diner-hero

3. Ask for the result

Describe it in plain words, for example:

Make a Roller Diner hero for our restaurant ordering app with our name, headline, guest-check items and buttons, and record the 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 guides

What makes a good hero section?

One clear headline, one main button, and motion that supports the message instead of competing with it. The words have to stay readable over every frame, the first screen has to work on a phone, and the page must still make sense when the animation doesn’t run.

Will an animated hero slow my page down?

It can. The code-drawn heroes cap the drawing resolution at twice the screen’s pixels, draw fewer pixels on a slow machine, and stop drawing when the hero is off screen or the tab is hidden. The film heroes show their first frame while the film loads. Every hero has a still picture to fall back on.

How do I put one into my site?

Each skill writes a self-contained page and an embed to paste into any site. In React, Next.js or another framework, ask your agent to wrap the embed in a component.

Can I change the animation itself?

You change the words, colors, fonts, logo and the options each skill exposes. The design stays the skill’s, which is what keeps the result consistent. The film heroes’ footage is fixed; Scroll Film Hero takes your own clip.