JaneOri

The hack does 3 things:

1) make an api request from CSS that responds with data encoded into height and width

2) use container queries and tan(atan2()) in CSS to read the dimensions of the response into 16 bit integers

3) a CSS hack that allows the document :root to capture and hold --var-data computed from several layers of nested DOM, hoisting it back up and holding it in a paused animation

Chrome desktop only for now

I've been inventing CSS tricks for a while. Like my Space Toggle, the latest one blows the lid off of what's possible in 100% CSS.

It's cyclic --var computation. Under normal circumstances any cyclic var would be forced into its initial state. I figured out a way around it with two animations that, one, capture output then, two, hoist it back up as input.

Part of the trick is to sequence the playing state of capture and hoist animations:

  running paused
  paused paused
  paused running
  paused paused

The other clue in the trick is that a paused animation's value won't change if input changes because animation state overrides static state even when paused.

  Static:
  --in: 1;
  --out: calc(var(--in) + 1);

  capture:
  --held: var(--out);

  hoist:
  --in: var(--held);

// Jane Ori

I realize this is an absurd thing to do, but it was fun and I wanted to test the limits of CSS again so I could share the results!

I linked to the README since any web devs that see this will probably want to know how buuut here's a link to the game if you want to go hands on:

https://propjockey.github.io/css-sweeper/#randommenu

It's all open source, and I discuss some details of how to do it in that readme, but I am more than happy to answer any questions!

Thanks for checking it out!