✨ Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes

Getting Started

Templates

Components

Special Effects

Animations

Text Animations

Device Mocks

Buttons

Backgrounds

Community

Floating 3D Particles

A canvas-based pseudo-3D particle field with perspective projection, continuous rotation, buoyant drift and depth-aware rendering.

Build something magical

A pseudo-3D particle background that stays behind your content with continuous rotation and buoyant drift.

components/ui/floating-3d-particles-demo.tsx

"use client"

import { ArrowRight } from "lucide-react"
import { useTheme } from "next-themes"

import { Floating3DParticles } from "@/registry/magicui/floating-3d-particles"

export function Component() {
  const { resolvedTheme } = useTheme()
  const color = resolvedTheme === "dark" ? "#ffffff" : "#000000"

  return (
    <div className="bg-background relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border">
      <Floating3DParticles color={color} />

      <div className="relative z-10 flex flex-col items-center gap-6 px-6 text-center">
        <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
          Build something magical
        </h2>
        <p className="text-muted-foreground max-w-xl text-base md:text-lg">
          A pseudo-3D particle background that stays behind your content with
          continuous rotation and buoyant drift.
        </p>
        <button
          type="button"
          className="bg-foreground text-background inline-flex h-11 items-center gap-2 rounded-lg px-6 font-medium no-underline transition-opacity hover:opacity-90"
        >
          Get Started
          <ArrowRight className="size-4" />
        </button>
      </div>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @magicui/floating-3d-particles

Examples

Plain Background

components/ui/floating-3d-particles-demo-2.tsx

"use client"

import { useTheme } from "next-themes"

import { Floating3DParticles } from "@/registry/magicui/floating-3d-particles"

export function Component() {
  const { resolvedTheme } = useTheme()
  const color = resolvedTheme === "dark" ? "#c4b5fd" : "#6d28d9"

  return (
    <div className="bg-background relative h-[500px] w-full overflow-hidden rounded-lg border">
      <Floating3DParticles
        color={color}
        depth={0.8}
        opacity={0.55}
        quantity={1000}
      />
    </div>
  )
}

Usage

Floating3DParticles renders an absolutely positioned canvas (inset-0, pointer-events-none). Place it inside a relative container and layer any foreground content above it with z-10.

import { Floating3DParticles } from "@/components/ui/floating-3d-particles"

<div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border">
  <Floating3DParticles color="#8B5CF6" quantity={400} />
  <div className="relative z-10 text-center">
    <h2 className="text-3xl font-bold">Build Something Magical</h2>
  </div>
</div>

Props

Prop	Type	Default	Description
`className`	`string`	`-`	Additional CSS classes for the canvas element.
`quantity`	`number`	`400`	Number of particles on desktop viewports. Automatically scales down to 20% on mobile screens (< 768px).
`color`	`string`	`"#8B5CF6"`	Particle color (supports 3-digit or 6-digit hex).
`size`	`number`	`5`	Mean particle radius in px. Each particle varies within ±40% of this value.
`opacity`	`number`	`0.3`	Mean particle opacity (0–1). Each particle varies within ±0.2, clamped to [0, 1].
`drift`	`number`	`0.8`	Vertical floating speed in px per frame. Positive drifts upward, negative downward.
`depth`	`number`	`0.5`	3D depth intensity (0–1). `0` = flat 2D plane; `1` = strong perspective with pronounced near/far scaling.

Noise Texture Shiny Button

On This Page

Installation Examples Plain Background Usage Props

Contribute

Limited Time Offer

Ship Faster with Magic UI Pro

Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.

Next.js 15 + TypeScript ready

Copy, paste, customize in minutes

Save 100+ hours of development

$199once

Get Lifetime Access

Trusted by 5,000+ developers