Particle Assemble Text
Particles sampled from the glyphs themselves, assembling into a word and scattering on hover.
Canvas 2D0 deps1 file · 5 KB TSX
Props
"use client";
import { useEffect, useRef } from "react";
export function ParticleAssembleText({
text,
density = 4,
speed = 0.06,
scatterOnHover = true,
}: {
text: string;
/** Blow the word apart while the pointer is over it. */
scatterOnHover?: boolean;
/** Pixel sampling stride. Lower = more particles = heavier. */
density?: number;
/** Easing factor per frame, 0-1. */
speed?: number;
}) {
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this text effect
Particle text effects usually ship with their point cloud baked in, which is why they only ever spell the one word the author built them for. Sampling solves it properly: draw the string to the canvas once, read the pixels back, and treat every Nth opaque pixel as a destination. The component then works for any string, any font and any size with no authored coordinates, and re-sampling on resize keeps it correct as the container changes. Three details keep it stable. Start positions come from a deterministic hash of the particle index rather than `Math.random`, because a random seed differs between the server and client renders and is a genuine hydration mismatch. Motion is exponential easing toward the goal rather than a spring — with hundreds of bodies a spring's overshoot turns into visible boiling, while easing is one multiply per particle and always settles. And the context is created with `willReadFrequently`, since a canvas that gets read back every build belongs on the CPU rather than the GPU. The cost scales with the square of the sampling stride, so density is the knob to reach for on mobile.
Curator’s note
Built for viberdy 2.1. Sampling targets from rendered glyphs is what makes it work for any string — most versions hard-code the point set.
