Animated text.
Ports the Pines typing effect and text animation.
<.typing_effect texts={["Fast", "Accessible", "Yours"]} />
<.text_animation text="Welcome to Pine UI" />Summary
Animation
Renders text that animates in one character at a time.
Renders text that types itself out, character by character.
Animation
Renders text that animates in one character at a time.
No GSAP required
Pines drives this with GSAP loaded from a CDN. This port splits the text into spans on the
server and animates them with CSS transitions and a per-character transition-delay, so
there is no third-party JavaScript, nothing to load, and no flash of unstyled text.
The characters are aria-hidden and the whole string is exposed once to assistive
technology — splitting a word into per-character spans otherwise makes screen readers
spell it out.
Attributes
id(:string) - Defaults tonil.text(:string) (required)effect(:string) - Per-character entrance. Defaults to"fade". Must be one of"fade","blow", or"slide".stagger(:integer) - Milliseconds between characters. Defaults to40.class(:string) - Defaults tonil.- Global attributes are accepted.
Renders text that types itself out, character by character.
Accessibility
The animated text is aria-hidden and the full phrase list is rendered in a visually
hidden element. A screen reader therefore reads the content once, calmly, instead of
announcing every intermediate keystroke — which is what an aria-live region on the
animated node would do.
The animation also honours prefers-reduced-motion: when the user has asked for less
motion, the first phrase is shown statically and no timers run.
Attributes
id(:string) - Defaults tonil.texts(:list) (required) - Phrases to cycle through.type_speed(:integer) - Milliseconds per character while typing. Defaults to110.erase_speed(:integer) - Defaults to50.pause_end(:integer) - Pause once a phrase is complete. Defaults to1500.cursor(:boolean) - Defaults totrue.loop(:boolean) - Defaults totrue.class(:string) - Defaults tonil.text_class(:string) - Defaults tonil.- Global attributes are accepted.