An animated card stack component built with React and Motion. Cards fan out in a stacked perspective as you scroll or use arrow keys: smooth spring physics, blur transitions, and keyboard shortcuts included.
- React 19 (Vite)
- TypeScript
- Tailwind V4
- Motion (Framer Motion)
npm install
npm run devScroll or press arrow keys to navigate through the stack.
Add .jpg images (1.jpg through 7.jpg) to src/assets/. These get duplicated into a longer sequence for the scroll effect.
- Scroll — navigate through the stack
- Arrow Right — next card
- Arrow Left — previous card
Keyboard shortcuts are disabled when focused on inputs, textareas, or selects.
The TimeMachine component listens to scroll position and maps it to an active card index. Each card animates with spring physics:
- Scale —decreases by 8% per card in the stack
- Y offset — cards stack vertically with a -30px offset
- Blur — 2px blur when scrolled past
- Opacity — fades out when no longer active
Cards snap every 50px of scroll distance. The total scroll area is 100vh + 200px.
src/
components/
time-machine.tsx # Main card navigation component
hooks/
use-shortcuts.ts # Keyboard shortcut hook
lib/
constants.ts # Animation config (snap distance, offsets)
tinykeys.ts # Keyboard binding library (forked)
utils.ts # Utilities (clamp, cn)
Miraya Tech — github.com/mirayatech
