Django Text Rotate Component

Text Rotate cycles through a list of words or phrases using CSS animation, replacing one word in a sentence at a timed interval. Use it for hero taglines, feature highlights, or value propositions.

Basic Text Rotate

Preview

Hello Hola Bonjour Ciao

Code

<c-lb.text-rotate class="text-4xl">
    <span>Hello</span>
    <span>Hola</span>
    <span>Bonjour</span>
    <span>Ciao</span>
</c-lb.text-rotate>

Custom Duration

Preview

Fast Rotation Speed

Code

<c-lb.text-rotate class="text-4xl" duration="duration-6000">
    <span>Fast</span>
    <span>Rotation</span>
    <span>Speed</span>
</c-lb.text-rotate>

Inline Usage

Preview

I love coding designing building

Code

<p class="text-2xl">
    I love
    <c-lb.text-rotate class="text-2xl font-bold">
        <span>coding</span>
        <span>designing</span>
        <span>building</span>
    </c-lb.text-rotate>
</p>

With Text Component

Preview

We build websites apps platforms

Code

<c-lb.text size="2xl">
    We build
    <c-lb.text-rotate class="font-bold">
        <c-lb.text variant="primary">websites</c-lb.text>
        <c-lb.text variant="info">apps</c-lb.text>
        <c-lb.text variant="warning">platforms</c-lb.text>
    </c-lb.text-rotate>
</c-lb.text>

API Reference

`c-lb.text-rotate`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
duration	string	-	No	Tailwind duration class for animation speed (e.g., 'duration-6000')

Slot Name	Description
default	Text items to rotate through (up to 6 span elements)