Sperm Racing: Gene Summon

Inspiration

The Sperm Racing prompt challenged us to make something unforgettable. We wanted to blend humor, science, and gaming, turning the biology of sperm motility into an engaging collectible experience. Inspired by Pokémon card pulls and Genshin Impact’s gacha animations

What it does

Gene Summon transforms race results into DNA Capsules that can be opened in dramatic reveal animations. Each capsule unlocks a sperm hero with its own rarity, name, and description. Players collect them in the Spermdex, compare pulls, and laugh at the ridiculous lore such as “Turbo Tail Tom” or “Professor Fertilis.”

How we built it

We built the frontend in React using Vite and Framer Motion for smooth animations and rarity-based color transitions. The backend is powered by Node.js and Express, running on Render, where race results feed into a rarity algorithm that determines capsule type and possible summons. The frontend is hosted on Vercel, communicating with the backend to fetch new summons and store player collections locally.

Challenges we ran into

Most of our challenges came during planning and polishing the visual experience. Getting the timing of animations, the transitions between rarity colors, and the summon effects to feel smooth and satisfying took a lot of iteration. We also faced small issues syncing frontend state changes with the reveal animations without breaking the flow of the summon.

Accomplishments that we're proud of

We’re proud of how cohesive the final experience feels, from the summon animation and rarity sound effects to the clean UI and collection system. We also love that the project stays true to the Sperm Racing theme while being genuinely funny, creative, and demo-ready.

What we learned

We learned how to deploy a full-stack project under hackathon pressure, how to manage asynchronous animations with React state, and how to make technical systems feel fun and alive.

What's next for Sperm Racing: Gene Summon

Next, we want to connect Gene Summon directly to live race data from the Sperm Racing app so actual sperm motility affects capsule rarity. We also plan to add more sperm heroes (and make the current ones more funny), animated reveal variations using real drawings/animators, and maybe global leaderboards for the rarest swimmers and trade ability.

Built With

• express.js
• framer
• motion
• node.js
• react
• render
• vercel
• vite