# `PetalComponents.TextAnimation`
[🔗](https://github.com/petalframework/petal_components/blob/v4.15.3/lib/petal_components/text_animation.ex#L1)

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.

# `gradient_text`

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`

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`

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="shadcn for Phoenix" 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`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*