Sticky Flip Cards

A pinned hero where a single front card flips a half turn to reveal a fanned stack of color-coded back cards, which then peel off and dismiss one by one with a tilt as you scroll. The headline lifts away on entry and an outro statement closes it out. GSAP ScrollTrigger with Lenis, no images.

Component

Scroll down and watch everything fall into place

First Frame

Start here

A single moment, held in place before everything begins to move.

Final Hold

Everything settles into place, leaving a lasting frame that feels complete.

Layered Time

Moments stack, overlap, and reveal themselves slowly as the scroll continues.

Weight and Flow

Elements carry presence, easing in and out with balance, never rushed, never still.

Soft Motion

Subtle shifts and gentle transitions that build a quiet sense of rhythm as you move forward.

A quiet progression of motion and stillness, where each layer reveals itself with intention and nothing feels out of place.

Install

npx shadcn@latest add https://ui.aryank.space/r/sticky-flip-cards.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
cards	FlipCardItem[]	Four BLANK cards	Back-card title, body, and icon (lock-open/layers/prism/infinite).
heroHeading / frontTitle / frontLabel / frontBody / outroHeading	string	BLANK copy	Hero, front-card, and outro copy.
embedded	boolean	true	Own the scroll container; set false to ride the window scroll.

Customize

cardstext

The four back-card titles, bodies, and icon names.

heroHeading / frontTitle / frontBody / outroHeadingtext

The hero headline, front card copy, and outro statement.

Dependencies

gsaplenis