Scroll Distortion

Overview

Scroll Distortion bends the surface between sections. Use it where the transition is the message.

Use Scroll Distortion when the brand can tolerate a page surface that bends under pressure. Creative studios, AI launches, and experimental brand pages are the right audience because the effect is expressive before it is explanatory. The page job is tension: scroll should make the surface feel reactive without making the message harder to read.

The production risk is distortion strength. If the warp affects text, CTAs, or layout edges too aggressively, the effect stops feeling premium and starts feeling broken.

Install

Usage

Component Code

Example Production Use Case

A creative studio launching an experimental microsite: Scroll Distortion bends selected visuals as the visitor moves, turning scroll pressure into part of the brand language. The outcome is tension: the page feels alive without sacrificing the headline or CTA.

Best Used For

• Experimental brand pages where distortion is the transition language, not a readability tax.
• Experimental brand pages where the transition between sections is the hook.
• Gives experimental brand pages a memorable transition surface without pretending the distortion belongs on every route.

Not For

Not for reading-heavy sections, product comparison, pricing, or any content where distortion would fight legibility.

Not for pages with body copy visible during the distortion zone - legibility during motion is a WCAG concern.

Performance Budget

Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes.

Accessibility & Mobile

The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards.

Common Mistakes

• Warping text, forms, or CTA zones instead of transition surfaces.
• Letting sticky headers enter the distorted layer.
• Using strong surface bending for visitors who prefer reduced motion.