Blu Junior Cards — 3D carousel

A horizontal 3D carousel of the seven Blu Junior card designs, standing upright like real cards. Click anywhere to glide to the next card (it rolls in from the right); move the mouse to tilt it.

Live: https://blu-bank-cards-animation-2.vercel.app

▶️ Full-quality video (1920×1080, 60 fps, loops): docs/demo.mp4

• Front: the official Blu Junior artwork.
• Back: modelled on a real Saman Bank card — colour taken from each design, brushed magnetic stripe, a random Persian name, card number (valid Luhn check digit), expiry and CVV2 on every load, "Powered by Saman Bank".
• 3D: layered card edge, moving gloss, light shading and soft shadows — pure CSS 3D transforms, no 3D library.
• Extras: light floating particles and a confetti burst on click.

Run it

npm install
npm run dev

Record the demo video

Filmed frame by frame on a virtual clock (no dropped frames): the macOS pointing-hand cursor rests on the card and clicks through all seven cards with real clicks, ending where it started so the video loops.

npm i --no-save puppeteer-core
npm run build
node tools/record.mjs demo-4k.mp4            # 1280×720 page → 3840×2160 video

Needs Google Chrome and ffmpeg.

Stack

Vite · React 18 · TypeScript · Tailwind CSS v4 · requestAnimationFrame (no animation libraries).

• src/App.tsx — carousel motion, card faces, card back layout, random holder data
• src/Particles.tsx — background particles and click confetti (one canvas)

Credits

Card artwork and the blu and Saman Bank logos belong to their owners; used here for a non-commercial design concept. All card details are randomly generated and not real.

Design experiment by Hamzeh · Built with Claude.