Swell

Letters under the pointer swell wide, bold and tall while the far ones draw in, so the line keeps its width; at rest a slow wave runs through them.

enhancer
pointer
hover
weight
width
headline
variable
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Swell example

PRESSURE

Code

It follows the controls above: change an option and the code changes with it.

<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>

<p class="m-demo-max m-demo-light" data-motion="swell">PRESSURE</p>

import { Swell } from "./motion/react/Swell";

<Swell>Your content</Swell>

<script setup lang="ts">
import Swell from "./motion/vue/Swell.vue";
</script>

<template>
  <Swell>Your content</Swell>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "swell";

The wrappers: Swell.tsx (React, TypeScript) and Swell.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-reach`	`2.4`	Reach around the pointer, in letter heights
`data-motion-width`	`1.3`	How much wider the near letters get (the far ones give the room back)
`data-motion-rise`	`1.18`	Height under the pointer
`data-motion-bold`	`300`	Extra weight under the pointer
`data-motion-color`	`#f6a04d`	Color under the pointer
`data-motion-idle`	`true`	A slow wave when the pointer rests

The text stays one readable string: the letters sit in an aria-hidden copy and the element carries the full text (aria-label on headings, links and buttons, a visually hidden copy elsewhere). Only transforms, weight and color change inside fixed letter boxes, so no layout shifts. Under reduced motion the letters stay at rest. Only transform, opacity and paint change, so nothing around it moves. Frames run through the shared loop, which stops off screen, in hidden tabs and under reduced motion; reduced motion shows the final state with no movement.

Size

swell.js is 1.6 KB gzip, with text-kit.js 3.2 KB it needs. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.