Smoke machine powered by CSS!
Fully based on web platform tech, such as WebUSB for the DMX connection and CSS for controlling everything.
My projects can sometimes get a little bit out of hand. Want to know more? Come see my talk at @beyondtellerrand.com!
beyondtellerrand.com/events/dusse...
Good morning and happy easter! Today is a bank holiday, but tomorrow I‘ll publish the final schedule for #btconf 2026. What a great line-up. Don‘t be a fool to miss that and get your ticket now. beyondtellerrand.com/events/dusse...
Sometimes I feel like I have too many projects. I move from one to the other and old projects get ignored because I am working on something new and shiny.
But that chaos also helps me be creative and challenge me to improve my skills. But today I'm feeling like a mad professor. In a good way.
The core is just CSS – which acts as a state machine. Inputs set classes and custom properties. The output is just sampled computed styles from the DOM. Animations are defined in CSS. Buttons are setting classes with values or animations. The laser is tracing SVG elements.
I love the web.
This is one of the projects I've been obsessed with for the last year or so and it brings so much together. From heart rate monitors and Joy-Con gyroscopes to lasers and even flamethrowers.
BTW, the music is Dream Life by Ren & The Skinner Brothers – from my favourite album of last year.
Putting the final touches on audio input for the DMX/Laser controller project. It analyses the audio and sets a class every time it detects a beat. That allows animations to start, or lights to change colour or the laser to draw patterns.
Crazy that all of this is build using web technology.
Great! My clock now randomly thinks it is a VCR. And nobody knows how to set the time on a VCR so it just blinks 12:00.
Also it sometimes it forgets to reset after midnight so it goes from 23:59 to 24:00 to 25:00 and on.
And yes. I am using a round display for a square digital clock…
There is some smoothing going on, but yes, it is really accurate. What I am using for this is gyroscope + gravity from the accelerometer. They are fused in to yaw and pitch values which we use for drawing the path.
Absolutely!
Don’t believe it? This is the actual code that gets rendered, sampled and send to the laser projector.
I feel these projects are escalating. Every time I think it can’t get any weirder, I somehow can make it even crazier.
This is my actual heartbeat ❤️
I’ve connected a BLE heartrate monitor and triggering a CSS animation on every beat.
The main issue I had was that it auto reconnects, but that we're not allowed to send the report to enable the gyro until a user gesture. That leaves the library in a state where it thinks it has gyro, but it doesn't.
@tomayac.com I may have found one or two bugs in your joy-con-webhid library. Will file a bug report :-)
Take a Joy-Con and connect it with WebHID, draw a picture in the air and capture it with the sensors. Create an SVG path and insert in the DOM. Apply CSS styling. Sample the DOM and use WebUSB to convert to ILDA and send it to a laser projector.
I created the worlds most complicated laserpointer…
It hasn’t made me rich yet.
Measured all the connections for shorts. Then took a Pi 2 and did a smoke test — it was fine.
It works – no smoke. The clock now used the new sensor and has even become a bit more responsive for orientation changes.
Working on two metal brackets to use a a stand and to mount the rotary encoder for winding the clock.
I’ve been using it for the last two weeks to record little clips of demo’s with exact timing and crop, so that I can stitch them together in Keynote for a talk. Love it.
Spending my Saturday morning soldering components for my BadClock because even if I look at it sideways, it falls apart. And not intentionally.
I am bit scared to plug it in because Raspberry Pi’s are not cheap. And I already have a proper smoke machine.
And finally CSS Day which you should not miss if you you want to keep up with what is happening with CSS. This is *the* conference to go to if you are building for the web and the speakers are amazing.
I’ll be speaking about my CSS Doom project and so much more. Lasers!
cssday.nl/tickets.html
Beyond Tellerrand @beyondtellerrand.com is my favorite conference and I’ve been an attendee for more than 10 years. This year is the 15th edition and I am so honoured to be on the stage that inspired me so much all of these years.
You want to be here!
beyondtellerrand.com/events/dusse...
The Web You Want is the Friday right after Smashing Conference in Amsterdam. So if you’re in town you should join. And of not, come anyway. Tickets are free so what is stopping you!
gath.io/GfyzG5Jyet6v...
I’m speaking at 3 conferences this quarter with 3 new talks:
17 April
How I blew up my 1980s Oscilliscope with WebAudio at the-web-you-want.org
27 - 28 April
The Web Beyond the Edges of the Browser Window at beyondtellerrand.com
11 - 12 June
CSS Doom Lasers at cssday.nl
Get your tickets now!
And yes, BadClock™ has a digital mode. I do need to fix the soldering on those 7 segment numbers, it appears some have come loose and now some segments are starting to flicker. Or it is just a CSS animation. That could also be it.
Beyond Tellerrand @beyondtellerrand.com is happening again on April 27 and 28th in Dusseldorf. And a little birdie told me a certain someone is going to show off their BadClock™ and much more. Lasers. Yes. Lasers and smoke and more...
Tickets:
🎟️ beyondtellerrand.com/events/dusse...
Screenshot of email newsletter
Good issue this week, with plenty to dive into.
Includes links from @csswizardry.com, @html5test.com, @meodai.bsky.social, @rachelandrew.bsky.social, @jakearchibald.com and others!
⭐️ frontendfoc.us/issues/735
I'm so in love with this new menu for my BadClock™. I feel like I am doing character animation instead of coding. The clock is starting to get a personality.
Doom CSS has a far smaller CSS and JavaScript footprint than every single client website's homepage I work on.
A good reminder of how unnecessarily weighty modern websites are.
Good luck. 16 to go for me. And then then 10 days later a completely different brand new talk.
Both are done in my head, but I have zero slides right now. And that is fine. The story is the most important part. The slides will come together over the next week. Or two. 😅
This is my paper clock. It prints a line with the current time every minute. Or sometimes it draws an analog clock. And if it doesn’t feel like it, it just draws a random doodle.
It also has an unhinged mode where every minute is… well never helpful.
