RIFT — Reactive Interactive Flow Text

Overview

RIFT is a cursor-reactive text component for Framer that pushes words away from the pointer in real time. Built over two days, it was inspired by the moment chenglou's pretext experiment took over design and developer feeds. RIFT is not a port of pretext and takes a different technical approach entirely, but it scratches the same itch: making text feel physical and alive in response to the cursor.

The Challenge

The challenge was making word-level repulsion feel natural inside Framer without resorting to a physics engine or a canvas renderer. The component needed to be lightweight, fully configurable from the properties panel, and expressive enough to cover a wide range of motion styles, all while staying within React's rendering model.

The Approach

Rather than simulating physics or using WebGL like PRISM and SIG, RIFT is built entirely on React state and CSS transitions. The text is split into individual word spans, each measured against the container using getBoundingClientRect to find their center positions. When the pointer moves, each word calculates its distance from the cursor and applies a repulsion force as a CSS transform, pushing it outward along the vector from cursor to word center.

The influence falloff uses a power curve rather than a linear drop, giving the repulsion a more organic, weighted feel as words near the edge of the radius settle back into place.

Five cursor shape modes change how the influence radius is calculated geometrically. Circle uses standard Euclidean distance. Horizontal and Vertical use elliptical distance with different axis ratios. Square uses Chebyshev distance, measuring the maximum of the absolute x and y deltas. Diamond uses Manhattan distance, summing the absolute deltas. Each shape produces a noticeably different interaction feel without changing any other part of the system.

The Build

Color blending between the default and active states is handled through a custom color parser and mixer built from scratch, supporting hex in three, four, six, and eight character formats as well as rgb and rgba. Colors interpolate per word based on influence amount, so words closest to the cursor shift toward the active color smoothly.

Motion presets expose five timing configurations: Soft, Snappy, Floaty, Elastic, and Custom. Each preset defines separate active and return durations along with a CSS timing function, including cubic-bezier curves for the Floaty and Elastic presets. Using separate in and out durations creates asymmetric movement that feels more considered than a simple ease.

Because the animation runs through CSS transitions rather than a requestAnimationFrame loop, the browser handles compositing directly, keeping performance consistent even with large blocks of text.

The Result

RIFT is currently pending Framer marketplace approval. The component demonstrated that cursor-reactive text interactions do not require a physics engine or canvas renderer to feel satisfying, and established a clean pattern for word-level DOM interaction inside Framer's component system.