Adam Kuhn | The Blog Pros

August 16, 2022

Driveable Enviro400EV electric London bus

by Robin Hawkes

Checkbox Accent Color Pixel Art

by Shaw

La Casa de Papel HTML5 cinematics

by Olivier 3lanc

Interactive Tornado (Three.js & GLSL shader)

by Ksenia Kondrashova

Awesome Demos Roundup #20

After a long time, we’re back with a new demos roundup! This is a hand-picked collection of the most fun, creative and impressive web experiments we found on the interwebs in the past times.

Hope you enjoy it and that you can draw some inspiration and ideas from this set!

Checkbox Animations With Indeterminate State

by Jon Kantner

High-performance Depth of Field

by Pixotronics

Super Mario Scrollable Timeline

by Adam Kuhn

Infinite scrollable and draggable (WebGL)grid

by Jesper Landberg

Audio-reactive visual with Three.js

by Francesco Michelini

Dan Flashes Complicated Shirt Generator

by Adam Kuhn

Akari 1A • Pure CSS • repeating-radial-gradient

by Aris Acoba

Crunk dancer

by Arno Di Nunzio

The post Awesome Demos Roundup #20 appeared first on Codrops.

October 28, 2020

Over the past few weeks we’ve collected some really fantastic web experiments that show that there’s simply no limit to creativity when it comes to playing with code. WebGL goodness, CSS magic and everything in between, there’s so much to explore!

I hope you enjoy this collection and that you can draw some juicy, creative inspiration from it!

Celestial Bodies

by Theo Gil

Sketches (67)

by Yi-Wen Lin

Ghost Card

by Yugam

Bongo Cat

by Eric Huber

ROYGBIV

by Oguz Eroglu

Particles Image Animation from Mathis Biabiany’s website

by Yuri Artiukh

3D CSS Letter Transition

by Adam Kuhn

Waveform Visualiser

by Yugam

Animated clip-path slider Concept

by Jake Whiteley

CSSometric

by Ryan Mulligan

Link hover animation

by Aaron Iker

Nowhere (a CSS 3D Scene)

by Jon Kantner

Pure CSS Product Card

by Adam Kuhn

Rainbow Hypercube

by Louis Hoebregts

Totem animals

by Anthony

Toggle Switch with a Hole Handle

by Jon Kantner

Hex Tunnel

by Marius Ballot

PureCSS Character

by Diana Smith

Real-time raytracing with WebGL

by Dre

WebGL Slider Interaction

by Sikriti Dakua

Galaxy Simulation

by Angela He

Dreaming of Jupiter

by isladjan

Metallic Fluid

by Scott Darby

Ceramic

by Fabio Ottaviani

Orion’s Galaxy

by Jhey Tompkins

3D Room (pure CSS)

by Ricardo Oliva Alonso

Arrow

by Fabio Ottaviani

100 divs – Dragon

by Cassie Evans

Noisy Blob

by Sikriti Dakua

Crystal planet

by Pavel Boytchev

Mirrors

by Marco Ludovico Perego

Three.js lines

by Yuri Artiukh

Voronoi Pebbles

by James Hancock

Sombras.app

by Javier Borquez

LED Switch

by Jon Kantner

CSS Only Room Escape Game

by Takane Ichinose

Responsive “Cool” Steps

by Jhey Tompkins

Alter

by Yuin Chien

Candy Ring Preloader

by Jon Kantner

3D Modern House

by Ricardo Oliva Alonso

Duo

by ycw

Wind chimes

by Emmanuel Durgoni

Space Knot

by Jameson Tucker

CSS Vintage VW Bug

by Shunya

Coder in the swamp

by Arno Di Nunzio

The post Awesome Demos Roundup #18 appeared first on Codrops.

October 22, 2020

Collective #629

Inspirational Website of the Week: Glenn Catteeuw

A unique portfolio design with lots of interesting details and cool effects. Our pick this week.

Get inspired

Our Sponsor

Exploring Livestream Chat UX: Threads and Replies

Threads help livestream chats stay organized and clean.

Thinking Outside the Box with CSS Grid

In this great tutorial, Alex Trost breaks down three unconventional CSS Grid powered layouts.

Read it

Responsive Height Design

A great article by Ahmad Shadeed on how to make sure responsiveness works for the height of a layout.

Read it

Hands-Free Coding

Josh W Comeau shares his workflow where he almost exclusively uses a microphone and an eye-tracker.

Read it

How to build a progressively enhanced accordion component with vanilla JS

Chris Ferdinandi shows how we can replace the need for a big plugin by progressively enhancing HTML to add a bit more functionality to it.

Read it

CSS Game: Build a lighthouse

Join the challenge to build a lighthouse in this pure CSS game made by Ben Evans.

Check it out

Getting dicey – how I failed to write a perfect dice throw simulator and how that is totally OK

Christian Heilmann shares how he developed a Dice Throw Simulator.

Read it

The most useful accessibility testing tools and techniques

In case you missed it: Learn about tools and techniques for accessibility testing. By Artem Sapegin.

Read it

The good line-height

A tool that gives you the right line-height for every text size in a specific scale.

Check it out

The lang attribute: browsers telling lies, telling sweet little lies

A very interesting read on how an Austrian news site got into trouble because of a wrong attribute.

Read it

Harlem

Simple, unopinionated, lightweight and extensible state management for Vue 3.

Check it out

Checka11y.css:

A CSS stylesheet to quickly highlight a11y concerns by Jack Domleo.

Check it out

How to Learn JavaScript If You’re a Beginner

Some good tips on getting started with JavaScript by Dmitri Pavlutin.

Read it

Animated clip-path slider Concept

A beautiful demo made by Jake Whiteley.

Check it out

I want my own media queries in browsers

Kilian Valkhof writes how great it would be for developers to be able to emulate arbitrary media features in the browser.

Read it

Nokia Composer in 512 bytes

Read how to make a tiny oldschool music composer inspired by RTTTL and Nokia Composer. Check out the demo and GitHub repo.

Read it

SVG Favicon Maker

With modern browsers supporting SVG favicon this tool will come in handy to create your own letter or Emoji-based icon.

Check it out

Waveform Visualiser

A wonderful audio visualizer made by Yugam.

Check it out

Image Cropper

A simple JavaScript image cropper demo that does not rely on canvas or SVG.

Check it out

3D CSS Letter Transition

A super cool letter transition demo made by Adam Kuhn.

Check it out

Pure CSS Product Card

Adam Kuhn made this fun product card with some magic CSS.

Check it out

From Our Blog

Inspirational Websites Roundup #19

A new roundup of our favorite inspirational websites that stand out in design and creative interactivity.

Check it out

The post Collective #629 appeared first on Codrops.

March 3, 2020

Awesome Demos Roundup #14

These past few weeks we’ve collected some really nice web experiments: from Shader magic to SVG filter trickery, interactive poetry and particle madness — there’s something for every creative coder’s heart.

We hope you enjoy this collection and find it inspiring!

Stacking Cards Effect

by Claudia Romano

Bouncing Balls

by Meto Trajkovski

Starfields GLShader

by Paul J Karlik

verlet

by Kitasenju Design

Spring pagination

by Mikael Ainalem

Turbulence

by Janxalot

Flight

by Mat Sz

ThreeJS Maths of Heart

by TheFrost

Calm Spikes

by Anna the Scavenger

Editable Neumorphic Text

by Adam Kuhn

Care Bear NEEDS Love (mousedown/touchstart)

by Jhey Tompkins

Curl Simulation

by Daniel Velasquez

Banksy – Valentine’s Day

by David Fitzgibbon

Wavy Color Cube

by Ryan Mulligan

intimacy

by Thibaud Goiffon

What’s behind ?

by Kevin Levron

threejs-nuxt-sample

by Misaki Nakano

The Three Graces (React App)

by Paul Henschel

Wind field – How To

by Louis Hoebregts

Pure CSS Claw Crane

by Jon Kantner

void-merge-2048

by Arthur

Corgo’s with Jason

by Mandy Michael

Pixel Dust

by Paul Neave

Pure CSS Responsive Browser Template

by Adam Marsden

Random, Cos and Sin

by Kevin Levron

Diagonal Layouts in 2020

by Nils Binder

r3f cannon instanced physics

by Paul Henschel

Liquid Grid

by by Kevin Levron

Memphis Beauty

by Anna the Scavenger

Tower Time

by Adrian Rampy

shader moire

by masuwa

Isometric City w/ Airplane

by Adam Kuhn

Awesome Demos Roundup #14 was written by Mary Lou and published on Codrops.

February 7, 2020

Awesome Demos Roundup #13

We are very happy to share our latest selection of fantastic web experiments with you! Some beautiful and exciting code gems were created; from realistic objects with pure CSS, to flowy surprises and fun brushes, there’s lots to explore and learn from.

We hope you enjoy this special pick and get inspired!

pullmearound

by Lars Berg

emoji-brush

by Yoksel

Cut/Copy/Paste

by Adam Kuhn

SVG Pattern Doodler

by Niklas Knaack

subscribercoaster

by Adam Kuhn

Physarum-fluid-2

by Domenico Bruzzese

The line game

by Fabio Ottaviani

Shimmery Text w/ SVG + GSAP

by Jhey Tompkins

fireworks

by Magnus Persson

Typo-coaster

by Michelle Barker

2D Fluid Simulation

by Andrés Valencia Téllez

Radio Hopping

by Jon Kantner

Walkers – How to

by Louis Hoebregts

Night at the Museum of Very Good Boys

by Adam Kuhn

3D CSS Kinetic Type Poster

by Pete Barr

noisy-water

by Nathan Taylor

Flowers

by Cassie Evans

VIBES

by Sikriti Dakua

glitchbrush

by Fabio Ottaviani

Pure CSS Glitch Experiment (Twitch Intro WIP)

by Tee Diang

Tabbar animation – Only CSS

by Milan Raring

PPL MVR

by Kristopher Van Sant

Feedback Reactions

by Aaron Iker

HanaGL

by Ryohei Ukon

Band Moiré Filter

by Henry Desroches

Toggles

by Olivia Ng

Night & Day v2

by Steve Gardner

Polaroid Camera In CSS

by Sarah Fossheim

Animating Clip-Path Sections w/ Intersection Observer

by Ryan Mulligan

verlet-motion

by Jordan Machado

Newton’s Light Bulbs

by Jhey Tompkins

rgbKineticSlider

by Hadrien Mongouachon

Flowing Image – How To

by Louis Hoebregts

Zodiac Hustle

by Daniel Long

ogl-hypnose

by Joseph Merdrignac

Awesome Demos Roundup #13 was written by Mary Lou and published on Codrops.

August 26, 2019

Collective #543

Faster Image Loading With Embedded Image Previews

Christoph Erdmann writes about the Embedded Image Preview (EIP) technique that allows us to load preview images during lazy loading.

Read it

This content is sponsored via Thought Leaders

Analyze, diagnose & fix errors in record time

Never wonder how to repro a bug again. Dedupe bug reports easily. Gain visibility into errors that help your team prioritize errors.

Try it for free

Postwoman

Postwoman is a minimal API request builder made by Liyas Thomas.

Check it out

Chart.xkcd

Chart.xkcd is a chart library for plotting hand-drawn styled charts.

Check it out

JavaScript to Know for React

An article on what JavaScript features you should be familiar with when learning and using React. By Kent C. Dodds.

Read it

Pagemap

A really nice tool to create a mini map for your web page.

Check it out

React Layouts

Grab-and-go layouts for React including code examples for Rebass, Theme UI, or Emotion. By Brent Jackson.

Check it out

Ruffle

Ruffle is an Adobe Flash Player emulator written in the Rust programming language. Ruffle targets both the desktop and the web using WebAssembly.

Check it out

WIDE AWAKE

A fantastic psychadelic scroll journey made with Cables.

Check it out

Radial Menu

A highly customizable radial menu that’s very easy to setup.

Check it out

JavaScript: The Modern Parts

An article by Andrew Montalenti on the exciting evolution of JavaScript.

Read it

Friend NDA Generator

FrieNDA is a NDA generator for you and your friend’s secret (for fun).

Check it out

Consume less, create more

A great read on how modern technology makes us consumers instead of creators.

Read it

Animated Portrait w/ GSAP 2.0

A lovely portrait demo with a switch animation made by Darin Senneff.

Check it out

How to build a plugin system on the web and also sleep well at night

Rudi Chen on a big challenge for Figma: designing a robust plugin system.

Read it

Mario HTML

A TypeScript version of the iconic game. Made by Neil Barkhina.

Check it out

Jeremy Keith – Building The Web – View Source 2019

An interview with Jeremy Keith on the state of the web, how we evolved over all these years, the tooling and the skills necessary to know for front-end engineers today.

Watch it

How DNS works

A fun and colorful explanation of how DNS works.

Check it out

Animated Verbs

Ryan Mulligan created some fun letter animations.

Check it out

100 Dots #2 : Tornado

Adam Kuhn created this fun demo of a tornado.

Check it out

Svelte tutorial

A tutorial that will teach you everything you need to know to build fast, small web applications easily with Svelte.

Check it out

Introducing nushell

The introduction of a new shell, written in Rust that draws inspiration from the classic Unix philosophy of pipelines and the structured data approach of PowerShell.

Read it