Cinematic Card Deck — React Component

A scroll-linked 3D card stack with depth, ambient glow, progress dots, cursor parallax, and optional image-backed cards.

Cardsscroll3dparallaxspringcardsscroll3dstackframer-motionparallax

Cinematic Card Deck

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

intensity

Controls depth, rotation, blur, and exit drama.

exitDirection

Direction cards fly away while scrolling.

cardWidth

Card width in pixels.

cardHeight

Card height in pixels.

sectionHeight

Scroll distance in viewport heights.

smoothing

Spring smoothing for scroll progress.

showProgress

Show side progress dots.

showAmbientGlow

Show accent-colored glow behind the active card.

Generated JSX

Copy this into your page.

<CinematicCardDeck
  intensity="standard"
  exitDirection="up"
  cardWidth={520}
  cardHeight={360}
  sectionHeight={400}
  smoothing={0.7}
  showProgress={true}
  showAmbientGlow={true}
/>

Animation effects

scroll3dparallaxspring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Installation