AnimationsProNew
Parallax Floating
Images scattered across the screen shift with the cursor at different depths, as if hanging in space. A striking hero for portfolios.
Customize
color
accentColor
highlightColor
Based on Parallax Floating (MIT license) ยท Terms of use
Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | โ | FloatingElement items with images or blocks. |
| sensitivity | number | 1 | Shift strength. A negative value moves items against the cursor. |
| easingFactor | number | 0.05 | Catch-up smoothness: lower is softer. |
| FloatingElement.depth | number | 1 | Depth of one item: the higher, the more it moves. |
| color | string | "#ffffff" | Main colour. Children read it as var(--parallax-c1). |
| accentColor | string | "#737373" | Second colour. Children read it as var(--parallax-c2). |
| highlightColor | string | "#e5e5e5" | Light highlight colour. Children read it as var(--parallax-c3). |
| className | string | โ | Extra classes. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge