Split Text

`<pura-split>` is SplitText. It splits the slotted text into lines, words or characters, wraps each in a clipping mask, and reveals them with a staggered spring rise from below, the gsap SplitText / awwwards hero move. The motion is the native spring primitive (`<pura-spring>`): a CSS transition whose timing function is a sampled `linear(...)` spring, so there is no per-frame JS. Line splitting measures layout (`offsetTop`) after fonts load, so each visual line rises as one block and survives wrapping. Accessibility and SSR are preserved: the original text stays in the light DOM as the accessible copy (the animated per-unit spans are `aria-hidden`), and before the script runs the text is fully visible with no JS and on the server. `trigger="view"` (default) reveals on scroll-in; `trigger="load"` reveals on connect. Beyond the default rise, `effect="scatter"` flies the units in from seeded random offsets and rotations (deterministic, so runs are reproducible), and `effect="wave"` fades them in and bobs each one on an infinite phase-shifted sine, tunable via `--pura-split-wave-amp` and `--pura-split-wave-dur`. Each instance registers in `window.__puraSplits` by `data-pura-id` with `{ by, units, replay }`.

Preview

<pura-split by="char" trigger="load">Motion, native.</pura-split>

<pura-split by="char" effect="scatter" stagger="25">Scatter in.</pura-split>

<pura-split by="char" effect="wave" stagger="80">Wavy text</pura-split>

<pura-split by="line" stagger="120" preset="wobbly">
  Splits into visual lines and rises each one
  with a real spring, no library, no rAF.
</pura-split>

<script type="module">
  const s = document.querySelector('pura-split');
  s.replay(); // re-run the reveal
</script>

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

import "./pura/lib/split.js";