Collective #585
Publikováno: 30.1.2020
CineShader * Animating CSS Width and Height * YourStack * WebGL State Diagram * React Tutorial
Collective #585 was written by Pedro Botelho and published on Codrops.
Inspirational Website of the Week: Socialclub
A refreshing modern design with playful interactions and great typography. Our pick this week.
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.
React Tutorial
An interactive way to learn and practice modern React online. Made by Jad Joubran.
CineShader
A fantastic cinematic real-time shader visualizer made by the folks of Lusion.
YourStack
YourStack is a place to share and discover your favorite products. Now in public beta.
WebGLFundamentals: WebGL State Diagram
This great WebGL State Diagram shows a visual representation of most of WebGL’s internal state. Made by Gregg Tavares.
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.
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.
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.
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.
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.
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.
PPL MVR
An animated recreation of a PPL MVR band poster. By Kristopher Van Sant.
2020 Creative Trends: Data-Driven Design Trends
See the top design trends of 2020, based on search data from Shutterstock in this beautiful presentation.
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.
HanaGL
Such an awesome WebGL demo! Put the finger in the nose and see what happens 
Glitch Brush
A fun brush tool made by Fabio Ottaviani.
Staggered Animations with CSS Custom Properties
Learn how to manage staggering animations using CSS variables.
Band Moiré Filter
A mesmerizing proof-of-concept involving banded moiré images with pure HTML and CSS. By Henry Desroches.
Remote Stash: 330 Tools for Remote Work
A hand-picked list with useful tools for remote work.
How to Create Procedural Clouds Using Three.js Sprites
Learn how to simulate a cloud on a Three.js Sprite using React-Three-Fiber.
Collective #585 was written by Pedro Botelho and published on Codrops.