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

10-second example rendered by this skill from examples/tallybird · 1280×720

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Your paper colors, spotlight, fonts, logo, headline, buttons and a corner release line
  • 17 documented effect settings: seed, loop length, reduced-motion frame, pieces, streamers, shots, gap, power, spread, drag, flutter, size, paper colors, spotlight color and strength, flash, caption
  • Bright papers on dark grounds or printed colors on light ones, left, right or centered layouts, with the cannon firing up from the foot of the picture on phones
  • An SVG still of the burst for reduced motion or when the canvas cannot run
  • 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

  • Apps shipping a big version, such as an invoicing tool launching 3.0, can celebrate with confetti bursting from the button they want clicked.
  • Bakeries, shops and studios marking a birthday or milestone can use printed-paper confetti on a cream background and a corner line with the date.
  • Teams that want a loud, festive first screen without a script library get a plain 2D canvas hero and a seamless video loop.

Not for

  • Calm or serious pages: the burst is loud and celebratory by design
  • A one-off burst on click: this is a looping hero, not a button effect
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A confetti cannon that fires from your main button. Paper squares, strips, dots and curls, long twisting streamers and a spray of sparkles burst across the space beside your headline, hang in the air, then flutter down, flipping to show their darker backs, and settle flat along the floor of the hero before it clears and fires again. Every piece follows a closed-form path with air drag and gravity, so the loop is exact, and confetti never crosses the headline, lede, note or navigation. Your agent sets the paper colors, how much fires and how far, fonts, logo, headline and buttons, checks contrast at four widths and records a seamless 1080p loop.

Example request

Build a Confetti Launch hero for Tallybird, an invoicing app shipping version 3: deep violet ground, yellow accent, five bright paper colors firing from the 'Try 3.0 free' button, headline 'Invoices that chase themselves.', and record a 10-second loop.

Similar Skills

View all
web
Fireworks Night 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 libraries)Closed-form projectile paths with air drag, landing found by bisectionMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandSocial mediaEcommerceWeb design

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

Write a review

FAQ

Will the confetti cover my headline or buttons?

No. Confetti fades out where it would cross the headline, the lede, the badge, the note, the brand bar or the second button, so the words always read. It fires from the outer end of the main button, so make that button the action you want taken.

How much confetti fires, and can I use my brand colors?

You set 60 to 420 paper pieces (default 220), up to 16 streamers and 1 to 3 shots a loop. Give 2 to 8 paper colors, or keep five festive defaults that suit the background; the back of each piece is a darker shade. The build checks that at least two colors stand out.

What do visitors see with reduced motion or on a phone?

With reduced motion they get one still frame, chosen with stillAt from 0.8 to 8 seconds (default 2.4): about 1.5 shows the burst in the air, 6 the confetti settled on the floor. On a phone the cannon fires up from the foot of the picture, above the words.

Which agents is Confetti Launch 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 confetti physics and canvas 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.