The best video background hero sections to build with an AI agent
A video behind the headline makes a first screen feel alive, and is also the quickest way to make one slow or hard to read. These skills handle the hard parts for your agent: the footage, the contrast, a still picture when video can’t play, a phone layout and a page you can paste in.
Free skills to start. Pro is $99 a year for every skill, or $19 a month for 10. See pricing
The picks
We picked from the Lookbk catalog only, so this is not a survey of every tool. Each pick builds a real hero section with moving footage behind or around the words, checks it at four screen widths, falls back to a still picture and records an MP4 for social posts. Roller Diner Hero is free with an account; the other six are Pro skills.
- Scroll Film HeroClaude CodeCodexCursor+3 more agents
01 · Motion Heroes · Pro
Scroll Film Hero
Scroll-scrubbed film hero · page + embed + frames · 1080p video
The pick if you have your own footage. In its bleed layout your clip fills the hero behind the copy, and it plays forwards and back as the visitor scrolls, with callouts and counting stats at up to six stops.
Worth knowing: It is a sequence of stills cut from your video with ffmpeg, not a video element, so every frame is a download. At the defaults that is 2.5 to 4.5 MB on desktop; the frame script adds it up for you.
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 - Neon Motel HeroClaude CodeCodexCursor+3 more agents
02 · Footage Heroes · Pro
Neon Motel Hero
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
Text behind the subject on a dusk motel scene: the neon sign is cut out of every frame and drawn over a giant block headline, while a script word flickers on letter by letter. Suits travel, hospitality and anything open late.
Worth knowing: The footage and its matte were made together, so you change the words, numbers and links, not the film.
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 - Shuttle Launch HeroClaude CodeCodexCursor+3 more agents
03 · Footage Heroes · Pro
Shuttle Launch Hero
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
A shuttle lifts off past the tower in front of a striped 1970s headline, with a console card that counts down to liftoff. Made for a launch day or a countdown page.
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 - Den Computer HeroClaude CodeCodexCursor+3 more agents
04 · Footage Heroes · Pro
Den Computer Hero
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
An early-1980s home computer in a wood-paneled den, with an amber headline behind the computer and a terminal card that types a short conversation. A warm alternative to a gradient for AI and software products.
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 - Arcade Raccoon HeroClaude CodeCodexCursor+3 more agents
05 · Footage Heroes · Pro
Arcade Raccoon Hero
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
A raccoon plays a cabinet in a 1980s arcade, in front of a chrome synthwave headline, with 1UP and HI-SCORE counters. For games, developer tools and brands that can be playful.
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 - Roller Diner HeroClaude CodeCodexCursor+3 more agents
06 · Footage Heroes · Free
Roller Diner Hero
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
A roller-skating waitress glides through a 1950s diner in front of a giant "UP!", with a guest check that gets stamped PAID. Fits food, ordering and delivery apps.
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 - Disco Rink HeroClaude CodeCodexCursor+3 more agents
07 · Footage Heroes · Pro
Disco Rink Hero
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
A flamingo in a gold jumpsuit spins under a mirror ball, and its light ribbons pass through a gold serif headline. Built for events and tickets, with an admit-one ticket and a no-cover starburst.
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
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 Scroll Film 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 "Scroll Film Hero" skill from Lookbk (https://lookbk.dev/skills/scroll-film-hero). 1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add scroll-film-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 scroll-film-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/scroll-film-hero
- Codex
- ~/.agents/skills/scroll-film-hero
- Cursor
- ~/.agents/skills/scroll-film-hero
3. Ask for the result
Describe it in plain words, for example:
Build a Scroll Film hero for Marram Vans from our drone clip of the coast road: cut it into frames within budget, add callouts at the pickup, Corran Bay and Hale Point, and record a 1080p 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 guidesWill a video background slow down my page?
It can. The Footage Heroes play five seconds of 1080p film, show the first frame while it loads, and switch to a still if it takes more than 8 seconds to start. Scroll Film Hero loads a few frames first, sharpens as the rest arrive, and reports its total weight against a budget so you can cut frames or width before you ship.
What do visitors see with reduced motion or on a phone?
A still picture with every word in place when they ask for reduced motion, or when the video can’t play. On phones the Footage Heroes move the introduction and buttons into a block under the frame, and Scroll Film Hero sends a lighter set of frames.
Can I use my own video?
With Scroll Film Hero, yes: a clip of 5 to 20 seconds where the camera moves steadily works best. The Footage Heroes ship their own generated film and the matte that cuts out its subject, so their footage can’t be swapped.
Does the video play with sound?
Not on the page: browsers only autoplay muted video. The MP4 that the Footage Heroes record for social posts keeps the film’s sound.