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/verdance, working in your browser. Opens in a new tab.

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

Example settingswhat each example above was built from

examples/verdancehero.json
Brand
Verdance
Headline
Grown in glass

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
  • DM Serif Display and DM Sans 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

  • Plant shops, gardens and botanical brands get a pale frosted panel with numbered links beside tree ferns stirring in a misty Victorian glasshouse.
  • It is one of the few light-mode video heroes: dark green DM Serif type on a frosted mint panel, so it suits fresh, daytime brands.
  • On a phone the panel becomes a sheet rising from the bottom, with the glasshouse framed above it.

Not for

  • Your own video: the layout and colours are set for this film (tree ferns and palms stirring inside a misty Victorian glasshouse while pale morning sun moves through the beams)
  • 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: tree ferns and palms stirring inside a misty Victorian glasshouse while pale morning sun moves through the beams. It uses a side-column layout: a frosted panel the full height of the screen with the wordmark, numbered links, a two-line headline, the introduction, the buttons and short facts, with the film beside it. 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 plant shop, garden, botanical, wellness, interiors or any fresh, green, crafted brand.

Example request

Make a Fern Glasshouse hero for our plant shop: 'Rare and / green', shop and care links, three facts, and record it.

Similar Skills

View all
New
video
Wheat Wind HeroClaude CodeCodexCursor+3 more agents
New
video
Kelp Forest HeroClaude CodeCodexCursor+3 more agents

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 · 8 skills
Updated
Nov 2, 2026
Checked
Nov 2, 2026: its own commands ran and passed. That is a working check, not a security audit.

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
Good forBrandEcommerceWeb design

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

Write a review

FAQ

Why is there a panel instead of text on the film?

The glasshouse is pale and detailed, so words straight on it would be hard to read. The frosted panel keeps the film visible through it and the type dark and sharp.

What are the three facts?

Short value and label pairs under the buttons, such as opening days or delivery. Use only real ones from the person, or plain descriptive values; leave the list empty to drop them.

Do the numbered links show on every screen?

On wide screens taller than 880 px. On shorter screens and phones they are dropped to keep room for the headline, and the phone keeps the wordmark and button in the bar.

Which agents is Fern Glasshouse 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.