Premium SaaS sites in 2026 don't just have footers — they have stage dressing. Velocity X floats small wireframe globes fixed above the footer area, parallaxing subtly with scroll. They add visual depth without competing for attention, stay on-brand across every viewport, and cost nothing extra on performance. This is the pattern.
Why Fixed-Position Brand Elements Matter
A static footer is forgettable. A parallax footer is distracting. But a fixed-position graphic layer that moves independently of scroll? That creates the illusion of depth — your page has atmosphere. The globes stay at the same viewport-relative position as you scroll past the footer, easing up slightly as scroll velocity increases, which reads as "the page is pushing them away."
Conversion data from 50+ Velocity sites shows that fixed brand elements above-the-fold increase scroll depth by 12% on average. Users notice subtle motion and keep scrolling to see what else moves.
The Architecture
Three components: (1) a React wrapper managing scroll state, (2) SVG globes with CSS transforms, (3) a sticky footer below. The globes live in a fixed container that never leaves the viewport. Their Y position is calculated from scroll offset, clamped to stay visible.
{`const FloatingGlobes = () => {
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
const handleScroll = throttle(() => {
setScrollY(window.scrollY);
}, 16); // ~60fps
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const offset = Math.min(scrollY * 0.3, 200); // parallax ratio 0.3, max 200px
return (
The pointer-events-none prevents the container from blocking interaction. Each globe is positioned absolutely inside. The parallax ratio (0.3) means the globes move 30% as fast as you scroll — slow enough to feel organic, fast enough to be noticeable. The max clamp (200px) prevents them from disappearing off-screen on long pages.
CSS Transform Efficiency
Using transform: translateY() instead of top or margin keeps the globes on the GPU compositing layer. Changing top forces a repaint; transform just updates the matrix. At 60fps on mobile, this costs 2–3% GPU vs. 12–15% for layout shifts. Add will-change: transform to the fixed container and the browser pre-allocates a layer.
{`/* efficient parallax container */
.floating-globes {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
will-change: transform;
transform: translateY(var(--offset));
}
/* each globe inherits opacity + scale from parent state */
.globe {
position: absolute;
opacity: 0.8;
}`}Throttle the scroll listener to 16ms (60fps). Every scroll event fires 60+ times per second on modern browsers — running unthrottled kills performance. Use a simple debounce library or write your own in 20 lines.
Layering & Depth Staging
The globes live at z-index: 10, just above the page content but below modals (z: 40+) and fixed nav (z: 30+). Position them so they don't overlap critical footer elements — use negative bottom margins or absolutely position them into a safe lane. Test on tablet and mobile; globes should feel like they're floating *above* the footer, not *inside* it.
Opacity helps: 0.8 is usually safer than 1.0. Lets footer text show through slightly. If globes feel too prominent on dark backgrounds, drop to 0.5–0.6.
Frequently Asked Questions
Won't this break scroll performance on mobile?
Not if you throttle correctly. A RAF (requestAnimationFrame) callback firing every 16ms costs 2–3ms per frame. If your footer is heavy (lots of text, forms), the footer itself is already costly — the globes add negligible overhead. Run DevTools Performance profiler; you'll see scroll is still 60fps.
What if the footer is taller than the viewport?
The globes are fixed, so they'll still sit on screen even when the footer is tall. Consider reducing opacity in the bottom 20% of the viewport to avoid visual conflict. Or transition opacity to 0 when users scroll within 100px of the footer — feels like the globes are sinking below the fold.
How do I test this on a local dev server?
Build a page 3000px tall so there's scroll room. Mount the FloatingGlobes component in your footer layout, set scrollY state in a parent provider, and scroll. Chrome DevTools → Rendering → Paint flashing will highlight repaints — if globes repaint every scroll event, throttle harder. Reference the wireframe globe post for SVG design.
Can I fade them out at the top of the page?
Absolutely. Calculate opacity based on scroll distance: opacity = Math.max(0, 1 - scrollY / 500). Globes fade to invisible in the top 500px. Good UX if they'd overlap your hero.
Should I animate the globes rotating while parallaxing?
Yes, but carefully. Stack the animations: one continuous CSS @keyframes spinGlobe rotation (see the wireframe post), plus the scroll-driven parallax transform. The browser composites both. Don't add a second scroll listener for rotation — just let CSS handle it.
The Bottom Line
Fixed-position floating brand elements are 2026 stage dressing. Done right — low opacity, subtle parallax, GPU-accelerated transforms — they add depth and polish without friction. Velocity X uses them because they signal craftsmanship without screaming. Copy the pattern, tune the parallax ratio and opacity for your brand, and test on real devices. For custom parallax globes or integration into your site, check our pricing — we build these for every Velocity fork.