Note: This project is still in development and has not been publicly released. Coming soon.
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"
2
3import { FloatingObject } from "@/registry/animations/floating-object"
4
5export 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

NameTypeDefaultDescription
childrenReactNode-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
classNamestring-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

LevelFloat MovementCircular RadiusDescription
subtle3px x, 2px y, 1° rotation15pxMinimal, barely noticeable movement
medium6px x, 4px y, 2° rotation25pxBalanced, noticeable but not distracting
strong10px x, 8px y, 3° rotation40pxProminent, eye-catching movement

Speed Settings

SpeedDurationDescription
slow8 secondsRelaxed, meditative pace
medium5 secondsStandard, comfortable pace
fast3 secondsQuick, energetic pace
Loading...
Loading...