The four case studies below are among the best web work shipped anywhere in 2026. We don't take credit for any of them — every one was built by a studio operating at the very top of the field. We're studying them publicly because the patterns they pioneer are the patterns we're folding into our own client work. This is what world-class looks like in 2026, and these are the specific techniques worth learning from.
These are not picked for their beauty. They're picked because each one demonstrates a different fundamental shift in what's possible in 2026, and they collectively map out where the field is heading.
1. Bruno Simon's WebGPU portfolio — when a portfolio becomes a small video game
Studio: Bruno Simon (solo). Live site: bruno-simon.com. Published: Awwwards case study, March 11, 2026.
Bruno Simon's 2019 portfolio — the one where you drive a small car around a cartoon island to view his work — became one of the most-referenced agency portfolio sites of the past decade. The 2025 follow-up is the WebGPU-era successor, and it's no longer a portfolio at all. It's a small game.
You drive a car around a fully simulated island with a day-night cycle, four seasons, dynamic weather, persistent multiplayer "Whispers" (anonymous messages other visitors have left), a daily-reset racetrack with a global top-10 leaderboard, unlockable vehicle skins, achievements, and a falling-into-the-abyss counter that doesn't go down. All UI elements are 3D objects in the world. There's effectively no HTML interface.
The specific techniques he used:
- Three.js with TSL (Three.js Shading Language) — shaders written directly in JavaScript, auto-targeting WebGPU where available and falling back to WebGL.
- Blender-based authoring with naming-convention exports. A mesh named
refLandingPhysicalFixedis auto-converted into a fixed physics body exposed in JS aslanding. Empties define collision shapes, respawn points, area boundaries. - Stylized grass at 78,400 triangles — one triangle per blade, looped seamlessly toward the camera edge to fake full ground coverage. The same trick works for water, terrain, rain.
- SDF-textured tree foliage that dynamically shrinks when the car is behind it, so the driver can see ahead.
- Aggressive performance work: instancing for repeated meshes, frustum culling, palette-texture color packing (one texture stores all scene colors, each model retrieves via UV mapping), DRACO geometry compression, ETC1S + UASTC GPU-friendly texture compression.
- Multiplayer designed as ambience, not gameplay. Whispers are moderated by OpenAI's free moderation model; a global cookie-acceptance counter is a running joke; the daily-reset leaderboard surfaces at the racetrack start line. No shared physics, no real-time sync.
"Most of the time, performance is the real constraint on creativity. Adding hundreds of cool features isn't the hard part, but if the experience runs at 10 FPS, no one will stick around." — Bruno Simon
What it means for briefing agencies. Bruno's 2025 portfolio is the proof point that WebGPU is no longer experimental. If your agency tells you "WebGPU isn't ready for production," they're behind. The hard part has shifted from "can the browser do this?" to "can we design it well enough that the performance budget pays for itself in attention?" That's a creative-direction problem, not an engineering one.
The whole island runs at 60fps on a mid-2022 laptop. The technique stack is now teachable. Expect to see this pattern — drivable / walkable / explorable 3D environments — start appearing on serious brand sites in the next twelve months.
2. UNESCO's Virtual Museum of Stolen Cultural Objects — when AI is a tool, not a feature
Studio: makemepulse, Paris. Client: UNESCO. Architectural vision: Francis Kéré. Awwwards case study: March 25, 2026.
A virtual museum whose collection is made up entirely of artifacts that have been stolen. Three years total project timeline. A team of 25+ across art direction, UX, 3D, creative development, strategy, and production. WebXR / WebVR support for headset users to walk through galleries at human scale.
The architectural metaphor: a generative "baobab" tree that branches into new perspectives as the visitor scrolls. There are no fixed galleries. The discovery pattern is closer to social-media infinite scroll than to traditional museum navigation. The intent is to "make absence visible."
The technical stack:
- Nuxt.js + TypeScript + Tailwind for the application shell.
- WebGL rendering via makemepulse's proprietary NanoGL engine — not Three.js. A studio of this size builds its own engine where the constraints justify it.
- WebXR / WebVR mode with headset support, designed so the spatial experience matches the editorial one.
- Procedural generative architecture with level-of-detail (LOD) management — galleries stream in based on scroll position; distant geometry simplifies or unloads.
- Hybrid AI + manual 3D reconstruction. AI generates a base mesh from a single low-quality reference photo (often the only Interpol photograph that survives). A 3D artist then manually rebuilds missing geometry, merges with the usable AI output, and matches material. Specific examples from the case study: the "Caliz 3" reconstruction recovered only the upper section via AI; the "Ring" was rebuilt from a black-areas-only source texture; the Virgin and Child sculpture's references had to be retouched before AI would process them (its moderation system refused the source images).
- Original Interpol source photographs displayed alongside reconstructions — a deliberate ethical and transparency choice. The museum admits, on every object's page, that the reconstructions are fragmentary.
"AI accelerated the process, but craftsmanship made the objects believable." — makemepulse
"If the project proves anything, it is that technology can be more than a tool for innovation: it can be a medium for remembrance, empathy, and connection across cultures and time." — makemepulse
What it means for briefing agencies. This is the highest-budget, highest-stakes "AI assists, humans craft" project published this year. The case study is unusually honest about where AI broke down — moderation refusals on artifact photography that included nudity, fragmentary outputs requiring manual rebuilding, decisions about when to show the source photo alongside the AI reconstruction.
If you're considering an AI-assisted creative project, the takeaway is: budget for human craftsmanship at every step where AI output goes into a final artifact. The studios doing this well aren't replacing artists with prompts. They're using AI to give artists a stronger starting point.
3. 100 Lost Species — when restraint is the design language
Studio: Immersive Garden (Paris) with 60FPS. Self-initiated. Awwwards case study: April 1, 2026.
A scrolling digital memorial for 100 extinct species. AI-assisted illustrations bring back creatures that can never be photographed; soft watercolor textures, generous negative space, neutral palettes. A timer runs continuously in the background regardless of where the visitor is in the experience — a deliberate metaphor for the irreversibility of extinction. The intent is "create a pause," not educate through data viz.
The specific techniques:
- HTML/CSS/JavaScript with GSAP plus a custom scroll-based animation system. No heavy framework. No build complexity.
- AI-assisted illustration workflow for species reconstruction — generated base imagery then heavily refined by hand. The credits list a dedicated AI illustrations lead (Nicolas Courjean).
- Persistent global timer overlaid across the full experience — a single design element that does enormous editorial work.
- Interactive opening carousel that presents all 100 species "before absence" — establishing the contrast.
- Spatialized sound design by Mooders, a project distinct enough to credit separately from development.
- Hard technical goal: mobile adaptability with controlled asset streaming — the case study mentions this as a deliberate constraint, not an afterthought.
"Extinction moves forward whether it is observed or ignored." — Immersive Garden
"AI remains invisible throughout the project. It supports the process without becoming the focus of the work." — Immersive Garden
"The intention was never to educate through charts or dense data. The goal was to create a pause." — Immersive Garden
What it means for briefing agencies. This is a useful counterpoint to the maximalism of Bruno's portfolio or UNESCO's museum. The aesthetic is restraint. The technique stack is intentionally small — GSAP and vanilla JavaScript, not WebGPU and a custom engine. The reason it ranks alongside those is that the editorial intent is so clear and the execution is so disciplined.
When you brief an agency on a project where the subject matter is heavy — grief, loss, scientific seriousness, moral weight — push back against the impulse to "make it interactive." 100 Lost Species is interactive in exactly one way: you scroll. Everything else is held still on purpose.
4. Farm Minerals — when AI quietly handles the production pipeline
Studio: ADELT Agency. Client: Farm Minerals (AgriTech — fertilizers and feed additives that deliver nutrients directly into plant cells). Awwwards case study: April 15, 2026.
A B2B AgriTech site with a conservative audience (farmers, agronomists, researchers), built on a four-stage editorial spine: Problem → Explanation → Evidence → Application. Frame: up to 70% of nitrogen in conventional fertilizer never reaches crops. Solution: a tablet that delivers nutrients at the cellular level. The whole site is built around the physical CropTab product, not abstract biology.
The technical and production stack:
- Built in Webflow, with Webflow's native CMS for product data and informational pages.
- GSAP for the storytelling animations and panel transitions.
- Designed in Figma before build.
- Heavy AI-assisted production pipeline for product imagery — and this is where the case study gets specific:
- Veo 3 generated the 360-degree rotating product video
- Kling animated the tablet-dissolving sequence
- Nano Banana for product scene composition
- Kive.ai for contextual product mockups
- Photoshop for final compositing
- Webflow's global CDN for large-asset delivery — the case study mentions hosting infrastructure as a deliberate choice.
- Progressive information disclosure as the user scrolls — single-idea sections with generous spacing and large typography.
"You can introduce complex science — as long as the story stays grounded in reality and the visuals and animations help translate it." — ADELT Agency
"In conservative industries such as agriculture, trust matters more than visual spectacle." — ADELT Agency
What it means for briefing agencies. Farm Minerals is the case study to point at when a client says "we don't want one of those over-designed AI-looking websites." The aesthetic is sober, the technique stack is approachable (Webflow + GSAP), but the production pipeline behind the product imagery is entirely AI-assisted. Five different AI tools were used to produce a single set of product images — and the case study is upfront about which tool did what.
For B2B and industrial clients, this is the new template: conservative on the front end, AI-leveraged in the production pipeline. The client never has to advertise "we used AI" — but the cost of producing that quality of product imagery dropped by an order of magnitude, and the speed went from months to days.
The pattern across all four
These four case studies are doing different things visually. What they share is a structural observation about where 2026 web design is going:
The technology is no longer the constraint. WebGPU works. Real-time 3D in the browser works. AI-assisted imagery, illustration, and 3D reconstruction work. WebXR works. Six years ago, every one of these projects would have required a dedicated rendering team. In 2026, they're built by studios of 1 to 25 people.
Editorial judgment is now the bottleneck. Bruno's portfolio works because it has a clear point of view about what a portfolio is for. 100 Lost Species works because it commits absolutely to restraint. UNESCO's museum works because every technical decision serves a moral intent. Farm Minerals works because the agency chose conservative aesthetics for a conservative audience and meant it.
The agencies that win in this environment are the ones with strong taste, not the ones with the deepest technical bench. The technical bench is increasingly available off-the-shelf — Three.js, GSAP, Webflow, Claude, Veo, Kling. The taste isn't.
If you're briefing an agency in 2026, the question to ask isn't "what tools do you use?" — they all use roughly the same tools. The question is "show me how you decided what not to do." The answer to that question is what separates the four sites above from the thousand other sites that tried to do the same thing.
If you're looking for an agency partner who's thinking this way — we should talk. The patterns above are the patterns we're using on client work, with attribution where we owe it and conviction where we don't.
Keep reading
- SEO silos that actually rank: the topic cluster pattern for 2026
- Claude Design Is Great. It's Not a Designer. Here's Why.
Work with Rough Works
Need a partner for your next site? We're a Vancouver-based digital agency building websites and AI-enhanced experiences for brands across Canada and the United States. Start a project →
