Inspiration
The inspiration for this layout comes from our friends' love for poker, so we wanted to showcase the website in this style with some minimal retro pixelated style for a modern ui website
What it does
Website conatins 3d cards with interactive scroll trigger, horizontal scroll and many more. we try our best to make the website came out to be user-friendly with immserive scroll trigger.
How we built it
We built Pokerhub with modern full-stack creative web technologies:
Frontend & Architecture: Next.js , React , and Tailwind CSS for responsive design system. 3D Graphics & Canvas Shaders: Three.js and @react-three/fiber / @react-three/drei. Card textures are rendered dynamically using HTML5 procedural canvas generation paired with custom iridescent holographic shaders. Scroll & Motion Pipeline: GSAP + ScrollTrigger for timeline orchestration, Lenis for 60fps smooth scrolling, and Framer Motion for micro-interactions and HUD transitions. Audio Engineering: Bespoke Web Audio API synthesizer module providing ultra-low-latency spatial feedback without downloading heavy audio files.
Challenges we ran into
Synchronizing ScrollTrigger with the 3D Render Loop: Connecting GSAP ScrollTrigger interpolation with React Three Fiber’s useFrame loop without causing stutter or desynchronization required fine-tuning delta time calculations and dampening filters. Procedural 3D Texture Generation: Instead of loading static, heavyweight image assets, we generated crisp 1024×1440 card faces, luxury linen textures, and gold foil borders procedurally on HTML5 canvas buffers. Ensuring these textures updated instantaneously during skin/suit swaps without memory leaks was a significant engineering hurdle. SSR Hydration with WebGL Canvases: Managing client-only 3D canvas mount cycles within Next.js Server Components required dynamic imports with zero-layout-shift skeleton loaders. Heads-Up Poker Logic in the Browser: Building a lightweight, robust 7-card poker hand evaluator in pure JavaScript that ranks hands instantly while driving animations for community card reveals and AI decision-making.
Accomplishments that we're proud of
Buttery 60+ FPS Performance: Maintained rock-solid frame rates while running real-time 3D lighting, physics chip tosses, particle emitters, and scroll choreography simultaneously. Zero Heavy Assets: Almost all textures, foils, and sound effects are generated procedurally in code, resulting in lightning-fast initial load times. Cohesive Visual Identity: Blended retro pixel typography with high-end casino luxury to create a distinct, memorable aesthetic. A Full Playable Duel Mini-Game: Built a full Texas Hold'em mini-game embedded right into the interactive experience.
What we learned
Advanced scene graph optimization and canvas texture recycling in React Three Fiber. Mathematical modeling of holographic reflection maps and iridescent sheen angles. Procedural sound design principles using Web Audio API oscillators, gain envelopes, and biquad filter nodes. Seamlessly marrying creative developer tools (GSAP + Lenis + Three.js) into a unified, accessible user experience.
What's next for Pokerhub
- Multiplayer WebRTC Tables: Real-time peer-to-peer 3D poker rooms customizable 3D card back avatars.
- Custom Deck Studio: An in-browser editor allowing creators to design, texture, and export custom 3D holographic decks.
