proNew123 lines · framer-motion

Scroll Parallax Layers

Depth made out of gradients. A full-width, pinned scroll section with four generated wave shapes drifting past at four different speeds as the section scrolls, building a sense of depth behind a headline that holds still in front of them.

Use it for: An atmospheric section break between features — depth and motion without a single photo or illustration asset.
Themes: Light + dark
License: Commercial use

Live

Four layers, four speeds

Depth made out of gradients

Nothing here is a photo — every layer is drawn, and every layer moves at its own pace.

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: four generated wave layers drift past at four
 * different speeds as the section scrolls, building a sense of depth behind
 * a headline that holds still in front of them.
 */

export interface ScrollParallaxLayersProps {
  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

→Each of the four SVG wave layers is a plain generated path coloured from a design token, moving vertically at its own speed, all driven by one shared, section-scoped scroll progress value.
→Layers nearer the 'camera' (higher opacity, drawn last) move further than the faint, distant ones, which is what sells the depth.
→At rest, all four layers sit at a sensible mid-point offset — never fully off-frame — so the composition always looks intentional.
→autoplay sweeps the shared progress back and forth on a timer when there's no scroll to drive it.
→prefers-reduced-motion holds every layer at a fixed offset with no further movement.

Accessibility

✓All four wave layers are aria-hidden; only the eyebrow, headline and subcopy carry real content.
✓Text sits above the layers with no gradient or wave ever used as its background, keeping contrast stable.
✓Honours prefers-reduced-motion by freezing every layer.
✓Honours prefers-reduced-motion.