✨ Introducing Remotion Hub
Installation
Copy and paste the following code into your project.
// tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
shimmer: "shimmer 8s infinite",
},
keyframes: {
shimmer: {
"0%, 90%, 100%": {
"background-position": "calc(-100% - var(--shimmer-width)) 0",
},
"30%, 60%": {
"background-position": "calc(100% + var(--shimmer-width)) 0",
},
},
},
},
},
};components/magicui/animated-shiny-text.tsximport { cn } from "@/lib/utils";
import { CSSProperties, FC, ReactNode } from "react";
interface AnimatedShinyTextProps {
children: ReactNode;
className?: string;
shimmerWidth?: number;
}
const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({
children,
className,
shimmerWidth = 100,
}) => {
return (
<p
style={
{
"--shimmer-width": `${shimmerWidth}px`,
} as CSSProperties
}
className={cn(
"mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50 ",
// Shimmer effect
"animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
// Shimmer gradient
"bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent dark:via-white/80",
className,
)}
>
{children}
</p>
);
};
export default AnimatedShinyText;Props
| Prop | Type | Description | Default |
|---|---|---|---|
| children | The text to be shimmered. | ||
| className | string | The class name to be applied to the shimmer. | |
| shimmerWidth | number | The width of the shimmer in pixels. | 100 |