Stone Artifact Manufacturer Website
A bespoke UI/UX website designed to showcase the real-world implementation of handcrafted stone artifacts, featuring an interactive raw-stone-to-artifact hover reveal in the hero section and a structured taxonomy workflow.
Showing the journey from raw quarry stone to living architectural artifact
The client is a bespoke stone artifact manufacturer crafting sacred architecture, sculptures, water features, facades, and landscape elements from natural quarried stone. They needed a high-end UI/UX website that did more than display isolated product cutouts. The primary requirement was to show the actual implementation of each artifact in real architectural spaces while communicating the craftsmanship that turns raw stone into finished art. Additionally, because architects, interior designers, and homeowners browse differently, the site needed an intuitive tag and taxonomy workflow connecting application areas, stone quality, and collections.
Interactive storytelling paired with relational catalog architecture
- 01 Raw-Stone-to-Artifact Hero Reveal (Core USP)
To immediately communicate the brand's craftsmanship, we designed an interactive hero section that showcases the raw, uncarved form of the natural stone block as the base layer. As the user hovers over the raw stone, a smooth cursor-tracking radial mask reveals the intricately carved finished artifact in its actual architectural setting underneath. On touch devices, this adapts into a tactile drag-handle slider so mobile visitors experience the same transformation.
- 02 Multi-Layered Tag & Taxonomy Workflow
We architected a structured tag workflow that connects the entire catalog across three primary dimensions: Application Area, Quality of Stone, and Collection. Instead of forcing visitors down a single rigid menu, every tag cross-references the others so users can start from a room or outdoor space, inspect compatible stone qualities, and drill down into specific artifact collections seamlessly.
- 03 Real-World Implementation Showcases
Rather than showing stone pieces on blank backgrounds, we structured the UI around spatial implementation. Dedicated application pages (courtyards, foyers, prayer rooms, terraces, gardens, and hospitality spaces) demonstrate scale, lighting, and placement in real environments.
- 04 Stone Quality & Technical Specification Profiles
We built detailed material pages covering sandstones, marbles, limestones, and basalts. Each stone profile displays colour variation swatches, quarry origin, grain character, and technical parameters (durability, porosity, weather resistance, and carving workability), automatically linked via tags to the collections and spaces where that stone performs best.
- 05 Performance Engineering & Deployment
Built on Astro and deployed on Cloudflare, the website handles high-resolution stone imagery, custom CSS masking animations, and dozens of interconnected taxonomy pages with near-instant page loads and zero layout shift.
How the Tag & Taxonomy Workflow Works
- 1. Application Area (Spaces): Visitors can begin by selecting where the artifact will live (e.g., Courtyard, Entrance & Foyer, Prayer Room, Terrace, Poolside, or Landscape) to see artifacts and stone types engineered for indoor or exterior exposure.
- 2. Quality of Stone (Materials): Every space and artifact links to specific stone families and grades (Sandstone, Marble, Limestone, Basalt), complete with tonal swatches, variation ratings, and weather-resistance specs.
- 3. Collection & Artifact Type: Users flow into curated collections and sub-collections (Spiritual Architecture, Water & Wellness, Landscape Elements, Sculptural Objects, Facades, and Bespoke Commissions) pre-filtered by compatible materials and spaces.
- 4. Contextual Inquiry Handoff: From any node in the workflow - whether viewing a stone quality, an application area, or a finished collection piece - visitors can trigger a bespoke commission inquiry with context preserved.
The stack behind the experience
What was delivered
When the product is tactile, the interface must do the storytelling
Luxury stone artifacts are heavy, textured, and deeply tied to the spaces they inhabit. A standard e-commerce grid flattens that craft into generic thumbnails. By turning the hero section into a direct interaction - where hovering over raw stone carves it into the finished artifact in place - visitors grasp the brand's value proposition in two seconds without reading a paragraph of copy. Pair that emotional hook with a logical taxonomy workflow (Application Area to Stone Quality to Collection), and both emotionally driven homeowners and specification-driven architects can navigate the same website effortlessly.