Text Aurora — Flowing animated aurora gradient text.

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.