Text Effects

Color Sweep Text

가로 색상 띠가 텍스트를 지나가며 그라데이션 빛을 드러내는 애니메이션입니다.

Preview

text motion

Dia Text Reveal

reveal letters with a color trail

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/dia-text-reveal.json

Code

typescript
Copied
1import { DiaTextReveal } from "@/components/dia-text-reveal"23export default function Example() {4  return <DiaTextReveal text="Dia Text Reveal" />5}

Props

text

Type
string | string[]
Default
-
Description
Text or rotating texts to reveal.

colors

Type
string[]
Default
built-in palette
Description
Sweep colors.

textColor

Type
string
Default
"var(--foreground)"
Description
Final text color.

duration

Type
number
Default
1.5
Description
One sweep duration.

repeat

Type
boolean
Default
false
Description
Whether to repeat text cycling.

className

Type
string
Default
-
Description
Additional classes merged onto the component.

Reference

Reference Color Sweep Text