Iventions: An Award-Winning Events Website Case Study

When a brand crafts world-class spaces and events, its website has to feel like one of them. Iventions is exactly that — and the result is an award-winning events website that took home CSS Design Awards "Website of the Month" (October 2025), a finalist slot for Website of the Year 2025, and Awwwards Site of the Day + Developer Award. This case study breaks down the brief, the craft, and the engineering decisions behind a motion-led, spotlight-driven site — written by the developer who built it. If you commission events and experiential website design, this is what "award-winning" actually takes.

Who built this — and why it matters

Iventions was a collaboration between studio SERIOUS.BUSINESS (design direction by Huy Phan, a CSS Design Awards Designer of the Year nominee and Awwwards jury member) and Hon Tran as the creative developer — that's me.

For context on why that pairing produces award-level work: I've spent 11+ years building award-winning digital experiences for clients across Norway, Denmark, Sweden, Malta, Germany and Vietnam. I've been named Awwwards "Independent of the Year" twice, I sit on the Awwwards jury, and my work has earned multiple Awwwards Site of the Day awards along with FWA and CSS Design Awards honors. The point of leading with that isn't a trophy count — it's that when you hand a creative concept to a developer who has shipped this level repeatedly, the motion, the 3D, and the performance land instead of breaking. That reliability is the whole game on a flagship brand site.

The brief: make "experiential" tangible on screen

Iventions designs and produces premium events and spaces — the kind of work that only really exists in a room, in a moment. The challenge was the classic experiential-brand problem: how do you make an in-person feeling translate to a flat screen?

The design answer was a spotlight concept — bold typography, a confident lime-and-purple identity, and motion that puts each brand and project center stage. The engineering answer was a build where every transition, hover, and scroll reinforces that spotlight rather than decorating around it. Three constraints shaped every decision:

• Motion had to feel directed, not random. Events are choreographed; the site should be too.
• The imagery is the product. Project visuals could never be degraded by an effect — crispness was non-negotiable.
• It had to stay fast. Heavy motion and WebGL are worthless if the page stutters on a mid-range laptop or a phone.

The craft: how the motion, 3D and performance were built

The stack is Next.js + React on the front end, WordPress (headless) as the CMS, with Three.js for WebGL and GSAP driving the motion layer. Here's how the signature pieces came together.

Page and menu transitions that feel choreographed

The menu and page transitions were the elements the Awwwards jury called out by name. The trick is treating navigation as a single timeline rather than two disconnected route changes — the outgoing content, the menu reveal, and the incoming page are one orchestrated sequence. GSAP timelines make that sequencing explicit:

import gsap from 'gsap'

function pageTransition(onMidpoint: () => void) {
  const tl = gsap.timeline({ defaults: { ease: 'expo.inOut', duration: 0.9 } })

  tl.to('[data-transition-cover]', { yPercent: 0 })           // cover wipes in
    .add(onMidpoint)                                          // swap route at the apex
    .to('[data-transition-cover]', { yPercent: -100 }, '+=0.05') // reveal new page
    .from('[data-page] [data-stagger]', { yPercent: 110, stagger: 0.04 }, '<0.2')

  return tl
}

The position parameter ('<0.2', '+=0.05') is what makes it feel intentional instead of abrupt — the new page's content begins lifting before the cover fully clears, so the eye never hits a dead frame. We pair the motion layer with smooth, inertia-based scrolling so the whole experience reads as one continuous surface.

WebGL that elevates the work, never degrades it

Three.js handles the spotlight and image treatments. The hard rule from the brief — never degrade the imagery — drove a specific approach: textures are loaded at full resolution and the shader work happens around the image (lighting, reveal, displacement on transition) rather than crushing the source. On a WebGL plane that means respecting the device pixel ratio and the source aspect so nothing softens or stretches:

import * as THREE from 'three'

const loader = new THREE.TextureLoader()
loader.load('/projects/feature.jpg', (texture) => {
  texture.colorSpace = THREE.SRGBColorSpace
  texture.anisotropy = renderer.capabilities.getMaxAnisotropy() // keep it crisp at angles
  texture.minFilter = THREE.LinearMipmapLinearFilter
  texture.generateMipmaps = true
})

// Cap DPR so high-density screens stay sharp without melting the GPU
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

Capping the pixel ratio at 2 is one of the highest-leverage performance moves on a WebGL-heavy site: above 2 you pay an enormous fill-rate cost for a difference almost nobody can see.

Keeping it fast under all that motion

An award doesn't survive a janky scroll. The performance discipline came down to a few habits:

• Animate only transform and opacity. They're GPU-composited and skip layout/paint, so the main thread stays free for scroll.
• Lazy-init WebGL. The Three.js scene only spins up when its section is near the viewport, and it pauses its render loop when scrolled off-screen — no GPU cycles burned on what you can't see.
• Respect the visitor. gsap.matchMedia() disables the heavy motion under prefers-reduced-motion, so the site stays usable and accessible without forking the codebase.

const mm = gsap.matchMedia()
mm.add('(prefers-reduced-motion: no-preference)', () => {
  // full spotlight + WebGL choreography here
})

If you want the deeper how-to behind these techniques, see our guides on smooth scroll in Next.js with GSAP & Lenis and the GSAP ScrollTrigger patterns that power scroll-driven motion like this.

The result: the awards (and what they signal)

Award	Body	Date
Website of the Month	CSS Design Awards	October 2025
Website of the Year 2025 — Finalist	CSS Design Awards	2025
Site of the Day + Developer Award	Awwwards	November 2025

On CSS Design Awards, Iventions scored 8.43 overall at Site-of-the-Day judging and 8.57 across 23 jurors at Website-of-the-Year level — consistently above 8.0 on UI, UX and Innovation. You can see the live build at iventions.com and the award listing on CSS Design Awards.

What those scores actually mean for a buyer: a site that wins on Innovation as well as UI/UX isn't just pretty — it does something memorable, and it does it without sacrificing usability. For an experiential brand, that's the entire pitch made tangible.

FAQ

What is the Iventions website built with?

Next.js and React on the front end, WordPress as a headless CMS, with Three.js for WebGL and GSAP for the motion layer — a stack chosen for fast, content-managed pages that still support heavy 3D and choreographed transitions.

Who designed and developed Iventions?

It was a collaboration between studio SERIOUS.BUSINESS with designer Huy Phan, and Hon Tran as the creative developer (front-end, WebGL and motion engineering).

What awards did Iventions win?

CSS Design Awards Website of the Month (October 2025), CSS Design Awards Website of the Year 2025 finalist, and Awwwards Site of the Day plus the Awwwards Developer Award.

How long does an award-level site like this take to build?

It varies with scope, but a flagship motion-and-WebGL build is typically a multi-week to multi-month engagement. The fastest path is a tight design partner plus a developer who has shipped this level before — see the projects archive for more examples.

Let's build something award-worthy

If you're a founder, brand, or agency that needs an events or experiential website with motion and WebGL that actually ships — and wins — that's exactly what I do as a creative developer.

• See how I work and the engagement tiers on the services page.
• Browse more shipped, awarded work in the projects archive.
• Ready to talk? Let's talk →

---

Written by Hon Tran — creative developer, founder of hontran.dev, and Awwwards jury member. 11+ years building award-winning, performance-first web experiences (GSAP, Three.js / WebGL, Next.js) for clients worldwide. The first Vietnamese developer to win an international web award. hontran.dev · Behance.