Author here. Didn’t expect to see this post on HN. The idea has been on my mind for a few days, so I had to finally code it.

I feel that for these small experiments I should write shorter, more to the point posts. But somehow they always end up longer than I planned. I would appreciate feedback on this matter.

Anyway, it was fun to play around and I’m glad to see people like it enough to share it.

What do you have in mind?

I thought about making all values on the chart draggable. It would then update the CSS animation in realtime. I think would be very cool, but I’m not sure if there is a real usage for something like that, so I haven’t touched it.

Thank you! As for color conversion, I didn’t spend too much time thinking about the conversion. Because I’m using canvas to transform CSS colors to RGBA, I just went and multiplied them in order by powers on 10.

It can definitely be improved. Using HSL or even OKLch would probably give nicer results. I may look into it.

Hey HN,

I needed a few simple graphs for a blog post [0]. Instead of slapping together a few SVGs and moving on, I decided to write a whole library to parse CSS keyframe animations and convert them to interactive graphs.

It ended up being a rabbit hole, with a lot of caveats. But it was fun to make, and I'm really happy with the graphs it produces.

I'm not sure how useful it will be for others. If you end up using it, I'd love to see how - feel free to reach out.

It's open source [1] under the MIT license. Written in TypeScript with no dependencies.

Let me know what you think!

[0] https://muffinman.io/blog/css-image-glitch/

[1] https://github.com/Stanko/monorail

Hey HN, This is a small project I made for a meetup (Creative Coding Amsterdam's poetry afternoon). With all the hype around LLMs these days, I wanted to create something silly and fun.

I ended up with Glitchy BARD, which generates crappy poetry. It uses source text transformed into n-grams, while rhymes rely on the CMU Pronouncing Dictionary[0]. For the voice, I used the native SpeechSynthesis API instead of a fancy AI one.

Everything runs on the client, but you can share a song via URL, which includes the random number generator seed.

It's open source[1], though the code is a bit chaotic as I was experimenting a lot and never cleaned it up. A blog post about the CSS glitch effect[2] even gained some traction on HN.

I'd like to turn this into a proper talk, mostly because it was so much fun to make and touched a lot of different areas - language models, rhymes and poetry, pixel art (which is a pain do to on web), speech synthesis, CSS animations... I gave an internal presentation at my company and got very positive feedback.

So let me know what you think and if you have any questions about BARD, please shoot.

[0] http://www.speech.cs.cmu.edu/cgi-bin/cmudict

[1] https://github.com/Stanko/bard/

[2] https://news.ycombinator.com/item?id=44221907

Go for it, and share a link!

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.

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

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

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)

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.

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

Tixy is amazing! I built something very similar:

https://muffinman.io/pulsar/

I wanted to create animations for my LED matrix screen, and I couldn’t find tixy anywhere. Only after I built pulsar I found it again.

Another similar project is https://sliderland.blinry.org/ which uses HTML sliders.

Fun stuff!

Anybody else reminded of the old Sony logo?

https://tixy.land/?code=y%3C7%26%26%28x%2Bsin%28y%29%3C6.4%2...

edit: much better with a negation :)

If you haven't seen dwitter yet, you really should head over to https://www.dwitter.net

This is awesome. But it needs a better renderer.

Almost every animation/image there suffers from horrible moiré because a normal browser canvas was not meant for this. Fine line art needs supersampling and high quality filtering.

You're complaining about a small subset of "dweets" there. There are thousands of great visuals there that are not "fine line art" and do not suffer from what you described. And no, I do not think it "needs a better renderer" as high quality "rendering" is not the point of dwitter.net, the point is producing amazing things in 140 characters of javascript.

I stumbled on this some time ago and saved it for when my kid grows up enough. It is a collection of a few thousands kid friendly videos. I think their curation is pretty good, but check it out for yourself.

https://thekidshouldseethis.com/

Thank you! There is nothing wrong with large libraries. But you are right, there is something very satisfactory in solving a problem in a few lines of code.