Dia Text Reveal

A horizontal color band sweeps across text with a gradient shine, then settles on your theme foreground color.

Magic UI

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

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

Examples

Custom gradient

Override colors for a shorter or softer palette on a single line of text.

Design systems

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

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

Rotating phrases in a heading

Pass text as an array and set repeat to cycle strings after each sweep. You can place static words in the same <h1> (or paragraph) before the component—no extra layout wrappers are required for basic inline use.

Learn to build faster

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

export function DiaTextRevealDemo3() {
  return (
    <div class="flex min-h-64 items-center justify-center p-8 text-foreground">
      <h1 class="
        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>
  )
}

Use fixedWidth when the strings differ a lot in length and you want to avoid horizontal layout shift (not shown in this example).

Duration and delay

Slow the sweep with duration, or add a short delay before the band moves.

Made with care

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

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

Installation

pnpm dlx shadcn@latest add @magicui-solid/dia-text-reveal

bunx shadcn@latest add @magicui-solid/dia-text-reveal

yarn dlx shadcn@latest add @magicui-solid/dia-text-reveal

npx shadcn@latest add @magicui-solid/dia-text-reveal

Import

import { DiaTextReveal } from '@/components/magicui/dia-text-reveal'

Usage

<DiaTextReveal text="Magic UI" />

<h1 class="text-3xl font-semibold">
  Learn to{' '}
  <DiaTextReveal
    repeat
    repeatDelay={1.2}
    text={['build faster', 'ship smarter', 'scale easier']}
  />
</h1>

Props

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).
`class`	`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.

Credits

Credit to @chishiyac

Original:

magicui.design/docs/components/dia-text-reveal