Dia Text Reveal

A sweeping gradient text reveal with viewport triggering and rotating text support.

motion-sv

Joy of Code

Installation

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/dia-text-reveal.json

Design systems

Adjust the sweep duration and delay before starting.

Made with care

A component for revealing text with a moving gradient sweep.

Name	Type	Default	Description
`text`	`string \| string[]`	`required`	`Text to reveal. Pass multiple strings to rotate when repeat is enabled.`
`colors`	`string[]`	`["#c679c4", "#fa3d1d", "#ffb005", "#e1e1fe", "#0358f7"]`	`Colors sampled across the moving gradient band.`
`textColor`	`string`	`"var(--foreground)"`	`CSS color for revealed text after the sweep.`
`duration`	`number`	`1.5`	`Duration of one sweep pass in seconds.`
`delay`	`number`	`0`	`Delay before the sweep starts in seconds.`
`repeat`	`boolean`	`false`	`Replay the sweep and advance to the next string after each completion.`
`repeatDelay`	`number`	`0.5`	`Pause between repeated cycles in seconds.`
`triggerOnView`	`boolean`	`true`	`Start the reveal when the component enters the viewport.`
`once`	`boolean`	`true`	`When using triggerOnView, run only on the first viewport entry.`
`fixedWidth`	`boolean`	`false`	`Use the widest string width instead of animating width between strings.`
`class`	`string`	`""`	`Additional CSS classes to apply to the animated span.`