Reusables

A component that creates a floating animation effect for child elements, perfect for showcasing partner logos or trusted-by sections.

Installation

npx shadcn@latest add "https://reusables.vercel.app/r/floating-elements"

Usage

import FloatElements from "@/components/ui/floating-elements-demo"
 
export default function FloatingElementsDemo() {
  return (
    <FloatElements title="Trusted by" className="mt-20">
      {/* Your floating elements here */}
    </FloatElements>
  )
}

Example

Open in

Trusted by

Custom Styling

<FloatElements
  title="Featured In"
  className="rounded-xl bg-secondary/10 p-8"
  titleClassName="text-2xl font-bold text-secondary-foreground"
  gridClassName="grid-cols-2 md:grid-cols-4"
>
  {/* Your elements */}
</FloatElements>

API Reference

Prop	Type	Default
`children`	`React.ReactNode`	-
`className`	`string`	-
`elementClassName`	`string`	-
`gridClassName`	`string`	-
`title`	`string`	-
`animationConfig`	`AnimationConfig`	-

AnimationConfig

Prop	Type	Default
`minDistance`	`number`	`0`
`maxDistance`	`number`	`50`
`duration`	`number`	`3000`
`easing`	`string`	`cubic-bezier(0.4, 0, 0.2, 1)`
`shouldRandomizeInitialPosition`	`boolean`	`false`

Floating Elements

Trusted by