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.

Preview

ONE TWO THREE

Code

= 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.

Preview

DESIGN DEVELOP DEPLOY SCALE MAINTAIN REPEAT

Code

= daisy_text_rotate(texts: %w[DESIGN DEVELOP DEPLOY SCALE MAINTAIN REPEAT], css: "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.

Preview

DESIGN DEVELOP DEPLOY

Code

= daisy_text_rotate(css: "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.

Preview

DESIGN DEVELOP DEPLOY

Code

= daisy_text_rotate(css: "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.

Preview

CUSTOM

CONTENT

HERE

Code

- 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-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.

Preview

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

Code

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

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

  = daisy_text_rotate(css: "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.

Preview

Providing AI Agents for Designers Developers Managers

Code

.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.

Preview

HUGE TEXT HERE Medium Sized Text Small Text Too

Code

.flex.flex-col.gap-8
  = daisy_text_rotate(css: "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.

Preview

SPACED OUT LINES

Code

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

Made with by Profoundry .

Text Rotates

Basic Text Rotate

Text Rotate with texts Shorthand

Text Rotate with Centered Items

Text Rotate with Icons and Links

Text Rotate with Custom Content

Text Rotate with Custom Duration

Text Rotate Inline in a Sentence

With Different Font Sizes

With Custom Line Height

Docs

Guides

Hero

Daisy