Text Rotates

API Docs

Display up to 6 lines of text, one at a time, with an infinite loop CSS animation. The duration is 10 seconds by default and the animation pauses on hover. Perfect for rotating hero headlines, cycling through feature keywords, or animating taglines on marketing pages.

Basic Text Rotate

The Text Rotate component cycles through multiple text items with a smooth animation. Use the block API to add items individually.

ONE TWO THREE

= daisy_text_rotate do |rotate|
  - rotate.with_item { "ONE" }
  - rotate.with_item { "TWO" }
  - rotate.with_item { "THREE" }

Text Rotate with texts Shorthand

For simple use cases, you can pass an array of strings via the texts parameter instead of using the block API.

DESIGN DEVELOP DEPLOY SCALE MAINTAIN REPEAT

= daisy_text_rotate(texts: %w[DESIGN DEVELOP DEPLOY SCALE MAINTAIN REPEAT], css: "text-5xl sm:text-7xl")

Text Rotate with Centered Items

Use the wrapper_css parameter to apply alignment utilities to the wrapper part that surrounds all text items.

DESIGN DEVELOP DEPLOY

= daisy_text_rotate(css: "text-5xl sm:text-7xl", wrapper_css: "justify-items-center") do |rotate|
  - rotate.with_item { "DESIGN" }
  - rotate.with_item { "DEVELOP" }
  - rotate.with_item { "DEPLOY" }

Text Rotate with Icons and Links

Each item supports icons (via left_icon / right_icon) and links (via href). When an href is provided, the item is rendered as an <a> tag automatically.

DESIGN DEVELOP DEPLOY

= daisy_text_rotate(css: "text-5xl sm:text-7xl") do |rotate|
  - rotate.with_item(icon: "sparkles", icon_css: "size-16") { "DESIGN" }
  - rotate.with_item(href: "https://example.com", left_icon: "arrow-top-right-on-square", left_icon_css: "size-16") { "DEVELOP" }
  - rotate.with_item(right_icon: "rocket-launch", right_icon_css: "size-16") { "DEPLOY" }

Text Rotate with Custom Content

Instead of (or in addition to) using with_item, you can pass custom content directly in the block. Add the text-rotate-item class to any element you want to participate in the rotation, including other components like Avatars.

CUSTOM

CONTENT

HERE

- ladies = (1..4).map { |i| image_path("avatars/lady-smiling-#{i}.jpg") }
- classes = "text-rotate-item inline-flex items-center gap-4"

= daisy_text_rotate(css: "text-5xl sm:text-7xl") do
  %span.text-primary{ class: classes }
    = daisy_avatar(css: "size-14", src: ladies[1])
    CUSTOM
  %span.text-secondary{ class: classes }
    = daisy_avatar(css: "size-14", src: ladies[2])
    CONTENT
  %span.text-accent{ class: classes }
    = daisy_avatar(css: "size-14", src: ladies[3])
    HERE

Text Rotate with Custom Duration

Override the default 10-second duration using Tailwind's duration utilities like duration-6000 for 6 seconds or duration-3000 for 3 seconds.

3 SEC FAST ZOOM 6 SEC MEDIUM PACE 10 SEC DEFAULT SPEED

.flex.flex-col.gap-8
  = daisy_text_rotate(css: "text-5xl sm:text-7xl duration-3000") do |rotate|
    - rotate.with_item { "3 SEC" }
    - rotate.with_item { "FAST" }
    - rotate.with_item { "ZOOM" }

  = daisy_text_rotate(css: "text-5xl sm:text-7xl duration-6000") do |rotate|
    - rotate.with_item { "6 SEC" }
    - rotate.with_item { "MEDIUM" }
    - rotate.with_item { "PACE" }

  = daisy_text_rotate(css: "text-5xl sm:text-7xl") do |rotate|
    - rotate.with_item { "10 SEC" }
    - rotate.with_item { "DEFAULT" }
    - rotate.with_item { "SPEED" }

Text Rotate Inline in a Sentence

Text Rotate works seamlessly inline within sentences. Apply custom styling to individual items for visual variety.

Providing AI Agents for Designers Developers Managers

.my-2.flex.flex-row.gap-2.items-center
  %span Providing AI Agents for
  = daisy_text_rotate do |rotate|
    - rotate.with_item(css: "bg-teal-400 text-teal-800 px-2") { "Designers" }
    - rotate.with_item(css: "bg-red-400 text-red-800 px-2") { "Developers" }
    - rotate.with_item(css: "bg-blue-400 text-blue-800 px-2") { "Managers" }

With Different Font Sizes

Combine Text Rotate with Tailwind's font size utilities to create dramatic hero headlines or subtle inline animations.

HUGE TEXT HERE Medium Sized Text Small Text Too

.flex.flex-col.gap-8
  = daisy_text_rotate(css: "text-6xl sm:text-9xl") do |rotate|
    - rotate.with_item { "HUGE" }
    - rotate.with_item { "TEXT" }
    - rotate.with_item { "HERE" }

  = daisy_text_rotate(css: "text-4xl") do |rotate|
    - rotate.with_item { "Medium" }
    - rotate.with_item { "Sized" }
    - rotate.with_item { "Text" }

  = daisy_text_rotate(css: "text-xl") do |rotate|
    - rotate.with_item { "Small" }
    - rotate.with_item { "Text" }
    - rotate.with_item { "Too" }

With Custom Line Height

Adjust line height using Tailwind's leading- utilities to control vertical spacing between rotated items.

SPACED OUT LINES

= daisy_text_rotate(css: "text-5xl sm:text-7xl leading-[2]") do |rotate|
  - rotate.with_item { "SPACED" }
  - rotate.with_item { "OUT" }
  - rotate.with_item { "LINES" }

Made with by Profoundry .