3 ms·
Show HN: Hover Effects TS – ASCII, Lego, and glitch hover effects using canvas
Hey HN,
I recently built a small TypeScript utility called `hover-effects-ts` — it adds fun and experimental hover effects to images using the HTML canvas. You can apply effects like ASCII art, Lego blocks, glitch distortion, and pixelation on hover.
The goal was to break away from boring `:hover` transitions and bring some delightful visual feedback to personal websites, landing pages, or error screens — while keeping it lightweight and performance-friendly.
Why I built it:
I found most image hovers visually bland, and wanted something weird but still dev-friendly. I used canvas to keep the effects GPU-accelerated and controllable. No dependencies, and devs can tweak intensity, radius, image scope, and more.
NPM: https://www.npmjs.com/package/hover-effects-ts https://www.npmjs.com/package/hover-effects-ts
Live demo (Vercel): https://hover-effects-ts.vercel.app https://hover-effects-ts.vercel.app
Video demo: https://youtu.be/YO4R1A6JZ9U https://youtu.be/YO4R1A6JZ9U
GitHub: https://github.com/hsrambo07/hover-effects https://github.com/hsrambo07/hover-effects
X/Twitter post: https://x.com/harsh_logs/status/1924739860780519579 https://x.com/harsh_logs/status/1924739860780519579
Would love feedback, bug reports, or effect ideas. It's still early – planning to add a few more visual modes and expose more dev controls.
Thanks for checking it out!
- Sayyidalijufri 1y agoGood
- sphars 1y agoYour demo app on vercel is currently 404-ing
- hsrambo07 1y agoThanks for pointing. It's fixed now, it was some deployment bug.