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

5.3-second example rendered by this skill from examples/maison-aube · 1280×720

Example settingswhat each example above was built from

examples/maison-aubehero.json

Brand: Maison Aube
Headline: Morning bloom

What you get

A one-page hero and a paste-in embed with your name, words and links
A film that loops forever with no visible restart, checked frame against frame
A tall cut of the film for phones, so the subject fills a portrait screen
Cormorant Garamond and Jost in this hero's own colors, with words that rise in once as the page opens
A poster frame for reduced motion and while the film loads, so it is never blank
Checks at 390, 768, 1280 and 1920 px: 14 px minimum text, a headline nothing touches, 44 px tap targets, no overflow
A 1080p MP4 and a 1080x1920 phone MP4, rendered frame by frame
Open-source licenses for every part it builds on

Good fit

Fragrance and beauty brands open on an amber bottle among peonies and jasmine with petals drifting down.
A light split screen: a warm cream panel with a Cormorant Garamond headline on the left, the film on the right.
On a phone the bottle and flowers fill the top half and the cream panel holds the words below.

Not for

Your own video: the layout and colours are set for this film (an amber perfume bottle among pink peonies and white jasmine in warm morning light while petals drift down around it)
Changing the colors, fonts or layout through settings (every word and link is yours; the look is fixed)
Long headlines: two short lines, with limits the build enforces
Sound: browsers only autoplay muted video, and the film is silent
Full landing pages below the hero (see the Landing Pages series)

About this skill

A full-screen website hero on five seconds of generated film that loops with no seam: an amber perfume bottle among pink peonies and white jasmine in warm morning light while petals drift down around it. It uses a split screen: a solid panel on the left with the wordmark, links, a two-line headline, the introduction and the buttons, the film filling the right half (the top half on a phone). Wide screens get the wide film and phones a tall cut framed on the subject, so a phone never shows a letterbox or an empty half; every text is at least 14 px and nothing touches the headline. Your agent writes one hero.json with your words and links; the build checks every length, a check at four widths enforces the layout rules and the seamless loop, and a recorder makes 1080p and phone MP4s. It suits a fragrance, beauty, skincare, florist, candle or any soft, luxurious, feminine brand.

Example request

Make a Perfume Flowers hero for our candle launch: 'Light / slowly', a shop button, and record it.

How it works

You ask
Make a Perfume Flowers hero for our candle launch: 'Light / slowly', a shop button, and record it.
Your agent
1. 1
  Collect the words
  Every number, price and claim must come from the person.
2. 2
  Write hero.json
  Copy <skill>/examples/maison-aube/hero.json (Maison Aube, a fragrance of peony and jasmine) and replace every value.
3. 3
  Build
  It lists every problem at once (a missing field, words too long for their place, a bad link) and writes nothing until they're fixed.
4. 4
  Check
  It opens the page at 390, 768, 1280 and 1920 px wide and with reduced motion, and fails on: script errors, sideways scrolling, any text under 14 px, a headline smaller than 6.5% of the screen or that anything else touches, a headline closer than 24 px under the bar, overlaps, text that spills out, links without an address, buttons shorter than 44 px on a phone, a hero that doesn't fill the screen, and a film whose last frame doesn't match its first.
5. 5
  Look at it
  Open the address it prints, and narrow the window to see the phone layout and the tall film.
6. 6
  Record the video (optional)
  Writes out/preview.mp4 (1920×1080, 30 fps, one loop) and out/poster.png; with --tall, out/preview-tall.mp4 and out/poster-tall.png as a phone shows it (1080×1920).
7. 7
  Put it on the site
  Use out/index.html as the page, or paste out/embed.html into an existing page and copy out/assets/ next to it (or change the assets/ paths).
You get
- out/preview.mp4
- out/poster.png
- out/preview-tall.mp4
- out/poster-tall.png
- out/index.html
- out/embed.html

What you need

Node.js 18 or newer. Nothing to install.
Chrome, Chromium or Edge, for the checks and the video (the scripts find it; set CHROME_PATH if they don't).
ffmpeg for the loop check and the video (brew install ffmpeg, winget install ffmpeg, apt install ffmpeg; or set FFMPEG_PATH).
Internet access when the page is opened, for the Google Fonts. Without them system fonts stand in.

Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.

If something goes wrong

The page shows a still picture instead of the film
Reduced motion is on in the system settings (that is on purpose), or the browser blocked autoplay in power-saving mode. The still is the film's first frame, so the hero still looks finished.
A phone shows the wide film cropped badly
The page decides by shape, not width: anything taller than 4:5 gets the tall film. Check that assets/film-tall.mp4 was copied with the page.
The build says a field is too long
Shorten the words. The headline lines are sized for the lengths in template/fields.json.

What’s in the download

SKILL.md8.18 KBthese instructions.
examples/
examples/maison-aube/698 B1 file
scripts/
scripts/kit/the Loop Stage kit the four scripts run (build.mjs, stage.css, runtime.js for the browser, check.mjs, record.mjs, serve.mjs, cdp.mjs); scripts/kit/KIT.md says how it fits together.
scripts/kit/build.mjs11.5 KB
scripts/kit/cdp.mjs4.90 KB
scripts/kit/check.mjs10.5 KB
scripts/kit/KIT.md3.61 KB
scripts/kit/record.mjs8.06 KB
scripts/kit/runtime.js3.38 KB
scripts/kit/serve.mjs2.46 KB
scripts/kit/stage.css2.26 KB
scripts/build.mjs142 Bchecks hero.json against template/fields.json and writes the page, the embed and the assets.
scripts/check.mjs142 Bchecks the page at four widths and with reduced motion, and checks both films loop with no seam.
scripts/chrome.mjs3.63 KBfinds Chrome, Chromium or Edge.
scripts/record.mjs144 Brenders the words frame by frame and lays them on the film with ffmpeg: preview.mp4 and poster.png, a phone version with --tall, or one still.
scripts/serve.mjs142 Bserves a built hero on localhost to look at.
template/
template/fields.json2.09 KBevery field of hero.json with its limit, plus the film's length, the colours, fonts and framing.
template/hero.html4.70 KBthe design: its CSS and the markup of the words.
NOTICE.md888 B
TESTED.json253 B

19 files · 67.7 KB · installs to ~/.claude/skills/perfume-flowers-hero for Claude Code and ~/.agents/skills/perfume-flowers-hero for other agents

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

Similar Skills

View all

New

Skincare Macro Hero+3

New

Jewel Velvet Hero+3

Details

Output: Full-screen hero on a generated film that loops with no seam · tall cut for phones · page + embed · 1080p and phone MP4s
Needs: Node.js 18+, Chrome, and ffmpeg for the loop check and the video
Series: Loop Heroes · 21 skills
For: Designer Ecommerce seller Marketer Founder
Updated: Nov 2, 2026
Checked: Nov 2, 2026: its own commands ran and passed. That is a working check, not a security audit.

Written for

Claude Code Codex Cursor GitHub Copilot Gemini CLI OpenCode

See all 31 agents that read skill folders.

Install guides

For your agent

Generates with

A film generated for Lookbk with the same first and last frame, plus a tall cut for phonesA small inlined runtime and CSS entrances (no libraries)Headless Chrome checks and a frame-stepped recorder + ffmpeg

Uses tools

FFmpeg Chrome Node.js

Good forBrand Ecommerce Product launch

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

Write a review

FAQ

Is the bottle a real brand?

No. It is an unbranded bottle generated for Lookbk, so it never names anyone.

Is this a light or dark design?

Light: dark ink on warm cream, with a terracotta accent picked from the peonies.

What does the caption on the film say?

A short tag such as the notes or the size, up to 28 characters; it is hidden on phones.

Which agents is Perfume Flowers 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 licensesWritten by Lookbk

the film, generated for Lookbk from a scene written for Lookbk (a still image animated into film with the same first and last frame), and the layout, template and Loop Stage kit, all written for Lookbk. The fonts are from Google Fonts. Written by Lookbk, no third-party code.

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