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

The page this skill built from examples/hushwood, working in your browser. Opens in a new tab. Also: Meadowlark.

12-second example rendered by this skill from examples/hushwood · 1280×720

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Your sky, afterglow, grass, moon and firefly colors, fonts, logo, headline and buttons
  • 18 documented effect settings: seed, loop length, fireflies, sync, glow, four colors, moon shape and size, horizon, grass density and height, wind, seed heads, stars, mist
  • Left, right or centered layouts, with the meadow above the copy on phones
  • An SVG still picture for reduced motion or a failed script, so the hero is never blank
  • Contrast and layout checks at 390, 768, 1024 and 1440 px
  • A frame-perfect MP4 that loops seamlessly (1080p by default, portrait sizes too) and a poster
  • Open-source licenses for every part it builds on

Good fit

  • Sleep, meditation and wellness apps can open on a calm night meadow with swaying grass, mist and a full or crescent moon.
  • Campsites, cabin rentals, nature reserves, and candle or tea brands can match the sky, grass and firefly glow to their own colours.
  • Summer festivals and children’s books can turn up the fireflies and glow for a livelier night, or lower the wind for a sleepier scene.

Not for

  • Light or daytime brands: the build only accepts a dark night sky
  • Fast, loud launches: the scene is slow and quiet on purpose
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A meadow at dusk fills your hero. The sky deepens from the horizon's afterglow, the moon (full or crescent) glows over the open side, mist lies over the far field, and four layers of grass sway in rolling gusts with dandelion clocks catching the moonlight. Fireflies drift between the layers and blink to their own rhythms, then fall into step mid-loop and flash together in waves rolling across the meadow. Your agent sets the sky, afterglow, grass, moon and firefly colors, fonts, logo, headline and buttons, checks contrast at four widths and records a seamless 1080p loop.

Example request

Build a Firefly Meadow hero for Hushwood, a sleep sounds app: navy sky, teal afterglow, yellow-green fireflies, full moon, headline 'Fall asleep somewhere quieter.', and record a 12-second loop.

Similar Skills

View all
New
web
Confetti Launch HeroClaude CodeCodexCursor+3 more agents
New
web
Kinetic Type Grid HeroClaude CodeCodexCursor+3 more agents

Details

Output
Animated canvas hero · page + embed + 1080p video
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 50 skills
Updated
Oct 26, 2026
Checked
Oct 26, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Canvas 2D (hand-drawn sky, grass, seed heads and fireflies, no libraries)Seeded grass layers and firefly paths on whole-number loop frequenciesMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandSocial mediaWeb design

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

Write a review

FAQ

Can I use a light or daytime background?

No. The fireflies need a dark sky, so the build refuses a background with a relative luminance above 0.08, and the firefly colour must reach 4:1 on the grass to glow. Pick a deep navy or near-black page and set the afterglow with the horizon colour.

How many fireflies can there be, and do they flash in sync?

From 0 to 200, 90 by default. Each blinks to its own rhythm, then in the middle of every loop they fall into step and flash in waves from the moon’s side before drifting apart. It is a scripted picture, not a simulation of real fireflies. Turn sync off and they keep their own rhythms.

How does it behave on phones and with reduced motion?

On a phone the meadow sits above the copy and fades into the page. Visitors who ask for reduced motion get one still frame of the live hero at 6.6 seconds, and if the canvas or script fails they see an SVG still, so the hero is never blank.

Which agents is Firefly Meadow 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

Lookbk wrote this package: the Motion Heroes kit, the meadow, grass and firefly drawing, the still picture and the examples. No third-party code is included. 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.