Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $169 onceUpgrade
Lookbk
Sign In
Open live demo

The page this skill built from examples/kestrel, working in your browser. Opens in a new tab.

5-second example rendered by this skill from examples/kestrel · 1280×720

Example settingswhat each example above was built from

examples/kestrelhero.json
Brand
Kestrel
Headline
The new trail shoe Airborne

What you get

  • A one-page hero and a paste-in embed with your name, words, numbers and links
  • The sneaker cut out of every frame and drawn over the giant serif word
  • Liquid-glass bar, chip, button and cards in Bodoni Moda and Space Grotesk, with an intro tied to the film's own clock
  • A phone layout: the headline stays in the frame, the introduction and buttons move into a block underneath
  • Stills of the last frame for reduced motion, no WebGL, blocked autoplay or a slow connection, so it is never blank
  • A 1080p MP4 with the film's sound and a poster, rendered frame by frame
  • Checks at 390, 768, 1280 and 1920 px for overflow, overlaps, links and script errors
  • Open-source licenses for every part it builds on

Good fit

  • Footwear, fashion, sports gear and e-commerce brands can open a product drop on a suede trail sneaker turning in the air among drifting glass shards.
  • Product drops get a high-contrast Bodoni headline, a signal-orange accent that matches the shoe's pull loops and a kicker chip for the drop number.
  • Shops can put weight, heel drop and colour count in three glass cards, and the scene card names the model and the colourway on show.

Not for

  • Swapping in your own video: the matte is made for this film, and the scene (sneaker) is the design
  • Changing the colors, fonts or layout through settings (every word, number and link is yours; the look is fixed)
  • Long headlines: the big word takes up to 8 characters and each field has a limit the build enforces
  • Sound on the live page (browsers only autoplay muted video; the MP4 keeps the sound)
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A dark, cinematic website hero on five seconds of generated footage: a grey suede trail sneaker with a sculpted foam sole and orange pull loops floating and turning in a dark studio while glass shards drift around it and the camera pushes in. A giant serif word sits behind the sneaker, which is cut out of every frame and drawn over it, under an italic line that fades in word by word. Around it, liquid-glass panels: a floating bar with your links, a kicker chip, a glass second button, number cards (one can count up) and a scene card whose line fills as the film plays. Your agent writes one hero.json with your words and links; the build checks every length and writes a page and an embed, and a recorder makes a 1080p MP4 with sound. It suits a product drop, footwear, fashion, sports gear, e-commerce or any brand launching one hero product.

Example request

Make a Floating Sneaker hero for our running shop's new collection: italic line 'Built for the', big word 'Hills', our links, and record the video for the launch email.

Similar Skills

View all
New
web
Silk Dancer HeroClaude CodeCodexCursor+3 more agents
New
web
Free Diver HeroClaude CodeCodexCursor+3 more agents

Details

Output
Cinematic hero on generated footage · liquid-glass UI · words behind the subject · page + embed · 1080p MP4 with sound
Needs
Node.js 18+, Chrome, and ffmpeg for the video; the page needs a web server (a local one is included)
Series
Footage Heroes · 25 skills
Updated
Nov 1, 2026
Checked
Nov 1, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Footage generated for Lookbk, with a per-frame matte of the subjectGSAP 3.14.2 (pinned CDN, SRI)WebGL subject cut-out in the browserHeadless Chrome checks and frame-stepped recorder + ffmpeg
Good forProduct launchBrandSocial media

Installed it? Tell others how it went. Reviews come from people who installed this skill.

Write a review

FAQ

Can I put my own video behind the headline?

No. The matte that cuts the sneaker out was made for this film, so the footage is part of the design. Every word, number and link is yours through hero.json; the footage, colors, fonts and layout stay as they are.

How long can the words be?

The italic line takes up to 18 characters, the big word behind the subject up to 8 and the wordmark up to 14. The build lists every field that is too long and writes nothing until they are fixed, and the check fails if anything spills or overlaps.

Can I show my own product instead of the sneaker?

No. The sneaker is generated footage made for this hero and cut out frame by frame, so it stays. Use it when one shoe or one hero product is the story; your words, numbers and links are all editable.

Which agents is Floating Sneaker Hero written for?

Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.

Do I own what I make with it?

Yes. Everything your agent makes with this skill is yours, including for client and commercial work.

What if it doesn’t work for me?

Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.

Credits and licensesBuilt on greensock/GSAP

What Lookbk adds on top of greensock/GSAP (Standard License): the footage, which was generated for Lookbk from a scene written for Lookbk (a still image animated into film, with the matte cut from every frame), and the layout, template and Footage Heroes kit, all written for Lookbk. GSAP (free under its Standard License) loads from a pinned CDN with SRI; the fonts are from Google Fonts.

Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.