DocsCase Study Flip Stack

Case Study Flip Stack

An editorial, scroll-driven case study stack where each full-width card folds upward to reveal the next story beneath it.

Installation

pnpm dlx shadcn@latest add @componentry/case-study-flip-stack

Dependencies: framer-motion

Usage

API Reference

PropTypeDefault
itemsCaseStudyFlipItem[]

Case studies with copy, image, accessible alt text, and card colors.

—
hintstring

The animated opening instruction between the arrows.

"Scroll Down"
headingstring

The large introduction heading shown before the card stack.

"Design That Delivers."
endLabelstring

The closing message revealed after the final card stacks.

"The End"
classNamestring

Additional classes for the scroll section container.

—

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousAnnotated TextNextCircuit Board
import { CaseStudyFlipStack } from "@/components/ui/case-study-flip-stack"
 
export default function WorkPage() {
  return (
    <CaseStudyFlipStack
      items={[
        {
          eyebrow: "Fintech",
          title: "Boosted conversion by 42% with a product-led redesign",
          description: "We rebuilt onboarding around the moments that matter.",
          image: "/work/fintech.jpg",
          imageAlt: "Portrait from the fintech campaign",
          background: "#a94808",
          foreground: "#fff7ed",
        },
        {
          eyebrow: "Hospitality",
          title: "A slower digital experience for a faster-growing retreat",
          description: "A cinematic booking journey with a stronger sense of place.",
          image: "/work/retreat.jpg",
          imageAlt: "A mountain retreat at dusk",
          background: "#067b8f",
          foreground: "#ecfeff",
        },
      ]}
    />
  )
}