Docs
→Blocks
→Float
Float
A component that creates a gentle floating effect on its child.
Loading...
Installation
1pnpm dlx shadcn add @fancy/float
Usage
Just wrap your content you want to float with the Float component, and the animation will take care of the rest.
Understanding the component
The component creates a smooth floating animation using sine waves for both movement and rotation. It accepts three main props:
-
Movement: The
amplitudeprop controls movement range on X, Y and Z axes in pixels. -
Rotation: The
rotationRangeprop sets maximum rotation angles in degrees for each axis. -
Animation Speed: The
speedprop (default: 0.5) controls animation speed - higher is faster.
Examples
By default, multiple Float components will move in unison. Use the timeOffset prop to create more organic movement.
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | - | The content to be animated |
| speed | number | 0.5 | Speed of the floating animation |
| amplitude | [number, number, number] | [10, 30, 30] | Movement range in pixels for X, Y and Z axes |
| rotationRange | [number, number, number] | [15, 15, 7.5] | Maximum rotation in degrees for X, Y and Z axes |
| timeOffset | number | 0 | Offset to stagger animations between multiple instances |
| className | string | - | Additional CSS classes for styling |
