How I (tried to) recreated the iOS Messages invisible ink effect using React, Canvas, and a particle system
The journey from HTML Canvas to PixiJS, and why sometimes you need to throw out your first implementation (or three)
Introducing my new blog where I'll share insights on software engineering, web development, and building scalable systems.
How I (tried to) recreated the iOS Messages invisible ink effect using React, Canvas, and a particle system
The journey from HTML Canvas to PixiJS, and why sometimes you need to throw out your first implementation (or three)
Introducing my new blog where I'll share insights on software engineering, web development, and building scalable systems.
I thought: “How hard can this be? Throw some particles on a canvas, let them wiggle around, and BOOM magic dust. ✨”
Turns out: very hard.
I tried to fix it by having particles scatter away from your mouse or finger. Which worked, but made the reveal temporary, like brushing sand off a beach only for the waves to dump it back a second later. Not exactly the vibe.
So I needed a system to make the reveal stick. Enter: the Reveal Grid.
Imagine your text is covered in thousands of tiny squares. Every time you swipe across, the squares in that area “remember” they’ve been cleaned, and stay that way.
That gave me the progressive, permanent reveal I wanted. Slowly but surely, your words appear iOS-style like you’re scratching away a lottery ticket.
Loading...But of course, that created new problems.
You know what canvas hates? Paragraphs.
Canvas is great at drawing one single line of text, but the moment you try to let text wrap naturally, it just laughs at you. My invisible ink effect broke completely. Words either stretched off the page like a runaway train, or jumped around in misaligned ways that made it look like my blog had been cursed.
This is the moment where most reasonable people would’ve quit. Instead, I doubled down and invented an entirely new system:
They don’t even know each other exist, but together they pull off the illusion.
Once it technically worked, the real fun began:
One by one, I solved them. Slower sine waves, fade-in characters, baselines adjusted until text finally looked like… well, text.
Loading...Was this effect necessary? Absolutely not. But I still didn’t want it to be evil.
Still, you probably don’t want more than 5 invisible-ink sections on a single page unless you want your blog to double as a space heater.
Because why stop at one shiny toy?
The answer is Loading....
Or maybe you want a dramatic reveal:
Loading...There’s no grand vision here. I didn’t invent a new framework or revolutionize web design.
I just made scratch-off lottery ticket text for my blog because it made me laugh. And honestly? Watching people swipe across the screen to reveal words is more delightful than any serious design essay I could’ve written.
This could’ve been a beautiful deep-dive about performance tuning, grid algorithms, and web animation standards. Instead, it’s a chaotic scrapbook of particles, CSS hacks, and raccoon jokes.
I timeboxed this, which is why it turned out so crappily.
I thought: “How hard can this be? Throw some particles on a canvas, let them wiggle around, and BOOM magic dust. ✨”
Turns out: very hard.
I tried to fix it by having particles scatter away from your mouse or finger. Which worked, but made the reveal temporary, like brushing sand off a beach only for the waves to dump it back a second later. Not exactly the vibe.
So I needed a system to make the reveal stick. Enter: the Reveal Grid.
Imagine your text is covered in thousands of tiny squares. Every time you swipe across, the squares in that area “remember” they’ve been cleaned, and stay that way.
That gave me the progressive, permanent reveal I wanted. Slowly but surely, your words appear iOS-style like you’re scratching away a lottery ticket.
Loading...But of course, that created new problems.
You know what canvas hates? Paragraphs.
Canvas is great at drawing one single line of text, but the moment you try to let text wrap naturally, it just laughs at you. My invisible ink effect broke completely. Words either stretched off the page like a runaway train, or jumped around in misaligned ways that made it look like my blog had been cursed.
This is the moment where most reasonable people would’ve quit. Instead, I doubled down and invented an entirely new system:
They don’t even know each other exist, but together they pull off the illusion.
Once it technically worked, the real fun began:
One by one, I solved them. Slower sine waves, fade-in characters, baselines adjusted until text finally looked like… well, text.
Loading...Was this effect necessary? Absolutely not. But I still didn’t want it to be evil.
Still, you probably don’t want more than 5 invisible-ink sections on a single page unless you want your blog to double as a space heater.
Because why stop at one shiny toy?
The answer is Loading....
Or maybe you want a dramatic reveal:
Loading...There’s no grand vision here. I didn’t invent a new framework or revolutionize web design.
I just made scratch-off lottery ticket text for my blog because it made me laugh. And honestly? Watching people swipe across the screen to reveal words is more delightful than any serious design essay I could’ve written.
This could’ve been a beautiful deep-dive about performance tuning, grid algorithms, and web animation standards. Instead, it’s a chaotic scrapbook of particles, CSS hacks, and raccoon jokes.
I timeboxed this, which is why it turned out so crappily.