Lovesac / Overlay Prototype

CSS Compositing
Config
Fabric
Scene
Sofa
People
Shadow
config1_fab1_desktop.jpg
Base: 1.40 MB (unchanged)
Overlay: ~120 KB

Compositing Stack

Layer 1 — Sofa Render
Original JPG (unchanged)
Layer 2 — People Overlay
Transparent WebP (~120 KB)
Final Composite
Layered in browser via CSS
How it works: The sofa render stays untouched — people are overlaid as separate transparent assets composited in the browser with CSS positioning. The original render file size never changes. Scenes randomize on each page load. In production, the SVG placeholders shown here would be replaced with 3D-rendered people cutouts (transparent WebP/PNG) from the same Threekit scene.