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

There's a number of ways to ensure this play state sequence but, notably, animations aren't supposed to be able to directly control the state of other animations, so we have to rely on tricks there too.

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);

That's the basics!

// Jane Ori

Wow, crazy timing! You'll love what I just posted haha

I really like the sounds too - are they original and/or free to use?

This is based from arwes.dev including the sounds. The license is MIT.

A year ago I shared the first version of augmented-ui here, inspired by Deus Ex: Human Revolution, and got an awesome, really motivating response.

Today I released version 2 - it's a complete rewrite with over 150 new ways to shape HTML elements for a futuristic, Sci-Fi look. No JS needed!

It's still 100% free to use anywhere and Open Source :)

I linked to the repo since that's usually what's important around here, but if you're interested in the site, here you go: https://augmented-ui.com/ Would love to hear what you think!

PS: Wanted to say cheers to you all too because since that first post a year ago, I've shared a handful of other CSS ideas here and the conversations are hands-down better and more friendly than anywhere else. Glad to be here! Hope the CSS file helps!

Very cool, Now I just gotta think about a project to use it on.

edit: ^ previously said "with css variables to hold state" or something similar (or my wires got crossed and I saw that somewhere else)

CSS variables can't be set by animations yet without JS's CSS Houdini giving them a type - a CSS @ property is in the works to do it without JS though!

haha, awesome! You nailed it. It's really cool to see it being tested out in the world! Thank you for sharing!

Any chance you could share a screenshot? I can't test safari without owning apple products or paying for a service :(

as far as I know iOS 13.4.1 should be completely compatible.. there might a smaller limit on the number of calc() operations? The spec says it must support a minimum of 20 operations, but I'm (ab)using almost 1000 in a max()

Hmmm... do you know what version you have?

It should work on iOS 11.3 and up... maybe. They might have smaller limits on the number of operations per calc()..? Can't think of anything overtly incompatible.

Unfortunately Safari is today's IE6 in web dev since they're so far behind on so many features. Except it's worse since you can't test without owning their products or paying for a service either... wish I could check it out, there's probably something to learn

This is great! I love how there's a bit of a reward for getting past the difficult middle part of gameplay - when there's not many spots left it goes fast and you can click click click to finish up without sitting there cleaning up your notes or counting 1-9 to figure out the last number or two. This is a big improvement haha

I would say no because the core boolean mechanic that allows CSS-Sweeper to exist cannot be inverted directly (NOT, !). In order to invert anything here, you have to start with an inverted copy of every bit and do the opposite calculation at every &, |, etc to always have a "NOT" var to reference. Like a shadowy, anti-vein, copy of the main logic.

There are several edge cases where a sort of simile of NOT is possible though. You can branch from truthy/falsey into falsy/truthy numbers. And if is something is falsey you can "else" into another action.

Just can't "else" from a truthy state without the ...anti-vein... always being present.