Animations/Floating Elements
Floating Elements
Ambient floating orbs or custom elements that drift around a container. Use as a background layer behind hero sections or feature cards.
import { FloatingElements } from "@animui/ui"Orbs
Your content
Custom content
⚡
🎨
✨
🚀
💎
Custom floating content
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | FloatingItem[] | — | Array of items to float. Each item has content, x, y, delay, duration, and amplitude properties. |
className | string | — | Additional classes for the container. |
FloatingItem fields
| Prop | Type | Default | Description |
|---|---|---|---|
content | ReactNode | — | The element to float (any JSX). |
x | string | "50%" | Horizontal position as a CSS value (e.g. '20%', '150px'). |
y | string | "50%" | Vertical position as a CSS value. |
duration | number | 4 | Animation cycle duration in seconds. |
delay | number | auto | Animation start delay in seconds. Defaults to index × 0.4. |
amplitude | number | 16 | Pixels the element travels vertically in each cycle. |