Docs
Floating Object
Floating Object
A versatile animation component that creates smooth floating effects with multiple movement patterns including gentle floating, circular motion, and random directional movement.
21 views
2 downloads
Loading...
About
The FloatingObject component creates natural, organic movement animations for any child element. It supports three distinct movement patterns:
- Float: Gentle up-and-down movement with subtle rotation
- Circular: Smooth circular motion with customizable direction
- Random Directions: Dynamic movement between compass directions with unpredictable paths
Perfect for adding life to images, icons, or any UI elements that benefit from subtle motion.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/floating-object.json
Usage
1"use client"23import { FloatingObject } from "@/registry/animations/floating-object"45export function Component() {6 return (7 <FloatingObject pattern="float" intensity="medium" speed="medium">8 <div className="w-20 h-20 bg-primary rounded-full" />9 </FloatingObject>10 )11}
Examples
Basic Floating
1<FloatingObject>2 <img src="/avatar.jpg" alt="Avatar" className="w-16 h-16 rounded-full" />3</FloatingObject>
Circular Motion
1<FloatingObject pattern="circular" direction="clockwise" speed="slow">2 <div className="w-12 h-12 bg-blue-500 rounded-full" />3</FloatingObject>
Random Directional Movement
1<FloatingObject pattern="random-directions" intensity="strong" speed="fast">2 <span className="text-2xl">🎈</span>3</FloatingObject>
API Reference
Props
Name | Type | Default | Description |
---|---|---|---|
children | ReactNode | - | The content to animate |
pattern | "float" | "circular" | "random-directions" | "float" | The movement pattern to use |
intensity | "subtle" | "medium" | "strong" | "medium" | Controls the range of movement |
speed | "slow" | "medium" | "fast" | "medium" | Animation speed |
direction | "clockwise" | "counterclockwise" | "clockwise" | Direction for circular pattern only |
className | string | - | Additional CSS classes |
Pattern Details
Float Pattern
- Creates gentle up-and-down movement with subtle rotation
- Intensity affects both translation distance and rotation amount
- Most suitable for subtle, ambient animations
Circular Pattern
- Creates smooth circular motion around the starting position
- Direction prop controls clockwise or counterclockwise movement
- Radius is determined by the intensity setting
Random Directions Pattern
- Moves between 8 compass directions (N, NE, E, SE, S, SW, W, NW)
- Generates random paths with 6-8 waypoints
- Creates new random paths automatically for continuous variation
- Takes twice as long as other patterns for more deliberate movement
Intensity Levels
Level | Float Movement | Circular Radius | Description |
---|---|---|---|
subtle | 3px x, 2px y, 1° rotation | 15px | Minimal, barely noticeable movement |
medium | 6px x, 4px y, 2° rotation | 25px | Balanced, noticeable but not distracting |
strong | 10px x, 8px y, 3° rotation | 40px | Prominent, eye-catching movement |
Speed Settings
Speed | Duration | Description |
---|---|---|
slow | 8 seconds | Relaxed, meditative pace |
medium | 5 seconds | Standard, comfortable pace |
fast | 3 seconds | Quick, energetic pace |
Loading...
Loading...