mackMack Grissom
Engineering possibility.

Your website should be remembered after the tab closes.

Creative WebGL and Three.js development

Interactive 3D websites and creative frontend development with Three.js and WebGL, paired with readable content, responsive layouts, and a usable fallback.

The situation

A three-dimensional scene can explain a product, invite exploration, or give a brand a visual identity that is difficult to forget. It works best when the interaction has a purpose and the surrounding page still says something clear. I combine creative frontend engineering with the practical work of building a useful website.

The live example is this portfolio. Its metal sculpture is rendered with Three.js, offers three selectable forms, and responds to pointer movement. The written content is delivered separately, so reading about the work does not depend on a graphics context or a downloaded model file.

How I approach it

Choose the visual idea before the effect

We decide what visitors should remember and what the scene should help them understand. That could be an explorable object, a product demonstration, or a single sculptural interaction. The concept determines whether WebGL is the right medium.

Prototype on the target devices

A desktop GPU can hide expensive decisions. I evaluate geometry, materials, asset sizes, and pixel density against the intended devices early, then spend the performance budget on the part of the scene that matters.

Integrate the whole page

Typography, layout, controls, and the 3D layer are designed together. Important text stays in HTML. The interaction needs clear input behavior and must coexist with normal scrolling, links, and navigation.

Provide a complete fallback

Reduced-motion preferences, paused animation, hidden tabs, and unavailable WebGL are part of the implementation. The fallback preserves the page's purpose, and the production build is checked alongside the visual experience.

What gets delivered

  • Art direction and interactive concept
  • Three.js scene integrated with the frontend
  • Responsive interface and accessible controls
  • Reduced-motion and no-WebGL behavior
  • Performance review, production build, and handoff

What it costs to get wrong

  • The spectacle makes the main message hard to read.
  • The scene continues consuming rendering resources when it is offscreen.
  • A device without WebGL sees an empty hero or cannot use the navigation.

Why you can believe this

The homepage is the working demonstration: a procedural Three.js metal sculpture, three form controls, capped pixel density, offscreen render suppression, and a CSS fallback. The design and implementation are mine.
Explore the work

Questions buyers ask

Can a WebGL website still be search-engine friendly?
Yes. The important headings, descriptions, links, and project information should be delivered as HTML. WebGL can provide the visual layer while the rest of the page remains readable and crawlable.
Will an interactive 3D site work on mobile?
It can, if device performance and input behavior are part of the scope. Geometry, resolution, materials, and asset size need deliberate limits. A mobile layout and a non-WebGL fallback should be designed rather than left to chance.
Do we need a 3D model before starting?
Not always. A procedural scene can be built from geometry, as this portfolio is. A specific physical product may require a supplied or commissioned model and appropriate optimization.
Can you add a Three.js section to an existing Next.js site?
Yes. The scene can be loaded as an isolated visual component while the page content keeps its existing rendering strategy. I first review the layout, performance constraints, and interaction requirements.

Related writing

Other capabilities