Typing Animation

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

Loading…

Words type out, pause and delete behind a blinking cursor.

Code

"use client";

import { TypingAnimation } from "@/lab/magicui/ui/typing-animation";

export default function TypingAnimationDemo() {
  return (
    <div className="@container relative flex h-full w-full items-center justify-center px-6 text-center text-neutral-950">
      <TypingAnimation
        words={["Hello World! 👋", "Typing Animation"]}
        loop
        className="text-[clamp(1.75rem,6cqw,2.5rem)] font-bold"
      />
    </div>
  );
}

Prompt

Build "Typing Animation", a text animation. What it does: Words type out, pause and delete behind a blinking cursor. 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/typing-animation (Magic UI, MIT).