About Spars Scroll Cards
Spars is a full-viewport hero section where image cards burst outward from the centre of the screen as the user scrolls in some cards sit behind the headline, others float on top of it, creating a layered, editorial depth effect seen on award-winning brand sites like Happly. Every card also reacts to touch: hover or drag across any image and the surface ripples like water, with an extra splash on click or tap.
Features
Scroll-driven animation — GSAP ScrollTrigger with scrub. Cards spring outward from centre as you scroll in
Live water-ripple effect — every card responds independently to hover and touch-drag with a true wave simulation, not a CSS filter trick. Includes an optional stronger splash on click/tap
Layered z-depth — cards split across two layers, some behind the heading, some floating on top of it
CMS-ready image controls — each card image is a top-level property with a direct CMS connect button (○). No arrays, no nesting
Fully responsive — three breakpoints: Desktop (8 cards), Tablet (8 cards, repositioned to clear the text), Mobile (4 corner cards, text always clear)
Font controls — heading, body, and button all use Framer's native ControlType.Font picker. Family, weight, size, line-height, letter-spacing — all yours to set
Editable copy — heading, body, and button label are string controls, each CMS-connectable
Optional call-to-action button — toggle it off entirely by clearing the label
Graceful fallback — if an image can't be read back from canvas (e.g. a CORS-restricted host), the card quietly falls back to a static image instead of breaking
Clean canvas preview — renders as plain static images inside the Framer editor, full ripple simulation only runs on the published site
Zero dependencies beyond GSAP — no external UI libraries, the ripple effect is built from scratch on Canvas2D
