PtahUi.Components.TextRotate (PtahUI v0.1.0)

Copy Markdown View Source

Text Rotate — cycles through up to 6 text items with a slide-fade animation. The animation pauses on hover. Duration defaults to 10 seconds per full cycle.

Example

<%!-- Basic --%>
<.text_rotate>
  <:item>ONE</:item>
  <:item>TWO</:item>
  <:item>THREE</:item>
</.text_rotate>

<%!-- Inline in a sentence --%>
<p class="text-2xl font-semibold">
  Providing AI Agents for
  <.text_rotate>
    <:item class="text-sky-500">Designers</:item>
    <:item class="text-violet-500">Developers</:item>
    <:item class="text-rose-500">Managers</:item>
  </.text_rotate>
</p>

Summary

Functions

text_rotate(assigns)

Functions

text_rotate(assigns)

Attributes

  • id (:string) - Defaults to nil.
  • duration (:integer) - Full cycle duration in seconds. Defaults to 10.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • item (required) - A text item to rotate through (up to 6). Accepts attributes:
    • class (:string)