Collective #754
Inspirational Website of the Week: ContraBureau
This week, our pick for the inspirational website of the week goes to ContraBureau. It has an exceptional design with a killer introduction and sharp typography that truly sets it apart.
Get inspired
From Our Sponsor
Web devs, meet your new soulmate
Unleash your inner creativity and build stunning websites faster than ever with Divi - the ultimate WordPress page builder. With its intuitive drag-and-drop interface, advanced design options, and lightning-fast performance, Divi empowers developers to customize client sites with ease and speed.
Try it for free for 30 days
WebContainers
The WebContainer API has been made widely available to developers after being tested by millions of developers and working in collaboration with browser vendors. With this API, Node.js can now be directly integrated into web applications, allowing for a more streamlined and efficient web development process.
Check it out
Getting Started with Style Queries
Una Kravets explains what style queries are how we can use them for building dynamic, responsive interfaces.
Read it
WebGL Displacement Transition Tutorial
Robin Payot started a new channel on YouTube that will teach you how to code amazing visual effects. In this first video he shows how to code a WebGL displacement transition for images.
Watch it
Creating carved surfaces using Three.js
Charlotte Dann shares how she achieved the jaw-dropping 2D-to-3D textured surface effect in Ceramics, her first generative art NFT project.
Read it
MakeReign Academy
An academy by MakeReign that will help you kickstart your UI/UX career.
Check it out
Ten tips for better CSS transitions and animations
Josh Collinsworth shares some really great tips on how to optimize CSS transitions and animation for a better user experience.
Read it
Oreo Smash Donuts
Some super creative 3D typography animations by Steve Gardner.
Check it out
Strudel REPL
Strudel is a music live coding environment for the browser, porting the TidalCycles pattern language to JavaScript.
Check it out
Simplified Dark Mode With Style Queries
Learn how with the new style queries feature we can simplify dark mode styles. By Stephanie Eckles.
Read it
Let's build a Chrome extension that steals everything
Matt Frisbie is making a good point by showing how to code a Chrome extension that steals a vast amount of data, despite the restrictions brought by Manifest v3.
Check it out
Arthur Engel Portfolio
Arthur Engel has created an impressive interactive portfolio featuring a futuristic lab and a robot made with Three.js, React, Drei, and GSAP. The entire project was modeled using Blender.
Check it out
Theatre.js Tutorial
In this video tutorial you will learn how to use Theatre.js and create a stunning animation for the web.
Watch it
Motion Carousel
A fantastic carousel made with WebGL and GLSL and Canvas. By Michal Zalobny.
Check it out
Living Virtuously
A beautiful exploration of the Seven Heavenly Virtues to learn more about how ancient philosophy and virtue ethics might contribute to a happier life today. A collaboration between Davide Baratta and Francesco Michelini.
Check it out
On Container Queries, Responsive Images, and JPEG-XL
In the light the arrival of Container Queries, Jason Grigsby revisit responsive images and asks how they fit in a container query world.
Read it
The JavaScript Site Generator Review, 2023
Zach Leatherman reviews some popular site generators using JavaScript by weight, size and other metrics.
Check it out
Matrix rain effect
A tutorial on how to create the Matrix Rain effect in a HTML Canvas element using TypeScript and React. By Maarten Hus.
Read it
From our blog
UI Interactions & Animations Roundup #29
A fresh compilation of Dribbble shots showcasing creative animations and motion designs for your inspiration.
Check it out
From our blog
Double Image Hover Effects with Clip-Path Animations
Some ideas for hover effects using clip-path animations where the same image gets revealed in a creative way.
Check it out