An interactive 3D cube component for Framer built on pure Canvas 2D with no external dependencies or WebGL. Use it to display images or looping videos on six faces, add decals and tape, control lighting, and enable drag-to-rotate interaction with snap and animation presets.
What's inside
- Zero dependencies, Canvas 2D renderer, no WebGL
- Quaternion arcball rotation with slerp interpolation and inertia physics
- Software perspective projection with adaptive 2×, 4× tessellation
- Bilinear UV interpolation and affine triangle texture mapping
- Painter's algorithm depth sorting with backface culling
- Six independent faces: solid color, image texture, or looping video
- Per-face relief geometry with multi-segment extrusion and wall stitching
- Adjacent-face bridging for seamless 3D continuity
- Multi-face wrapping decals with convex polygon clipping
- Looping tape bands on X/Y/Z with repeating image tiling
- Blend modes: Multiply, Screen, Overlay, Soft Light
- Per-decal glossy specular reflection layer
- Cinematic lighting: diffuse, specular, fresnel rim, directional light with angle and color temperature controls
- Edge glow with per-edge normal sampling and soft-light and overlay compositing passes
- Drag-to-rotate with velocity tracking and friction control
- Auto-rotation on X/Y/Z with adjustable speed
- Snap-to-face with eased slerp transitions
- Click actions: link, rotate, show slot, or custom callback
- Seven slot animation presets: fade, slide, scale, blur
- Selection effects: Aurora Flow, Soft Glow, Pulse, Highlight overlays, dual-color aurora, infinite or limited play modes with cycle counting
- 60 fps loop with IntersectionObserver auto-pause, DPR-aware up to 2×
