Show HN: I made CSS-only glitch effect

15 comments

• justsomehnguy 6 days ago

  Doesn't work on Android DDG and FF on th site, but works in both on CodePen.

  [-]
  • stankot 6 days ago

    That is weird, because it is HTML/CSS only. Do you see anything that would help me debug it? Could it be that an add-on (content blocker) messes up with it? I don't have an android device to test. I don't see any issues on desktop and ios though.

    [-]
    • justsomehnguy 5 days ago

      Quite amusingly:

      site glitch doesn't work on the desktop FF too, not in any of three, with various staleness but nothing too old

      works on the CodePen, but if I replace CSS there with the response of glitch.css from the Network tab - it blanks and never shows anything

      no ad-blockers, no errors while loading

      [-]
      • stankot 5 days ago

        Thanks for checking, I’ll try to see what is going on.

        [-]
        • justsomehnguy 4 days ago

          Shoulda checked it in the first place:

              GET https://muffinman.io/js/posts/glitch/parser.js [HTTP/1.1 200 OK 138ms]
          
              Uncaught TypeError: animation is undefined
                  parse https://muffinman.io/js/posts/glitch/parser.js:263
                  Monorail https://muffinman.io/js/posts/glitch/monorail.js:327
                  <anonymous> https://muffinman.io/js/posts/glitch/index.js:10
                  <anonymous> https://muffinman.io/js/posts/glitch/index.js:5
          

          FF 138.0.1 (May 1, 2025)
          [-]
          • stankot 4 days ago

            I've figured it out. The error means that this call fails:

                const animation = animationElement.getAnimations()[0];
            

            As Firefox supports `getAnimations` since 2020, I figured something else is messing up with it. I've tried to enable "reduced motion" in the system settings and it broke the animation!

            It is because I had force-disabled all animations on the site when this option is enabled.

            I patched it, it should work now. Thank you for your help!

            EDIT: typo

            EDIT2: I also added simple error handling to display a message if parsing the animation fails.

            [-]
            • justsomehnguy 3 days ago

              Yep, works on DDG/A, FF/Win64 now!

  • Semaphor 6 days ago

    Works for me on the site, FF Android

  • dahrkael 4 days ago

    works for me in android DDG

• lunaps 4 days ago

  That's truly impressive, never have seen sth like that before with CSS

• dlouxgit 5 days ago

  This CSS glitch effect is so dope! Makes me wanna try it on my own website.

  [-]
  • stankot 5 days ago

    Go for it, and share a link!

• mdrzn 4 days ago

  Very interesting and beautiful effect!

• perilunar 4 days ago

  Nice!

• nmoya 6 days ago

  super cool!