RubiksCube

Rendering and materials

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.

Grid sizes

Choose between 2x2 and 3x3 layouts. Both maintain accurate proportions and consistent animation logic.

Presets and customization

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.

Surface styles

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.

Animations

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.

Interaction

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.

Property controls

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.