The Actual State of Things With Dear White Parents Guide
Dear White Parents Guide is an HTML5 canvas-based particle simulation and text-to-speech demo that's been floating around developer showcases for a while. It renders animated typography using thousands of individual particles, lets you type custom text, and can generate spoken audio through the Web Speech API. It's not a single tool you download — it's more of a concept kit with code you can grab and run locally. The codebase lives on GitHub under repositories that go by variants of this name. The typical path is cloning the repo, opening index.html in a browser, and typing whatever text you want rendered. The particles react to mouse movement, creating a fluid displacement effect. Sound generation is optional and uses whatever speech synthesis engine your browser ships with — so Chrome gives you something different from Firefox, and neither sounds great. I worked through this about eighteen months ago when someone on a dev forum linked it and wanted to know if the particle physics could be adapted for a project I was building. The quick answer is no, the medium answer is maybe if you're willing to spend time rewriting the render loop.
Setting It Up Without Wasting Afternoon
Grab the source from the repository, which usually sits at github.com/dimten/DearWhiteParents or a mirror near it. Clone it, install the dependencies if there are any — usually just nothing at all, honestly, it runs vanilla — and serve index.html from any local server. Don't open it as a file:// URL because the speech synthesis API sometimes refuses to initialize properly and CORS can interfere with loading font files depending on your setup. What I ran into that nobody mentions: the default font rendering assumes your system has certain web fonts cached. On Linux, especially, you'll see the particles fail to map to letter shapes properly and just scatter into noise. The workaround was installing the Liberation Sans font family and adding a font-face fallback in the CSS that pointed to /usr/share/fonts/truetype/liberation/. Took about three minutes once I realized that's what was happening instead of spending an hour debugging the shader code. The text input field accepts unicode, which is nice, but the particle resolution drops significantly on longer strings. Anything over roughly sixty characters and the frame rate stutters on mid-range hardware because each character gets subdivided into roughly four thousand particles minimum. That's roughly 240,000 particles on the GPU at once, and the animation loop updates position vectors every frame without any spatial partitioning, which is why performance tanks on sustained input.
What Actually Works And What Doesn't
The visual effect is the main draw. The particle displacement around mouse cursor follows a simple inverse-square falloff, and the text emerges from chaos as particles snap into glyph positions. It's visually compelling in a demo context. The sound output is genuinely worse than what you'd get from any decent TTS service, because the Web Speech API default voices are robotic and have no emotional range. You're stuck with whatever the browser provides. The counter-intuitive thing most people miss: the particle density is adjustable but not by much. There's a slider in the config that lets you move between roughly 2000 and 6000 particles per character. Going above 6000 doesn't improve visual quality perceptibly on screen — the human eye can't resolve that many distinct dots at normal viewing distance — but it does crush performance. The sweet spot is around 3000 to 3500 particles per character for most desktop browsers. Another thing nobody warns you about: the mouse interaction has a dead zone. If your cursor stays too close to the text area for extended periods, particles get caught in a loop where they're constantly being repelled but never settle. I hit this while recording a demo and the output looked like the text was having a seizure for about twelve seconds. Moving the cursor in wide arcs rather than keeping it stationary solves it. You can also increase the damping factor in the physics config to about 0.92 or 0.93, which makes particles settle faster after displacement.
Get the Full Details
Limitations You Need To Know Before Investing Time
This is not production-ready software. It's a proof of concept with good visual design. There's no error handling for unsupported browsers, no mobile touch support beyond basic pointer events, and no build system, so you can't bundle it into anything larger without manually pulling the relevant files. If you need this for a real product, you're looking at several days of work just to make it stable across browsers, let alone customizable. The code itself is readable if you know JavaScript canvas APIs well. The main loop is in animation.js, the physics math is in physics.js, and the text-to-particle mapping lives in a function called getTextParticles() or something similarly named. It's not obfuscated. You can modify it, but the documentation is nonexistent. I spent about forty-five minutes tracing why my custom font sizes broke the particle alignment, and the issue turned out to be that the glyph sampling code hardcodes a character width assumption based on a monospace font metric that doesn't hold for proportional fonts. If your goal is genuinely just to make animated text with particle effects, consider whether the effort of hacking this repo is worth it versus using Three.js with a point cloud shader. Three.js has built-in text geometry functions and hardware-accelerated particle systems that will run smoother on lower-end devices. The tradeoff is that Three.js has a steeper learning curve and a larger bundle size. Dear White Parents Guide is lighter weight but less flexible.
I ended up forking the repo, removing the speech synthesis entirely since I didn't need it, bumping the particle cap to 4500 per character, and adding a simple touch-move handler for mobile. Took me a, roughly three hours, to get something presentable. The result looked good but had a few edge cases where characters with thin strokes — like i and l — would lose their particles entirely because the sampling algorithm skipped narrow columns. I patched that by lowering the minimum stroke width threshold from 3 pixels to 1.5 pixels in the rasterizer. After that it worked acceptably. If you want to find the source, searching GitHub for "DearWhiteParents" or "Dear White Parents Guide" will surface the original repos. There are forks everywhere at this point. The original author hasn't updated it in a couple years, so most of the useful improvements you'll find are in the forked versions.
