Suga-Show

The first thing you see when you land on the site — big bold text, floating particles, and the 3D belt.
The belt follows your scroll — rotating and scaling as you move through the site.
Click the belt and you drop into a 3D inspection view where you can grab it, spin it around, and zoom in on the gold details.
Photos respond to your mouse with a purple glow and a subtle flutter effect on hover."
We built out a fight history section with clean interactive cards showing Sean's biggest wins.
Interactive 3D fighting gloves built and rendered alongside the championship belt.

Inspiration

We are huge MMA fans, but honestly, most sports websites are kind of boring. They are usually just flat images and walls of text. When we saw this hackathon was looking for that "wow" factor, we wanted to build something that actually felt cool to interact with—a digital trophy room for the UFC's "Suga Show" (Sean O'Malley).

We were really inspired by the premium 3D vibe of Lando Norris's F1 website and some of the creative card layouts on myshaky.com. We wanted to take that high-end, interactive energy and bring it into the world of mixed martial arts.

What it does

Think of this as an interactive tribute experience. As you scroll down the page, a massive 3D UFC championship belt and 3D fighting gloves actually react to you, rotating and scaling to fit the screen.

We also built a custom interactive cursor. If you hover over the belt, your cursor morphs into a stark white "TAKE A LOOK" badge. Clicking it pulls you into Observation Mode—a standalone 3D environment where you can freely grab, spin, and zoom in to check out all the gold details on the belt, before seamlessly dropping right back into the main website.

How we built it

We wanted it to be fast, so we built the foundation with React and Vite, and styled everything using Tailwind CSS.

For the 3D engine, we used Three.js and React Three Fiber (R3F). We spent a ton of time dialing in the environment lighting so the gold textures on the belt would actually catch the light and look realistic as you scroll past.

Challenges we ran into

Getting normal 2D website text to play nicely with a 3D canvas was a huge headache. At first, our HTML layout was physically blocking the mouse from touching the 3D belt underneath it, which completely broke all our hover effects.

We had to figure out how to hijack the React Three Fiber event listeners and attach them to the global document root. This way, the 3D scene always knew exactly where the mouse was, no matter what HTML was sitting on top of it. We also ran into a weird caching bug where opening Observation Mode would permanently glitch out the 3D materials on the main page, which we eventually fixed by forcing the app to deep-clone the 3D models.

Accomplishments that we're proud of

We're super proud of how buttery smooth the scroll animations feel, and we absolutely love how the highlight section turned out. It was a fun challenge designing an interactive space to showcase his best fight moments that feels just as premium and engaging as the 3D belt itself!

Also, getting Observation Mode to work perfectly as a Single Page Application without reloading the browser makes the whole project feel like a high-end native app, rather than just a basic website.

What we learned

This project totally changed how we look at web design. Trying to bridge the gap between a standard React UI and a WebGL canvas taught us a massive amount about event routing, state management, and 3D performance in the browser.

What's next for The Suga Show

We want to take this digital museum idea even further! The next steps would be adding interactive 3D walkout jackets, scanning in actual 3D fight arenas, and maybe even adding dynamic sound effects that trigger when you spin the belt.