Marquee / Scrolling Text Component

[alrescha79-cmd]

I would like to propose adding a Marquee (scrolling text) component to DaisyUI.

This component allows text or inline content to automatically scroll when the content width exceeds the available space. It can be particularly useful in responsive interfaces, dashboards, and compact UI elements where long text must remain readable without breaking layout.

Although this can be implemented with custom CSS animations, a built-in DaisyUI component would make it easier to reuse and maintain consistent behavior across different interfaces.

Use Cases

1. Limited Space UI Elements

   Many UI components have fixed or constrained widths such as badges, chips, tabs, or labels. When text exceeds the available width, it may be truncated or overflow the layout. A marquee component allows the full content to remain visible without expanding the component size.

   Example:

    <div class="w-32 border p-2">
      <div class="marquee">
        <span class="marquee-content">
          This is a long label that exceeds the container width
        </span>
      </div>
    </div>
   

2. Mobile View With Limited Screen Space

   On mobile devices, screen width is significantly smaller. Long text inside headers, navigation bars, or cards often becomes truncated. A scrolling text component can help preserve readability while maintaining a clean layout.

   Example:

    <div class="w-full max-w-xs">
      <div class="marquee">
        <span class="marquee-content">
          This is a very long title that would normally be truncated on smaller screens
        </span>
      </div>
    </div>
   

3. Navigation Bars or Page Titles

   Page titles or navigation labels sometimes exceed available space, especially in responsive layouts.

   Example:

    <div class="navbar">
      <div class="marquee">
        <span class="marquee-content">
          Dashboard Analytics and Monitoring Overview
        </span>
      </div>
    </div>
   

4. Table Cells With Long Content

   Tables often contain long identifiers such as filenames, transaction IDs, hashes, or descriptions that do not fit inside a cell.

   Example:

    <td class="max-w-xs">
      <div class="marquee">
        <span class="marquee-content">
          item_identifier_3fa92b8cde9f0a123456789
        </span>
      </div>
    </td>
   

5. Notification or Announcement Banners

   Announcements, alerts, or system messages may contain longer messages than the container width.

   Example:

    <div class="alert alert-info">
      <div class="marquee">
        <span class="marquee-content">
          Scheduled maintenance will take place tonight. Please save your work in advance.
        </span>
      </div>
    </div>
   

6. Dashboard Widgets or Monitoring Panels

   Monitoring dashboards or status panels sometimes display long system messages, logs, or status descriptions within a small widget area.

   Example:

    <div class="card w-64">
      <div class="card-body">
        <div class="marquee">
          <span class="marquee-content">
            Service status: running normally with extended diagnostic logging enabled
          </span>
        </div>
      </div>
    </div>
   

7. Compact Components (Badges, Chips, Tags)

   Compact UI elements often have strict width constraints but may still need to display dynamic content.

   Example:

    <div class="badge w-32">
      <div class="marquee">
        <span class="marquee-content">
          Very long category label example
        </span>
      </div>
    </div>
   

8. Information Tickers or Data Streams

   Some interfaces display continuously updating information such as messages, statistics, or updates.

   Example:

    <div class="marquee">
      <span class="marquee-content">
        Update • Version released • Performance improvements • New components available
      </span>
    </div>
   

Proposed API

Basic usage:

<div class="marquee">
  <span class="marquee-content">
    Scrolling text example
  </span>
</div>

Possible Variants

• marquee
• marquee-vertical
• marquee-reverse
• marquee-hover-pause
• marquee-slow
• marquee-fast
• etc

Benefits

• Handles overflow text without breaking layouts
• Improves usability in responsive and mobile interfaces
• Reduces the need for custom CSS implementations
• Provides a reusable pattern for compact UI components

Alternative Approaches

This behavior can currently be implemented using custom CSS animations. However, having an official DaisyUI component would improve consistency and developer experience across projects.

If this idea aligns with the project goals, I would be happy to contribute the implementation and open a pull request.