design-infraReport a problem or share feedback← Catalog
Scroll Animation Parallax
freebeui/parallax
Wrapper that drifts its children at a speed factor as they cross the viewport, on either axis. Reduced-motion safe.
$
npx shadcn@latest add @beui/parallaxnpm deps: clsx, motion, tailwind-merge
- Source
- beUI (free)
- Kind
- effect
- Categories
- scroll-effect
- Use as
- wrapper — wraps your existing element
- Applies to
- text-effectherocardimagefeatures
- Motion
- on scroll, loop · medium · motion · medium cost
- Tags
- react, tailwind-v4, motion, motion
- Licence
- MIT — Copyright (c) 2026 Saurabh Chauhan; retain the upstream notice when copying source.
- Live demo
- beui.dev
- Docs
- beui.dev
Similar
Compare all 4 →- Animated Contentreact-bits/animated-contentWrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.
- Fade Contentreact-bits/fade-contentSimple directional fade / slide entrance / exit wrapper with threshold-based activation.
- Blur Fademagicui/blur-fadeBlur + fade-in on mount or in view; the go-to entrance wrapper for sections and image grids (stagger with `delay`). Colourless. Respect prefers-reduced-motion yourself.