Source: https://daphnislabs.com/case-studies/cane-and-clay - Interior design - Website - UI/UX - Content # Cane & Clay An interior-design brand, thoughtfully translated to the web An editorial website that connects the studio’s spaces, materials and imagery. [Visit live website (opens in a new tab)](https://caneandclay.com/) [Read the story](https://daphnislabs.com/case-studies/cane-and-clay#story) ![Cane & Clay homepage: Spaces, shaped around your life, over a sunlit living room with a curved sofa and natural materials.](https://daphnislabs.com/images/projects/cane-and-clay/home-living-room.webp) ![The actual mobile homepage with a compact menu, full-height design book and Hindi welcome.](https://daphnislabs.com/images/projects/cane-and-clay/home-mobile-review.png) ## The project The studio supplied the photography. Daphnis brought the content, interface and development together around that material. **Industry** Interior design **Our role** Planning & UI/UX Original content Website development **Technology** Next.js · React Three.js · React Three Fiber GSAP **Source imagery** Client-supplied photography ## Built around the studio - Project-led browsing - Material discovery - Responsive layouts ## Inside the experience ### A welcome shaped by where you are The opening salutation adapts to the visitor’s location, language and local time. This recording shows the Hindi greeting, नमस्कार, before the animated room-and-book sequence reveals the homepage. The Hindi salutation नमस्कार appears over an interior. The camera moves towards a design book, then transitions into the living-room homepage. ![The Glassline Residence interior and project description beside an illustrated route through the studio’s projects.](https://daphnislabs.com/images/projects/cane-and-clay/project-journey-desktop.jpg) ![Cane & Clay materials page showing the material categories and the complete-palette section below, without the browser scrollbar.](https://daphnislabs.com/images/projects/cane-and-clay/materials-palette.webp) ## The website in motion A vehicle travels past modelled architecture in Guangzhou, Foshan, Gurgaon, Ludhiana, the United States and Dubai, ending at Your Project. Three.js and React Three Fiber power the vehicle’s journey through architectural destinations. Rendering quality adapts to mobile, tablet and desktop viewports, and continuous rendering stops when the journey is off-screen. 1 / 3 ![The Glassline Residence interior and project description beside an illustrated route through the studio’s projects.](https://daphnislabs.com/images/projects/cane-and-clay/project-journey-desktop.jpg) 01 / 03 The project journey ## Design, content and technology in harmony Project records bring together location, sector and imagery; material categories have their own supporting content. - Illustrated project journey - Structured material library - Project enquiry flow ## Considered at every size Navigation and content reflow for smaller screens. With reduced motion enabled, the 3D journey renders on demand and presents its destinations in text, so visitors can follow the story without watching the animation. ![The actual mobile homepage with a compact menu, full-height design book and Hindi welcome.](https://daphnislabs.com/images/projects/cane-and-clay/home-mobile-review.png) ![Mobile materials page with a stacked heading, introduction and readable list of materials.](https://daphnislabs.com/images/projects/cane-and-clay/materials-mobile-review.png) ![Cane & Clay materials page showing the material categories and the complete-palette section below, without the browser scrollbar.](https://daphnislabs.com/images/projects/cane-and-clay/materials-palette.webp) ## Challenge The studio had strong photography, but its services and work needed a clear structure online. The task was to establish what visitors should encounter first and how each section should lead to the next. ## Approach We planned the information architecture and user journey before developing the interface. Original copy gave the images context, while the navigation connected the studio’s services, material palette and individual projects. ## Project enquiries The enquiry form collects project type, location, budget, timeline and a brief. Client-side validation highlights missing details; a server-side handler validates the submission and prepares an email for the studio. The interface includes success and delivery-error states. ![Warm living-room imagery with pale stone, a low sofa and panoramic windows, from the website’s Glassline Residence project.](https://daphnislabs.com/images/projects/cane-and-clay/residence.webp) ## A digital home that lets the studio’s work speak first [All case studies](https://daphnislabs.com/case-studies) [Next project**Astro app**](https://daphnislabs.com/case-studies/astro-app) ## What are you building? Tell us about your audience and the experience you want to create. [Talk about your project](https://daphnislabs.com/contact?intent=plan-build)