Build websites 10x faster with HextaUI Blocks — Learn more
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.

components/ui/ShiningText.tsx
"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

PropTypeDefault
text?
string
HextaAI is thinking...
Edit on GitHub

Last updated on