Near type

Letters grow bolder the closer the pointer comes, and their neighbors slide apart to make room, so the line breathes without moving the page.

enhancer
text
typography
pointer
weight
proximity
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

Near type example

Bring the pointer close and the letters lean in

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-nt-big" data-motion="near-type">Bring the pointer close and the letters lean in</p>

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

<NearType>Your content</NearType>

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

<template>
  <NearType>Your content</NearType>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "near-type";

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

Options

Attribute	Default	What it does
`data-motion-from`	`0`	Weight far from the pointer (0: the text's own weight)
`data-motion-to`	`800`	Weight right under the pointer
`data-motion-radius`	`130`	How far the pull reaches
`data-motion-falloff`	`smooth`	How the weight eases off with distance
`data-motion-color`	auto	Tint the nearest letters toward this color (empty: no tint)

Screen readers get the sentence once, as written; the split letters are aria-hidden. The effect only restyles text the reader can already see, so it needs no keyboard equivalent. Touch: drag a finger along the line. Reduced motion leaves the text as it is. 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

near-type.js is 1.5 KB gzip, with text-kit.js 2.6 KB it needs. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.