Docs
Float

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:

  1. Movement: The amplitude prop controls movement range on X, Y and Z axes in pixels.

  2. Rotation: The rotationRange prop sets maximum rotation angles in degrees for each axis.

  3. 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


PropTypeDefaultDescription

children*

React.ReactNode-The content to be animated
speednumber0.5Speed 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
timeOffsetnumber0

Offset to stagger animations between multiple instances

classNamestring-Additional CSS classes for styling