Open in

Magic UI

import { DiaTextReveal } from "@/registry/magicui/dia-text-reveal"

export function DiaTextRevealDemo() {
  return (
    <div className="flex min-h-64 items-center justify-center p-8">
      <DiaTextReveal
        className="text-4xl font-bold tracking-tight"
        text="Magic UI"
        colors={["#A97CF8", "#F38CB8", "#FDCC92"]}
      />
    </div>
  )
}

Design systems

import { DiaTextReveal } from "@/registry/magicui/dia-text-reveal"

export function DiaTextRevealDemo2() {
  return (
    <div className="flex min-h-56 items-center justify-center p-8">
      <DiaTextReveal
        className="text-4xl font-bold tracking-tight"
        colors={["#22d3ee", "#818cf8", "#f472b6", "#34d399"]}
        text="Design systems"
      />
    </div>
  )
}

Open in

Learn to build faster

import { DiaTextReveal } from "@/registry/magicui/dia-text-reveal"

export function DiaTextRevealDemo3() {
  return (
    <div className="text-foreground flex min-h-64 items-center justify-center p-8">
      <h1 className="text-center text-3xl font-semibold tracking-tight md:text-4xl">
        Learn to{" "}
        <DiaTextReveal
          repeat
          repeatDelay={1.2}
          text={["build faster", "ship smarter", "scale easier"]}
        />
      </h1>
    </div>
  )
}

Open in

Made with care

import { DiaTextReveal } from "@/registry/magicui/dia-text-reveal"

export function DiaTextRevealDemo4() {
  return (
    <div className="flex min-h-56 items-center justify-center p-8">
      <DiaTextReveal
        className="text-4xl font-bold tracking-tight"
        colors={["#f97316", "#eab308", "#22c55e", "#3b82f6", "#a855f7"]}
        delay={0.35}
        duration={2.4}
        text="Made with care"
      />
    </div>
  )
}

Prop	Type	Default	Description
`text`	`string \| string[]`	—	Text to display. Use an array to rotate between strings when `repeat` is on.
`colors`	`string[]`	`["#c679c4", "#fa3d1d", "#ffb005", "#e1e1fe", "#0358f7"]`	Colors in the sweeping gradient band.
`textColor`	`string`	`var(--foreground)`	Solid text color after the animation (matches your theme by default).
`duration`	`number`	`1.5`	Sweep duration in seconds.
`delay`	`number`	`0`	Delay before the sweep starts, in seconds.
`repeat`	`boolean`	`false`	When `text` is an array, advance to the next string after each cycle.
`repeatDelay`	`number`	`0.5`	Pause in seconds before replaying or advancing (when `repeat` is true).
`startOnView`	`boolean`	`true`	Start the animation when the element enters the viewport.
`once`	`boolean`	`true`	Play only the first time (when `startOnView` is used).
`className`	`string`	—	Additional CSS classes on the root `span`.
`fixedWidth`	`boolean`	`false`	Lock width to the widest string when `text` is an array to reduce layout shift.

Prop	Type	Default	Description
`text`	`string \| string[]`	—	Text to display. Use an array to rotate between strings when `repeat` is on.
`colors`	`string[]`	`["#c679c4", "#fa3d1d", "#ffb005", "#e1e1fe", "#0358f7"]`	Colors in the sweeping gradient band.
`textColor`	`string`	`var(--foreground)`	Solid text color after the animation (matches your theme by default).
`duration`	`number`	`1.5`	Sweep duration in seconds.
`delay`	`number`	`0`	Delay before the sweep starts, in seconds.
`repeat`	`boolean`	`false`	When `text` is an array, advance to the next string after each cycle.
`repeatDelay`	`number`	`0.5`	Pause in seconds before replaying or advancing (when `repeat` is true).
`startOnView`	`boolean`	`true`	Start the animation when the element enters the viewport.
`once`	`boolean`	`true`	Play only the first time (when `startOnView` is used).
`className`	`string`	—	Additional CSS classes on the root `span`.
`fixedWidth`	`boolean`	`false`	Lock width to the widest string when `text` is an array to reduce layout shift.

Dia Text Reveal

Examples

Custom gradient

Rotating phrases in a heading

Learn to build faster

Duration and delay

Installation

Usage

Props

Credits

Dia Text Reveal

Examples

Custom gradient

Rotating phrases in a heading

Learn to build faster

Duration and delay

Installation

Usage

Props

Credits