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.
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
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
Text Color
Split Color A (left chromatic channel)
Split Color B (right chromatic channel)
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)
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
