WebGL Developer for Designers: The Huy Phan Partnership

Most award-winning websites you've seen are two people, not one. A designer authors the concept; a developer makes it move, hold 60fps, and survive a real device. When the designer is world-class, the developer becomes the deciding variable — the distance between a stunning Figma file and a site that actually breathes is entirely engineering. That's the seat I've occupied, repeatedly, as the WebGL developer for designers — and the clearest example is my recurring partnership with Huy Phan, a Ho Chi Minh City designer and Awwwards jury member. This post is about the partnership itself: how a designer's award-level work gets built in GSAP, Three.js and Next.js, and why the same pairing keeps winning.

The partnership, on the record

Huy Phan designs; I build. We've shipped that split across multiple projects, and the results are public — not claims, listings:

Project	Huy Phan's role	My role	Recognition
fromanother	Interface design	Creative developer	Awwwards SOTD + Developer Award, FWA of the Day
Iventions	Design direction	Creative developer	CSS Design Awards Website of the Month, Awwwards SOTD + Developer Award
Mat Voyce	Designer (with Uncommon)	Creative developer	Awwwards Site of the Day

Huy Phan isn't a casual credential. He's an Awwwards jury member with a long shelf of wins — 12× Awwwards Site of the Day and 12× Awwwards Developer Award across his body of work. When a designer operating at that level hands off a concept, the build has almost no margin: the motion has to read exactly as intended, the WebGL can't degrade a single image, and the whole thing has to stay fast. That's the brief I take, every time.

Why designers of this caliber hire a specialist developer

A designer good enough to sit on the Awwwards jury doesn't need a developer who "can also design." They need the opposite: someone who does GSAP, Three.js and performance for a living and gets out of the way of the vision. The value isn't creative input — Huy already has the creative answer. The value is fidelity under load: rendering the design pixel-exact while holding a smooth frame on a mid-range laptop and a phone.

That's a different discipline than a generalist brings. A generalist compromises the design to make it shippable; a specialist changes the implementation so nothing about the design has to give. On Iventions the hard rule was "never degrade the imagery," so the shader work happened around each image — lighting and displacement on transition — never crushing the source. That's a developer-side decision that protects a designer's work, and it only comes from having shipped this level repeatedly.

The craft: executing an award-level design

Across the partnership, three engineering habits are what let Huy's designs land at full strength.

One motion language, not a pile of one-offs

A motion-led design collapses if every animation is hand-tuned in isolation — the rhythm goes incoherent and the whole thing reads as noisy instead of authored. The fix is a shared vocabulary: one set of eases, a consistent duration scale, and ScrollTrigger driving reveals off the same grammar so the pacing stays editorial from the hero to the footer.

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

// One reveal grammar, reused site-wide — this is what makes a design feel "authored".
gsap.utils.toArray<HTMLElement>('[data-reveal]').forEach((el) => {
  gsap.from(el, {
    yPercent: 16,
    opacity: 0,
    ease: 'expo.out',
    duration: 1.1,
    scrollTrigger: { trigger: el, start: 'top 85%', once: true },
  })
})

Everything animates on transform and opacity only, so reveals stay on the GPU compositor and never touch layout — that's the difference between silky and janky on a media-dense page. The deeper mechanics are in my GSAP ScrollTrigger tutorial.

WebGL only where it earns its weight

A WebGL context costs memory and battery, so I reserve it for the moments that carry the design's "immersive" promise — cinematic image transitions, displacement between work pieces — and mount the canvas only when it's actually on screen.

// Spin up the renderer just in time; free the context when it scrolls away.
const io = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) mountGL()
  else disposeGL()
}, { rootMargin: '200px' })

io.observe(canvasSection)

And crucially, textures are treated as sacred. On a designer's build, softening an image to save a few frames is a failure, not a trade-off:

import * as THREE from 'three'

new THREE.TextureLoader().load('/work/feature.jpg', (texture) => {
  texture.colorSpace = THREE.SRGBColorSpace
  texture.anisotropy = renderer.capabilities.getMaxAnisotropy() // crisp at angles
  texture.generateMipmaps = true
})

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) // sharp without melting the GPU

That discipline — lazy contexts, disposing renderers, capping DPR at 2 — is what keeps a heavily animated design inside a performance budget. It's the same thinking behind Core Web Vitals for animation-heavy sites, and it's a big reason these builds took Awwwards Developer Awards, not just visual nods.

Motion that respects the visitor

Every build steps aside for anyone who's asked it to. gsap.matchMedia() disables the heavy choreography under prefers-reduced-motion, so an award-level design stays accessible without forking the codebase.

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

Why the same pairing keeps winning

The reason a designer and developer return to each other isn't loyalty — it's compounding trust. By the third project, Huy knows exactly what's cheap and what's expensive to build, and I know exactly how he wants motion to feel, so the concept-to-code loss approaches zero. That's why the wins stack: fromanother's Developer Award, Iventions' CSS Design Awards Website of the Month, Mat Voyce's Site of the Day. Three juries, three projects, one recurring pairing.

The lesson generalises past one collaborator: an award-level design is only as good as the developer who ships it. If you're a designer with a concept that deserves to move exactly as you drew it — and hold up on a real device — that's the partnership I run. See how it fits among the designers and studios I build for.

FAQ

Who is Huy Phan?

A Ho Chi Minh City designer and Awwwards jury member with a long record of wins — 12× Awwwards Site of the Day and 12× Awwwards Developer Award across his work. huyml.co is his portfolio.

What is Hon Tran's role in the partnership?

Creative developer. Huy designs and art-directs; I build the front-end — the GSAP motion, the Three.js / WebGL, and the Next.js performance layer — faithful to his design. We've shipped fromanother, Iventions and Mat Voyce together.

What does a "WebGL developer for designers" actually do?

Turns an award-level design into a live site at full fidelity: motion that reads exactly as intended, WebGL that never degrades the imagery, and a fast, accessible build on real devices — without changing the design to make it shippable.

Can you work with my designer or design team?

Yes — that's the core of how I work. The designer owns the vision and the client relationship; I own the motion, the WebGL and the performance under your brand.

Let's build your design at full fidelity

If you're a designer or studio with an award-level concept that needs a WebGL developer to ship it exactly as drawn — that's exactly what I do.

• See how I work and start a project on the hire 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. Twice named Awwwards "Independent of the Year" and the first Vietnamese developer to win an international web award. hontran.dev · Behance.