Delta Components

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

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