Dia Text Reveal

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

Loading…

A band of colour sweeps through each phrase and leaves it solid.

Code

"use client";

import { DiaTextReveal } from "@/lab/magicui/ui/dia-text-reveal";

export default function DiaTextRevealDemo() {
  return (
    <div className="@container relative flex h-full w-full items-center justify-center p-8">
      <DiaTextReveal
        className="text-[clamp(2rem,7cqw,3rem)] font-bold tracking-tight"
        text={["Magic UI", "Dia Text Reveal"]}
        colors={["#A97CF8", "#F38CB8", "#FDCC92"]}
        repeat
        repeatDelay={1.2}
        once={false}
      />
    </div>
  );
}

Prompt

Build "Dia Text Reveal", a text animation. What it does: A band of colour sweeps through each phrase and leaves it solid. 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/dia-text-reveal (Magic UI, MIT).