ParallaxSection
Add depth to your brutally honest layouts with layered background scrolling.
Usage
Wrap your foreground content and pass a background element. It respects prefers-reduced-motion automatically.
I scroll faster!
tsx
import { ParallaxSection } from "starkit-ui";
<ParallaxSection
speed={0.4}
background={
<div style={{ width: "100%", height: "100%", backgroundColor: "var(--brut-blue)" }} />
}
>
<h3>Foreground Content</h3>
</ParallaxSection>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| speed | number | 0.5 | Speed of background relative to scroll. 0 = normal, 1 = sticky. |
| background | ReactNode | - | The background layer content. |