Sticker Pop Footer: Die-Cut Stickers That Pop Up Under the Pointer

Build a site footer edged with overlapping die-cut stickers that peel on one by one when it scrolls into view; the sticker under the pointer pops up, straightens and grows on a springy curve while its neighbours lean away, and a tap pops one on phones. SandBase draws nine stickers on one sheet and the Skill cuts each one out along its own outline, or you bring your own transparent PNGs. The footer closes a full landing page: chapter titles, an intro, a product console drawn in HTML, feature cards, specs, stats, a quote and a call to action, with a moving glow and a floating section pill.

Sticker Pop Footer: Die-Cut Stickers That Pop Up Under the Pointer

Bring what the stickers show (or your own transparent PNGs), your brand, tagline, link columns, palette and language. The Skill returns a full landing page (index.html), a footer to paste into an existing site, the runtime script and stylesheet, the cut-out stickers as transparent PNGs and the bundled open fonts.

How it works

  1. SandBase draws nine die-cut stickers with white borders on a flat grey backdrop. The Skill removes the backdrop with a flood fill from the border and splits what is left into separate stickers.

  2. The builder writes the footer with real text and spreads the stickers along the bottom edge with seeded tilts and overlaps.

  3. In the browser each sticker builds a small alpha mask; the pointer pops the top-most sticker whose outline is under it, and its neighbours lean away.

Frequently asked questions

What does a new sheet cost?

One picture through SandBase: listed at $0.10, and $0.075 was charged for each example. With your own transparent PNGs it costs nothing.

Can I use my own stickers?

Yes. Point the builder at a folder of 3 to 16 transparent PNG or WebP files and it skips generation and cutting.

Why do some stickers come out joined?

Stickers that touch on the sheet become one piece. The prompt asks for space between them; regenerate the sheet if two touch.

Why do the links do nothing here?

The example runs in a sandboxed frame with its links disabled. In your own page they go wherever you set them in site.json.

Does it work on phones?

Yes. A tap pops a sticker for a moment. Checked in a 390 px phone viewport. With reduced motion turned on the stickers pop without the springy motion.

Why is there no online generation?

Building a new scene needs a model key inside the sandbox, which the backend doesn’t support yet. Run the Skill with your own agent for now.