Shining Text

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

Let Your Ideas Shine Bright

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;

Installation

Run the command from your project root directory (the folder that contains package.json).

npx mosaicui-cli@latest text-effects/shining-text-animation

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,
    className,
    ...restProps
  } = props;

  return (
    <span
      {...restProps}
      className={[
        className,
        styles["shining-text-animation"],
      ].join(" ")}
    >
      {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%;
  }
}

Props

Configure the component with the following props:

Prop	Type	Required	Default	Description
text	`string`	Yes	—	The text content to apply shine animation to.
className	`string`	No	—	Optional class name applied to the root container.
style	`React.CSSProperties`	No	—	Inline styles applied to the root container.