Text Effects — Playground

Bring your text to life

plays on load — hit ↻ Replay

Split Reveal — options

Split by

Rise from

Stagger (s) 0.03

Duration (s) 0.6

Trigger

Sample option — updates as you tweak

'text_effect' => [
    'type'  => 'multi-picker',
    'value' => [
        'effect' => 'split_reveal',
        'split_reveal' => [ 'split_by' => 'words', 'direction' => 'up', 'stagger' => 0.03, 'duration' => 0.6, 'trigger' => 'view' ],
    ],
],

Pick an effect on the right and tweak its options. Everything here runs the real module — the same split engine (characters / words / lines), the .sc-text--* / .upw-text-* classes and --text-* variables the builder outputs — so what you see is what ships. Reveal and Kinetic effects play on load; hit ↻ Replay to run them again. On hover / scroll effects trigger when you hover the text. The Sample option updates as you tweak.

What this covers

The switcher includes every text effect, grouped by kind — Reveal (split/blur/mask/flip/ scale/slide/bounce/random/skew), Kinetic (scramble, typewriter, count-up, split-flap, matrix, rotating words, magnetic), Continuous (shimmer, gradient, rainbow, neon, breathing, float, wave, jitter, chromatic), On hover / scroll (marker, strike/box, outline→fill, fill sweep, colour wave, letter jump, weight/width sweep, expand spacing) and Special (glitch, image mask). The one effect not previewed here is Kinetic Scroll, which reacts to scroll velocity — see Text Effects for the full reference.

A couple of notes

Weight Sweep animates font-weight as well as the variable-font wght axis, so it works on any multi-weight font (stepped) and smoothly on a variable one. Width Sweep uses the wdth axis, which needs a variable font — this preview approximates it with a horizontal scale so you can see it, but on a site with a variable font the true width axis is used.
Colors use the theme color-preset picker, so they actually store [ 'predefined' => '', 'custom' => '#hex' ]. The playground shows the resolved color.

How the option is stored

Text Effect is a multi-picker — the saved value carries the chosen effect plus a nested settings map keyed by that effect id:

'text_effect' => [
    'type'  => 'multi-picker',
    'value' => [
        'effect'  => 'shimmer',
        'shimmer' => [ 'color_a' => '#8a8f98', 'color_b' => '#ffffff', 'speed' => 3 ],
    ],
],

← Back to Text Effects

Split Reveal — options

How the option is stored​

How the option is stored