Parallax Scroll

Parallax scrolling effect with configurable speed and direction.

scrollparallaxanimated

Installation

Terminalbash
npx motioncraft add parallax-scroll

Usage

parallax-scroll.tsxtsx
import { ParallaxScroll } from "@/components/scroll/parallax-scroll";

<ParallaxScroll speed={0.3}>
  <img src="/hero.jpg" alt="Hero" />
</ParallaxScroll>

Props

PropTypeDefaultDescription
children*ReactNode—Content to parallax
speednumber0.5Parallax speed

Related Components

Scroll Video

New

Video that advances frame-by-frame as the user scrolls. Apple-style product reveal effect with sticky positioning.

Infinite Scroll

Continuous horizontal or vertical scrolling content with seamless looping.

Morphing Nav

New

Navigation that morphs between three modes: full bar, floating pill, and fullscreen overlay. Scroll-aware with direction-aware motion.

Split Screen Text

New

Text that splits apart vertically on scroll, revealing content underneath. Scroll-driven with sticky positioning.