Pull Request Description

Adds ease-split-text — a pure CSS per-letter staggered entrance animation utility. Closes #[GAP4 issue number].

Each letter animates as an independent unit using nth-child staggered animation-delay on individual <span> wrappers — zero JavaScript. Three variants included: fade-only, slide-up, and fade+blur. Both the fade and slide variants reuse ease-kf-fade-in and ease-kf-slide-up already defined in core/animations.css — zero new keyframes added to core.

Type of Change

• ✨ New animation / hover effect

Submission Checklist

⚠️ PRs that fail this checklist will be closed without review.

• All changes are inside submissions/examples/ease-split-text/
• Includes demo.html — self-contained, opens in browser with no server
• Includes style.css — raw CSS for the proposed feature
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

Feature Description

What does this add?

A pure CSS per-letter staggered entrance animation with three variants (fade, slide-up, fade+blur), three speed presets (fast/default/slow), and full prefers-reduced-motion support — covering up to 30 characters via nth-child delay table.

How does a developer use it?

<!-- Fade only (default) -->
<h1 class="ease-split-text">
  <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
</h1>

<!-- Slide up -->
<h1 class="ease-split-text ease-split-text-slide">
  <span>B</span><span>u</span><span>i</span><span>l</span><span>d</span>
  <span class="ease-split-space"> </span>
  <span>f</span><span>a</span><span>s</span><span>t</span><span>e</span><span>r</span>
</h1>

<!-- Fade + blur — great for dark hero sections -->
<h1 class="ease-split-text ease-split-text-blur">
  <span>P</span><span>u</span><span>r</span><span>e</span>
  <span class="ease-split-space"> </span>
  <span>C</span><span>S</span><span>S</span>
</h1>

<!-- Custom stagger speed -->
<h1 class="ease-split-text ease-split-text-slide" style="--split-delay-step: 60ms;">
  <span>D</span><span>r</span><span>a</span><span>m</span><span>a</span><span>t</span><span>i</span><span>c</span>
</h1>

Why does it fit EaseMotion CSS?

EaseMotion CSS animates at two levels — block elements (staggered-reveal, staggered-fade-entrance) and whole strings (ease-typewriter). Per-character animation is the missing layer between them:

The implementation follows EaseMotion's core philosophy exactly:

• Reuses existing keyframes — fade variant uses ease-kf-fade-in; slide variant uses ease-kf-slide-up — both already in core/animations.css. Zero new keyframes added to core
• Token-first — --split-delay-step, --split-rise, --split-duration, --split-ease are all overridable CSS variables
• Human-readable classes — .ease-split-text-slide is immediately self-explanatory
• prefers-reduced-motion safe — all letters rendered instantly with opacity: 1 — text is never hidden from users who need reduced motion

Demo

• Demo added (demo.html works by opening directly in a browser)

The demo covers 6 sections:

1. Fade-only variant with multi-word examples and accent color
2. Slide-up variant with default and custom rise distance
3. Fade+blur variant on a dark hero background
4. Speed presets (fast/default/slow) side by side
5. Full usage code for all patterns
6. Comparison table proving this is distinct from ease-typewriter and staggered-reveal

Browser Testing

• Chrome
• Edge

Notes for Maintainer

• Class names used: .split-text, .split-text-slide, .split-text-blur, .split-text-fast, .split-text-slow, .split-space — please rename to ease-split-text-* on integration
• The fade and slide variants reference ease-kf-fade-in and ease-kf-slide-up by name — when integrating into core these will work directly since both keyframes already exist
• nth-child stagger table covers positions 1–30 using calc(var(--split-delay-step) * N) — a single token change updates the entire stagger sequence
• prefers-reduced-motion block sets opacity: 1 !important and animation: none !important on all letter spans — text is never invisible to users who need reduced motion, not just slowed down
• Verified: no existing submission animates at the per-character level. staggered-reveal staggers block elements; ease-typewriter reveals a string via width clipping — both are fundamentally different techniques with different visual results