React Architecture Concept • Core Motion Model
Split Text: Per-Character & Per-Word Kinetic Typography in React
Splitting text into individual glyphs, words, and lines is one of the most powerful techniques for creating eye-catching editorial headlines and dramatic hero typography. Historically, developers relied on complex regex DOM splitting plugins like GSAP SplitText, which wrap every character in nested <span> tags, breaking screen readers, disrupting accessibility trees, and causing severe DOM layout bloat. ExodeUI renders per-character kinetic typography on a hardware-accelerated text engine that retains full semantic DOM accessibility while giving every letter individual spring physics.
Text is drawn on the canvas by the runtime. The ExodeSEO component can add a visually hidden HTML layer (headings, paragraphs, buttons) so screen readers and search engines can read it; test it with your own screen reader setup.
Runnable ExodeUI React Implementation
Production ReadyMount the ExodeUICanvas component and bind parameters declaratively without imperative lifecycle hooks:
import React, { useState } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function KineticHeadline() {
const [headlineText, setHeadlineText] = useState('LIVING INTERFACE');
return (
<div className="headline-wrapper">
<ExodeUICanvas
src="/scenes/split-text-scene.json"
inputs={{
"text": headlineText,
"waveVelocity": 1.4,
"springDamping": 16,
"staggerDelay": 0.04
}}
autoPlay={true}
/>
<input
type="text"
value={headlineText}
onChange={(e) => setHeadlineText(e.target.value)}
className="mt-4 px-3 py-1 border rounded"
/>
</div>
);
}Frequently Asked Questions about split text
Does ExodeUI Split Text harm SEO or accessibility?
No. Unlike manual span splitting which fragments words into separate nodes for screen readers, ExodeUI keeps original text intact in the accessible DOM tree.
Can individual letters have independent physics gravity or mouse attraction?
Yes. ExodeUI treats each letter glyph as a physical rigid body that can bounce, react to cursor proximity, and snap back into place.
How are word wraps and responsive line breaks handled during split text animations?
ExodeUI continuously monitors bounding container widths and recalculates character origins on resize without re-triggering entrance animations.