Holo Card Builder
Holo Card Builder is an interactive web platform that renders physics-accurate holographic foil effects in real time using multi-layer CSS blend modes, pointer-responsive animations, and custom shader techniques — all in vanilla HTML, CSS, and JavaScript. No frameworks. Three builder modes, a full card library, and a live Supabase-backed persistence layer.
Hover to activate foil · Click to flip
The Platform
Holo Card Builder gives you a full studio for designing holographic trading cards — the kind you'd pull from a booster pack. Choose your rarity style, dial in the foil intensity, tilt strength, glare, and grain, then watch the effect respond live to your cursor. Three builder modes cover standard cards, transparent silhouette cards, and tilt-shift cards that reveal three different art states as you move.
Every card. Every effect. In real time.
The Engine
The entire holographic effect stack runs on CSS — no WebGL, no canvas. Each card has five independently toggleable layers: Foil, Shine, Spectral, Glare, and Accent. CSS custom properties feed live pointer coordinates into the layers, making the foil drift, the glare sweep, and the spectral colours shift as if you're physically holding the card. Built and deployed on Railway with optional Supabase cloud persistence for the card library.
Card Library
12 cards. Every effect.
Hover each card to activate the holographic foil