AnimationsNew
Float
Gently sways any block in three dimensions as if it hangs in the air. Brings covers, cards and icons to life.
Customize
color
accentColor
highlightColor
Based on Float (MIT license) ยท Terms of use
More in Pro
View allProps
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | โ | What floats. |
| speed | number | 0.5 | Swaying speed. |
| amplitude | [number, number, number] | "[10, 30, 30]" | Movement range on X, Y and Z, in pixels. |
| rotationRange | [number, number, number] | "[15, 15, 7.5]" | Tilt range on X, Y and Z, in degrees. |
| timeOffset | number | 0 | Phase shift. Different values keep several blocks out of sync. |
| color | string | "#ffffff" | Main colour. Children read it as var(--float-c1). |
| accentColor | string | "#a3a3a3" | Second colour. Children read it as var(--float-c2). |
| highlightColor | string | "#e5e5e5" | Light highlight colour. Children read it as var(--float-c3). |
| className | string | โ | Extra classes. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge