The visual approach
Mercury's homepage opens with a 3D-rendered workspace scene—desk surface, credit card, ambient shadows—that scrolls at differential rates. The foreground objects translate at roughly 1.2× the background layer, creating depth through parallax. This isn't decorative. For a fintech product competing with legacy banks and newer challengers, the effect communicates polish and technical confidence before the visitor reads a word.
The color system is deliberately narrow. The primary blue (#5865F2) appears sparingly: CTAs, key interface accents, and the occasional glow in hover shadows. Most of the page lives in a gray scale that runs from #1F2937 for headings down to #6B7280 for muted labels. White surfaces (#FFFFFF) and a near-white background (#F9FAFB) keep the viewport bright. The restraint matters. When every surface is saturated, nothing commands attention. Here, the blue becomes a decision point.
Typography follows a tight 1.5× progression: 72px display weight at 600 for the hero, 48px for h1 page headings, 32px for section breaks, and 16px body text at regular weight. The scale is large enough to anchor scanning but doesn't shout. Labels and navigation sit at 15px with a medium (500) weight, threading the line between subtle and readable.
What works
The motion system earns its complexity budget. Section content—pricing cards, geometric accents, text blocks—fades up as the user scrolls. An Intersection Observer triggers opacity: 0 → 1 and translateY(24px → 0) over 400ms with a custom ease (cubic-bezier(0.16, 1, 0.3, 1)). Cards enter with a 100ms stagger, so the eye tracks left to right rather than seeing everything pop at once. It feels coordinated without feeling choreographed.
The CTA hover treatment shows similar care. Primary buttons lift 2px (transform: translateY(-2px)) and the shadow expands from 0 4px 12px rgba(0,0,0,0.1) to 0 8px 24px rgba(88,101,242,0.25), keeping the primary color in the penumbra. The transition runs at 200ms for both transform and shadow, fast enough that the response feels instant but slow enough that the motion registers. Secondary ghost buttons fill with a low-opacity tint (rgba(88,101,242,0.08)) instead of lifting. The distinction gives users two levels of commitment without needing a third button style.
The navigation bar waits until the user scrolls past roughly 80vh, then applies backdrop-filter: blur(12px) and a subtle background fill. The 300ms ease-out transition keeps it from snapping. The result is a nav that stays legible over mixed-contrast sections without blocking the hero on load.
What a builder can borrow
Start with the stagger pattern. If you're revealing multiple cards or list items on scroll, a 100ms offset between elements is enough to create rhythm without making users wait. Wire it to an Intersection Observer callback that increments a CSS animation-delay or transition-delay property per item. The 400ms duration and cubic-bezier(0.16, 1, 0.3, 1) ease give a settling motion that reads as physical rather than robotic.
The shadow-expansion hover is more versatile than a color shift. When your primary action already has a saturated background, expanding the shadow (box-shadow transition at 200ms) and lifting the button by 2–4px creates tactile feedback without introducing a new hue. Keep the shadow color aligned with your primary—Mercury uses rgba(88,101,242,0.25) so the glow reinforces brand rather than adding visual noise.
For navigation, delay the backdrop blur until the user has scrolled past the hero. A solid background from the start feels defensive. A blur that appears only when needed (around 80vh threshold) keeps the top of the page open and signals a mode shift as the user moves into content. Pair it with a 300ms ease-out so the change doesn't feel like a layout bug.
Finally, constrain your accent color. Mercury's #5865F2 appears on CTAs, focus rings, and select hover shadows. Everything else pulls from a six-stop gray scale. When you need the user to act, the accent has room to work because it hasn't been spent on decorative borders or background panels. The restraint is the strategy.