Floating Object

Demo

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

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

Speed Settings