Paracosm Studio
Why I’m making it
I love maps, stories and the possibility of worlds that don’t exist yet. Paracosm brings those interests together in a workspace for planets, civilisations and the stories that connect them.
My part
Creative development, with work on representing 3D world data, saving it as JSON and reconstructing it in the browser. This is where my interest in logical systems meets my imagination.
Start with a world
Explore generated worlds and their map layers, then develop the places and civilisations within them.
Give the world a story
Connect geography with celestial systems and canon so the setting has more than a visual surface.
The usability challenge
Keep a complex creative process understandable: the world should remain something you can explore and work on, rather than a collection of disconnected data.
An editable representation
The central challenge is saving a useful representation of a generated 3D world and rebuilding it later, rather than treating the rendered scene as the only source of truth.
Persistence and reconstruction
My work uses JSON persistence, Supabase and React to connect saved world data with its front-end reconstruction.
Where the interests meet
Map data, 3D interaction, procedural worlds and storytelling all have to describe the same place. That connection is the part I find especially interesting.
Explore Paracosm Studio
3D Map Art Generator
A map that becomes an object
This is my 3D map art generator, currently called Contour Studio. It turns real terrain, roads, waterways and buildings into a framed relief sculpture, split into pieces for a 3D printer.
Why it feels like me
It combines manipulating geographic data, 3D modelling, software and physical making. The idea is to take somewhere meaningful and turn it into something tangible.
Where it is now
The generator runs locally on a computer. The sample here is a real exported model; it lets you explore the result without installing the generator. Physical print testing is still part of the development work.
1. Choose a place and a size
Search for a location, move or resize the selected map area, and choose the artwork dimensions. The tile layout adapts to the configured printer’s build area.
2. Make it your own
Choose terrain and building styles, adjust the frame and add personal-place markers. Advanced controls sit with the part of the artwork they affect.
3. Inspect, then make
Generate the model, inspect the assembled or separated pieces, and export STL files, a 3MF assembly and an assembly guide. Changes mark existing previews as out of date so the next step is clear.
Real geography to physical geometry
React, TypeScript and MapLibre handle the selection workspace. A Python/FastAPI engine processes terrain and map features using tools including NumPy, Shapely, Manifold3D and Trimesh. Three.js renders the resulting model.
One landscape, then individual tiles
The engine builds a continuous landscape before cutting it into tiles. This keeps the neighbouring edges based on the same source surface, instead of sampling each piece independently.
Designing for a printer
Geometry is expressed in millimetres. Print-pack generation includes solid-mesh checks, local print-bed coordinates, alignment keys and assembly information. The data comes from terrain sources, OpenStreetMap and, in the current generator, supplementary Overture building outlines.
Desktop Displays
Something beyond the screen
A collaborative project connecting a physical desktop display with software and live information. It gives me a way to bring product design, electronics, 3D printing and creative brand work into the same project.
What I’m working on
The physical enclosure, iteration through CAD and printing, the product’s identity, and visual demonstrations of how it could live on a desk. I also developed the idea of the display bezel transforming into the brand’s D mark.
A product in development
The images and film are renders of an earlier Model A design. Enclosure fit, clips and ventilation continue to be developed and tested; these visuals show the product direction.
Useful at a glance
The design explores information you can keep in view on a small physical display. The room demos show flight and train display concepts.
An object that belongs on a desk
The screen, enclosure, cable access and proportions need to work together. I use room renders to consider the display in a workspace, studio or living room.
Make it maintainable
The enclosure work includes fit, screen retention and deliberate hand access. Ease of assembly and serviceability are part of the design, alongside appearance.
From CAD to a printed enclosure
The project uses 3D models, STL/STEP exports and small fit-test pieces to explore tolerances, clips and the housing around the display and Raspberry Pi electronics.
Physical and digital parts
The physical product is being developed alongside software as a service. Getting the housing, electronics and on-screen experience to work together is the central challenge.
Showing the idea clearly
Blender scenes place the product in four interiors, with a continuous camera sequence and an editable bezel-to-logo transformation. The film here is that actual development asset, rather than a substitute product image.
Visit Desktop Displays
Vault Barbershop
A website with a real job to do
A website and booking system for a Swinton barbershop. It needs to give the business a digital home and support the everyday work of getting appointments into the diary.
My part
I built, tested, deployed and iterated on the system using AI-assisted development, including JavaScript and React changes. It handles live bookings for multiple barbers, with ongoing fixes and improvements.
Choose the appointment
Customers can explore the shop, choose a service and barber, and book an available appointment.
Make returning straightforward
The customer area gives people a place to manage their bookings. The staff experience is separate, with calendars and controls appropriate to barbers and administrators.
Support the whole journey
Availability, blocked time and confirmation emails matter as much as the first screen. The design has to work for the person booking and the person managing the day.
The application
A Next.js/React front end connects to Supabase for authentication and database-backed scheduling. The project includes customer, barber and administrator roles.
Scheduling and access
Services, barber pricing, working hours, blocked times and bookings are separate parts of the data model. Role-based access and database row-level policies support the different views.
The work after launch
Resend handles email integration. Loading the right records, handling authentication and improving the booking flow are ongoing engineering concerns in a service people actively use.
Visit Vault Barbershop
Power X Tanning
A digital home with personality
A website for a tanning studio in Mexborough, built around its black and neon-pink identity. It connects the creative side of presenting a business with the practical information visitors need.
What I care about here
The design should feel like the business while making it easy to work out where to go, when it is open and what to expect.
Plan a visit
Find the opening hours, studio location and parking information without having to piece them together from different places.
Get a feel for the studio
The imagery, typography and colour give the site its character across desktop and mobile layouts.
Keep information useful
The project includes a content editor for the owner so the business information can be maintained through a focused editing experience.
A focused web application
The local project is built with Next.js and uses a database-free content approach, with a separate single-owner editor.
Editing and access
The editor uses authenticated sessions and checks changes on the server. The visitor-facing site stays focused on studio information.
Discovery and presentation
The implementation includes metadata, structured business information, a sitemap and social previews alongside the responsive page design.
Visit Power X Tanning
Police Detective Game
A world you investigate through software
A police detective game built around a fictional British workstation called POLARIS. I’m using it to explore agentic development, creating stories and the logic of interconnected systems.
The experiment
The player works through desktop applications, case records, evidence and a fictional web. I’m interested in how a convincing interface can become part of the storytelling.
Where it is now
There is a playable development build and an introductory investigation. A complete crime campaign and final case-resolution flow are still in development.
Enter the workstation
Open the application launcher, read your allocation and move between the tools on the desktop.
Follow information across tools
Use NEXUS for casework and records, inspect evidence, research fictional websites and keep notes. The game connects what you find in one place with what you can investigate elsewhere.
Make the complexity navigable
Windows retain their state, applications have familiar controls, and the fictional web has its own search. The usability challenge is helping players follow a lead without removing the pleasure of discovery.
A browser-based desktop
React, TypeScript and Vinext/Vite support the workstation, window lifecycle, application navigation and game state.
A connected fictional world
The research browser uses an internal site catalogue and local search index. Its destinations belong to the fictional game world; the in-game web is not a wrapper around live external websites.
Persistence and collaboration
The project uses D1 for stored records and R2 for uploaded evidence, with account and team access controls. These sit alongside device preferences and recovery behaviour for personal work.
Explore the development build
