OhDaDa Handcrafted Kinetic Sculpture E-commerce

Overview

OhDaDa is a high-end e-commerce store built with a minimalist, art-gallery aesthetic that prioritizes kinetic sculptural forms. It serves as an excellent clone reference for its seamless horizontal navigation, elegant typography, and the use of subtle 3D transforms (translate3d and rotate) to create depth and motion within product galleries.

Design System

• Color Palette & Visual Hierarchy: The palette is dominated by a muted "Dusty Lavender" background (#b7b3be) paired with a deep "Cocoa Brown" for primary text. The hierarchy uses significant white space (negative space) to draw focus to the large, expressive serif branding and the earthy tones of the product photography.
• Typography: The design features a bold, high-contrast serif typeface for the hero branding and product titles, characterized by dramatic ligatures and varying weights (regular vs. italic). Secondary metadata and body copy use a clean, neutral sans-serif in a light gray or white, ensuring legibility without distracting from the visual art.
• Page Structure & Flow: The landing page deviates from vertical scrolling, opting for a horizontal layout. The sections flow as follows:
  1. Hero Title: Large-scale brand typography and sub-header.
  2. Products Preview: A scrollable row of product cards with staggered image heights.
  3. Inspiration Gallery: A series of images utilizing 3D CSS transforms to appear as if floating at different depths.
  4. About & Contact: Minimalist text blocks and large link buttons.
• Reusable Components:
  • Product Cards: A specialized component (.product.active) featuring an image container and a bottom-aligned description block with price.
  • Full-Screen Cart: A sliding cart-page overlay that provides a focused checkout environment without leaving the current view.
  • Interactive Image Container: The dom-item within the inspiration section, which uses inline styles for depth and rotation.
• Interaction Patterns: The site utilizes horizontal drag/scroll mechanics. Product images use hover transitions, and the "Inspiration" section uses subtle opacity and rotation shifts based on position in the viewport to simulate a 3D environment.
• Implementation Clues: The HTML reveals a Svelte/SvelteKit architecture (using .svelte- scoped classes). Motion is handled via inline transform properties, likely synchronized with a custom scroll hook or a library like GSAP to manage the 3D-perspective shifting.

Use Cases

• Who should clone this: Designers and developers building boutique e-commerce sites, artist portfolios, or high-concept furniture stores where visual storytelling is more important than massive inventory.
• Remix Directions:
  • Art Portfolio: Replace the Shopify product links with high-resolution project images, keeping the 3D-transformed inspiration gallery for a "process" section.
  • Digital Agency: Swap the sculptures for case studies, using the horizontal scroll to simulate a flip-through presentation deck.
  • Apparel Store: Implement the horizontal layout for seasonal lookbooks, utilizing the minimal cart overlay for a frictionless shopping experience.
• Suggested Clone Scope: Start by cloning the horizontal product row and the 3D inspiration gallery. These are the most technically distinct features and can be integrated into a standard vertical site as unique hero or mid-page sections.