Floating 3D Particles

A canvas-based 3D particle animation with perspective, continuous rotation, and buoyant drift. Renders particles with customizable color, size, and opacity. Use for background effects with dynamic visual depth.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/floating-3d-particles

npx layro-cli add @magicuidesign/floating-3d-particles

npx layro-cli add @magicuidesign/floating-3d-particles

bunx layro-cli add @magicuidesign/floating-3d-particles

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

export interface Floating3DParticlesProps extends Omit<
  React.CanvasHTMLAttributes<HTMLCanvasElement>,
  "width" | "height"
> {
  /**
   * Number of particles rendered on desktop viewports.
   * On mobile screens (< 768px), particle count automatically scales down
   * to 20 % to preserve smooth frame rates.