Skip to content
Back to projects

Case study 11 / 18 · Websites & apps

Mithril Mesh

My project

Status: MVP built on mock services; production backend planned

A library of cinematic design kits for AI-built websites: templates, 3D scenes, backgrounds and micro-interactions, each with a live showcase and a ready-made prompt. The MVP runs on mock services, with code generation, accounts and payments planned for a production backend.

Case study

Mithril Mesh is my library of cinematic design kits for AI-built websites. Each template, 3D scene, background or micro-interaction comes with a live showcase page and a structured prompt. It is a Next.js app with its own Three.js scene engine, running on typed mock services while the production backend is planned.

The problem

Websites built with AI tools often look the same. Mithril Mesh starts each site from a distinctive design with motion and 3D, and hands over the prompt to build it.

What was built

  • A filterable, searchable library of 20 items, with a drawer for each that shows a live scene and the prompt steps.
  • A cinematic showcase page for every template: a persistent 3D canvas whose camera follows the scroll and whose scenes react to the pointer.
  • A homepage shader that melts away into the library as you scroll, a generation studio and dashboard on mock services, and pricing with plan-based download rules.

Key decisions

  • Mock services return the same shapes the planned backend will, so the real endpoints can replace them without changing the interface.
  • Scenes load lazily and render only in view, and at most three 3D canvases run at once, so browsers do not drop WebGL contexts.
  • Reduced motion and small touch devices get gradient fallbacks instead of 3D.

Where it stands

The MVP runs locally on mock services and is not public yet. Code generation with the Claude API, accounts, payments and storage are planned, not built.

How it was built

Frontend

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Three.js — The liquid-chrome homepage shader and the scroll-driven showcase scenes
  • React Three Fiber and Drei
  • React Three Postprocessing — Bloom, chromatic aberration, noise and depth of field
  • GLSL — Custom noise shaders shared across scenes
  • Radix UI — Accessible interface primitives
  • Zustand — Library, generation, sign-in and download state, saved in the browser
  • React Hook Form and Zod — Forms
  • Framer Motion
  • Lenis — Smooth scrolling
  • Shiki — Syntax-highlighted generated code
  • JSZip — Downloadable asset kits

AI

  • Prompt templates — A structured master prompt for every template, ready to paste into Claude or ChatGPT

Infrastructure

  • Docker Compose

Testing

  • Vitest
  • Testing Library
  • Playwright — Records the template preview videos