Color Fan Deck
As part of the colors CodePen challenge, Mads Stoumann, created some HTML+CSS color swatches, showcasing different shades and formats. This demo looks better in larger screens, click on the color name at the top to highlight each swatch.
double-helix doodle 3
One of Scott R McGann's pens with shaders and 3D effects. An object at the center of the scene, surrounded by an image wrapped in a way that provides a 360 degree illusion. Really impressive. I could see something like it being used for product demos.
Scroll Driven Tri-Gyro
Adam Argyle shared this gyroscope that spins in different angles and spaces, and changes size as you scroll the page. The smaller color triangles at the top help helps keep track of each triangle... and all in CSS with really clean HTML. Great for learning. This demo will not work on Firefox.
Birds Follow Cursor with 3D Sound - Three.js
This flock of birds will follow your mouse around the screen. Maybe something you've seen many times, but Sabo Sugi's code is well organized and commented, and it can be illustrating (and fun) playing with the setting values and see how the particles change.
My type? Someone who doesn�t disappear after the first commit.
February is the Valentine's Day month, and NANOUU created a web game perfect for the occasion... or kind of. Use the keyboard arrows to move left and right, avoid the hearts, aim for the computers, and find your couple by committing your code. The game doesn't use images, only emojis and text.
Winter Olympics Blizzard
Inspired by a Jon Kantner's demo, and in preparation for the Winter Olympics, Holland Blumer created this particle animation, where the snowflakes accumulate to form the Olympic Rings. A cool and smooth effect.
Glass Panel Wave (OKLCH + 3D)
Eric Van Holtz creates this interactive animation with warm discs and cool semitransparent panels that float smoothly like waves. Move the mouse around (or tap if on mobile) and see how the animation slides and rotates swiftly. And all in vanilla JS, HTML, and CSS.
Chicky (Voxel by HTML and CSS)
Takane Ichinose coded this cute chick using cubes in HTML and 3D CSS. No JS, WebGL, or Three.js. If you uncomment the JS code, you'll be able to spin the chick and see it from different angles.
Graph Theory (Chrome Only)
Temani Afif creates so many amazing demos that it's tough to pick one, but this one goes beyond it. With minimal JavaScript to allow moving elements, Temani uses CSS anchors, style queries, animations and more to calculate distances and paths. Chrome only, but mind-blowing all around.
Flood Above the Floor
Wakana Y.K. coded this interactive 3D Web graphics demo built with Three.js. The water on the floor looks realistic reflecting the light and background images in a way that looks really natural. Beautiful effect.
SOCIAL SHARE CARD GENERATOR