PetalComponents.TextAnimation (petal_components v4.1.0)

Copy Markdown View Source

Animated text effects for hero sections and landing pages.

  • gradient_text/1 — a gradient that sweeps through the text (pure CSS)
  • shimmer_text/1 — a band of light passing over the text (pure CSS)
  • word_rotate/1 — cycles through a list of words (requires the PetalWordRotate hook from the JS bundle)
  • typing_effect/1 — types text out character by character with a blinking caret (requires the PetalTypingEffect hook from the JS bundle)

The hook-based effects render their full text server-side, so they degrade gracefully without JavaScript and stay visible to search engines.

Summary

Functions

gradient_text(assigns)

Text filled with an animated gradient that sweeps from end to end.

shimmer_text(assigns)

Muted text with a band of light sweeping across it — the classic "✨ Introducing ..." pill treatment.

typing_effect(assigns)

A typewriter effect. The full text is rendered server-side (visible without JavaScript); the PetalTypingEffect hook replays it character by character.

word_rotate(assigns)

Cycles through a list of words with a smooth roll-up transition. The first word is rendered server-side; the PetalWordRotate hook animates the rest.

Functions

gradient_text(assigns)

Text filled with an animated gradient that sweeps from end to end.

<.h1><.gradient_text>Introducing Petal</.gradient_text></.h1>

<.gradient_text color_from="#38bdf8" color_to="#818cf8" class="text-5xl font-bold">
  Build faster
</.gradient_text>

Attributes

  • color_from (:string) - start color of the gradient. Defaults to "#ffaa40".
  • color_to (:string) - end color of the gradient. Defaults to "#9c40ff".
  • duration (:string) - time for one full gradient sweep. Defaults to "8s".
  • class (:any) - extra classes (set font size/weight here). Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

shimmer_text(assigns)

Muted text with a band of light sweeping across it — the classic "✨ Introducing ..." pill treatment.

<.shimmer_text class="text-sm font-medium">✨ Introducing Petal Components v4</.shimmer_text>

Attributes

  • duration (:string) - time for one full shimmer pass. Defaults to "2.5s".
  • class (:any) - extra classes (set font size/weight here). Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

typing_effect(assigns)

A typewriter effect. The full text is rendered server-side (visible without JavaScript); the PetalTypingEffect hook replays it character by character.

<.typing_effect id="typing" text="mix igniter.install petal_components" class="font-mono" />

Attributes

  • id (:string) (required)
  • text (:string) (required) - the text to type out.
  • speed (:integer) - milliseconds per character. Defaults to 60.
  • start_delay (:integer) - milliseconds to wait before typing starts. Defaults to 0.
  • loop (:boolean) - delete the text and type it again, forever. Defaults to false.
  • cursor (:boolean) - show a blinking caret. Defaults to true.
  • class (:any) - extra classes (set font size/weight here). Defaults to nil.
  • Global attributes are accepted.

word_rotate(assigns)

Cycles through a list of words with a smooth roll-up transition. The first word is rendered server-side; the PetalWordRotate hook animates the rest.

<.h1>
  Petal makes your app
  <.word_rotate id="word-rotate" words={["beautiful", "fast", "accessible"]} class="text-primary-600" />
</.h1>

Attributes

  • id (:string) (required)
  • words (:list) (required) - the words to cycle through.
  • interval (:integer) - milliseconds each word stays on screen. Defaults to 2500.
  • class (:any) - extra classes (set font size/weight here). Defaults to nil.
  • Global attributes are accepted.