Chamaac UI

DocsComponentsFavouritesSponsor

  • Overview

    • Get Started
    • Components

  • Animated Icons

    • Icons Overview

  • Backgrounds

    • NebulaNew
    • Grid BloomUpdated
    • Liquid Chrome
    • Waves
    • Interactive Grid

  • Sections

    • How It WorksNew
    • Stats Cards
    • Feature Steps
    • Gauge

  • Buttons

    • Buttons Overview
    • Premium Button
    • Glowing BorderNew
    • Shimmer Button
    • Slide Up Button
    • Focus Button
    • Neo Brutalist
    • Hover Arrow

  • Text Animations

    • Text LoopNew
    • Dancing Letters
    • Gif Text

  • Inputs

    • AI Input

  • Navigation

    • Dock

  • Carousels

    • Carousel

Text Loop

An animated text loop that cycles through a list of words with a typewriter and gradient effect.

Design
Limitless

Installation

npx shadcn@latest add https://chamaac.com/r/text-loop.json

Props

PropTypeDefaultDescription
staticTextstring"Design"The static text that appears before the animating loop.
rotatingTextsstring[]["Limitless", "Timeless", "Flawless"]The list of words to cycle through.
classNamestring""Additional CSS classes for the container.
intervalnumber3000Time in milliseconds between word changes.
transitionTransition{ duration: 0.8, ease: "easeInOut" }Motion transition object for the animation.
staticTextClassNamestring""Additional CSS classes for the static text.
rotatingTextClassNamestring""Additional CSS classes for the rotating text (use to override gradient).
backgroundClassNamestring""Additional CSS classes for the background gradient box.
cursorClassNamestring""Additional CSS classes for the cursor line (width, color).