Shining Text

A smooth light shine moves across the text, making it look bright and eye-catching.

Let Your Ideas Shine Bright

1. Copy the component file

Create a new file called shining-text-animation.jsx in your reusable components folder (for example /src/components/) and paste the following code into it.

import styles from "./shining-text-animation.module.css";

const ShiningTextAnimation = (props) => {
  const {
    text,
  } = props;

  return (
    <span className={styles["shining-text-animation"]}>
      {text}
    </span>
  );
};

export default ShiningTextAnimation;

2. Copy the CSS module file

In the same folder, create a file called shining-text-animation.module.css and paste the following CSS.

.shining-text-animation {
  --background: white;
  --text-color: black;
  --animation-duration: 5s;

  @media (prefers-color-scheme: dark) {
    --background: black;
    --text-color: white;
  }

  color: var(--text-color);
  background: linear-gradient(90deg, var(--background), var(--text-color), var(--background));
  background-repeat: no-repeat;
  background-size: 80%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shining-text-keyframes var(--animation-duration) ease-in-out infinite;
}

@keyframes shining-text-keyframes {
  0% {
    background-position-x: -500%;
  }

  100% {
    background-position-x: 500%;
  }
}

3. Use the component

Now you can import and use the component anywhere in your project.

import ShiningTextAnimation from "@/components/text-effects/shining-text-animation/shining-text-animation";

/* keep text on center */
const wrapperStyles = {
  textAlign: "center",
  padding: "24px",
  textWrap: "balance",
};

const ShiningTextAnimationPreview = () => {
  return (
    <div style={wrapperStyles}>
      <h2>
        <ShiningTextAnimation
          text="Let Your Ideas Shine Bright"
        />
      </h2>
    </div>
  )
};

export default ShiningTextAnimationPreview;

Props

Configure the component with the following props:

Prop	Type	Required	Default	Description
text	`string`	Yes	—	The text content to apply shine animation to.