SIG — Spiral Image Gallery Overview SIG

SIG — Spiral Image Gallery

Overview

SIG is another Three.js-powered Framer component that arranges images into a rotating 3D spiral with real-time scroll and cursor reactivity. Built in a single day on March 28, the component was designed to be lightweight and self-contained, deliberately skipping CMS integration to keep the bundle lean and performant.

The Challenge

The goal was to build a 3D image gallery that felt genuinely spatial, not a CSS illusion. Each tile needed to follow a real helix path, curve with the spiral, respond to scroll velocity, and react to cursor position, all inside Framer's rendering environment without breaking the component lifecycle or leaking memory.

The Approach

Rather than relying on Three.js primitives, each tile in SIG is a custom curved quad built from scratch using BufferGeometry. Tile positions are calculated mathematically along a helix, with radius interpolated between a start and end value to produce the three shape presets: Cylinder (uniform radius), Cone (narrow to wide), and Tornado (wide to narrow).

The decision to skip CMS was intentional. Pulling image data through Framer's collection list adds DOM overhead. Instead, SIG accepts a plain image array directly, keeping the component lightweight and reducing the surface area for rendering issues.

The Build

Scroll reactivity is handled through a velocity system that reads raw scroll delta, divides by frame delta time to get true velocity, and smooths it using a configurable lerp. That smoothed velocity is then split into two independent outputs: rotational spin added to the spiral's y-axis rotation, and vertical travel applied to the spiral's world position. This separation allows scroll to feel physically layered rather than just fast or slow.

Cursor parallax is calculated from pointer position relative to the component bounds, smoothed independently, and applied as an offset to the spiral's x and y position. The result is a subtle depth shift that responds to where the viewer is looking.

Performance was handled through three observers: an IntersectionObserver pauses rendering when the component is off-screen, a ResizeObserver keeps the canvas correctly sized, and the Page Visibility API pauses the animation loop when the tab is hidden. Textures, geometries, and materials are all disposed on unmount to prevent memory leaks.

Three motion presets (Calm, Balanced, Reactive) expose velocity smoothing, spin multiplier, and travel multiplier as a single friendly toggle. Advanced controls unlock the raw values for designers who want full control.

The Result

SIG is currently pending Framer marketplace approval. The component established a reusable pattern for scroll velocity systems and custom spiral geometry that directly informed later components in the suite. End-user friendly and highly customizable.