←Back to Gallery
entrancedirection#12
Diverge
Particles start at center, diverge outward to targets
The Exhibit
Technique
origin = center, mix to target
Blueprint
tsx
<ParticleText
text="UI Lab"
hoverMode="dissolve"
entranceMode="diverge"
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="dissolve"
entranceMode="diverge"
particleCount={8000}
cursorRadius={120}
color={[0.6, 0.75, 0.9]}
glowColor={[0.95, 0.75, 0.3]}
opacity={0.9}
/>
</div>
);
}