Text Outline

Free Typography Component by Aidan Looker

Show Preview
Text Outline

About Text Outline

What is Text Outline?

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.

Core Features

  • 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

Controls inside Framer

Text and Typography

  • Text — your display text

  • Font — choose any font family and weight

  • Font Size — 16px to 200px

  • Alignment — Left, Center, or Right

Preset

  • Preset — Custom, Minimal, Neon, Gold, or Frost

Colors (visible in Custom mode)

  • Outline — stroke colour for the letter outlines

  • Fill — colour used when letters fill in

  • Glow — colour of the glow effect

Stroke and Glow (visible in Custom mode)

  • Stroke Width — 0.5px to 6px

  • Glow — toggle the glow layer on or off

Glow Radius (visible when glow is enabled)

  • Glow Radius — 2px to 40px, controls the size of the glow blur

Fill

  • Show Fill — toggle the colour fill animation on or off

  • Fill Speed — how long the fill reveal takes (0.1s to 2s)

Animation

  • 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

  • Hover Effect — None, Glow, Lift, or Scale

Best use cases

  • 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.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.