CueClub

Inspiration

Was checking out some Awwwards sites and kept thinking — why does every "cinematic 3D website" have to be for a SaaS product or a fashion brand? Then I got a design challenge to redesign a local snooker club's site (Cue Club Coventry, a real place), and figured why not go all in. Instead of a normal "here's our tables, here's our prices" site, I wanted the first thing you see to actually feel like you're standing at the table about to take a shot.

What it does

It's a full redesign of a cue sports club's website. The hero has an actual 3D pool table with a physics-driven break shot — cue hits the ball, balls scatter based on where they get struck, some drop into pockets, all tied to your scroll position. Below that it's got the tables/facilities section laid out like cards fanned around a cue stick, an events section with a scroll-drawn tournament bracket, membership tiers, and a contact/booking section — all built around one consistent motion language instead of feeling like six different sections stitched together

How we built it

Next.js for the base, Three.js + React Three Fiber for the 3D scene, GSAP with ScrollTrigger for basically everything scroll-driven, and Lenis for smooth scrolling synced up with GSAP. Used real photos of the actual venue instead of stock images where I could, since that mattered more for making it feel like a real place and not a template.

Challenges we ran into

Getting the cue stick to actually look like a cue stick and not a plain cylinder took way more iteration than I expected — turns out a real cue has a tapered shaft, a joint ring, different wood tones on different sections, and if you skip that detail it just reads as "stick," not "cue." Also had a rough time keeping mobile performance decent with a full 3D scene running — ended up cutting shadows and capping the pixel ratio on mobile specifically, which was a real tradeoff between "looks good" and "actually runs at a usable frame rate."

Accomplishments that we're proud of

Getting the break shot to feel physically believable — cue contact, ball dispersal, pocket drops — while keeping it slow and cinematic instead of just looking like a fast game replay. Also proud that mobile isn't an afterthought here; a lot of 3D-heavy sites just give up and show a static image on phones, but this one keeps the scroll story and most of the motion intact on mobile too.

What we learned

Small details matter way more than I expected for making something "read" as premium — the cue stick's material zones, a properly tapered shape, a joint ring — these are things nobody consciously notices when they're right, but everyone notices when they're wrong. Also learned a lot about balancing visual ambition against real performance constraints instead of just chasing the coolest-looking version of something.

What's next for CueClub

Real membership pricing once the club has final rates (it's placeholder right now), and I'd like to push the Events section further with more bespoke motion since it's currently the section I spent the least time on relative to the Hero and Tables sections.

Built With

• css3
• gsap
• lenis
• next.js
• react
• react-three-fiber
• scrolltrigger
• tailwindcss
• three.js
• typescript
• vercel
• webgl