Realistic Interactive Pool Water
I have seen many shaders and textures for water, and this one by Temple is great. The combinations of colors and animations makes it look like a real swimming pool, and the interaction feels natural (the splash may be a bit too much, but still).
Checkerboard Cylinder Illusion
Jon Kantner creates amazing components and animations. This is one of the latter. In this optical illusion, a checkered board reveals some dark cylinders that flip and turn into a different checker board than in return flips and turns into different color cylinders. The effect is mesmerizing and the perspective completes it.
Rise & Steam (sleepy dumplings)
This is the first of two CSS Art demos by Gemma Croad on this list. From this one, I like the kawaii style and that is interactive and animated while still sticking exclusively to HTML and CSS. The colors and happy dumplings are just a joy, and it includes accessibility features to make it usable via keyboard. 👍👍
Vintage Circus Tickets
...And, the second demo by Gemma Croad! This time it is some vintage circus tickets. They are really cool because it's not just CSS Art, it's a master class on grid, alignment, and laying out content (even if in a small setting). And they have this old-look to them; the tickets look really nice.
Circular nav using :scroll-* & animation-timeline:view()
Chris Bolson crafted a circular menu using scroll-snap, scroll pseudo-elements, and scroll driven animations. A lot of experimental stuff in this demo, so it won't work on all browsers, but the results look incredibly smooth. I miss a way to skip more than one menu option, but still the result is really impressive.
A Donut Chart That's Actually a Donut
A doughnut chart that looks like a doughnut. That's what Chathura Jayasanka created for one of this month's CodePen challenges (the topics were graphics and charts). Complete with legend, a way to regenerate the data, and even an option to take a bite at the chart.
Pure CSS LED Playboard
Ben Evans created this interactive LED board that switches lights as you mouse over (then they fade slowly). But he added a twist: the rest of the page will react to the LEDs being lit. The background would go darker, the front would reflect the LED light, and it would all animate as smooth as CSS allows it. After sharing this demo, he challenged others to use it and create similar experiences. Check the code for more details.
Sliced Gooey Text
Sergey Borovikov created this interactive demo (the text can be updated clicking on it) using ThreeJS and a canvas. The text is sliced and then "gooeyed" out to create this slick animation. Really nice demo. You can dig into the JavaScript and update the values to see how the text and the lines will change, and how it will interact with different amounts of lines and text.
3D Mermaid Diagram
As part of the CodePen chart challenges, Grant Jenkins created a flow chart (it's a fun one, too) with Mermaid. Then with ThreeJS, it applied 3D to the chart and added interactivity (zoom in and out, move things around) for a really cool demo. And you can still flip between the two versions.
the core
From the shapes to the colors, this shader by Stranger in the Q reminds me of the arts and crafts from Granada, Spain. And maybe that's one of the reasons why I like it so much. With a groovy style, the animations can be hypnotizing and make a little dizzy (even when they are changing colors, they look like they are moving).
Top comments (0)