Feature: Add Text Animation Block inspired by Kawai Text Animations

[davidperezgar]

Overview

Implement a Text Animation block for FrontBlocks inspired by the Kawai Text Animations showcase, which features 100 different CSS/JS text animation effects.

Goal

Add a Gutenberg block that allows users to apply eye-catching text animations to headings and paragraphs, with a curated set of animation presets selectable from the block sidebar.

Animation Categories to Implement

Based on common patterns in text animation libraries of this style, the following categories should be covered:

Entrance Animations

• Fade In – text fades in from transparent
• Fade In Up / Down / Left / Right – fade combined with directional slide
• Zoom In – text scales up from a smaller size
• Flip In – text flips on X or Y axis on entry

Typewriter Effects

• Typewriter – characters appear one by one as if being typed
• Typewriter with cursor – includes a blinking cursor
• Delete & Retype – types, deletes, and retypes in a loop

Character-by-Character Animations

• Wave – each character animates with a wave motion
• Bounce – characters bounce in sequence
• Rotate In – each character rotates into place
• Fall In – characters drop from above one by one
• Rise Up – characters rise from below one by one

Highlight & Attention Effects

• Glitch – text flickers with a glitch/distortion effect
• Neon Glow – pulsing neon-like glow on text
• Shake – text shakes to draw attention
• Pulse – text rhythmically scales up and down
• Color Cycle – text color transitions through a spectrum

Loop / Continuous Animations

• Marquee – text scrolls horizontally
• Infinite Wave – continuous wave motion
• Blink – text blinks on/off

Special Effects

• Scramble / Matrix – characters randomize before resolving to the final text
• Morphing – smoothly transitions between two different text strings
• Reveal with mask – text is revealed by a sliding mask/curtain

Block Settings (Inspector Controls)

• Animation Type – dropdown with all available presets (grouped by category)
• Trigger – on page load, on scroll into view, or on hover
• Duration – animation speed (slow / normal / fast / custom ms)
• Delay – initial delay before the animation starts
• Loop – toggle to repeat the animation continuously
• Easing – ease-in, ease-out, ease-in-out, linear
• Text content – rich text field
• Typography – font size, weight, color (native Gutenberg controls)

Technical Notes

• Use CSS animations (@keyframes) as the primary implementation where possible for performance.
• Use JavaScript (IntersectionObserver) for scroll-triggered animations.
• Animations should respect the user's prefers-reduced-motion media query — disable or reduce motion when set.
• The block should be registered under the frontblocks namespace: frontblocks/text-animation.
• Preview animations live in the editor (not just on the frontend).

Reference

• Inspiration: https://kawai-text-animation.pages.dev/ (100 Text Animations showcase)
• Visit the URL in a browser to review all available animation styles before implementation.

Acceptance Criteria

• Block is visible in the Gutenberg inserter under the FrontBlocks category
• At least 20 animation presets are available in the initial release
• All animations work on the frontend without JavaScript errors
• Scroll-triggered mode uses IntersectionObserver
• prefers-reduced-motion is respected
• Block preview works inside the editor
• Block passes accessibility checks (no ARIA issues with animated text)
• Works on mobile (no layout breaking animations)