The cube is built with THREE.MeshPhysicalMaterial and supports advanced PBR properties such as clearcoat, sheen, iridescence, and emissive glow. Custom rounded box geometry softens the edges for a more refined look.
Reflections are driven by a procedurally generated environment map, and optional bloom adds a controlled highlight glow. On the Framer canvas, a lightweight CSS-based isometric placeholder keeps editing fast while the full WebGL scene runs in preview and production.
Choose between 2x2 and 3x3 layouts. Both maintain accurate proportions and consistent animation logic.
Four material presets are included: Obsidian with a dark metallic finish, Pearl with a light iridescent surface, Ember with a warm glow, and Chrome with mirror-like reflections.
Switch to Custom mode to unlock full control over reflectivity, roughness, clearcoat, sheen, emissive strength, and other material parameters.
Solid mode applies one uniform material across all faces for a sculptural appearance.
Sticker mode adds extruded sticker meshes to each outer face. Each preset includes a coordinated color palette, and sticker shapes can be square, rounded, or circular.
Motion can be layered to create different levels of energy.
Auto-rotation supports adjustable speed, multiple axis combinations, and optional pause on hover.
Row twist introduces periodic 90 degree layer turns with cubic easing. You can target only the top row, all Y rows, or every layer, with configurable interval and duration.
A subtle floating motion adds a gentle vertical bob driven by a sine function.
Users can drag to rotate using mouse or touch, with adjustable sensitivity. Optional momentum adds velocity-based inertia after release, damped at 0.92 for a natural feel.
Snap-to-angle can be enabled at 15 or 30 degree increments. A built-in cooldown prevents row twists from triggering immediately after a drag ends.
Controls are organized into three collapsible groups: Style, Animation, and Interaction. Conditional visibility keeps the panel clean. Custom material sliders only appear in Custom mode, and sticker options only appear in Sticker mode.
Sanna Granqvist
