Spinning Text

A text animation that rotates each letter around a central point. It renders letters positioned absolutely and rotates them based on their index. Use for eye-catching headlines or interactive elements.

byJulien Thibeaut from Motion Primitives

Installation

terminal

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

npx layro-cli add @ibelick/spinning-text

npx layro-cli add @ibelick/spinning-text

bunx layro-cli add @ibelick/spinning-text

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

Code

Demo

'use client';
import { cn } from '@/lib/utils';
import { motion, Transition, Variants } from 'motion/react';
import React, { CSSProperties } from 'react';

export type SpinningTextProps = {
  children: string;
  style?: CSSProperties;
  duration?: number;
  className?: string;
  reverse?: boolean;
  fontSize?: number;
  radius?: number;
  transition?: Transition;