Image Explosion Footer

A footer that erupts when it comes into view. Fifteen cards are launched upward with randomised sideways force and spin, then run on a real integrator: gravity accumulates into velocity every frame while friction bleeds off horizontal drift and rotation, so the arc is genuinely ballistic rather than an eased tween. The burst arms itself again once every particle has fallen back below the midpoint.

Component

The world collapsed, but the game survived. In the neon-lit ruins of civilization, the last remnants of power are not in governments or corporations, they are in the decks. Each card carries a fragment of lost history, a code of survival, a weapon of deception. The elite hoard them. The rebels steal them. The desperate gamble their lives for them.

Install

npx shadcn@latest add https://ui.aryank.space/r/image-explosion-footer.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API

Prop	Type	Default	Description
images	string[]	15 BLANK cards	One particle per image, launched together.
gravity / friction / horizontalForce / verticalForce / imageSize	number	0.25 / 0.99 / 20 / 15 / 150	Per-frame downward acceleration, velocity decay, launch spread, launch strength, and particle width.
heroImage / outroImage	string	Blob-hosted plates	The full-bleed sections above the footer.
embedded	boolean	true	Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll.

Customize

gravity / friction / verticalForcetext

The physics constants driving the burst.

footerHeading / aboutCopytext

Footer and section copy.

Dependencies

lenis

components

ui