Chamaac UI

Components

  • Overview

    • Introduction

  • Animated Icons

    • Icons Overview

  • Backgrounds

    • Interactive GridNew

  • Buttons

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

  • Text Animations

    • Text LoopNew
    • Dancing Letters
    • Gif Text

  • Inputs

    • AI InputNew

  • Navigation

    • Dock

  • Sections

    • Stats CardsNew
    • Feature Steps
    • Gauge

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