logo

HONTRAN.DEV

00Entry

01 — Tension

I partner with studios, agencies and brands to turn challenging creative ideas into fast, production-ready interactive websites.

Awwwards Jury · 11+ years · WebGL / GSAP / Next.js · Worldwide

Start a project

Move across the surface — x-ray the build

Ambitious design.Engineered without compromise.

02 — Proof · Selected work

01 / 03

From Another — website hero, soft red and pink gradient with the fromanother wordmark
X-ray — Next.js · GSAP · WebGL

01 / 03 — Studio · 2026

From Another

Turning an editorial identity into a website that moves like a film.

Role
Creative Development
Stack
GSAP / WebGL / Next.js
Design
Huy Phan
Recognition
Awwwards SOTD + Developer Award · CSSDA WOTD · FWA FOTD
Iventions — homepage, Step into the Spotlight, event photo collage on lavender and beige
X-ray — Next.js · React · GSAP · Three.js · R3F

02 / 03 — Events · Spain · 2025

Iventions

Turning an event agency website into a digital stage.

Spotlight-led experience, GSAP + R3F.

Stack
Next.js · React · GSAP · Three.js · React Three Fiber
With
SERIOUS.BUSINESS · Huy Phan
Recognition
Awwwards SOTD + Developer Award · CSSDA WOTM
Mat Voyce — portfolio hero, giant cyan MAT VOYCE type around a tilted video card
X-ray — Next.js · GSAP · Strapi · WebGL

03 / 03 — Type & Motion · UK · 2025

Mat Voyce

A portfolio that couldn't sit still.

Type becomes interaction. Interaction becomes personality.

Stack
Next.js · GSAP · Strapi · WebGL / Motion
With
Uncommon Studio · Huy Phan
Recognition
Awwwards SOTD + Developer Award · FWA FOTD · GSAP Site of the Year 2025 — Nominee

03 — What was difficult

Beautiful is the easy part.

The part your users never seeis the part that makes everything work.

  1. 01 —
    DOM / LayoutGrid, type and semantic blocks — the flat layer everything sits on.
  2. 02 —
    MotionCurves and timelines drawn on the layout, not after it.
  3. 03 —
    WebGLMesh and shader passes, sized to a frame budget.
  4. 04 —
    ContentCMS blocks and API nodes wired into components.
  5. 05 —
    PerformanceEvery layer simplified until only clean lines are left.
  • Motion is planned with the layout.
  • WebGL is budgeted with performance.
  • SEO and accessibility aren't added after launch.
Blueprint pass 01 — DOM and layout grid of the Mat Voyce hero
01 —DOM / Layout

Grid, type and semantic blocks — the flat layer everything sits on.

Blueprint pass 02 — motion curves over the layout
02 —Motion

Curves and timelines drawn on the layout, not after it.

Blueprint pass 03 — WebGL mesh from the image luminance
03 —WebGL

Mesh and shader passes, sized to a frame budget.

Blueprint pass 04 — content nodes wired to components
04 —Content

CMS blocks and API nodes wired into components.

Blueprint pass 05 — performance, every layer simplified to a few clean lines
05 —Performance

Every layer simplified until only clean lines are left.

04 — Engineering

Built to move.Built to survive production.

A specimen, measured live: the plane on this page, drawn as its own blueprint. Every number below is read from your browser, not typed in.

W — PX
H — PX
Blueprint specimen of the Mat Voyce hero: layout grid, motion curves, luminance mesh, content nodes and performance rulers12345
  1. 1
    Layout

    12-column grid, baseline rhythm, semantic blocks.

  2. 2
    Motion

    expo.out and power3.inOut paths, keyframed on the layout.

  3. 3
    WebGL

    A mesh derived from the image's luminance — one draw call for the whole plane.

  4. 4
    Content

    CMS blocks wired to the components they feed.

  5. 5
    Performance

    Budget 16.7 ms a frame. Measured now: — fps.

Plane — · DPR — · Draw calls —

Motion

GSAP · ScrollTrigger · SplitText · Lenis

WebGL

Three.js · React Three Fiber · GLSL shaders

Production

Next.js · Headless CMS · SEO · Accessibility

05 — Trust

Trusted with the hard part.

“He’s committed to excellenceand has never let meor the team down.”
Mat Voyce, built with Uncommon Studio

Oliver Muñoz

Founder Uncommon Design Group · Awwwards Jury

projects his studio launched with Hon as Lead Developer
3
built together with Uncommon Studio
Mat Voyce
“…he’s a dreamfor every designer.”
From Another, design led by Huy Phan

Huy Phan

Designer · Awwwards Jury

years of projects together
7
design on From Another, Iventions and Mat Voyce
3 / 3
“…one of the most reliableand thoughtful developersI’ve worked with.”
Iventions, built with SERIOUS.BUSINESS

Tijana Ostojic

Head of Operations · SERIOUS.BUSINESS

his role at the agency grew into a client-facing one
Client-facing
built together with SERIOUS.BUSINESS
Iventions

19 international awards across 10 projects — Awwwards SOTD ×7 · The FWA FOTD ×7 · CSS Design Awards WOTD ×5

06 — Ways to work · one object, three lenses

Capabilities —Next.jsHeadless CMS (Sanity, Strapi, Prismic)WordPressWebflowi18nSEO

07 — Process

Figma → Prototype → Build → QA → Launch

← EngineeredAs designed →
  1. 01Figma

    Design review and motion notes before a line of code.

  2. 02Prototype

    The hardest interaction first, in the browser.

  3. 03Build

    Layout, motion, WebGL and CMS built together.

  4. 04QA

    Real devices, frame budgets, accessibility.

  5. 05Launch

    Deploy, handover, documentation.

08 — Close

Bring me the ideayou don't want to compromise.

Start a project

Design ready? Send the Figma.
Still shaping the idea? Send the brief.