Box Design Studio (PoC)

An interactive 3D proof of concept for configuring a product box experience in the browser.

This project combines a real-time 3D scene with a simple configurator UI. Users can:

• choose a category (cover design + pricing),
• add a custom engraving text,
• upload a custom cover image,
• animate opening/closing behavior for box and slipcase.

Demo Goals

This PoC validates:

• 3D product visualization in a web UI,
• smooth state-driven animation flows,
• lightweight design customization inputs,
• feasibility for a future "save design / add to cart" product flow.

Tech Stack

• React 19
• Vite 6
• Three.js with @react-three/fiber and @react-three/drei
• Jotai for shared animation state
• Tailwind CSS 4 + Radix-based UI primitives
• Mixed JavaScript / TypeScript codebase

Getting Started

1) Install dependencies

npm install

2) Start development server

npm run dev

How to Use the PoC

1. Select a category from the dropdown.
2. Enter engraving text in the input field.
3. Optionally upload an image to override the default front cover artwork.
4. Toggle the checkbox to open/close the box animation.
5. Use mouse drag to rotate the camera around the scene.

Project Structure

src/
  App.jsx                    # Main scene + configurator UI
  features/
    wrapping.jsx             # Slipcase mesh, textures, motion
    box.jsx                  # Box assembly and part renderer
    boxInnerPart.tsx         # Individual box part behavior
    cameraController.jsx     # Camera transitions
  hooks/
    useFloating.ts           # Floating animation helper
    useFolding.ts            # Fold/open transform logic
  lib/
    slipcaseGeometry.ts      # Custom geometry generator
  data/
    categories.ts            # Demo product categories and assets
  atoms/
    atoms.ts                 # Shared animation state

Known PoC Limitations

• "Design speichern" and "In den Warenkorb hinzufügen" are UI placeholders.
• No backend persistence or checkout integration yet.
• Limited category set and static demo pricing.
• No test suite included yet.