I built an engine for my personal site (5-6 years back) along similar lines, with the idea being that elements are defined as "papers" of different sizes that are constantly being animated, and reshuffle themselves on window resize to different positions. (Try rotating it if you look on a phone or tablet). They're all 3d css (so the browser caches their content as bitmaps and renders them as such) and originally they did various flip effects as they moved, but I ended up ditching all but a slight amount of axis tilt on a few elements as it was hard to read and hard to position accurately in 2D space in relation to each other across a lot of screen sizes...
This is pretty cool. I like how the backgrounds of the cards are also pinned to their positions. It's like looking through little windows instead of just plain images
Thanks for noticing that! The images aren't exactly pinned, but they're constrained based on the nativeWidth as a proportion of the window width, so they can appear to move behind the card but without showing their corners or edges. Getting them not to exceed the bounds was tough, since they're loaded on the fly. One other fun visual gag in this was changing the drop shadow blur amount based on z-order / z-position. But drop shadows don't really track well with 3D CSS rotations, so that was another reason I tamped down the rotating effects in the end.
A neat thing about this interface is that it often works to cycle through all the content at a particular selection level by just repeatedly clicking in the same place. Unfortunately, this doesn't work consistently (neither at 'toplevel' nor in the vertical list of subselections) but it's so close I wonder if you considered it and/or ended up deciding against it for some practical or designy reason.
Either way this is must easily be finest invocation of the 'feeling cute, might delete later' meme on HN so far.
Thank you so much! I've struggled to not show stuff on HN for the past decade or so, because I also like to feel free to get into persnickety debates here.
The click-in-one-place cycle sprang from what I'd call a happy accident, after playing with several ways of handling where to put the section you just clicked away from. I realized it was a neat feature not to just send it back to where you had clicked, since that would lead to just A/B clicking, but to shuffle it to the bottom or right side of the deck. It works if you just repeatedly click on the second item. I don't think I could find a way to let a single click on the third item cycle through everything and act in a logically consistent way. A carousel, I guess, but that didn't seem to feel right, because then the next click might skip a bunch. I remember just thinking it might be fun for people to figure it out. I could've just left them alone and not had them reshuffle at all, but what fun would that be?! ;)
Also, twiddling with it sometimes, when I get a new device, I often find myself "missing one". To answer your question about design vs. practicality, this design probably just triggers my own OCD about getting everything arranged just right. I'd say that a lot of software I design is, accidentally, a way to usher users into my own OCD way of thinking about edge cases and make them dot their own i's (rather than repeatedly hammer them with error messages or something). And plus, I like easter egg designs that reveal themselves slowly, when people are actually noticing things. I assume most people don't try to click every entry on a website, so it's nice to leave a little extra to discover for those who do.
https://thestrikeagency.com
[edit] I almost never show personal work here so I may delete this...