New
AnimationFade In On Scroll
Content that fades and rises into place as it enters the viewport.
#scroll#reveal#fade
6 frameworksIntermediate
Loading…
A heading whose gradient fill pans continuously across the text.
<style>
@keyframes gradient-pan { to { background-position: 200% center; } }
.gradient-text {
background-image: linear-gradient(90deg, #6366f1, #ec4899, #f59e0b, #6366f1);
background-size: 200% auto;
animation: gradient-pan 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.gradient-text { animation: none; background-position: 0 center; }
}
</style>
<span class="gradient-text inline-block bg-clip-text text-4xl font-bold text-transparent">
Ship something beautiful
</span>| Prop | Type | Default | Description |
|---|---|---|---|
textrequired | string | - | String written to the clipboard when the button is pressed. |
durationMs | number | 6000 | Duration ms |
className | string | '' | Additional classes merged onto the root element. |
Swap the gradient stops and set `durationMs` for a faster or slower pan. Reduced motion freezes the gradient in place.