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 — and the section reveals throughout the page run on GSAP's ScrollTrigger. Rather than describe creative frontend work in the abstract, this page walks through how the site in front of you was actually built, because that's more honest than a portfolio screenshot.

How this site is actually built

yorgotabet.dev — Hero scene

A 3D hero that doesn't block the page

  • →The React Three Fiber canvas is isolated into its own client component and loaded via next/dynamic with ssr:false, so the WebGL scene never blocks server-rendered hero text or delays first paint — the headline and CTA render immediately; the 3D scene mounts on top of it.
  • →The scene sits in a Suspense boundary with a dedicated loading fallback rather than a blank frame while models and textures load.
  • →Object sizing and positioning are computed per breakpoint via a small sizing helper keyed off media queries, instead of shipping one fixed scene and letting mobile devices choke on it.

yorgotabet.dev — Scroll motion

Scroll-driven reveals without a rebuild on every scroll

  • →Section reveals across the site run through a shared scroll-animation hook wrapping GSAP's ScrollTrigger — direction, distance, and delay are configurable per element.
  • →Animations default to firing once rather than replaying on every scroll-back, which keeps the page calm instead of janky.
  • →Motion direction and timing vary by section rather than one identical fade-in reused everywhere — an easy detail to skip under deadline, and one this site doesn't.

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 — motion-led rather than a template, live at productionbox.me.
  • →GearsME, a React Native/Expo automotive and lifestyle app, carries the same attention to interaction and animation into mobile — proof it isn't a web-only interest.

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

    The rule on this site: hero text is real server-rendered DOM, not a canvas element, and 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 dynamically imported client-side behind a client boundary, so it isn't part of the initial JS the browser has to parse before anything useful appears.

  3. 03

    Suspense with an actual fallback

    A loading state, not a blank canvas, while models and textures resolve.

  4. 04

    Motion with intent

    Scroll and load animations are tuned per section — direction, distance, delay — instead of one generic fade-in 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 via a client-only dynamic import, so the two don't 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 on top, not a replacement for one.

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

Object scale, position, and complexity are computed per breakpoint rather than shipping one fixed scene to every device — 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, but a real one — this site and the GSAP-driven motion on Production Box's landing page are proof it's not just a hobby claim.

What would a typical engagement look like?+

Depends on scope — anything 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