Miswak Case — from product model to launch website
A small everyday object, presented with the same care as the product itself. Interactive 3D, earthy colours, and a choice to own it or print it.
Client — Miswak Case · A home for your daily ritual
Miswak Case brings a ventilated, flip-top miswak holder to the web through a product-led launch experience. The work connects an earlier STL-based browser viewer with a live site built around the case, its details, and its place in a daily routine. It reflects the hands-on approach of Anders Kitson and Agency7: build the experience, work with the real product, and ship something people can explore.
A physical product with a digital front door
Miswak Case is a 15.5 cm holder with geometric ventilation openings, an attached flip-top lid, and a slim silhouette. Its website introduces the design in Sage, Sand, and Midnight, then offers two ways to make it part of a routine: a physical case or a digital edition for printing at home.
The visual language follows the object. Soft cream backgrounds, deep green typography, geometric details, and a large product view give the case room to explain itself. Copy stays close to everyday use: airflow, portability, opening the lid, and carrying the case.
For Anders, whose Agency7 work spans production software and interactive web experiences, this project brings the same builder mindset into a physical-product setting. The website connects the model to the story a visitor needs before choosing a product.
Make the details tangible on a screen
A small object has to communicate a lot online. Visitors need to understand its shape, how the lid works, why the openings are there, and whether their miswak will fit. The website needed to make those practical details easy to explore while preserving the quiet, considered character of the brand.
The physical and digital editions also need different explanations. Someone choosing a finished case wants fit and care information. Someone printing their own needs file formats, material guidance, and print notes. Both paths belong to the same product story.
What we built
An interactive product introduction
A prominent 3D product view with drag-to-explore interaction, an animation pause control, and colour selection lets visitors inspect the case before reading the finer details.
A visual identity carried through the page
Cream, sage, sand, and deep green tones sit alongside editorial typography and geometric motifs. The hero, detail sections, colour cards, and product selector share the same visual language.
Three connected colourways
Sage, Sand, and Midnight appear throughout the experience, connecting the initial product exploration to the visitor’s chosen edition and colour.
Physical and print-your-own editions
A product selector presents a finished case alongside a digital edition. The digital offer describes STL and 3MF files, an editable Blender file, and print notes.
Practical product guidance
Fit, lid operation, what is included, printing guidance, and care instructions are collected in an accessible question-and-answer section.
An honest launch state
The live site labels the collection as a preview, marks prices as subject to confirmation, and explains that purchases open when the collection launches.
The build behind the experience
Web foundation
- —Next.js + React — The project’s web foundation, connecting product content and interactive components.
- —TypeScript — Typed application code in the source project.
3D prototyping
- —Three.js + React Three Fiber — The earlier local viewer renders the actual STL product geometry in a browser canvas.
- —Drei + STLLoader — Orbit controls, model loading, and a custom-text preview in the earlier prototype.
Product and presentation
- —STL, 3MF + Blender — The live digital edition describes printable models, an editable source file, and print notes.
- —Vercel — Hosting for the live product website.
From first look to product choice
The page moves from an emotional introduction to a practical decision, keeping the case itself at the centre.
- 01
Explore the case
Start with the interactive product view, inspect the form, and switch between the three colours.
- 02
Understand the details
Learn about the geometric openings, attached lid, and everyday dimensions through short, focused sections.
- 03
Choose an edition
Compare a finished physical case with the digital files for printing your own, then choose a colour and quantity.
- 04
Check fit and next steps
Read the fit, printing, and care guidance. The current preview makes the upcoming collection launch explicit before any purchase.
What shipped
- A live product website at miswakcase.com with a cohesive visual identity and interactive product exploration.
- A clear presentation of three colourways and both physical and digital editions.
- A bridge between printable product geometry and the browser, documented in the earlier STL viewer and the current product experience.
- Fit, printing, and care information presented alongside the product choice.
- The website is live in collection-preview mode, with purchases set to open when the collection launches.
Have a product that deserves a considered website?
Agency7 combines software engineering with hands-on product thinking. Miswak Case shows how product detail, interactive presentation, and a clear customer journey can come together in one website. Bring your idea, prototype, or existing business and we can scope the experience it needs.
Explore web development in EdmontonWant something like this?
Free 15-minute strategy call. We'll walk through what a similar system could look like for your business.
Discuss your product website