Particle Assemble Text
Particles sampled from the glyphs themselves, assembling into a word and scattering on hover.
- Category
- Text Effects
- Added
- 2026-09-20
- Deps
- none
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Weight Wave Text
text effectsPer-character variable font weight that swells around the pointer and drifts when idle.
Chromatic Split Hover
text effectsRGB channels of a headline separate toward the pointer and recombine to white.
Scramble Text
text effectsText that decodes from random characters into its real word on hover.