Text Reveal

Three distinct character-level reveal effects: blur rise, scale scatter, and wave rotation.

animation ds-anim-text

Usage

// Split text into spans, then stagger with different keyframes per effect.

// Effect 1 — Blur rise
Motion.animate(chars, { opacity:[0,1], y:[24,0], filter:['blur(8px)','blur(0px)'] },
    { delay: Motion.stagger(0.03), duration:0.5, easing:[0.22,1,0.36,1] })

// Effect 2 — Scale scatter (random x offsets per char)
Motion.animate(chars[i], { opacity:[0,1], x:[rand,0], scale:[0,1] },
    { delay: i*0.04, duration:0.4 })

// Effect 3 — Wave rotation
Motion.animate(chars, { opacity:[0,1], rotateZ:[-25,0], y:[12,0] },
    { delay: Motion.stagger(0.025, {from:'center'}), duration:0.4 })