Text Aurora

What is Text Aurora?

What is Text Aurora? Text Aurora is a premium text animation component that renders flowing, multi-layered aurora borealis gradients through your text. Four gradient layers move at different speeds and trajectories, creating organic, never-repeating colour motion. Use it for hero headings, page titles, portfolio showcases, or any text that needs to feel alive and premium. Core Features Multi-layered aurora gradient that flows continuously through the text shape using background-clip, creating an organic light effect Six curated colour themes — Borealis, Sunset, Ocean, Iridescent, Ember, and Mono — plus a fully custom three-colour mode Animated accent underline that draws from centre, holds, and smoothly retracts with adjustable thickness Colour-cycling glow halo that shifts between your aurora colours with adjustable intensity Optional breathing mode that adds a subtle scale pulse for extra presence Four hover effects — None, Glow, Lift, and Scale — with smooth transitions Full multi-line support using line breaks Zero JavaScript during animation — entirely GPU-accelerated CSS for smooth 60fps performance Viewport-optimised — all animations pause automatically when scrolled offscreen Controls inside Framer Text and Typography Text — multi-line input with line break support Font — native Framer font picker with weight control Font Size — 20 to 300px with stepper Letter Spacing — -10 to 20px Line Height — 0.7 to 2.0 Alignment — Left, Centre, or Right Theme and Colours Theme — Borealis, Sunset, Ocean, Iridescent, Ember, Mono, or Custom Color A — first gradient stop (visible in Custom mode) Color B — second gradient stop (visible in Custom mode) Color C — third gradient stop (visible in Custom mode) Animation Speed — animation speed multiplier from 0.2x to 3x Gradient Angle — base gradient flow direction from 0 to 360 degrees Effects Glow — toggle the colour-cycling text halo on or off Glow Intensity — radius of the glow effect from 2 to 30px Breathing — toggle the subtle scale pulse on or off Accent Line — toggle the animated underline on or off Line Thickness — underline thickness from 1 to 6px Hover Effect — None, Glow, Lift, or Scale Best use cases Hero headings and landing page titles that need to command attention Portfolio, agency, and creative studio sites looking for a premium edge SaaS product pages and feature sections that highlight key messaging Any heading or display text that needs to feel dynamic and alive Elevate your typography in seconds. Drop in Text Aurora, choose a theme, and publish a polished, high-performance result with zero custom code. Questions or custom requests? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

Flowing animated aurora gradient text.