Text Shine

An elegant text animation component that creates a smooth, flowing shine effect across text. Perfect for highlighting headings, creating eye-catching typography effects, or adding visual polish to key text elements with customizable colors, speed, and opacity levels.

Text Shine
1"use client";
2
3import { TextShine } from "@/components/component-x/text-shine";
4
5export function TextShinePreview() {
6return (
7  <div className="flex items-center justify-center w-full h-full">
8    <TextShine className="text-xl">Text Shine</TextShine>
9  </div>
10);
11}
12

Installation

Run the following command to add the component:

npx cx add text-shine

Animation Duration

Adjust the speed of the shine animation to control the flow intensity and visual rhythm.

Text Shine Fast
Text Shine Medium
Text Shine Slow
1"use client";
2
3import { TextShine } from "@/components/component-x/text-shine";
4
5export function TextShineDuration() {
6const durations = [
7  { label: "Fast", value: 3 },
8  { label: "Medium", value: 6 },
9  { label: "Slow", value: 12 },
10];
11
12return (
13  <div className="w-full h-full overflow-y-auto flex items-center justify-center">
14    <div className="flex flex-col gap-4">
15      {durations.map(({ label, value }) => (
16        <div
17          key={value}
18          className="flex flex-col px-3 py-1 items-center justify-center border rounded bg-muted/30"
19        >
20          <TextShine duration={value}>
21            Text Shine <span className="text-muted-foreground">{label}</span>
22          </TextShine>
23        </div>
24      ))}
25    </div>
26  </div>
27);
28}
29

Shine Colors

Customize the color of the shine effect to match your design system or create unique visual effects.

Text Shine White
Text Shine Gold
Text Shine Cyan
Text Shine Pink
1"use client";
2
3import { TextShine } from "@/components/component-x/text-shine";
4
5export function TextShineColors() {
6const colors = [
7  { label: "White", value: "rgba(255, 255, 255, 1)" },
8  { label: "Gold", value: "rgba(255, 215, 0, 1)" },
9  { label: "Cyan", value: "rgba(0, 255, 255, 1)" },
10  { label: "Pink", value: "rgba(255, 105, 180, 1)" },
11];
12
13return (
14  <div className="w-full h-full overflow-y-auto flex items-center justify-center">
15    <div className="flex flex-col gap-4 w-fit">
16      {colors.map(({ label, value }) => (
17        <div
18          key={label}
19          className="flex flex-col px-3 py-1 items-center justify-center border rounded bg-muted/30 w-full"
20        >
21          <TextShine shineColor={value}>
22            Text Shine <span className="text-muted-foreground">{label}</span>
23          </TextShine>
24        </div>
25      ))}
26    </div>
27  </div>
28);
29}
30
TableVideo Upload