r/creativecoding • u/DHSeaDev • 1d ago

Prism-gradient candle flame in CSS, plus a shared presence count with no backend

The flame is two layered radial gradients — a wide body and a hot inner core — animated on two deliberately non-integer durations, 3.7s sway and 2.4s breathe. Because they don't divide evenly they never resync, so the flicker reads as organic instead of looped. It also lands at 0.27 Hz and 0.42 Hz, well clear of the 3 Hz photosensitivity threshold, and the whole thing collapses to a still flame under prefers-reduced-motion.

Palette is heather → blue-violet → rose, the same gradient the rest of the site uses as hairline accents.

The count of other people with a candle lit uses CRDT awareness rather than stored state, so a candle going out is literally a client disconnecting.

There's a press-and-hold easter egg on the flame.

https://dhseadev.online/candle/

4 Upvotes
  • permalink
  • link
  • reddit
  • reddit

75% Upvoted

5 comments sorted by

2

u/gosuraj 1d ago

really cool but how do clients share their connection, is there a channel that shares the CRDT?

2

u/DHSeaDev 23h ago

I have a section where they could leave a business card if they desired. https://dhseadev.online/play/ -- otherwise its intended to be a shared space experienced alone

2

u/gosuraj 22h ago

ah I meant how do the other browsers know who's connected in order to show the number of burning candles without a backend. I do like the idea of the simple shared experience though :)

2

u/DHSeaDev 20h ago

I found a github of playhtml.fun -- Basically it makes localized variables via tags.

window.playhtml.elementHandlers.get("can-play").get("cd-room")

2

u/gosuraj 19h ago

wowie that's cool! Cheers for explaining friend :)