105
AI ready

Variable Font Pressure

£10 or the whole Vault, £99

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

intermediate
3 more details
variable-fonttext-animationhover-effect

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Variable Font Pressure demo in new tab

Released

About this effect

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.

Read the full effect overview

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.

Variable Font Pressure - GSAP animation effect preview

What's included

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

Perfect for

3 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

How it works

1 section

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.

Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Variable Font Pressure opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£10 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £99, one payment.

Documentation

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.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.