Holo-Type

Athlete archetype generator with 3D holographic cards. One Gemini 3.1 call returns both Olympic and Paralympic narratives, grounded in 120 years of Team USA data.

Comment 1

Inspiration

We wanted to celebrate the rich, 120-year legacy of Team USA across Olympic and Paralympic disciplines by creating a highly visual and engaging experience. Our goal was to blend historical athlete data with modern generative AI to produce collectible, trading card-style "archetypes" that feel physical, premium, and personalized.

What we learned

We learned how to orchestrate complex, performant 3D holographic user interfaces in the browser. A major takeaway was mastering liquid physics using Framer Motion (with carefully tuned mass and damping values) and resolving "Z-fighting" by rendering internal card content flat while relying on high-range rotation and light interaction for depth.

How we built it

Holo-Type is built using the new Next.js 16 App Router and React 19. On the backend, we use Google's gemini-3.1-flash model (via @google/genai) grounded in a sanitized 120-year Olympedia dataset of Team USA achievements (data/team_usa_summary.json). The AI generates athlete archetypes with unique narratives, stats, and rarity tiers.

On the frontend, we render these as 3D holographic cards. We utilized Tailwind CSS 4 and Framer Motion 12 to create realistic shimmers, glare, and foil effects using mix-blend-color-dodge, overlay, and pointer-tracked gradients. A custom RadarVisual component translates the AI-generated stats into dynamic visual charts. We also built an export feature that generates high-fidelity posters using html-to-image for easy sharing.

Challenges we faced

One of the hardest challenges was achieving a premium, physical feel for the cards without breaking browser rendering. Initially, physical Z-offsets caused text warping and glitching at steep angles. We solved this by moving to a "flat stack" architecture on the card's surface and using multi-layered iridescent CSS that reacts to pointer movement to simulate depth and reflection.

Built With

Share this project:

Updates