Interactive example
Split Text
basic split
SplitText — declarative text splitting with continuous loop animations.
Hello World
• Clean declarative implementation using Components
• Switch modes to see different split levels
split templates
Custom HTML templates and accessibility options for split text.
Split Me
• block: Wraps elements in block spans
• clip: Overflow clipping for animations
• accessible: Preserves screen reader text
cjk text
Language-aware splitting using Intl.Segmenter for Japanese, Chinese, and Thai.
アニメ
• Uses Intl.Segmenter for word boundaries
• Continuous declarative loop animation
split effects
Different animation effects on split text elements with continuous loops.
Anime.js
• Effect: Fade up with stagger
• Continuous declarative loop animation
advanced timeline
Official Anime.js v4 text splitter capabilities reproduced using react-animejs components.
All-in-one text splitter
テキストスプリッター
• Clean declarative implementation mimicking official anime.js demo
• Uses dataset.line for alternating y-axis animations
• Combines sequential timeline staggering
• Loops infinitely
advanced split properties
Debug mode, includeSpaces, custom templates, and $target access.
Advanced Props
• debug: Visualizes split boundaries with colored outlines
• includeSpaces: Wraps space characters as separate elements
• custom-wrap: Uses custom HTML string template for chars
• data-attr: Uses function template to add data attributes
• $target: Direct access to the root split element