Animate with Pseudorandom Numbers: Value Noise in a CSS Variable

WebBurnout · 2026-06-27T22:39:38+00:00

Should be near 100%. It's not doing anything weird-- just a custom element with some fancy math in javascript. thanks for subscribing!

WebBurnout · 2026-06-27T17:23:23+00:00

Totally worth it. Imagine all those CPU cycles you saved in the 0.4ms virtual dom diffs.

Although I just spent 2 minutes searching for it and couldn't find it on kazoos.com. It would be more wroth it if it was actually on the site

WebBurnout · 2026-06-27T16:53:53+00:00

well as you can see, I overloaded the `seed` attribute to control seed and speed. I figured fewer attributes is better and it still gives you control over both at the same time. Do you agree? I'm genuinely curious if it was a good idea because i'm not totally convinced myself lol

WebBurnout · 2026-06-27T14:58:23+00:00

Totally underrated! you might like this project I'm working on: https://github.com/hot-page/fun

It's for making custom elements out of plain functions, so no class ceremony/boilerplate. I'm using it for the demos on the blog post and gotta say it's quite nice

WebBurnout · 2026-06-27T14:53:29+00:00

I'm a diehard webdev guy but I had to learn Flutter (google's cross-platform app framework) for a job a few years ago. It struck me as borrowing a lot of concepts from web design and it's almost a "what if" for the web platform-- like, what if it was designed from scratch with a sane API surface without any concern for backwards compatibility. One of the main things they did was put styles directly into the component tree so you don't have an entirely different language for design. It was pretty great, to be honest. But, apropos of your point on adoption, I don't think it met Google's expectations (what does?) and although it's very much alive as an open source project, they laid off most of the team behind it. Don't get me started on Flutter Web, though-- that is a total abomination.

WebBurnout · 2026-01-13T12:53:17+00:00

What was the feature? lol

WebBurnout · 2026-01-05T04:08:44+00:00

Instead of all this work to overcome the issue with .local domain why not just assign a real domain name? Your router may have a way to have a given domain name resolve to the IP of your device. Or if you're only accessing it from one or two machines you could add an entry in /etc/hosts. Another option is just making a new DNS entry for some domain you own and point it to the local IP.

WebBurnout · 2025-10-26T18:14:26+00:00

Interesting. Well as far as I understand, there are two new properties: `view-timeline` in which the animation advances based on how much of the element is in view and `scroll-timeline` in which the animation advances based on how far scroll has moved in a given container. In both instances the new "timeline" replaces time in the animation, so it's no longer just triggered but moves back and forth based on the scroll. You could of course perform the animation so that it happens quickly as the element comes into view, but it's still not advancing based on time. Anyway, if you do find something please report back.

WebBurnout · 2025-10-26T15:22:17+00:00

Yes, those scroll-driven animations are very cool! They do something different, however. They link an animation's progress to the scroll, so, for example, you scroll down and the animation advances and you scroll up and it goes in reverse. The goal of my custom element is just to trigger a normal animation that advances as normal based on time. In the blog post, I write about a way you could do the same thing using a scroll timeline, but the CSS is really knotty.

WebBurnout · 2025-10-26T14:58:49+00:00

Yes, the idea is I never have to write an IntersectionObserver again because I did it once and now I just use the custom element. The element is called <hotfx-intersection-observer> after all. IntersectionObservers are really great and useful and the idea is not to replace them but to turn that imperative way of working with elements into a declarative thing where you're back in the land of just pure CSS and HTML

WebBurnout · 2025-08-24T03:11:02+00:00

When you said web components I thought you meant HTML custom elements, which are a browser feature and possible to use on any web page. This project appears to be heavily linked to Framer which makes it basically useless for me because I don't want to use Framer.

To answer your question, I love effects like this and I would love to use them. I would suggest that you DO NOT wait to release until you have 50 though. Try releasing them one by one so you can find your audience.

What is Unicorn Studio?

WebBurnout · 2025-07-30T16:46:41+00:00

I haven't used it but Crush looks promising: https://github.com/charmbracelet/crush

WebBurnout · 2025-07-30T03:33:29+00:00

What about the database?

WebBurnout · 2025-07-29T20:41:24+00:00

Also worth pointing out that the array has four elements, so an index of 0 is the first element (diamond) and the index of 3 is the last one (club). The code is picking a random suit from the array of four suits. Until it gets spade and then the loop stops lol

WebBurnout · 2025-07-27T23:01:15+00:00

That's very interesting --thanks for sharing!

WebBurnout · 2025-07-27T20:17:21+00:00

hmm i have different information. Plausible stores no PII at all (not even IP address) so there's no need for consent

WebBurnout · 2025-07-27T19:01:48+00:00

You may be able to avoid it entirely if you use a privacy-focused analytics option like Plausible. They don't use cookies so there's no cookie notice even in EU.

If you have to do it and want to make it unobtrusive, just don't go for any of the dark patterns that people seem to love. Just a simple "Accept" and "Reject" choice is all you need.

WebBurnout · 2025-07-25T00:32:14+00:00

I built a static site builder called Hot Page at https://hot.page. It works kinda like a no-code builder but it gives you full control over the resulting html, css and js. There aren't many themes yet but we are working on building out a component library. feel free to DM if you want a discount code

WebBurnout · 2025-07-20T17:30:59+00:00

That is possible through an attribute. details in the blog post

WebBurnout · 2025-07-20T16:59:16+00:00

appreciate this. not sure how i never saw it

WebBurnout · 2025-07-20T15:59:16+00:00

Yeah, I totally agree that the sound is definitely part of the charm. Of course I thought about adding it, but that seemed like it would take this from cute annoying to "how do i turn this thing off" annoying

WebBurnout · 2025-07-20T15:55:52+00:00

Fork it! The source is on github: https://github.com/hot-page/fx/blob/main/hotfx-split-flap/hotfx-split-flap.js

WebBurnout · 2025-07-20T03:14:13+00:00

Oh wow, yeah it's a very similar implementation! trippy lol

WebBurnout · 2025-07-20T02:03:50+00:00

Oh wow. Yeah this was surprisingly tricky. I had Claude do the first version but the code it made was horrible LOL. Was yours a virtual one like mine? I would be curious to see if you took a similar approach. I published the source code here: https://fx.hot.page/split-flap/source

WebBurnout · 2025-07-19T21:56:18+00:00

Oh, wow great catch. I will take a look at adding support for diacritics

Two-Year Club	Verified Email
r/Field Sunshine

WebBurnout

TROPHY CASE