CAVE — Curved Adaptive Visual Environment

Overview

CAVE is a Three.js-powered Framer component that arranges images or videos into a curved 3D grid that reacts to cursor movement in real time. Built over two days starting April 1, it was designed as a high-impact hero or showreel component for sites that need something more spatial and immersive than a standard media grid.

The Challenge

The challenge was building a component that could handle both video and image media inside a curved 3D environment while staying configurable enough to work across different layouts and aesthetics. Every tile needed to sit correctly on the curved surface, face the right direction, and respond to cursor input in a way that felt physically coherent rather than just reactive noise.

The Approach

The curve is calculated mathematically per tile rather than using a pre-built Three.js geometry. Each tile's x and y position drives its z depth through a parabolic function, and its rotation is derived from the slope of that curve at its position. A separate vertical curvature parameter applies an additional curve along the y axis, allowing the grid to bow in two directions independently.

Each tile carries randomised parallax and oscillation data assigned at initialisation. When the cursor moves, tiles shift by different amounts based on their individual parallax factor and a random directional offset, creating a layered depth effect rather than a uniform slide. An idle oscillation tied to a per-tile phase offset keeps the grid breathing even when the cursor is still.

The camera uses a smoothed lookAt target rather than moving its position, so the perspective shift feels like the viewer turning their head rather than physically moving through the scene.

The Build

Video tiles use Three.js VideoTexture fed from dynamically created video elements, with autoplay, mute, and loop handled at initialisation. Images use the standard TextureLoader. Both paths share the same tile geometry and material system. Media sources can be uploaded directly or provided as external URLs through the property controls.

The overlay header element responds to mouse movement through CSS 3D transforms applied in JavaScript, giving it a tilt effect that stays in sync with the 3D scene behind it. Cleanup on unmount pauses and unloads all video elements, disposes geometries and materials, and removes the renderer DOM node to prevent memory leaks.

The Result

CAVE is currently in active development. The component is desktop-focused by design, built for use cases where a high-fidelity, immersive media experience takes priority over mobile compatibility.