# Variable Font Pressure

> A pointer-driven type wave that widens and weights real variable-font glyphs while neighbouring letters compress and the word holds its width.

Canonical: https://gsapvault.com/effects/variable-font-pressure
Live demo: https://gsapvault.com/demos/variable-font-pressure/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £10 |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | variable-font, text-animation, hover-effect |
| Uses Lenis | No |

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

Move over the word and its letters swell beneath the pointer through Mona Sans's real width and weight axes. Nearby letters narrow, so the pressure appears to pass through the type while the complete word keeps its original footprint. The deformation settles smoothly when the pointer leaves.

The demo includes an editable word and a keyboard-operated sweep. Touch visitors can drag across the headline without losing vertical page scrolling. Reduced motion shows a static word that can still be edited.

## Features

- Actual variable-font width and weight changes, rather than scaling a static glyph alone
- A local pressure wave with compressed neighbouring letters
- Fixed overall word width through shared advance-width compensation
- Pointer, touch drag and button-triggered sweep
- Editable headline with automatic fitting on small screens
- Readable no-JavaScript and reduced-motion states
- Local variable font asset and per-instance teardown API

## Use Cases

- Editorial and creative portfolio headlines that invite exploration
- Launch pages with a distinctive, contained hero word
- Typography-led brand sites where one interactive word can carry the page

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

The headline responds to the pointer as though its letters were pressed into a fixed line of type. The nearest letter grows broader and bolder while surrounding letters make space for it. Move away and the word returns to its resting shape; the Play sweep button shows the same response without a pointer.

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

Keep `mona-sans-latin.woff2` beside `style.css`. If you move the font, update the `@font-face` URL.

**2. Add before closing `</body>`:**

_Code snippet omitted: it ships with the download._

**3. Add the effect HTML:**

_Code snippet omitted: it ships with the download._

The script mounts automatically. The fallback span carries the accessible headline and remains readable if JavaScript or GSAP fails.

### Using It With Your Own Design

**Required markup:** Keep `[data-pressure-root]`, `[data-pressure-word]`, `[data-pressure-fallback]`, `[data-pressure-glyphs]` and the `[data-pressure-composition]` ancestor. The optional `[data-pressure-input]` and `[data-pressure-sweep]` controls are shown in the demo. The script only mounts when the required hooks exist.

**Demo-only styling:** The grey ground, cobalt cue, guide line and control row can be removed. Replace their typography and spacing to fit your page. The supplied Mona Sans file is licensed under the SIL Open Font License in `assets/OFL.txt`.

**Functional CSS:** Keep the variable `@font-face`, `.pressure-word` positioning, `.pressure-glyphs` height, absolutely positioned `.pressure-glyph` spans and the `.is-live` fallback swap. The fallback text must stay visible until the font and script are ready. `.pressure-composition { touch-action: pan-y }` lets mobile visitors scroll vertically while dragging horizontally over the word.

The effect needs a font with working `wdth` and `wght` axes. This bundle uses Mona Sans's width range 75–125 and weight range 200–900. If using another font, adapt the axis limits in `render()` and verify its metrics in the demo.

### Options

| Attribute | Values | Default | Description |
|---|---|---:|---|
| `data-radius` | `0.45`–`1.4` | `0.72` | Width of the pressure field in letters |
| `data-strength` | `0`–`1` | `1` | Intensity of the width and weight change |

Use a short headline of up to 12 Latin letters or digits for the clearest result. The demo input normalises to uppercase and filters unsupported characters.

### Accessibility

The original text stays in the DOM for screen readers; animated glyphs are `aria-hidden`. The sweep is a native button with visible focus. Touch dragging leaves vertical scrolling available. When `prefers-reduced-motion: reduce` is active, pointer and sweep motion stop, the word remains static, and text editing continues. Without JavaScript or GSAP, the fallback headline remains visible.

### Dependencies

- GSAP 3.12+ (demo pinned to 3.15.0)
- Bundled Mona Sans variable font, licensed under SIL OFL 1.1

Each root has an independent `pressureEffect` instance. `revert()` removes listeners, observers, animation, generated glyphs and inline sizing, returning to the readable fallback headline. The effect does not create or control Lenis or ScrollTrigger.

## 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 Variable Font Pressure](https://gsapvault.com/effects/variable-font-pressure)
- [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