Delta Components

Docs

Floating Object

A versatile animation component that creates smooth floating effects with multiple movement patterns including gentle floating, circular motion, and random directional movement.

Preview

Code

Open in

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

"use client"
 
import { FloatingObject } from "@/registry/animations/floating-object"
 
export function Component() {
  return (
    <FloatingObject pattern="float" intensity="medium" speed="medium">
      <div className="w-20 h-20 bg-primary rounded-full" />
    </FloatingObject>
  )
}

Examples

Basic Floating

<FloatingObject>
  <img src="/avatar.jpg" alt="Avatar" className="w-16 h-16 rounded-full" />
</FloatingObject>

Circular Motion

<FloatingObject pattern="circular" direction="clockwise" speed="slow">
  <div className="w-12 h-12 bg-blue-500 rounded-full" />
</FloatingObject>

Random Directional Movement

<FloatingObject pattern="random-directions" intensity="strong" speed="fast">
  <span className="text-2xl">🎈</span>
</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