Morphing Text

`<pura-text-morph>` is the gooey morphing text: the current phrase melts and fuses fluidly into the next one, cycling forever. Two stacked, aria-hidden text layers crossfade blur and opacity (WAAPI) under an SVG alpha-threshold filter, so wherever the blurred glyphs overlap the snapped alpha reads as one liquid blob. Unlike `pura-morph`, which interpolates SVG paths, and `pura-type-morph`, which drives variable font axes, this one melts whole phrases into each other. Set the phrases with the pipe separated `texts` attribute and slot the first phrase as the pre-JS paint and accessible copy; `morph` and `hold` time the melt and the pause, `blur` sets the peak melt blur, and `--pura-text-morph-smoothing` softens the thresholded edge. Heavy weights and large sizes fuse best. The loop pauses offscreen, never starts under reduced motion (the slotted text stays settled), and each instance registers in `window.__puraTextMorphs` by `data-pura-id` with `{ texts, next, pause, resume }`. A `pura-text-morph-change` event fires on every phrase swap.

Preview

<!-- hero headline cycling through three verbs -->
<pura-text-morph texts="Build|Launch|Scale" style="font-size: 4rem; font-weight: 800;">Build</pura-text-morph>

<!-- slower, softer melt across four greetings -->
<pura-text-morph texts="Hello|Bonjour|Hallo|Ciao" morph="1.8" hold="2" blur="10" style="font-size: 2.5rem; font-weight: 700;">Hello</pura-text-morph>

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

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