VIDS — Vertical Infinite Distortion

VIDS — Vertical Infinite Distortion Slider

Overview

VIDS is a Framer component built as the first piece of an upcoming Framer template. Developed over two days starting March 26, it combines CMS-driven content management with a Three.js-powered distortion effect, all packaged as a single, configurable component ready to drop into any Framer project.

The Challenge

The goal was to build a vertically scrolling image slider with real distortion, not a CSS trick, but genuine shader-based warping that reacts to scroll direction and speed. The challenge was doing this inside Framer without breaking the build environment, while keeping the component clean enough for other designers to actually use.

The Approach

The core technical decision was integrating Three.js directly into a Framer code component. Getting WebGL to coexist cleanly inside Framer's rendering environment required careful handling of the canvas lifecycle, resize events, and cleanup, things that break silently if not managed properly. The distortion effect was built to read scroll velocity and translate positive and negative movement into real-time shader deformation on the y-axis.

On the content side, the component was wired to Framer's CMS so that images and content pull directly from a collection list. Designers don't touch the code, they connect their data source and the slider builds itself.

The Build

Key controls exposed as props: distortion intensity, wheel speed, drag speed, smoothing, slide gap, aspect ratio, and min/max height. Font styles can either pull from the CMS collection or be set manually. The entire component is configurable from the Framer properties panel with no code required from the end user.

The Result

VIDS became the foundation component for an upcoming Framer template, currently pending marketplace approval. More than the component itself, the build established a working pattern for Three.js integration inside Framer, one that can be reused and refined across future components.