---
title: "Text Outline — Free Framer component · Best of Framer"
description: "Free Framer component · by Aidan Looker · Text. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/text-outline"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Text Outline

# Text Outline

Animated text outlines that draw in view

[View on Framer](https://framer.com/marketplace/components/text-outline/?via=elliot-li)

![Text Outline preview image 1](https://framer.elliotli.dev/og/component/text-outline/17f396369b4b3aab/1600x1200.jpg)

## Summary

What is Text Outline?

## Description

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

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## 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](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #7256

## Details

- **Author**: Aidan Looker
- **Published**: 2026-03-28
- **Updated**: 2026-06-13
- **Added**: 2026-03-18
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing