Wire text

The letter under the pointer turns into a dashed vector outline with handles and its size, like a selection in a drawing app; the letters it leaves stay outlined a moment.

enhancer
pointer
svg
letters
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

Wire text example

Vector type

Code

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

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<p class="demo-num" data-motion="wire-text">Vector type</p>

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

<WireText>Your content</WireText>

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

<template>
  <WireText>Your content</WireText>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "wire-text";

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

Options

Attribute	Default	What it does
`data-motion-color`	`#f6a04d`	Selection color
`data-motion-reach`	`1`	Reach around the letters
`data-motion-trail`	`900`	How long a left letter stays outlined
`data-motion-label`	`true`	Show the letter's size
`data-motion-idle`	`true`	Step through the letters when nobody points

The text reads once for screen readers (the letter pieces are aria-hidden) and the outline, frame and size label are an aria-hidden layer over the letters, so nothing reflows. Reduced motion keeps the selection but drops the marching dashes, the gliding frame and the idle stepping. The idle loop stops off screen and in hidden tabs.

Size

wire-text.js is 2.2 KB gzip, with text-kit.js 2.6 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.