Like all good stories, it's a story about magic ✦

The Magic Text component is a playful typography experiment designed to bring a bit of motion and delight into static text. The highlighted phrase animates with a shifting gradient, while small star icons float, spin, and reposition around it—creating a subtle magic effect without overwhelming the layout.

Because it relies on animation timing and direct DOM access, the component runs on the client using use client.

Animated Gradient Text

The highlighted words use a moving gradient that continuously pans across the text:


.magic-text {
  background: linear-gradient(45deg, #9333ea, #a855f7, #c084fc);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bg-pan 3s ease-in-out infinite;
}

This keeps the text visually alive while remaining readable.

Floating Star Logic

The stars are animated using a combination of CSS keyframes and JavaScript positioning. On an interval, each star is randomly repositioned using CSS variables:


star.style.setProperty('--star-left', `${rand(-10, 110)}%`);
star.style.setProperty('--star-top', `${rand(-30, 130)}%`);

Each star then animates into place, fades in, and slowly spins.

Lightweight DOM Animation

The animation is initialized inside a useEffect hook so it only runs on the client:


useEffect(() => {
  const stars = document.querySelectorAll('.magic-star');
}, []);

This keeps the JSX clean while allowing fine-grained control over timing and motion.

Here's the source code, I hope you like it :)

prash240303/crafts/GlowyStarryText