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.dev/r/dia-text-reveal.json

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/dia-text-reveal.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/dia-text-reveal.json

bash

Copied

1bunx shadcn@latest add https://ryong.dev/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

Prop	Type	Default	Description
text	string \| string[]	-	Text or rotating texts to reveal.
colors	string[]	built-in palette	Sweep colors.
textColor	string	"var(--foreground)"	Final text color.
duration	number	1.5	One sweep duration.
repeat	boolean	false	Whether to repeat text cycling.
className	string	-	Additional classes merged onto the component.

Reference

Reference Color Sweep Text