Inspiration
A late-night rewatch of the Infinity Saga reminded us how cinematic storytelling can inspire playful mechanics. We wanted to capture the tension of chasing the six stones and the spectacle of the snap in a browser game that anyone could drop into.
What it does
Movie Verse Craft (aka Infinity Quest) drops players into an arcade-style challenge: collect falling stones, trigger snaps for bonus points, and post high scores to a live leaderboard. Glowing particle effects, cosmic backgrounds, and a responsive HUD keep the action immersive.
How we built it
Frontend: React + TypeScript with Vite for fast iteration. Styling: Tailwind CSS plus custom gradients and animations for cosmic vibes. UI kit: shadcn/ui components tuned to the game aesthetic. State & data: React hooks manage gameplay state; TanStack Query syncs scores with Supabase. Feedback: sonner toasts celebrate achievements or alert players when lives run out.
Challenges we ran into
Game feel: Balancing fall speed and snap rewards to keep the loop exciting. Responsive canvas: Making sure touch and mouse controls feel parity across devices. Performance polish: Keeping particle and glow effects smooth without dropping frames.
Accomplishments that we're proud of
Delivering a cohesive brand experience—from favicon and logo to animations and audio cues. Building a reusable stone/gauntlet component system that made iterating on interactions quick. Standing up real-time leaderboards with optimistic UI updates that feel snappy.
What we learned
Tight coupling between animation timing and game state can be expressed cleanly in React with memoized callbacks. Even simple scoring systems benefit from explicit modeling; for example, our final calculation [ \text{finalScore} = 100 \times \text{stonesCollected} + 1000 \times \text{snaps} ] clarified how to cap bonuses and trigger victory states. Supabase row-level security plus edge caching kept leaderboard writes safe and fast.
What's next for movie-verse-craft
Extend the campaign with themed boss waves and power-ups unlocked by perfect snaps. Add cooperative play so friends can combine gauntlets in real time. Ship accessibility options (color-blind palettes, reduced-motion mode) to broaden reach.
Built With
- auth
- lucide
- shadcn
- sonner
- supabase
- tailwind
- tanstack
- typescript
Log in or sign up for Devpost to join the conversation.