←Back to Gallery
entrancespecial#71
Curtain open
Particles split from center, open like curtains
The Exhibit
Technique
origin.x = target.x ± (W/2 * (1-ease))
Blueprint
tsx
<ParticleText
text="UI Lab"
hoverMode="dissolve"
entranceMode="curtain-open"
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="curtain-open"
particleCount={8000}
cursorRadius={120}
color={[0.6, 0.75, 0.9]}
glowColor={[0.95, 0.75, 0.3]}
opacity={0.9}
/>
</div>
);
}