Canvas Gold Dust Particle Text Effect
Overview
A headline for React and Next.js made of gold dust. A burst from the centre of the screen turns into a huge vortex, pours into the letters in about 2 seconds, and a wind keeps peeling grains off and letting them fall back. Plain Canvas 2D, and it stays a real h1 or h2.
The component reads the headline's computed font, size and line breaks, draws the same text to a mask, and gives every grain a spot on a filled pixel. Each frame writes the grains straight into one full-size pixel buffer, adding up energy per pixel and mapping it through a gold ramp, and puts that on a canvas in one call. That's how it holds over 70,000 grains at 1280 by 800 with hardware acceleration off. There's no WebGL and no Three.js.
Details
- Category
- Text
- Interaction
- On Load + Mouse Move + On Click
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 099 / Hero
Dot Portrait Hero with Particle Image Canvas Animation
On Load · Mouse Move · On Click
No. 042 / 3D
Canvas Diamond with Real Dispersion and Drag to Rotate
On Load · Drag · Mouse Move · On Click
No. 116 / Cards
Stretchy Cloth Image Card You Can Grab, with Canvas Physics
On Load · Drag · Mouse Move · On Click
(02)FAQ
Canvas Gold Dust Particle Text Effect — FAQ
01How do I set the font and size?
Put them on headingClassName or headingStyle, the same as any heading. The dust follows the computed font, size, weight, letter-spacing and wrapped lines. Use a in text to force a line break. Heavier weights give crisper words, because thin hairlines hold fewer grains.
02What does it need from my page?
Tailwind CSS v4. There are no npm packages to install: no Three.js and no GSAP. The section's height and padding come from your className.
03How heavy is it?
About 5 to 8 ms of JavaScript a frame at 1280 by 800 on a 4 core laptop with acceleration off. It takes 2.2 grains per pixel of letter, up to 96,000 without a GPU and 150,000 with one. If the first 60 frames after the entrance run slower than about 40 frames a second, it draws a quarter fewer grains, each a little brighter. The loop stops when the section is off screen or the tab is hidden.
04Does it work on phones?
Yes. Phones cap at 26,000 grains. The wind and the falling dust run by themselves, a tap makes a puff, and the section uses touch-action: pan-y, so a swipe over it scrolls the page.
05Is the headline still accessible?
Yes. It is a real h1 or h2 in the DOM, selectable and read by screen readers, with the canvases marked aria-hidden. It's the gold body the grains sit on. If the JavaScript never runs it fades in by itself as a plain gold gradient, along with anything else in the section.
06What happens with reduced motion?
There's no burst and no loop. The dust is drawn once, already in the letters, with all the text showing.