Parallax Layers

Renders multiple layered elements with parallax effect based on scroll or pointer movement. Layers move at different speeds to create depth. Use for hero sections to add visual interest and dimension.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/parallax-layers

npx layro-cli add @educlopez/parallax-layers

npx layro-cli add @educlopez/parallax-layers

bunx layro-cli add @educlopez/parallax-layers

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import {
  type MotionValue,
  motion,
  useMotionValue,
  useReducedMotion,
  useScroll,
  useSpring,
  useTransform,
} from "motion/react";
import {
  type ReactNode,