nowfound

Life & fun · May 20, 2025

HE

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…

Visit npmjs.com ↗Alternatives

What it does

In the maker’s words, at launch

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 Live demo (Vercel): https://hover-effects-ts.vercel.app Video demo: https://youtu.be/YO4R1A6JZ9U GitHub: https://github.com/hsrambo07/hover-effects X/Twitter post: 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!

Does the same job

all alternatives →
  • Gradient Buttons2017 · ▲171

    Beautiful buttons with hover animations

  • Hover States2016 · ▲135

    New, interesting, and weird in web and design

  • Blotter.js2018 · ▲243

    A JavaScript API for unconventional text effects on the web.

  • Hoverify2020 · ▲291

    Quickly inspect element, pick colors, capture and much more

  • Marvel (iOS)2014 · ▲211

    Turn Sketches Into Prototypes

  • IE
    Image Effects with CSS2016 · bennettfeely.com · ▲203

More life & fun this month

the category →
  • TL
    The load-bearing vocabulary of Claude▲703

    Life & fun · 10d ago · louisabraham.github.io

  • iPhone app takes simultaneous images from 2 lenses, fuses into 1 photo▲329

    Photosynthesis fires two of your iPhone

    Life & fun · 28d ago · photosynthesis.camera

  • SoloUno▲310

    Take control of hair pulling, nail biting & skin picking

    Life & fun · 28d ago · solouno.io

  • Scroll through all 43252003274489856000 Rubik's Cube states▲295

    Scroll through all 43,252,003,274,489,856,000 reachable Rubik's Cube permutations.

    Life & fun · 26d ago · everycube.alen.is

  • Expeditione▲265

    The Interactive 3D Encyclopedia

    Life & fun · 21d ago · expeditione.fun

  • Eigendrum - Draw any shape and hear what it sounds like as a drum▲243

    Hi HN, I built Eigendrum, a web tool that solves the 2D wave equation for arbitrary shapes so you can hear what they sound like as drums. How it works: * Solves -∇²u = λu using finite element analysis (Kφ = λMφ) on a triangle mesh. * Validated to <0.1% error against closed-form solutions for circles (Bessel zeros) and rectangles. * Sound model factors in strike location, Rayleigh damping, and mallet width. * Includes Kac drums I & II to demonstrate identical sound spectra from different geometries. * No frameworks, build steps, or dependencies. Repo and tests:…

    Life & fun · 26d ago · baselashraf81.github.io

Launched alongside, May 2025

the whole month →