About Text Prism

What is Text Prism?

Text Prism is a high-end text animation component that applies a continuous chromatic aberration sweep across your typography. A wave of light travels through each letter, splitting it into customisable color channels with subtle displacement and glow — creating a refined, cinematic effect used by leading creative agencies and tech brands. Ideal for hero headings, portfolio headers, and landing page statements.

Core Features

Chromatic aberration sweep that splits each letter into two customisable color channels (cyan and magenta by default) as a smooth wave passes across the text
Per-letter vertical displacement and scale pulse that adds kinetic weight to the sweep, making the animation feel physical and premium
Built-in glow effect that trails the sweep, adding depth and luminosity to each letter at the point of maximum split
Three sweep directions — forward, backward, and bounce — with adjustable speed, wave width, and pause timing for complete motion control
Multi-line support with independent font, size, spacing, and alignment controls for full typographic flexibility

Controls inside Framer

Typography

Text (multi-line input with line break support)
Font (family and weight picker)
Font Size (24–300px with stepper)
Letter Spacing (-20 to 40px)
Line Height (0.5–2.0)
Alignment (left, center, right)
Uppercase toggle

Color

Text Color
Split Color A (left chromatic channel)
Split Color B (right chromatic channel)

Animation

Speed (sweep travel speed)
Intensity (how far the color channels split apart)
Wave Width (how many letters are affected at once)
Displacement (vertical bounce as the sweep passes)
Glow (luminous intensity during the sweep)
Pause (rest time between sweep passes)
Direction (forward, backward, or bounce)

Best use cases

Hero headings on agency, portfolio, and SaaS landing pages that need a premium first impression
Brand name reveals and tagline animations on creative studio websites
Event and product launch pages where bold typography sets the tone
Dark-mode landing pages and editorial layouts where chromatic effects create maximum contrast

Drop it onto your canvas, type your headline, and let Text Prism do the rest.