Collective #714
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_WOTW.jpg?x86293)
Inspirational Website of the Week: Custo
Perfectly smooth animations with typography that just works. Our pick this week.
Get inspired![Collective 713 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/DiviCloud.jpg?x86293)
Build websites faster with Divi Cloud
Divi Cloud is like Dropbox for your Divi websites: save something to Divi Cloud and it becomes available on all of your and your clients’ websites while you build them.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_competition.jpg?x86293)
A three.js Competition
Tiiny Host's three.js competition has started! Upload and host your web project and show off your WebGL skills!
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_animation.jpg?x86293)
AutoAnimate
A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_sliders.jpg?x86293)
Sliderland
A minimalist creative coding playground, using only HTML sliders. Make animations using math!
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_maclocal.jpg?x86293)
IndigoStack
The native macOS app which promises to revolutionise the way you configure and run local web servers on your Mac.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_colorfonts.jpg?x86293)
Customizing Color Fonts on the Web
WebKit now supports CSS @font-palette-values which can be used to access predefined color palettes of color fonts.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_parallax.jpg?x86293)
PushIn.js
In case you didn't know about it: PushIn.js is a lightweight parallax effect, built with JavaScript, that simulates an interactive dolly-in or push-in animation on a webpage.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_weather.jpg?x86293)
A calendar and weather forecast in the terminal
A couple of cool terminal tricks to get calendars and the weather, plus how to assign aliases and pass arguments to bash functions. By Jamie Smith.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_tetra.jpg?x86293)
Tetra
Tetra is a full stack reactive component framework for Django using Alpine.js.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_canidev.jpg?x86293)
Can I Devtools?
Can I DevTools is like Can I Use but for the browser devtools. Created and curated by Pankaj Parashar.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_jam.jpg?x86293)
Top games + source code from Gamedev.js Jam 2022
The best 13 entries from the Gamedev.js Jam 2022.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_array.jpg?x86293)
Processing Arrays non-destructively: `for-of` vs. `.reduce()` vs. `.flatMap()`
Axel Rauschmayer looks at look at three ways of processing Arrays and shows how to use the features.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_anime.jpg?x86293)
Drawing with CSS: Anime Character
Alvaro Montoro explains how to draw an anime character with HTML and CSS from scratch.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_zoom.jpg?x86293)
Pure CSS image zoom
Some amazing CSS magic by Jhey: a thread on how to pull off a pure CSS image zoom using CSS primitives.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_plant.jpg?x86293)
Plantarium
Plantarium is an amazing tool for the procedural generation of 3D plants. Made by Max Richter.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_macos.jpg?x86293)
How I Built an "OS" with React for My Portfolio Website
Dustin Brett discusses how he made his website look and feel like an Operating System with JavaScript.
Watch it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_btween.jpg?x86293)
Scroll Btween
Tween any CSS values on any DOM element in relation with its position on the viewport. No dependencies.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_jsinfo.jpg?x86293)
The Modern JavaScript Tutorial
Freshly updated: Simple, but detailed explanations with examples and tasks, including: closures, document and events, object oriented programming and more.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_iles.jpg?x86293)
Building a static website using Iles.js
In this tutorial by Clara Ekekenta you will learn how to code a static website in Vuejs using Iles.js.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_hover.jpg?x86293)
Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D
Temani Afif finalizes his series on hover effects and shows how to code complex CSS hover animations.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_sql.jpg?x86293)
Arctype SQL Client
Arctype is a fast and easy-to-use database client for writing queries, building dashboards, and sharing data with your team.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_spa.jpg?x86293)
State is hard: why SPAs will persist
Nolan Lawson shares some thoughts why Single-Page Apps still persist.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_starwars.jpg?x86293)
Star Wars Scene Transition Effects in CSS
Learn how to create those wipe transitions from Star Wars movies in CSS.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_gridanimation.jpg?x86293)
Scroll Animation Ideas for Image Grids
Some ideas for scroll animations on image grids using the ScrollTrigger plugin of GSAP and the new smooth scroll library Lenis by Studio Freight.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_distorted.jpg?x86293)
Coding an Infinite Slider using Texture Recursion with Three.js
A coding session where you'll learn how to recreate the infinite image slider from tismes.com using Three.js.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/06/C714_websites.jpg?x86293)
Inspirational Websites Roundup #38
A new hand-picked selection of fresh websites for your inspiration.
Check it out