←Back to Gallery
entrancemorph#36
Morph grid
Particles start on a grid lattice
The Exhibit
Technique
origin = floor(random * grid) * cell
Blueprint
tsx
<ParticleText
text="UI Lab"
hoverMode="dissolve"
entranceMode="morph-grid"
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="morph-grid"
particleCount={8000}
cursorRadius={120}
color={[0.6, 0.75, 0.9]}
glowColor={[0.95, 0.75, 0.3]}
opacity={0.9}
/>
</div>
);
}