Original Blocks/Text
Shining Text
A shining text effect for captivating animations.
HextaAI is thinking...
<ShiningText text="HextaAI is thinking..." />
Installation
Copy and paste the following code into your project.
"use client";
import { motion } from "motion/react";
export function ShiningText({
text = "HextaAI is thinking...",
}: {
text: string;
}) {
return (
<motion.h1
className="bg-[linear-gradient(110deg,#404040,35%,#fff,50%,#404040,75%,#404040)] bg-[length:200%_100%] bg-clip-text text-base text-transparent"
initial={{ backgroundPosition: "200% 0" }}
animate={{ backgroundPosition: "-200% 0" }}
transition={{
repeat: Infinity,
duration: 2,
ease: "linear",
}}
>
{text}
</motion.h1>
);
}
npx shadcn@latest add "https://21st.dev/r/hextaui/shining-text"
pnpm dlx shadcn@latest add "https://21st.dev/r/hextaui/shining-text"
yarn dlx shadcn@latest add "https://21st.dev/r/hextaui/shining-text"
bun x shadcn@latest add "https://21st.dev/r/hextaui/shining-text"
Usage
import { ShiningText } from "@/components/ui/ShiningText";
<ShiningText text="HextaAI is thinking..." />
Props
Prop | Type | Default |
---|---|---|
text? | string | HextaAI is thinking... |
Edit on GitHub
Last updated on