Scroll Effects
utilitiesParallax and scroll-driven animation effects for immersive layouts.
Preview
No preview available
Check the code examples below.
Installation
npm install @launchapp/design-systemImport
import { ScrollEffects } from "@launchapp/design-system";Examples
Parallax hero
<ScrollEffects effect="parallax" speed={0.3}> <div className="h-screen bg-gradient-to-b from-primary/10 to-background flex items-center justify-center"> <h1 className="text-5xl font-bold">Hero Title</h1> </div></ScrollEffects>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | — | Content to apply scroll effects to. |
effect | "parallax" | "sticky" | "fade-out" | "parallax" | Scroll-driven effect type. |
speed | number | 0.5 | Effect intensity multiplier. |