Parallax Scroll

Scroll-driven parallax effect.

npx arupui add parallax-scroll
Preview

Scroll to see parallax effect (works on full page)

Usage

parallax-scroll.tsx
import { ParallaxScroll } from "@/components/blocks/parallax-scroll"

<ParallaxScroll speed={0.5}>
  <img src="/image.jpg" />
</ParallaxScroll>

Props

speed
Type: numberDefault: 0.5
direction
Type: up | downDefault: up
Theme Editor

Theme

Radius0.5rem
Letter Spacing0em

Colors

light