Animated Comet Logo Effect

I have two versions of my “GalaxyLume” logo (PNG and WEBP) and I want to bring them to life for the web. Here’s the vision:

• A comet orbits the twin rings, leaving a luminous tail. Whenever the path crosses a letter, the ring should appear to dip cleanly behind the text rather than awkwardly wrapping around it.
• As the comet completes its journey, each letter in “galaxylume” is traced left-to-right with a soft light sweep.
• The moment that trace reaches the final “e”, the two star accents flare briefly before returning to their idle state.

I only need a browser-ready asset, so please work in a web-friendly workflow—CSS, HTML5 Canvas or any lightweight approach that keeps page load minimal. Video sprites or heavyweight codecs aren’t necessary; a code-driven solution that I can drop straight into my site is ideal.

Deliverables
1. Self-contained animation file(s) or snippet (CSS / Canvas / JS) ready to embed.
2. Both logo versions animated (using the supplied PNG and WEBP).
3. Clear instructions on integrating the effect into a standard HTML page.

The animation should loop smoothly, respect transparency, and look crisp on modern desktop and mobile browsers. If you have questions about timing, easing, or glow intensity, let’s sort them out early so the final piece feels polished.

mysite runs on a full-stack TypeScript architecture using React/Next.js, NestJS, PostgreSQL, Prisma, and Redis