Spinning Text

Renders text in a circular animation with customizable speed and direction. It displays each letter in a rotating layout. Use it to create dynamic text effects on web pages.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/spinning-text

npx layro-cli add @magicuidesign/spinning-text

npx layro-cli add @magicuidesign/spinning-text

bunx layro-cli add @magicuidesign/spinning-text

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import React, { type ComponentPropsWithoutRef } from "react"
import { motion, type Transition, type Variants } from "motion/react"

import { cn } from "@/lib/utils"

interface SpinningTextProps extends ComponentPropsWithoutRef<"div"> {
  children: string | string[]
  duration?: number
  reverse?: boolean
  radius?: number
  transition?: Transition
  variants?: {