Skip to content

component

Text Zoom Distort

By Artem Kostenko

Details

Summary

Text Zoom Distort is a seamless horizontal text strip built for expressive headline motion in Framer.

Description

Text Zoom Distort is a seamless horizontal text strip built for expressive headline motion in Framer. It repeats short or long copy edge-to-edge and reacts to pointer proximity by scaling nearby glyphs and interpolating weight between Min Weight and Max Weight. For best results, use a variable font and set Font variant to Variable or Variable Italic so weight animation runs on the wght axis. Static fonts are supported, but transitions may appear less continuous. Controls include text, color, font, min/max weight, zoom size, influence radius, smoothing, speed, direction, and vertical lock. Lock Vertical keeps line height visually stable while letters scale, preventing layout jump in dense hero sections. The component is designed as a single focused interaction primitive: drop it into a hero, set your copy and typography, and tune the motion profile for brand tone—from subtle editorial emphasis to bold kinetic type.

Introduction

Zooming strip; weight reacts to cursor.

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400154118/148/228/309/79/15
  • All · #5231