Color Sculpt

Live app: colorsculpt.vercel.app

Color Sculpt is an interactive color-grading playground where you sculpt color directly in 3D perceptual space (OKLAB). Load an image, pick a color region, push it through space, and watch related colors shift smoothly in real time.

Screenshots

Why It Feels Different

Most color tools expose sliders. Color Sculpt exposes the color volume itself.

• You see your image as a 3D OKLAB point cloud.
• You choose a center color from either the image preview or the point cloud.
• You move a transform gizmo to bend nearby colors with soft falloff.
• You build nuanced looks by stacking local operations.

Current Features

• Drag-and-drop or file-picker image loading
• 3D point cloud visualization of sampled image colors (Three.js)
• Direct color sampling from:
  • the image preview (with selectable sample size: 3, 5, or 12)
  • the 3D point cloud
• Sculpt operations with a draggable translation gizmo
• Adaptive brush influence visualization in the viewport
• Real-time image preview with Before / After compare toggle
• Preview zoom, pan, and reset controls
• Undo / redo / reset editing workflow
• One-click export of transformed output as PNG

Quick Start

npm install
npm run dev

Then open the local Vite URL shown in your terminal.

Production Build

npm run build
npm run preview

How To Use

1. Load an image.
2. Pick a target color by clicking in the preview or clicking a point in the 3D view.
3. Adjust brush size with the floating slider near the gizmo.
4. Drag the gizmo to translate that color neighborhood in OKLAB.
5. Repeat to layer multiple local edits.
6. Toggle Before / After to compare.
7. Download the final transformed image.

Controls

Action	Result
Drag viewport background	Orbit camera
Scroll in viewport	Zoom camera
Click a point in 3D cloud	Set sculpt center
Click in image preview	Sample color and set sculpt center
Drag transform gizmo	Apply live sculpt translation
Cmd/Ctrl + Z	Undo
Cmd/Ctrl + Shift + Z or Cmd/Ctrl + Y	Redo
Reset	Clear all operations
Download Result	Export transformed PNG

Tech Stack

• React + TypeScript + Vite
• Three.js for 3D viewport and controls
• Zustand for app state
• Custom OKLAB math + falloff-based sculpt engine

Project Layout

src/
  components/      # Toolbar, viewport, image preview
  lib/             # Color math, sculpt engine, image processing, LUT helpers
  stores/          # Zustand state store

Notes

• Processing happens client-side in the browser.
• The codebase includes LUT export utilities (.cube) in src/lib/lutExport.ts, ready to wire into UI actions.