Text Outline

What is 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 .

Animated text outlines that draw in view