AthleteDNA

An immersive AI-powered sports discovery platform that uses cinematic 3D storytelling to match users with Olympic and Paralympic athlete archetypes using data from over 120 years of Team USA history.

Comment

Inspiration

Team USA’s history is massive — more than a century of Olympic and Paralympic athletes, eras, and stories. We wanted to build something that made that history feel personal and immersive instead of static. Rather than treating AI like a prediction engine, Athlete DNA uses it to connect users to historical athlete patterns, sports pathways, and eras that match their profile and interests. We also wanted Paralympic pathways to feel equally important and equally polished throughout the experience, not like an afterthought.

At the same time, we wanted the experience itself to stand out. Instead of another quiz app with charts and forms, we imagined the project as an interactive cinematic journey where users move through the story visually.

What it does

Athlete DNA starts with a biometric intake followed by a short Gemini-powered conversation that helps refine the user’s interests, goals, and personality. From there, the app generates a personalized dossier featuring:

  • One of eight athlete archetypes
  • Olympic and Paralympic sport pathways
  • Historical “twin” cohorts based on similar builds and trajectories
  • Era-based storytelling tied to the archetype
  • A cinematic Three.js reveal experience

The experience is built as a scroll-driven 3D corridor where users move through themed spaces including archetype reveals, historical eras, twin halls, and sport pathway rooms before arriving at a final profile dashboard. The dashboard includes pathway details, simulations, historical insights, and a shareable athlete card.

How we built it

We built Athlete DNA as a full-stack Next.js app using the App Router, React 19, strict TypeScript, and Tailwind CSS v4. Framer Motion handled transitions and UI animation, while Zustand managed persisted user state across the experience.

All Gemini interactions run securely on the server through API routes so the client never exposes credentials. The system combines deterministic ranking logic (biometrics, sport signals, and conversational cues) with structured Gemini outputs to generate archetypes, pathway narratives, historical cohorts, and era content in a controlled way.

For the immersive side, we used React Three Fiber, drei, and postprocessing to power the entire 3D experience. Every major scene — the DNA helix landing page, cinematic archetype reveal, and scroll-based corridor — was rendered in WebGL and loaded client-side to avoid SSR issues inside Next.js.

Challenges we ran into

One of the biggest challenges was balancing immersion with trust and compliance. We wanted the app to feel grounded in real athletic history without presenting itself like a predictive system or exposing identifiable athlete data directly in the UI. That led us toward anonymized cohort “twins,” conditional language, and carefully controlled outputs.

Another challenge was balancing biometrics with user intent. Early versions leaned too heavily on physical build data, which sometimes overpowered what users actually cared about. We ended up reworking the ranking system so sport interests and conversational signals had stronger influence while biometric factors became more supportive rather than dominant.

On the technical side, integrating large React Three Fiber scenes into a Next.js App Router setup took a lot of tuning around hydration, client-only rendering boundaries, animation timing, and postprocessing performance.

Accomplishments that we're proud of

The biggest accomplishment for us is how cohesive the entire experience feels. The 3D layer is not just decoration — it carries the narrative from beginning to end.

The landing page uses a full-screen animated DNA helix as a living backdrop, while the archetype reveal is staged like a cinematic premiere with particles, lighting, bloom effects, and timed transitions. The corridor experience became our favorite part of the build: instead of clicking through slides, users physically move through one continuous world containing eras, pathways, and historical spaces.

We’re also proud that the app maintains strong visual and narrative parity between Olympic and Paralympic pathways throughout the entire experience. That consistency became a core design principle for the project.

What we learned

We learned quickly that immersive web experiences are much more about integration than isolated features. Building polished 3D scenes is one thing — getting them to cooperate with App Router, hydration, state persistence, and responsive UI is another.

We also learned that AI outputs become much more reliable when the system provides structure first. Instead of asking Gemini to invent everything, we constrained outputs using ranked candidate pools, indexed metadata, and validated archetype mappings. That kept responses consistent while still feeling personalized.

Finally, we realized how important tone and framing are when building something around athletic identity. Copy decisions, historical framing, and conditional language mattered just as much as the visuals in making the experience feel credible and respectful.

What's next for AthleteDNA

Next, we want to expand the historical dataset with more recent Olympic and Paralympic records, improve sport taxonomy and pathway accuracy, and deepen support for impairment-class-aware Paralympic analysis where the data supports it.

We’d also love to push the immersive side even further with more interactive simulations, richer historical environments, and expanded archetype storytelling across additional eras of Team USA history.

Built With

Share this project:

Updates