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/quayside, working in your browser. Opens in a new tab. Also: Longday.

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

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Your sky, star colours, willow gold and skyline, with your fonts, logo, headline and buttons
  • 24 documented effect settings: seed, loop length, shells, burst types, colours, sky, skyline, size, density, gravity, glitter, flash, smoke, wind, water, reflection, ripple and stars
  • Left, right or centered layouts, with the show above the copy on phones
  • An SVG still picture for reduced motion or a failed canvas, 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

  • Event and ticketing pages for New Year, festivals, launch parties or anniversaries can put the date and place in the badge above a night show.
  • Harbour cruises, waterfront venues and city bars can show bursts over a skyline with lit windows, mirrored in the water below.
  • Brands with a dark colour scheme can set 2 to 5 star colours from their palette, with gold willows and crossettes that split into four.

Not for

  • Light pages: fireworks need a night sky, so the build only accepts dark themes
  • Quiet or serious brands that want motion in the background, not a show
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A fireworks show over still water beside your headline. Shells rise on sparking comets and burst as peonies, drooping gold willows and crossettes that split into four. Each burst lights the sky with a flash, the stars fall under gravity and glitter as they burn out, and smoke drifts with the wind. A city skyline with lit windows or a line of hills stands on the horizon, and the whole sky is mirrored in rippling water. Your agent sets the star colours, burst types, skyline and copy, checks contrast at four widths and records a seamless 1080p loop.

Example request

Build a Fireworks Night hero for Quayside Nights, New Year boat trips in the harbour: deep navy sky, gold, white, red and cyan bursts over a city skyline, headline 'Midnight, on the water.', and record a 12-second loop.

Similar Skills

View all
web
Confetti Launch HeroClaude CodeCodexCursor+3 more agents
web
Soap Bubble 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

Plain 2D canvas, no librariesSeeded show: closed-form star paths with drag and gravityMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandSocial mediaEcommerce

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

Write a review

FAQ

Can I use it on a light page?

No. Fireworks need a night sky, so the build refuses a background that isn’t dark. Each star colour must also reach 3:1 on the sky, and the build suggests a lighter colour when one is too dark. For a light page, pick another hero.

How busy is the show, and can I change it?

By default 11 shells go up in each 12-second loop, with 110 stars in a peony. Set 4 to 16 shells, burst size from 0.6 to 1.4 and density from 0.5 to 1.5. You can turn peonies, willows and crossettes on or off, but at least one must stay on.

Will it run smoothly on phones?

It is a plain 2D canvas with no libraries, and on a phone the show sits above the copy, over the water. On an old phone, lower the shells and density if it stutters. Visitors who ask for reduced motion get one still frame at 6.4 seconds instead.

Which agents is Fireworks Night 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 fireworks effect, 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.