Collective #653


Collective 653 Item Image

Inspirational Website of the Week: Bridge Tour

A beautiful interactive visual narrative with a slick scroll experience.

Get inspired


Collective 653 Item Image

This content is sponsored via Syndicate Ads

Auth without complexity

Add login, SSO, access control, and multi-tenancy to any application with Userfront. A modern, simpler alternative to Auth0.

Try it free


Collective 653 Item Image

Debugging layout shifts

A very informative article by Katie Hempenius on how to identify and fix layout shifts.

Read it


Collective 653 Item Image

Aladino – your magic WebGL carpet

Aladino is a tiny, dependency-free JavaScript library that allows to enhance your site using “shader effects” with progressive enhancement and accessibility in mind. By Luigi De Rosa.

Check it out


Collective 653 Item Image

Rethinking the JavaScript ternary operator

An article by James Sinclair where he takes a very close look at ternaries and if-statements.

Read it


Collective 653 Item Image

Gorillas’ nav: a case study

An article about everything that went into the navigation of the Gorillas website, from accessibility to behavior to design. By Kitty Giraudel.

Read it


Collective 653 Item Image

Haikei

A web-based design tool to generate unique SVG design assets for websites, social media, blog posts, desktop and mobile wallpapers, posters, and more.

Check it out


Collective 653 Item Image

Creating Patterns With SVG Filters

Learn how to use SVG filters in such a way to make great looking patterns in this article by Bence Szabó.

Read it


Creative Code algorithms & techniques

A fantastic visual overview of creative coding techniques and algorithms compiled by Raphaël de Courville
and Taru Muhonen.

Check it out


Collective 653 Item Image

100 underline/overlay animations

Temani Afif spoils us with an extensive collection of hover animations for menu items and links.

Check it out


Collective 653 Item Image

Writex.io

Writex.io is an online editor offering lots of possibilities and a customized writing experience.

Check it out


Collective 653 Item Image

Free Font: Brique

A wide serif display font designed by Henta Zakharia.

Check it out


Collective 653 Item Image

Practical accessibility, part 1: Markup semantics & ARIA

Maggie Wachs shares this first part of an invaluable list that “when followed ensures a solidly accessible and usable experience”.

Read it


Collective 653 Item Image

CSS Generators

A short series of posts that aims to highlight some of the useful tools and techniques for developers and designers. This one is about CSS Generators. By Iris Lješnjanin.

Check it out


Collective 653 Item Image

Charts.css

Charts.css is a modern CSS framework that uses CSS utility classes to style HTML elements as charts.

Check it out


Collective 653 Item Image

smoothstep.io

Smoothstep.io is a toolkit for building animations in the WebGL Shader language.

Check it out


Collective 653 Item Image

Fluid Space Calculator

Using the same base values from the fluid type calculator, this tool helps you to create a related fluid space system for responsive designs.

Check it out


Collective 653 Item Image

Font Follows Feeling – A brief type classification

An article and video that will give you a broad overview of how to categorize typefaces to figure out what kind or moods they can evoke and for what sorts of text they are suited.

Check it out


Collective 653 Item Image

Free Font: SpaceType

A fantastic type project by Filip Starý.

Check it out


Collective 653 Item Image

Conditional animations with CSS properties

Christian Heilmann shows how to use a custom property to avoid repeating the settings when using prefers-reduced-motion media queries.

Read it


Collective 653 Item Image

How can I improve this GSAP particle animation code?

A GSAP forum thread where you can learn all about animating particles.

Check it out


Collective 653 Item Image

F****** user interface design, I swear

A gentle reminder by Mark Dominus that obvious things should be considered when designing a UI 🙂

Read it


Collective 653 Item Image

Manim

Manim is an animation engine for explanatory math videos. It’s used to create precise animations programmatically, as seen in the videos at 3Blue1Brown. There’s also a community edition which is updated more frequently.

Check it out


Collective 653 Item Image

From Our Blog

Tropical Particles Rain Animation with Three.js

A WebGL particle rain animation resulting in an interesting image effect made with Three.js.

Check it out