UI Lab
←Back to Gallery
hoverambient§32

Orbit

Planetary orbit, satellite, stable rotation

The Exhibit

Technique

Stable circular orbit at current distance

Blueprint

tsx
<ParticleText
  text="UI Lab"
  hoverMode="orbit"
  particleCount={8000}
  cursorRadius={120}
  falloff="gaussian"
/>

How to Use

1. Install dependencies

bash
# Install
pnpm add three

# Copy these files to your project:
#   src/lib/particle-sampler.ts
#   src/lib/glsl-effects.ts
#   src/components/particle-text.tsx

# Then import and use:
import { ParticleText } from "@/components/particle-text";

2. Use in your component

tsx
"use client";
import { ParticleText } from "@/components/particle-text";

export function MyComponent() {
  return (
    <div className="h-64 w-full">
      <ParticleText
        text="Hello World"
        hoverMode="orbit"
        particleCount={8000}
        cursorRadius={120}
        color={[0.6, 0.75, 0.9]}
        glowColor={[0.95, 0.75, 0.3]}
        opacity={0.9}
      />
    </div>
  );
}

More in ambient

TornadoEmberMatrixConstellationLensQuantumStaticSandBubblesCometInk