Collective #585
![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_WOTW.jpg?x86293)
Inspirational Website of the Week: Socialclub
A refreshing modern design with playful interactions and great typography. Our pick this week.
Check it out![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_Be.jpg?x86293)
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![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_reacttutorial.jpg?x86293)
React Tutorial
An interactive way to learn and practice modern React online. Made by Jad Joubran.
Check it out![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_cineshader.jpg?x86293)
CineShader
A fantastic cinematic real-time shader visualizer made by the folks of Lusion.
Check it out![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_stack.jpg?x86293)
YourStack
YourStack is a place to share and discover your favorite products. Now in public beta.
Check it out![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_webgl.jpg?x86293)
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![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_width.jpg?x86293)
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![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_sm.jpg?x86293)
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![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_surma.jpg?x86293)
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![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_greta.jpg?x86293)
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![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_svg.jpg?x86293)
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![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_language.jpg?x86293)
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![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_poster.jpg?x86293)
PPL MVR
An animated recreation of a PPL MVR band poster. By Kristopher Van Sant.
Check it out![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_trends.jpg?x86293)
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![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_csscountdown.jpg?x86293)
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![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_webgldemo.jpg?x86293)
HanaGL
Such an awesome WebGL demo! Put the finger in the nose and see what happens :)
Check it out![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_brush.jpg?x86293)
Glitch Brush
A fun brush tool made by Fabio Ottaviani.
Check it out![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_staggering.jpg?x86293)
Staggered Animations with CSS Custom Properties
Learn how to manage staggering animations using CSS variables.
Read it![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_henry.jpg?x86293)
Band Moiré Filter
A mesmerizing proof-of-concept involving banded moiré images with pure HTML and CSS. By Henry Desroches.
Check it out![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_remotestash.jpg?x86293)
Remote Stash: 330 Tools for Remote Work
A hand-picked list with useful tools for remote work.
Check it out![Collective Item Image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/01/C585_cloud.jpg?x86293)
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