A narrow glint of light sweeps across the letters every few seconds, like light catching metal.
Customize
Usage
import { ShinyText } from "@/components/motionkit/shiny-text";
<ShinyText>Now in public beta</ShinyText>Motion
The exact curves this component runs, plotted with Motion's own maths.
Glint
Runs on its own
Works in the App Router as is. Requires Tailwind CSS v4.
npm install motionSave as components/motionkit/shiny-text.tsx.
"use client";
import type { ElementType, ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
type ShinyTextProps = {
children: ReactNode;
/** The text colour at rest. */
color?: string;
/** The colour of the glint. */
shine?: string;
/** Seconds for the glint to cross the text. */
duration?: number;
/** Seconds of rest between glints. */
interval?: number;
/** Element to render, e.g. "span". */
as?: ElementType;
className?: string;
};
export function ShinyText({
children,
color = "#94A9A7",
shine = "#F6F1E8",
duration = 1.4,
interval = 2.5,
as: Tag = "span",
className = "",
}: ShinyTextProps) {
const reduceMotion = useReducedMotion();
return (
<Tag className={className}>
<motion.span
// a narrow band of light in a gradient three times the text's width; sliding it across is the glint
className="bg-clip-text text-transparent [background-size:300%_100%] [-webkit-box-decoration-break:clone] [box-decoration-break:clone]"
style={{
backgroundImage: `linear-gradient(105deg, ${color} 42%, ${shine} 50%, ${color} 58%)`,
backgroundPosition: "100% 0",
}}
animate={reduceMotion ? undefined : { backgroundPosition: ["100% 0", "0% 0"] }}
transition={{ duration, repeat: Infinity, repeatDelay: interval, ease: "easeInOut" }}
>
{children}
</motion.span>
</Tag>
);
}
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The text. |
| color | string | "#94A9A7" | Text colour at rest. |
| shine | string | "#F6F1E8" | Colour of the glint. |
| duration | number | 1.4 | Seconds for the glint to cross. |
| interval | number | 2.5 | Seconds of rest between glints. |
| as | ElementType | "span" | Element to render. |
Rotating Badge
Text circles slowly around an icon, like a stamp. Pauses under the pointer and picks up where it stopped.
Think beyond ordinary.
Gradient Text
Headline text with a slowly flowing, seamlessly looping gradient.
Liquid light
Liquid Gradient Text
Pools of colour swirl and flow inside the letters, for headings that feel alive without moving an inch.