A scroll-driven sticky card section with 3-D flip animations on desktop and a fly-in stack on mobile. Supports full customization via props with sensible defaults.

Every change leaves a mark.

The Spark

An idea takes shape — raw, exciting, and full of possibility.

The Build

Turning concepts into reality through code, iteration, and focus.

The Impact

Experiences that connect, inspire, and leave a lasting impression.

Every idea shapes the world.

Installation

$ npx shadcn@latest add https://akshitr.com/r/scroll-flip-card.json

Usage

import { StickyCards } from "@/components/scroll-flip-card";
 
export default function ScrollFlipCardDemo() {
  return <StickyCards />;
}

Component API

StickyCards

Prop	Type	Default	Description
`title`	`string`	`"Where are you in your journey?"`	Heading that fades in over the cards mid-scroll.
`intro`	`string`	`"Every change leaves a mark."`	Text displayed in the intro section before the scroll sequence.
`outro`	`string`	`"Every idea shapes the world."`	Text displayed in the outro section after the scroll sequence.
`cards`	`StickyCardItem[]`	See `STICKY_CARDS_DEFAULTS`	Array of card data. Supports 2–4 cards, optimized for 3.
`scrollContainer`	`RefObject<HTMLElement>`	-	Optional scroll container ref for custom scroll behavior.
`className`	`string`	-	Additional classes applied to the root `div`.

StickyCardItem

Prop	Type	Default	Description
`id`	`string`	—	Unique identifier. Used as the React `key`.
`image`	`string`	—	URL of the card front-face image.
`label`	`string`	—	Monospaced label rendered top-left of the card back (e.g. `"01"`).
`title`	`string`	—	Large heading on the card back.
`description`	`string`	—	Body text on the card back.
`bgcolor`	`string`	`#1a1a1a`	Card back background. Accepts any CSS color or `var(--token)`.
`textcolor`	`string`	`#fff`	Card back text color.
`accentcolor`	`string`	`rgba(255,255,255,0.07)`	Glow orb color on the card back. `rgba` recommended for opacity control.

Scroll Flip Card