# Text Outline Reveal

> Editable type traces its real letter contours before a slanted wash of violet ink rises through the word, as a GSAP text reveal.

Canonical: https://gsapvault.com/effects/text-outline-reveal
Live demo: https://gsapvault.com/demos/text-outline-reveal/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £10 |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | svg-line-draw, text-animation, stagger |
| Uses Lenis | Yes |

## Lighthouse, as measured

Google Lighthouse on the demo, 26 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

A large editable word draws its vector contours, then fills with a diagonal wave of violet ink. Choose Auto for a quick timed reveal, or Scroll to draw and fill the lettering as you scroll down and undo the transition as you scroll back up.

The lettering uses bundled Mona Sans outlines for Latin capitals, digits and selected punctuation. Reduced motion presents the finished word without a scrolling runway.

## Features

- Actual vector letter contours that draw before the fill arrives
- A diagonal fill that moves through each glyph in sequence
- Auto and Scroll modes with keyboard-operable tabs
- Editable word with automatic fitting at desktop and mobile widths
- Bundled font and outline data with no runtime font parser
- Readable fallback, reduced-motion support and per-instance teardown
- Lenis smooth scrolling with a generous scroll distance and eased reveal response

## Use Cases

- Typography-led launch headlines that need a distinctive opening motion
- Editorial covers and title treatments with a controllable reveal
- Creative portfolios that invite visitors to explore the letterforms

## Vibe-Code Ready Setup

This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

Auto plays a quick outline-to-fill sequence. Scroll keeps the lettering in view while normal page scrolling draws its outlines and fills the letters; scrolling back reverses the reveal. Switch modes or edit the word at any time.

## Documentation

How this effect works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

**1. Add to your HTML `<head>`:**

_Code snippet omitted: it ships with the download._

**2. Add the effect markup to your page:**

_Code snippet omitted: it ships with the download._

**3. Add scripts before `</body>`:**

_Code snippet omitted: it ships with the download._

Keep `mona-sans-latin.woff2` beside `style.css`. The bundled font and outlines are licensed under the SIL Open Font License 1.1 in `assets/OFL.txt`.

### Using It With Your Own Design

**Required hooks:** Each instance needs a `data-outline-root` wrapper, a plain-text `data-outline-word` fallback, and an empty `data-outline-vector` SVG. The input and Replay button are optional. The sample classes connect the supplied CSS to the stage and controls; keep them if using that stylesheet. Keep the SVG `aria-hidden` because the plain text carries the accessible word. The root's `data-text` sets the initial word; the text fallback should match it for no-JavaScript visitors.

**Demo styling you can replace:** The grey background, violet colour, cue, layout, controls and spacing are presentation. Change `--accent`, the font sizes and stage dimensions to fit your design. Keep the font file and generated outline data together so the fallback and vector word have matching forms.

**CSS the effect needs:** The vector must overlay the text fallback within a positioned stage. Hide the vector until the root gains `.is-ready`; hide only the visual fallback then, leaving its text in the accessibility tree. The SVG should retain its dynamic `viewBox`, `preserveAspectRatio` and visible overflow. Keep the contour stroke and fill styles, adapting their colours and widths as desired. For Scroll mode, wrap the root in `[data-outline-track]` and retain the `.outline-track.is-scroll` height and sticky `.showcase` rules. If you remove the demo CSS, provide a no-JavaScript state that shows the plain text. The demo hides controls if the required scripts fail to load.

### Options

| Hook | Values | Default | Purpose |
|------|--------|---------|---------|
| `data-text` | Up to 10 supported characters | `FORM` | Initial word |
| `data-outline-input` | Native text input | Optional | Edit and replay the word |
| `data-outline-replay` | Native button | Optional | Replay from the start |

Input is converted to uppercase. Supported characters are `A–Z`, `0–9`, space, `&`, `?`, `!`, `.`, and `-`. Other characters are removed. For wider language coverage or another typeface, regenerate the outline data from a properly licensed font and update the fallback font to match.

### Accessibility

The plain HTML text remains readable to assistive technology while the SVG is hidden from it. Auto plays the quick reveal. Scroll uses normal vertical page scrolling through a sticky stage, including touch swipes. There is no cursor-following or dragging interaction. The word input and Replay button are native keyboard controls with visible focus. Under `prefers-reduced-motion: reduce`, the word remains fully filled and editable; Replay and the mode tabs are hidden, and the scroll runway collapses. If JavaScript or GSAP fails, the plain text remains visible and the demo hides its inactive controls.

### Dependencies

- GSAP 3.12+ core. The demo pins GSAP 3.15.0.
- Bundled Mona Sans font and precomputed outlines, licensed under SIL OFL 1.1. No runtime font parser or GSAP plugin is needed.

### Demo modes

The demo opens in Auto mode and offers Auto and Scroll tabs (`data-outline-mode="auto|scroll"`). Their arrow keys switch modes. Scroll mode needs an `.outline-track` wrapper with `data-outline-track` around the effect root. The word stays sticky for the track length; normal wheel, touch and page-scroll keys drive the reveal. Switching back to Auto returns to the top of the track.

#### Smooth scrolling

Scroll mode uses Lenis 1.3.17 with a slower wheel response and a 340vh track (240vh of reveal travel). Auto mode and reduced motion destroy only the demo-owned Lenis instance. An existing host Lenis instance is borrowed and never destroyed. `?smooth=off` disables the owned smooth scroller; normal scrolling still controls the reveal if Lenis cannot load.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Text Outline Reveal](https://gsapvault.com/effects/text-outline-reveal)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Typewriter Text](https://gsapvault.com/effects/typewriter-text.md): A typewriter that types a line character by character, holds it, accelerates through deletion, and cycles to the next phrase, with optional cursor, status and progress hooks.
- [Scroll Text Highlight](https://gsapvault.com/effects/scroll-text-highlight.md): A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted.

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt