Text Pressure

`<pura-text-pressure>` is variable-font pressure: each letter thickens (`wght`) and widens (`wdth`) as the pointer approaches it and relaxes as it leaves, so the cursor presses a bulge through the type. Where `<pura-type-morph>` interpolates the whole text's axes by scroll or time, here the driver is the pointer distance per glyph. The axes ride the native `font-weight` and `font-stretch` properties (not `font-variation-settings`), which always re-rasterize the glyph; a window `pointermove` handler throttled to one rAF measures each glyph and writes interpolated custom properties per span, and a short CSS transition (`--pura-text-pressure-duration`) smooths the steps. Set the `text` attribute to render the per-glyph spans in the pure template (the server paints them at the base axes), or slot text and let the client split it. The animated spans are aria-hidden; the accessible copy stays readable. Needs a variable font with the relevant axes: system UI fonts expose `wght` on most platforms, `wdth` needs a font like Roboto Flex. Reduced motion never starts pointer tracking, so the text sits at its base axes. Each instance registers in `window.__puraTextPressures` by `data-pura-id` with `{ from, to, radius, glyphs }`.

Preview

<!-- letters bulge toward the cursor; slotted text is split on the client -->
<pura-text-pressure from-wght="300" to-wght="900" radius="180"
                    style="font: 300 4rem/1 system-ui, sans-serif;">
  Hover me
</pura-text-pressure>

<!-- server-rendered spans via the text attribute, with a width axis
     (needs a font that carries wdth, e.g. Roboto Flex) -->
<pura-text-pressure text="FLEX" from-wght="400" to-wght="1000"
                    from-wdth="100" to-wdth="151" radius="140"
                    style="font: 400 5rem/1 'Roboto Flex', sans-serif;"></pura-text-pressure>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/text-pressure.js"></script>

import "./pura/lib/text-pressure.js";