proNew131 lines · framer-motion

Scroll Zoom Parallax

A camera move made of gradients. A full-width, pinned scroll section where three soft gradient layers drift at three different depths while a centre mark scales up like the camera is pushing through it, settling on a headline near the end.

Use it for: A dramatic, image-free transition between two sections of a landing page — a 'zooming into the product' moment with nothing but colour and motion.
Themes: Light + dark
License: Commercial use

Live

Depth, on a dial

Zoomed all the way in

Three layers move at three speeds; the centre mark is just along for the ride, growing the whole way down.

tsx

"use client";

import * as React from "react";
import { motion, useMotionValue, useReducedMotion, useScroll, useTransform } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width scroll section: a pinned camera move. Background layers drift
 * at different depths while a centre mark scales up like the page is
 * pushing the camera through it, settling on a headline at the end.
 */

export interface ScrollZoomParallaxProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Three blurred gradient blobs move at three different vertical speeds and scales, all derived from one shared, section-scoped scroll progress value.
→The centre mark's scale and rotation, and the final headline's fade-in, are mapped to specific ranges of that same progress value.
→At rest the layers sit near their starting depth and the centre mark is at a sensible mid-size, not off-screen or invisible.
→autoplay sweeps progress back and forth on a timer when there's nothing to scroll, so the depth effect is visible at rest too.
→prefers-reduced-motion holds every layer at a fixed mid-point and shows the headline immediately.

Accessibility

✓All gradient layers and the centre mark are aria-hidden; only the eyebrow, headline and subcopy carry real content.
✓Text keeps full contrast against the background regardless of where progress currently sits.
✓Honours prefers-reduced-motion by freezing every layer in place.
✓Honours prefers-reduced-motion.