Mercury Events in motion
An M animates smoothly into view with an ease-in-out curve, then two rules cut across it and leave the name behind. Two alternatives sit alongside it for comparison.
What each one does
- Through the rules — the M draws smoothly into view first with a gentle ease-in-out motion. Then two rules travel across the letter from left to right, leaving the name behind. The letters are revealed by the pass itself, creating a synchronized left-to-right stagger.
- Shutter — one rule appears at the centre, splits into two and slides apart, opening the name in the gap like a shutter. The feet of the M grow downward as the bottom rule travels. It is the closest thing to the logo explaining its own construction.
- Dash — a fast wipe left to right with a leading edge, everything sliding in behind it. Shortest of the three, and the one that reads as speed, which is the Mercury part of the name.
Using it on the site
Paste the SVG straight into your HTML and keep the CSS block — inline SVG animates reliably everywhere and stays sharp at any size. Set the width on .logo; everything else scales with it.
In a header, run it once on first load only, then leave it still. Replaying on every route change gets tiring fast. If you want it to react to people, trigger it on hover over the logo instead:
.logo-holder:hover .logo { /* re-add the .v1 class here */ }
For a hero section, start it when it scrolls into view with an IntersectionObserver that adds the treatment class. Reduced-motion users see the finished logo with no movement, which is already handled.