View Transitions with CSS linear() to create a light flicker effect on theme change 💡 [data-theme='light']::view-transition-group(root) { animation-timing-function: var(--flicker); } jus' set a custom timing function on the default animation 👨‍🍳 bonus: drag switch ✨

when my kids ask me what a wizard is I’m going to send them to you

we've still got plenty of candy tonight too for "Trick or Treat" 🍬😅

Taking yours as a reference, I have now created my own version.

lit! is this on a public GitHub somewhere?

Jhey is so back

This is fun! 😂 Drop a link, I wanna play

@nicolettiFPS

I wish you shared the code for it lol I'm obsessed with it

細節控狂喜

gerçek sahne gibi

This is some grand master level of css here 🔥

King of css

My monitor flickered just reading this 🔆

What's the code for the wiggly pull string

Small "umm actually" for a lightbulb to flicker it would need to be a fluorescent bulb, the light in your demo is incandescent :)

ummm akshually, how do you know? it's my bulb 😉

p.s incandescent flicker can also be a thing, i've been through this on here before

Fair enough, I guess, in theory, yes but it's more of an electrical issue than a bulb one. It's just usually known for the gas ones to flicker because of the starter.

yeah 💯 thing is, designing this as a fluorescent loses the charm and leaves it a little "dead" looking 😅 incandescent flicker often occurs with power mismatch or a bulb that's on the way out/loose. good proof, plug into a dimmer switch where it's incompatible 😅

Oh yeah I agree. When I think of a light bulb I think of an incadescent one flicker be damned 👌

wow pretry sick!

This is a really clever use of linear(). I love how it adds a bit of analog realism to the theme switch. Curious if you've experimented with combining this with other view transition types, like for individual elements, to create even more complex effects?

This is so cool. Love it 💡

Skeuomorphism goes hard!

Source?

Love the flicker effect, simple but elegant!