Back to Portfolio
Services

Web design · 3D

3D & WebGL Website Design

A 3D website puts a real-time object or scene inside the page, driven by scroll or pointer, so a product can be turned and examined in the browser instead of shown in a flat photograph. I'm Masoud Zarei, an independent 3D website designer and Three.js developer; I direct, design and build these sites myself. It suits products and spaces that a still image undersells.

Start a projectSee the work
A 3D watch staged in a circular frame, from the CASIO 44C web concept
Self-initiated conceptCASIO 44C
Price
Projects start at $500
Reply time
Within 24 hours
Works with
Brands worldwide, in English or Persian

What a WebGL site is made of

WebGL is how the browser draws 3D graphics on the graphics card, and Three.js is the library I build on. GSAP ties the scene to scroll, so the camera, the light or the object itself responds as the visitor moves down the page.

A 3D scene has a cost: file weight, battery, and a visitor on an old phone. Part of the job is deciding what truly needs to be real-time and what a good still, a short video or a lighter effect can carry.

What the existing work shows

On this site
The lens in the home page's spotlight section is a Three.js scene. Its model is baked ahead of time into a compact file, the scene loads as the section approaches, and a frame is drawn only while scroll is moving it. See it on the home page.
Reduced motion
With reduced motion set, that section becomes a static layout and the 3D canvas is not shown.
Narrow screens
Below 1024px the section is its own single-column design, with the object taking a larger share of a phone screen.
Concepts
CASIO 44C and Life Energy Drink put a 3D product at the centre of a staged frame. Both are self-initiated, with no client results claimed.

What's included

Creative direction
What the object does, what the camera sees, and where the 3D stops and the page begins.
Model preparation
Trimming geometry, compressing textures and baking light that doesn't need to be live. The model can come from you, or I can source a licensed one.
Three.js scene build
Lighting, materials, camera paths and shaders written for the specific object.
Scroll choreography
GSAP drives the scene from scroll position, with the timing authored in one place so it can be tuned.
Performance budget
The scene loads late, draws only when something changes, and has a lighter or static fallback for weak devices.
Accessibility
Visitors with reduced motion get a static layout, keyboard focus stays visible, and content never lives only inside the canvas.

How a project runs

  1. Brief and asset review

    We look at the product, the models you already have and the devices your audience actually uses.

  2. Scene and scroll storyboard

    A sequence of states for the object, tied to scroll, before anything is modelled in code.

  3. Prototype on real devices

    A rough version runs on a phone early, so weight and frame rate are known before polish goes in.

  4. Build and tuning

    Final scene, scroll timing, fallbacks and the responsive layout.

  5. Launch

    Checks across screen sizes and browsers, then live. Training and post-launch support are included.

Related case studies

All three are self-initiated concepts, shown as such. No commission from the brands named is implied, and no results are claimed.

Questions

Do I need a 3D model already?

Not necessarily. I can work from a model you have, or source a licensed one and prepare it for the web. I also model from scratch when you need a custom piece. That is priced separately from the build and changes the scope, so say so early.

Will a WebGL website be slow?

It doesn't have to be. The scene loads as the visitor approaches it, draws only when something is changing, and models and textures are cut down before they ship. I plan a lighter fallback for weak devices.

Does a 3D site work on phones?

Modern phones run these scenes well, and each project gets its own single-column layout. I test on real devices and scale the scene down where a phone needs it.

How much does a 3D website cost?

Projects start at $500. 3D scenes sit toward the heavier end because of model preparation and device testing, so I quote them after seeing the model and the brief.

Are you a designer or a Three.js developer?

Both. I direct and design the page and write the Three.js and GSAP code myself, so nothing gets lost between a design file and the build.

Tell me about the project

Send the product, the model if you have one, and where the site has to run. I reply within 24 hours.

Or use the contact form on the home page