Life & fun · alternatives · 2026
24 alternatives to 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…
Below are 24 products that do a similar job, ranked by how close each is in meaning and then by launch-day votes.
- 1
Its Hover▲293Icons that move and react mirroring user intent
Jan 2026 · itshover.com · its alternatives →
- 2
Gradient Buttons▲171Beautiful buttons with hover animations
2017 · gradientbuttons.colorion.co · its alternatives →
- 3IR
After 25 years of writing software, I was feeling nostalgic for the kinds of things that got me into programming in the first place: the old DOS demoscene. I spent a weekend seeing if I could recapture some of that INT 13H VGA magic using today's web tech, but with the old-school constraints of doing it from scratch. The result is this portfolio of ten classic effects running in a single HTML file. It's all vanilla JavaScript writing to a element, with no external libraries. It was a fun challenge to implement things like: * The color palette cycling and smooth fading in the Plasma demo. *…
2025 · jdfio.com · its alternatives →
- 4
This tool turns videos into ASCII pixel art. You can use your webcam feed or upload a video, then use the controls to adjust the colors, resolution, text style, etc. Github repo: https://github.com/collidingScopes/ascii It's built with javascript / html canvas. I'll be continuing to work on this, with the goal of improving performance (it can be laggy at high resolutions) and to also allow image input (turn an image into animated ASCII art). Please let me know of any feedback or suggestions!
2024 · collidingscopes.github.io · its alternatives →
- 5
Hover States▲135New, interesting, and weird in web and design
2016 · hoverstat.es · its alternatives →
- 6
Blotter.js▲243A JavaScript API for unconventional text effects on the web.
2018 · blotter.js.org · its alternatives →
- 7
Hoverify 2.0▲392Stop bouncing between tools. Hoverify lets you inspect, edit, test, debug, capture and optimize websites from one browser extension.
2021 · tryhoverify.com · its alternatives →
- 8
A collection of CSS effects with a click to copy.
2019 · emilkowalski.github.io · its alternatives →
- 9
Slice It, Move It, Hue-rotate It!
2025 · muffinman.io · its alternatives →
- 10
I thought it would be interesting to have ID style hover docs outside the IDE. Hover is a Chrome extension that gives you IDE style hover tooltips on any webpage: documentation sites, ChatGPT, Claude, etc. How it works: - When a code block comes into view, the extension detects tokens and sends the code to an LLM (via OpenRouter or custom endpoint) - The LLM generates documentation for tokens worth documenting, which gets cached - On hover, the cached documentation is displayed instantly A few things I wanted to get right: - Website permissions are granular and use Chrome's permission…
Jan 2026 · github.com · its alternatives →
- 11
The latest 3Blue1Brown video [1] about the M. C. Escher print gallery effect inspired me to re-implement the effect as WebGL fragment shader on my own. [1]: https://www.youtube.com/watch?v=ldxFjLJ3rVY
Apr 2026 · static.laszlokorte.de · its alternatives →
- 12TM
2019 · mdbootstrap.com · its alternatives →
- 13
Hover Preview▲119Preview your HTML elements on Hover VsCode
2024 · marketplace.visualstudio.com · its alternatives →
- 14
Copy-paste CSS hover animations for nav links & text
Jul 2026 · codequest.work · its alternatives →
- 15
- 16MS
Hey HN I built svggles (npm: interactive-illustrations), a React utility that makes it easy to add playful, interactive SVGs to your frontend. It supports mouse-tracking, scroll, hover, and other common interactions, and it's designed to be lightweight and intuitive for React devs. The inspiration came from my time playing with p5.js — I loved how expressive and fun it was to create interactive visuals. But I also wanted to bring that kind of creative freedom to everyday frontend work, in a way that fits naturally into the React ecosystem. My goal is to help frontend developers make their…
2025 · svggles.vercel.app · its alternatives →
- 17
Enable Scrolling Effects on Squarespace with No-Code
2022 · squarekicker.com · its alternatives →
- 18
- 19
Beautiful copy + paste Tailwind CSS animations in seconds
2023 · tailwindanimations.co · its alternatives →
- 20
Hover Me▲75Quickly annotate any image and integrate in your website
2021 · hoverme.io · its alternatives →
- 21
glitch-this▲122Create highly customizable glitched images and GIFs!
2020 · github.com · its alternatives →
- 22QA
Hi! This is my little project introducing quasicrystals animations with some parameters. It uses a custom shader to allow higher resolution. Not all combinations look equally good. For example the "Spectrum" color palette IMO makes sense only for low values of "Tempo" and "Pattern Density". If you have VR googles, I recommend trying the WebXR version - it's really nice.
Aug 2026 · hypnagogic-quasicrystals.github.io · its alternatives →
- 23
Hoverboard▲70A space for coders, designers, writers & makers
2014 · hoverboard.io · its alternatives →
- 24
Flickgame▲68Your mouse is a crayon. Your browser is a wall. Draw stuff.
2015 · flickgame.org · its alternatives →
Also compare
Ranked by how close each launch is in meaning, then by votes. Prices were read from each product’s own site when checked and can change. Refine with your own description →