Text Outline is an animated text component that draws letter outlines into view with a smooth, stroke-by-stroke animation. Once drawn, letters can optionally fill with colour via a sweeping bottom-to-top reveal. Use it for hero headlines, brand name reveals, loading states, portfolio title sequences, or any moment that calls for cinematic text presentation. Drop it in, set your text, and go.
Smooth SVG stroke animation draws each letter's outline from nothing to full completion, then cleanly reverses on exit
Optional colour fill with a sweeping clip-path reveal that follows the outline draw
Four draw directions — All at Once, Left to Right, Right to Left, and Random — with adjustable stagger delay between letters
Built-in style presets (Minimal, Neon, Gold, Frost) for one-click looks, or go fully custom
Three trigger modes — On View, On Hover, and Loop — to control when the animation plays
Hover effects including Glow, Lift, and Scale for added interactivity
Text — your display text
Font — choose any font family and weight
Font Size — 16px to 200px
Alignment — Left, Center, or Right
Preset — Custom, Minimal, Neon, Gold, or Frost
Outline — stroke colour for the letter outlines
Fill — colour used when letters fill in
Glow — colour of the glow effect
Stroke Width — 0.5px to 6px
Glow — toggle the glow layer on or off
Glow Radius — 2px to 40px, controls the size of the glow blur
Show Fill — toggle the colour fill animation on or off
Fill Speed — how long the fill reveal takes (0.1s to 2s)
Trigger — On View, On Hover, or Loop
Direction — All at Once, Left to Right, Right to Left, or Random
Stagger — delay between each letter (0.02s to 0.5s)
Draw Speed — how long each letter's outline takes to draw (0.2s to 4s)
Loop Pause — pause between loop cycles (0.5s to 10s, visible in Loop mode)
Hover Effect — None, Glow, Lift, or Scale
Hero headlines that animate as visitors scroll into view
Brand name reveals on portfolio and agency landing pages
Looping display text for loading screens or splash pages
Hover-triggered label animations on interactive product showcases
One component. Full control over timing, colour, glow, and direction. Ship polished text animations in minutes, not hours.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
