We are working on new components <3
HextaUIHextaUI

Shining Text

Animate text with a shining effect.

Preview

HextaAI is thinking...

Code

ShiningText.tsx
"use client";
 
import { motion } from "motion/react";
 
export function ShiningText() {
  return (
    <motion.h1
      className="bg-[linear-gradient(110deg,#404040,35%,#fff,50%,#404040,75%,#404040)] bg-[length:200%_100%] bg-clip-text text-base font-medium text-transparent"
      initial={{ backgroundPosition: "200% 0" }}
      animate={{ backgroundPosition: "-200% 0" }}
      transition={{
        repeat: Infinity,
        duration: 2,
        ease: "linear",
      }}
    >
      HextaAI is thinking...
    </motion.h1>
  );
}
Edit on GitHub

Last updated on

On this page