Float
A component that creates a gentle floating effect on its child.
Album of the week
Installation
npx shadcn@latest add "https://fancycomponents.dev/r/float.json"
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
amplitude
prop controls movement range on X, Y and Z axes in pixels. -
Rotation: The
rotationRange
prop sets maximum rotation angles in degrees for each axis. -
Animation Speed: The
speed
prop (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
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 |