PropJockey.iothe value of properties, orchestrated

Retro Pixels 
MonochromaticYour browser does not support backdrop-filter yet 

Experiments, Research, & Stress Tests

I often experiement with ideas on CodePen first!
If you want to follow what I'm thinking, follow me on CodePen. 💜

Research & Stress Tests

3D scene rendered with 100% CSS + HTML

Pushing the limits of 3D CSS, this stress test is the output of an editor.
No svg, no images, no data urls, no webgl, no JS.
Based on artwork by Romain Trystram
After working with WebGL and falling in love with 3D on the web, I eventually decided to develop a scene editor, "DOMinion", with the hopes of making 3D easy for anyone with only moderate knowledge of CSS. That is, putting 3D Web Design into the hands of web designers instead of keeping it in the realm of specialized programmers. The output is just HTML and CSS, so it's accessible, interactive, and FULL of potential.
...but that potential is, unfortunately, stuck waiting on Chrome's 3D CSS rendering to catch up to Firefox.

Chrome is faster 🥇, but gets there by not rendering large parts of it 💩. Depressing.

Binary Coded Decimal 7 Segment Display Decoder

an animated gif showing the interactive diagram

Discovering and demonstrating the possibilities of the CSS Space Toggle with an interactive SVG diagram of the bcd7sdd circuit. The checkboxes serve as user input and hold state in HTML, CSS reflects that state into Space Toggles (--css-vars), which can be combined in CSS to emulate logic gates. Finally, each step's space toggle state flips the values of other CSS properties, such as stroke and background colors.
The code is simple if you're already familiar with logic gates, so it makes a great introduction to a new CSS technique.

MineSweeper implemented in CSS + HTML

an animated gif showing css-sweeper gameplay

No JavaScript needed!
This is a stress test on what's possible with the Space Toggle. The 16 fields were randomly generated: The initial state of each field is defined by a space toggle and the NOT of it for each position.
The rest of the game, counter, numbers, etc flow from there; So the bombs can be placed anywhere, and in any number without needing to consider anything else.
In other words, nothing is hardcoded beyond specifying the initial states of each position on the field (bomb/not-bomb), space toggles allow the rest to unfold with actual programming in CSS.

Augooiigooey - augmented-ui v1 No-Code editor

an image of the Augooiigooey no-code editor

A No-Code WYSIWYG Editor to design augmented-ui v1 elements written in React. Built with A11Y accessibility at heart, using aria attributes for screen readers and full keyboard control across the entire app, Augooiigooey makes Sci-Fi and Cyberpunk web design more accessible than ever before.

Development of augmented-ui v2 began very shortly after I made this app sooo I never promoted it much.
Augooiigooey started as an unofficial UserScript addon to Webflow, but I was having fun making it and decided to create a standalone app.
It's still online (I didn't bother renewing the SSL certificate though) as a personal dive into researching and exploring the NoCode trend, but now it only exists to wait for its own v2. ~ 💜