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.
I did a project a while back that takes advantage of this, as a way to show the folding an unfolding of brochures, I found it to work much better for this particular use case than WebGL
Many years ago I wanted to build an Issuu-like PDF viewer (https://issuu.com/) built on top of pdf.js and spent a lot of time manually doing CSS transformations. Eventually, I gave up because I couldn't get pdf.js to be fast enough and the experience wasn't as slick as what Issuu had. I wonder if it would be a lot easier now!
Back then, Issuu was written in flash, I'm guessing they've since switched to CSS as well :)
yes this is an issue. Our eyes and brains are hardwired to focus on moving objects in a static scene, and this shifting aliasing distracts attention from the content.
Late last year I wrote a tool that can take a 3D model in .obj format and turn it into HTML and CSS that'll display the model rotating about its y axis. It's ludicrously inefficient and impractical, but it was very fun to do: https://github.com/hikari-no-yume/obj-to-html
It doesn’t matter if your slides are plain or not. No one ever thought a talk was good because of how nice the slides’ design was. What matters is having something actually worth giving a presentation about and presenting it effectively, which is all about your delivery and what you put on your slides (good: pictures, diagrams, etc… bad: walls o’ text).
Walls of text too often come with the monotone recital of that very text. But if you’re lucky, the speaker mixes up the order of bullet points or even forgets one which helps you keep your mind engaged and stay awake.
I've never seen this before, so not sure how it's normally used. But I like it a lot. Instead of randomly using transforms to add "flair" to your presentation, it looks useful for presenting multiple scales of diagrams in an intuitive way. It's like powerpoint + https://c4model.com/.
it looks like the opening credit sequence to some movie i've seen. maybe a tv show, but the point is that i saw it, it's recognizable, but did not make me remember the name of the show. so will using something like this make people remember your presentation content or just the fact you used some gimmicky effect
Came to say the same thing. Thought it was actual pictures of old documents until I realized it was interactive. Worked on my iPhone which is equally impressive. Not many of the 3d sites showcased here do.
Even if you are using WebGL for 3D, CSS 3D can be useful for adding interactive HTML to your scene. For example, here's a WebGL 3D model of a TV with a working YouTube embed for the screen: https://playcanv.as/p/nzMF97vU/
This means you can reuse the same code and fallback to rendering triangles with CSS transform matrix3d if the browser doesn't have webgl. (but of course w/o shader materials etc)
If your doing heavy 3D work, three.js / r3f are totally are good fit. But may be overkill for smaller requirements. They come with a big package payload cost.
The way this page was built is amazing for learning. "dragging" the properties and visualize / see what effect it has instantly is so helpful to understand what's up. Wish I've learnt CSS with that kind of page.
Since 2015 I have been thinking how to explore information as a 3D structure. This thought has led to developing plurid [1], [2], a component library (for React for now) to transform a web page into a rotate-able/translate-able/scale-able space with the content on planes.
Not only the parallax itself, but the creativity! They used semitransparent layers so that when you scroll it looks like there are specular reflections! (the glittery specks of light)
That's because the layers are missing a `will-change: transform` property. Adding said property fixes it right up for me.
I was tipped off by it being suddenly super smooth for a second, meaning that the browser was probably applying some heuristic. I added `will-change: transform` and boom. Real-world example of its usefulness!
I think this website predates the widespread support of will-change, the website first displayed this parallax effect (in a more primitive way) sometime in 2014.
caniuse.com tells me the first moment that both Firefox and Chrome supported this property was in early 2015.
Interesting. Is it possible that the addition of `will-change` caused browsers to relax their default heuristics, believing that websites would use the property as needed now that it's available?
It's not performance laggy, it's moving the layers.
Probably something wrong with the math, because if take the scrollbar and move it slowly you would notice how some layers starts to bob up and down, instead of monotonic movement.
The math seems fine, but they didn't hint the browser to not snap the images to the pixel grid, so scrolling very slowly means a lot of the layers will move less than 1 pixel per frame, which causes the bobbing.
I'm always having problems with Safari, there is a background-blend-mode on the site that doesn't work on it either, so the site doesn't look like it should.
> Sometimes a thing can be better communicated when shown from multiple perspectives. Below is an wireframe of a web page I used in a presentation. I needed to communicate there are 3 elements in the top-right corner, stacked on top of 1 another. By translating & rotating this wireframe in a 3D-space, I can show it from a 2nd perspective.
This is really cool, might even be helpful to have as a feature to have in browser dev tools, looking at the underlying structure of any page and how elements are nested, to figure out where most of the complexity lies.
Is there any way to enable anti-aliasing for stuff like that? I think CSS had something for image resampling, maybe something similar exists here? It doesn’t look too great on Firefox (Windows 10) for me. It’s better on Edge, but still not good.
I had the same feeling at first with the first slider, then realized that the initial value was the max value, so sliding down worked, whereas attempting to slide up wouldn't...
https://thestrikeagency.com
[edit] I almost never show personal work here so I may delete this...