3D portfolio websites: examples and how to build one

The best 3D portfolio websites are Bruno Simon's drivable island, Henry Heffernan's desk with a working computer on it, Jesse Zhou's ramen shop, and the studio sites of Lusion and Active Theory. In every one of them the 3D is evidence. It shows a skill the visitor might pay for, instead of decorating a list of projects.

A 3D portfolio has two jobs, and they pull against each other: to be memorable, and to get a busy reviewer to the work. The examples below solve that tension in different ways, and the values further down are what you would hand an AI model to build the same kind of page.

Two kinds of 3D portfolio#

Every 3D portfolio is one of two things, and choosing which is the first decision, before any camera or color.

1. The portfolio is the piece. The scene itself is the strongest project. This is the creative developer's portfolio, and sometimes the 3D artist's: the visitor plays with it, and the playing is the proof.
2. The portfolio frames the work. The 3D sets a tone in the hero and then gets out of the way. This is the designer's and the studio's portfolio, where the case studies carry the weight.

The values differ accordingly. A portfolio that is the piece can ask for a loading screen and a minute of attention, because the scene is the thing being judged. A portfolio that frames the work should show a name, a role and a way into the projects in the first paint, with the depth arriving around them.

Vesperion and Kairosveld are both the second kind. Neither loads a 3D library. Vesperion's creature is a recorded film whose frame the cursor chooses, masked on a 2D canvas so it stands in front of the type. Kairosveld's subject is an 11-second WebM loop with a real alpha channel, laid over the headline so she cuts it in half. Both read as depth, and both leave the projects one scroll away.

Which kind fits your work#

The choice follows from what you are hired for. A reviewer judges the portfolio as a sample of the job, so the 3D should be the skill they are buying, or a frame that flatters it.

• Creative developer or WebGL engineer. The portfolio is the piece. A real-time scene in Three.js, with a plain project list one click away.
• 3D artist or motion designer. Usually the frame. Your renders are the work, so show them as films and stills at full quality, and let a scrubbed hero carry one signature shot.
• Product or UI designer. The frame, lightly. One layered hero with real depth, then a grid of case studies that load like any other page.
• Illustrator or character designer. A character in front of the type, or one that turns to look at the cursor, drawn from your own work.
• Studio or agency. The frame, with the 3D as the studio's signature and the client work immediately after it.

In every case the depth should come from your own material. A portfolio hero built around someone else's mascot says nothing about you, which is why the designs on this page are starting points for the technique, with your subject swapped in.

Portfolios that are the piece#

These three are the portfolio-as-proof kind, and each is built on Three.js by its maker's own account.

Bruno Simon#

Bruno Simon's portfolio puts you in a small car on an island with weather, seasons and a lap leaderboard. His 2019 version is still live at 2019.bruno-simon.com and carries an Awwwards Site of the Year badge for 2019; the 2025 rebuild was Awwwards' Site of the Month for January 2026. For a creative developer this is the CV itself, and the fact that he also teaches Three.js through his course, Three.js Journey, makes the island an advertisement for both.

Henry Heffernan#

Henry Heffernan's portfolio is a 3D computer setup whose monitor runs a separate 2D operating system. The smart part is that the OS is a site of its own, live at os.henryheffernan.com, so the work inside it can be reached without the 3D at all. His repository lists Three.js, React, TypeScript and GSAP.

Jesse Zhou#

Jesse Zhou's portfolio opens on a loading screen for "Jesse's Ramen" and a start button, and his repository lists Three.js, GSAP, howler for sound and postprocessing. It received an Honorable Mention on Awwwards in 2022.

The pattern across the three: a place you enter, a single metaphor (a road trip, a desk, a shop) and the projects placed inside that metaphor. How each is built, and how to brief a model to rebuild the technique, is in Three.js website examples.

Studio sites that frame the work#

Studios have the opposite problem. Their 3D has to impress a client in seconds, and then hand the stage to the client work, which is what is actually being bought.

Lusion#

Lusion, a 3D and interactive web studio in Bristol, features client and studio projects on its homepage, among them its own Oryzo, Devin AI and Porsche: Dream Machine. The version Awwwards reviewed as Lusion v3 carries an Awwwards Site of the Year badge for 2023. The 3D is the studio's skill on display, and the projects are the reason to stay.

Active Theory#

Active Theory says it has worked since 2012 with its own in-house tools. Its V6 site was an Awwwards Site of the Day in February 2024, described there as adding new rendering techniques, AI chat and multiplayer, and the studio told the Webby Awards that its V5 site was built in WebGL with Hydra, its internal framework.

Both sites make the same argument, in three parts:

• A studio that sells 3D work shows 3D on its own site.
• The 3D is the opening, and the client work follows it.
• A studio that sells something else should think hard before it does the same.

For the structure of an agency site around the hero, see the agency website prompt, and for the wider field of 3D sites beyond portfolios, see the best 3D websites.

The values a 3D portfolio has to get right#

Whichever kind you build, a handful of numbers decide whether a reviewer reaches the work. None of them is visible in a screenshot, and all of them are felt in the first ten seconds.

The hero itself follows the same rules as any other, covered in hero section design: one headline, one action, and a height you chose rather than inherited. A 3D hero only adds the canvas and its fallback. For the work grid below it, the portfolio website prompt gives the type steps and the order.

Depth without a game#

For most designers the honest answer is that a game is the wrong portfolio. Depth, layered and responsive, gives the 3D impression without making the work wait. It is also easier on a phone. Measured at the time of writing, Kairosveld's alpha loop is 1.76 MB and Vesperion's film 6.3 MB, each behind a still that paints first, and the GPU only has to show a decoded frame.

Three techniques cover most of it, and each is a few lines in a brief.

• A subject in front of the headline. A cut-out or an alpha video sits on a higher layer than the type, so the word reads as behind the person.
• A recorded head turn picked by the cursor. The film never plays; the pointer's x chooses the frame, so the subject seems to look at the visitor.
• A scroll-played film. The story of the studio told as one shot, scrubbed by the scroll across a pinned stage.

Haymaker is the scroll-played film for an agency site. Onward gets its depth from type layering and a character in front of the word. Woolgather puts the cursor trick at the bottom of the page, where a portfolio usually goes flat; more closings like it are in website footer design.

What the prompt has to specify#

The brief for a portfolio-as-frame hero has a different set of fields from a real-time scene, and they are all small. Here is an illustrative fragment for a subject-in-front-of-type hero, written for this article:

Layers, back to front: ground #12161c; headline; subject video; name strip.
Subject: WebM with alpha, 1600x900, 11 s loop, muted, playsinline, poster = frame 1.
Alpha check: draw frame 1 to a 16px canvas; if a corner that is transparent in
  the asset comes back opaque, the browser dropped the alpha: show the poster.
Headline: one line, clamp(96px, 14vw, 240px), letter-spacing -0.03em.
Work: the project grid starts at 100svh; first card visible on a 390px phone.
Reduced motion: poster only, no loop.

The alpha check is the line people skip. Some browsers decode a transparent video and drop its alpha, which paints a black rectangle over the headline, and there is no feature query that detects it. Testing one pixel of the decoded frame does.

For a portfolio that is the piece, use the real-time fields in what a 3D website AI prompt must contain: the subject, camera, light, material, motion, ceiling and refusals. Add two lines that only a portfolio needs: where each project lives in the scene, and the URL of the plain page each one opens. For cursor and drag patterns that stop short of a full game, see interactive website examples.

Mistakes that bury the work#

3D portfolios that disappoint usually fail on access.

• A loader before the name. The first thing a reviewer reads should be who you are and what you do, not a percentage.
• Projects only inside the scene. If the case studies exist only as objects in a 3D room, search engines cannot index them and nobody can link to one.
• The same scene on a phone. Touch needs its own controls, or a lighter path that skips the scene.
• A metaphor that hides the menu. A desk, a shop or a planet is charming once. The second visit should take one click.
• Showing the engine instead of the eye. For a designer, a hero that says "I can light and frame a picture" beats one that says "I can write shaders".

Each of these has the same fix: decide what a reviewer should read in the first paint, write it into the brief as HTML, and let the 3D arrive around it.

Start with Vesperion#

The quickest route to a 3D portfolio hero that still puts the work first is to build one from a complete specification and swap in your own subject.

Open Vesperion and copy its prompt; it is free with a free account. Paste it into Claude, ChatGPT or Cursor, and you get a portfolio hero with a character in front of a huge word, eyes that follow the cursor, and every value written down, from the palette to the frame-picking code. Then replace the creature with your own render and the word with your name. The library has the rest, and Kairosveld is the version with a person.