Collective #585
Inspirational Website of the Week: Socialclub
A refreshing modern design with playful interactions and great typography. Our pick this week.
Check it out
This WordPress theme follows 2020 design trends
BeTheme is a ThemeForest top-three bestseller, with over 183k downloads to date. 'Would give 6 stars if I could' – ZombieBatman.
Check it out
React Tutorial
An interactive way to learn and practice modern React online. Made by Jad Joubran.
Check it out
CineShader
A fantastic cinematic real-time shader visualizer made by the folks of Lusion.
Check it out
YourStack
YourStack is a place to share and discover your favorite products. Now in public beta.
Check it out
WebGLFundamentals: WebGL State Diagram
This great WebGL State Diagram shows a visual representation of most of WebGL's internal state. Made by Gregg Tavares.
Check it out
Animating CSS Width and Height Without the Squish Effect
A tutorial by Rik Schennink where he explains how to use the transform property to simulate animating the width of an element.
Check it out
How Smashing Magazine Manages Content: Migration From WordPress To JAMstack
In this technical case study, Sarah Drasner covers Smashing Magazine's migration from WordPress to JAMstack.
Read it
Case study: Moving a Three.js-based WebXR app off-main-thread
Read how Workers can help keep the frame rate stable in XR apps in this article by Surma.
Read it
The Year of Greta
An interactive timeline of how Greta Thunberg rose from a solo campaigner to the leader of a global movement in 2019.
Check it out
Use and Reuse Everything in SVG… Even Animations!
An article where you'll be learning how to build and optimize your code with the SVG <use> element, CSS Variables and CSS animations.
Read it
Lingua Franca
Lingua Franca is a design language for human-centered AI - a set of guidelines that apply to any AI-driven product, tool, service, or experience, to bring coherence and fluidity to otherwise complex and messy technologies.
Check it out
PPL MVR
An animated recreation of a PPL MVR band poster. By Kristopher Van Sant.
Check it out
2020 Creative Trends: Data-Driven Design Trends
See the top design trends of 2020, based on search data from Shutterstock in this beautiful presentation.
Check it out
Can you make a countdown timer in pure CSS?
An interesting exploration on how making a countdown timer in CSS (and some JavaScript) by Chen Hui Jing.
Read it
HanaGL
Such an awesome WebGL demo! Put the finger in the nose and see what happens :)
Check it out
Glitch Brush
A fun brush tool made by Fabio Ottaviani.
Check it out
Staggered Animations with CSS Custom Properties
Learn how to manage staggering animations using CSS variables.
Read it
Band Moiré Filter
A mesmerizing proof-of-concept involving banded moiré images with pure HTML and CSS. By Henry Desroches.
Check it out
Remote Stash: 330 Tools for Remote Work
A hand-picked list with useful tools for remote work.
Check it out
How to Create Procedural Clouds Using Three.js Sprites
Learn how to simulate a cloud on a Three.js Sprite using React-Three-Fiber.
Read it