Word Rotate

Source: Magic UI ↗
Author: Magic UI
Licence: MIT

Loading…

Words drop in and out of place on a timer.

Code

"use client";

import { WordRotate } from "@/lab/magicui/ui/word-rotate";

export default function WordRotateDemo() {
  return (
    <div className="relative flex h-full w-full items-center justify-center">
      <WordRotate className="text-4xl font-bold text-black dark:text-white" words={["Word", "Rotate"]} />
    </div>
  );
}

Prompt

Build "Word Rotate", a text animation. What it does: Words drop in and out of place on a timer. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS, using motion. Technique: the Motion library. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://magicui.design/docs/components/word-rotate (Magic UI, MIT).