Kinetic Headline

About Kinetic Headline

Headlines with depth. Every line or word sits on its own layer and drifts with the cursor, while hover wakes words up with variable-font weight, spacing, a highlight and sharp focus. Scroll compresses, expands, rotates or separates the whole statement. Fluid responsive type, touch-friendly behavior, reduced motion and real, accessible text.

Features

• Per-line or per-word depth with a deterministic seed.

• Cursor X parallax and Cursor Y perspective, spacing or offset.

• Variable font axis on hover (weight, width, slant or any four-letter axis).

• Three highlight styles: Color, Marker and Glow.

• Depth blur that clears on hover.

• Four scroll effects with a calm reading band.

• Fluid responsive size with a minimum.

• Tap highlight and reduced intensity on mobile.

• No layout per frame; loop pauses when settled or offscreen.

• One standalone React + TypeScript file.

• 27 controls in the Framer properties panel

• Respects prefers-reduced-motion

• Renders correctly on the Framer canvas and in export

Created by LUNAUT Studio.