All projects · UI Components & Interactions
CoffeeHouse: 3D Y-Axis Card Flip Animation & Recipe Studio
An interactive 3D card flip showcase for CoffeeHouse signature brews that rotates along the vertical Y-axis to reveal hidden barista recipes,…
An interactive 3D card flip showcase for CoffeeHouse signature brews that rotates along the vertical Y-axis to reveal hidden barista recipes, featuring hardware-accelerated CSS perspective matrices, an integrated caffeine metabolism tracker, interactive 3D physics studio, and in-browser automated diagnostic suite.
- Fulfills the challenge clue ('Make the rotation on the Y axis') using CSS perspective: 1000px, transform-style: preserve-3d, and rotateY(180deg)
- Pixel-perfect replication of CoffeeHouse signature brews: Classic Espresso, Caramel Latte, Cold Brew, Cappuccino, Mocha Delight, and Vanilla Latte
- Dual-face state management revealing 4-step barista preparation recipes with deep roast background gradients and backface-visibility culling
- Integrated Order Tray slide-over drawer with live cart calculations and real-time FDA caffeine metabolism tracker with 4 health zones
- Interactive CSS 3D Physics Studio with live perspective slider (400px - 2500px), duration slider, axis comparators (Y vs X vs Diagonal), and 3D hover tilt parallax
- In-browser 7-point automated diagnostic test suite verifying perspective context, preserve-3d, backface culling, Y-axis vectors, and keyboard navigation
Built with: CSS 3D Transforms, Y-Axis Affine Rotation, Hardware Acceleration, Web Audio API Synthesis, WCAG 2.1 AA Accessibility, JavaScript (ES2022+), Bolt.new