Yorgo Tabet
Contact

Creative, WebGL-Driven Frontend Engineering

You're looking at the case study. This site's hero runs on React Three Fiber: a hand-built 3D scene (a desk setup, a rotating cube, a ring, an animated React logo) rendered inside a WebGL canvas. The section reveals down the rest of the page run on GSAP's ScrollTrigger. This page walks through how the site in front of you was actually built.

How this site is actually built

yorgotabet.dev: Hero scene

A 3D hero that doesn't block the page

  • →The React Three Fiber canvas sits in its own client component, loaded through next/dynamic with ssr:false. The WebGL scene never blocks the server-rendered hero text or delays first paint. The headline and CTA render immediately, then the 3D scene mounts on top of them.
  • →The scene sits in a Suspense boundary with a dedicated loading fallback, so models and textures load behind a real loading state and not a blank frame.
  • →A small sizing helper keyed off media queries computes object sizing and positioning per breakpoint. One fixed scene shipped to every device would choke a phone.

yorgotabet.dev: Scroll motion

Scroll-driven reveals without a rebuild on every scroll

  • →Section reveals across the site run through one shared scroll-animation hook that wraps GSAP's ScrollTrigger. Direction, distance and delay are configurable per element.
  • →Animations fire once by default and don't replay on every scroll-back. That keeps the page calm.
  • →Motion direction and timing vary by section. No single identical fade-in is reused everywhere.

Production Box

Client work with a creative, motion-led edge

  • →A creative landing page for a production company, built in React, TypeScript, Node.js and GSAP. The design is motion-led and built from scratch, no template. It's live at productionbox.me.
  • →GearsME, a React Native/Expo automotive and lifestyle app, carries the same attention to interaction and animation into mobile. The interest isn't web-only.

Stack

3D & rendering

Three.jsReact Three Fiber@react-three/dreiWebGL

Motion

GSAPScrollTrigger

Frontend & delivery

ReactTypeScriptNext.js App Router

How the site is kept fast

  1. 01

    LCP first, WebGL second

    Hero text on this site is real server-rendered DOM, not a canvas element. It paints before the 3D scene even starts loading.

  2. 02

    Defer, don't ship it in the critical bundle

    The Three.js scene is imported dynamically on the client, behind a client boundary. It stays out of the initial JS the browser has to parse before anything useful appears.

  3. 03

    Suspense with an actual fallback

    Models and textures resolve behind a real loading state, not a blank canvas.

  4. 04

    Motion with intent

    Scroll and load animations are tuned per section for direction, distance and delay. No generic fade-in is copy-pasted everywhere.

Frequently Asked Questions

Won't a 3D site hurt my SEO or performance?+

Only if the 3D scene is what blocks your page from painting. On this site the hero text is server-rendered and paints immediately. The WebGL canvas loads afterward through a client-only dynamic import, so the two never compete for the same critical path.

Can you build this within an existing design system?+

Yes. Creative and motion work doesn't have to mean throwing out an existing component library or design system. It's a rendering and animation layer that sits on top of one.

What's the fallback for low-end devices or mobile?+

Object scale, position and complexity are computed per breakpoint. Mobile gets a deliberately lighter setup, not the desktop scene shrunk down.

Do you only do 3D/WebGL work, or is this a sideline?+

It's a sideline to the banking and enterprise frontend work that pays the bills, and a serious one. This site and the GSAP-driven motion on Production Box's landing page are the evidence.

What would a typical engagement look like?+

It depends on scope, anywhere from a single animated hero or section to a full creative landing page. Tell me what you're picturing and I'll tell you what's realistic on your timeline.

Want a site that moves without wrecking Core Web Vitals?

Tell me what you're picturing. I'll tell you what's realistic for the timeline and budget.

Start the conversationDownload CV