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.

Use Cases

Company Journey & Milestone Timelines: Guide users through past origins, current developments, and future roadmaps during scroll.
Product Architecture / Feature Deep Dives: Reveal what's under the hood by flipping visual cards to uncover engineering specs and feature details.
Narrative Storytelling in Case Studies: Turn client case studies into immersive visual steps that pin the screen and flip progressively.
Onboarding Sequences: Introduce key value propositions sequentially as the visitor scrolls down a high-converting landing page.

Resources

Image splitter - You can use this tool to generate grid images or split images into multiple parts. I used this tool to generate the grid images for the cards.