Float
A component that creates a gentle floating effect on its child.
Album of the week
Source code
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.
@mdx-js/loader
@mdx-js/react
@next/mdx
@vercel/analytics
class-variance-authority
clsx
flubber
framer-motion
lenis
lodash
lucide-react
matter-js
mdast-util-toc
next
next-mdx-remote
poly-decomp
react
react-dom
react-syntax-highlighter
react-wrap-balancer
rehype-pretty-code
remark
svg-path-commander
tailwind-merge
tailwindcss-animate
zod
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 |