Components
Loading preview...
GradientRevealText is an interactive and visually appealing text component designed for modern web interfaces. It allows text to be highlighted with a smooth gradient reveal in multiple directions—left-to-right, right-to-left, top-to-bottom, or bottom-to-top. The component supports hover, in-view, or automatic triggers, and developers can customize the gradient, transition duration, delay, and rounded edges. Importantly, when the gradient is applied, the text color automatically changes to white, ensuring high contrast and readability, while reverting to black when inactive. Lightweight, flexible, and reusable, GradientRevealText is ideal for headings, hero sections, buttons, and any UI element that needs an attention-grabbing, dynamic effect.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/gradient-reveal-text"use client";
import React, { useRef } from "react";
import GradientRevealText, { GradientRevealTextRef } from "@/components/ui/gradient-reveal-text";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
export default function GradientRevealTextDemo() {
const ref1 = useRef<GradientRevealTextRef>(null);
return (
<div className="p-8 space-y-8">
<Card>
<CardHeader>
<CardTitle>Hover-triggered Gradient Reveal</CardTitle>
</CardHeader>
<CardContent>
<GradientRevealText trigger="hover" gradient="linear-gradient(to right, #06b6d4, #3b82f6)">
Hover Me
</GradientRevealText>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Auto-triggered Gradient Reveal</CardTitle>
</CardHeader>
<CardContent>
<GradientRevealText ref={ref1} trigger="auto" direction="ttb" gradient="linear-gradient(to bottom, #3b82f6, #06b6d4)">
Auto Reveal
</GradientRevealText>
<div className="mt-4">
<Button onClick={() => ref1.current?.animate()}>Animate</Button>
<Button className="ml-2" onClick={() => ref1.current?.reset()}>
Reset
</Button>
</div>
</CardContent>
</Card>
</div>
);
}