designsystems

3 posts
Doug SilkstoneLiving mockups

Living mockups

Editable 3D product mockups with live screens and LED walls

Design & engineering · Built the scenes, surface mappings and inline editor

View Living mockups project
  • A set of Three.js product scenes — a newspaper, a phone in hand, a reflection room and an industrial laptop — where every screen, page and LED surface is a live, editable texture rather than a flat render.
  • The headline and the artwork are edited inline; the change lands on the curved wall, the reflections and the phone display at once, because each surface is mapped back to one shared source.
  • Backgrounds are generated, the reflection and emissive shaders are hand-written, and the whole set runs in the browser at interactive frame rates.
  • Part of the Studies & Experiments gallery: a collection of standalone scenes that can be dragged, played and inspected.
Open the studyHow it was built
#typescript#react#nextjs#motion#designsystems
Doug SilkstoneDigital patterns

Digital patterns

Generative poster system for an events programme

Design & engineering · Built the pattern engine, editor and export

View Digital patterns project
  • A story generator for a week of club nights: six animated pattern families — pixel, angular, wave and more — each seeded, coloured and typeset into a poster that stays legible at any scale.
  • Every field on every poster is editable in place: date, genre, headline, colour, pattern scale and animation speed, with a one-click regenerate per poster.
  • Posters export as stills for print and social, so the same system that runs on screen produces the programme's artwork.
Open the study
#typescript#react#motion#designsystems
Doug SilkstoneStudies & Experiments

Studies & Experiments

Interactive studies in 3D, shaders, sound and motion

Design & engineering · Built every scene, instrument and interaction

View Studies & Experiments project
  • A gallery of standalone scenes: a full event lighting show, a playable Silksong room, editable living mockups, trading cards with prismatic foil, a working Roland 303 and 909 rack, a repair bench and a gravitational-lens shader.
  • Each plate is its own build — Three.js scenes, custom GLSL, Web Audio, soft-body physics and print-style typography — and each responds to the pointer, keyboard or touch.
  • The gallery itself is a piece of the work: a printed-sheet metaphor with registration marks, tape stock and a lens that pulls back while the sheet travels, plus a presentation mode that hides every instrument for demos and recordings.
Open the gallery
#typescript#react#motion#designsystems