Awesome Demos Roundup | The Blog Pros

March 16, 2023

Awesome Demos Roundup #24

A collection of creative code experiments from the past couple of weeks.

January 30, 2023

Awesome Demos Roundup #23

The latest compilation of innovative and captivating demos and code experiments from the web.

November 26, 2022

Aristide Benoist portfolio reproduction

by Nam Hai

Iridescence feature of ThreeJS

by 14islands

City Life – Day & Night – Pure CSS

by Josetxu López

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.

January 22, 2021

It’s been a while since our last demos roundup but here it is! A super-collection of the most interesting and creative web experiments of the past couple of weeks. I really hope you enjoy them and that they help you to find new ideas for your own coding adventures.

supershape

by Arno Di Nunzio

Jupiter

by Ben Matthews

DRUM SEQUENCER w/ SAMPLE PAD

by Jacob Kucera

Stage waves

by Liam Egan

nomad

by Stéphane Ginier

PAC-MAN Password Reveal w/ GSAP

by Jhey Tompkins

GSAP Believe – Collage Animation

by Shunya Koide

interstellar

by Arno Di Nunzio

Hexells

by Alexander Mordvintsev

ThreeJS instanced planes

by Francesco Michelini

Liquid masking – scroll

by Cassie Evans

Control

by Liam Egan

Flow field 5

by Yoichi Kobayashi

Breathing Dots

by Matt Rossman

squeeshy

by Sennep

Into the Dark Woods

by Anna the Scavenger

ThreeJS Luminous Pharaon

by Francesco Michelini

ripple

by ycw

Christmas Cannon

by Steve Gardner

Tilting Maze game

by Hunor Marton Borbely

Blob Opera

by David Li

Bubble

by Arno Di Nunzio

Netflix Intro Animation Pure CSS

by Claudio Bonfati

Translucent Pearls

by Arno Di Nunzio

Glassmorphism Creative Cloud App Redesign

by Aysenur Turk

Type Lighter

by Keita Yamada

fire ball 2

by Yoichi Kobayashi

Playing with transmission materials

by Paul Henschel

Stack game with Three.js and Cannon.js

by Hunor Marton Borbely

20.

by ycw

Stick Hero with Canvas

by Hunor Marton Borbely

ripple type

by Keita Yamada

Playground

by Fabio Ottaviani

Synesthesia

by Rikard Lindström

Text warping – Animated

by Lokesh Dhakar

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

February 10, 2020

Collective #588

Building a Continuous Integration & Deployment Pipeline Using Docker (CI/CD)

Tania Rascia shows how to create a CI/CD pipeline for a Node.js project using Docker and Travis.

Read it

This content is sponsored via Thought Leaders

Experts Love It. Intruders? Not So Much.

It feels good to fear less. SimpliSafe stands up to the unexpected, from burglars to burst pipes. As more than 3 million customers already know, fear has no place in a place like home.

Learn more here

Good First Issue

Good First Issue is a curated list of issues from popular open-source projects.

Check it out

Baretest

Baretest is a fast and simple JavaScript test runner. It offers near-instant performance and a brainless API..

Check it out

How to create a stacking cards effect

In this tutorial, Claudia Romano shows how to create a stacking cards effect, using the CSS sticky position and the Intersection Observer API.

Check it out

#s3e14 ALL YOUR HTML, Barycentric coords, physics

Yuri Artyukh explains how to code the awesome animation seen on the basement.studio website.

Watch it

DotMatrx.js

A dot matrix with animated movements that respond to mouse/touch move events.

Check it out

Quick and Easy Dark Mode with CSS Custom Properties

Michelle Barker shows how to easily offer a dark theme with CSS.

Check it out

Single div Sierpinski triangle

Learn how to draw the Sierpinski triangle using pure CSS in this tutorial by Yuan Chuan.

Read it

Bouncing Balls

A bouncing balls simulation using plain JavaScript.

Check it out

Understanding the ECMAScript Spec (Part 1)

In this article, you’ll get to understand the notation of a simple function in the ECMAScript spec.

Read it

Design Systems Hub

Rangle’s collection of perspectives and approaches on how to build, optimize and define design systems.

Check it out

Demystifying Browsers

With this article, Eric Lawrence aims to provide a roadmap for developers getting into the browser space.

Check it out

Why Web Browsers Are FREE

Do you know why you don’t have to pay for browser software? This video will enlighten you.

Watch it

Why Discord is switching from Go to Rust

A very interesting article by Jesse Howarth on why using Rust has many advantages for Discord.

Read it

Starfields GLShader

A really nice pseudo 3D demo by Paul J Karlik. Learn how to do it in this video tutorial: part 1 and part 2.

Check it out

JavaScript Lightning Effect

A lightning effect experiment with HTML canvas and JavaScript.

Check it out

Soft UI CSS shadow generator

If you’re into all that Neumorphism hype, this generator will make your day.

Check it out

Implementing Dark mode with TailwindCSS

If you use Tailwind CSS, this guide on how to implement dark mode will come in handy.

Read it

From Our Blog

Awesome Demos Roundup #13

A fresh selection of the most interesting demos and web experiments from the past weeks.

Check it out

Collective #588 was written by Pedro Botelho and published on Codrops.

October 17, 2019

Awesome Demos Roundup #9

This latest collection of awesome demos is full of creative surprises and amazing experiments. From innovative typography effects to neon lights and superb UI components; there’s lots of new things to explore and marvel at. So we invite you to delve into this demo collection and get inspired.

We hope you enjoy this roundup!

Pure CSS Cake 100×50 Game

Simple drag and drop example

Procedural Mountains

Corpses

Endless Shape Runner of Few Lines

Everything And Remember

3D Floating Typo

Bolt loader animation

upside down

Delaunay Stripes

Raindrop

HSL Slider w/ React + CSS vars

pinball like sparklers

rgbShiftSlider

80’s

Multi Step Bootstrap Form with animations

Paper Quilling Art

Pure CSS Book Loader

Animated Verbs III

WebGL Wavy Image Hover Reveal (TWGL)

Arrows Defense Game

Slinky Loader

Revelation

3D Boxes Loader CSS only

Rubber Slider

Sketches – 60

jonquil

Directionally blooming words

Download Button Animation

ctrlz

soothe

Interior Visualization

lights

Sketches – 61

CSS Rock-Paper-Scissors

Voronoi Slices

A LONG WAY

chaos-ink

Madness

MSDF Matcap metallic type

Balloon Slider

Bringing text to life

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

September 11, 2019

Awesome Demos Roundup #8

The past month has been full of creative experimentation including WebGL goodness and lots of exciting animations, variable fonts playfulness and CSS layout magic. There’s much to discover and learn from.

We hope you enjoy this demo collection and get inspired!

Strandbeest walk

Blurry

Call to Action Hype Man

Sphere of Boxes

Rainbow Animation (RAF + Responsive)

Fork This Nav

Day/Night Ambient Light Animation

Mitosis

Tunnel

Animated Verbs

Tornado

Animated Portrait w/ GSAP 2.0

Color this sofa! – SVG + Blend Mode trick

Polygon Tree

Delaunay

Zdog Colour Tunnel

Sorry not Sorry

Sloping heart

Stencil

Calculating PI Using Raindrops

Color Collision

Sketchpad

3D Switch animation

Sunbeams

Exploding Points

Enigma machine

Energy

Animated Verbs II

CSS Grid: Magazine Layouts

Pixi Sprite Bubbles

burn

Shaded islands

Order confirm animation

Fix posture

Dissolve

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

July 16, 2019

Awesome Demos Roundup #6

Amazing code has been crafted this past month: from pixel works to astonishing CSS art, to magnificent fluids and musical window resize fun. Posing like a rockstar or firing lasers, there’s something creative for everyone in this collection of original experiments from around the web.

We hope you enjoy this collection as much as we do!

Webcam Air Guitar

Agency website POC

Poster generator

Lasers

Uni

CSS-only Animated Lantern

Variable Fonts | Compressa

[wip] motion blur transition

Zdog and Goo

shape-outside

React World!

DOODLE-PLACE

Blood

Ocean

Six circles – bees & bombs

Web Camera 02

Reaction Tiles

Pure CSS Only Portrait – Isla

Accumulation

Rock God Pose

AI Assistant Blob

Falling City

Crystal

Variable font animation

Fluid Drive

CSS Grid: Coupons!

The Kabaa Project

Dots Loader

Drag & Drop

Pipes w/ Zdog + GSAP

Fluids Geometry

Galaxy

Upload Play & Pause animation

Space Shooter game

Musical Particles III

Only CSS: Infinite Wave ?

Popup Trombone

Atomize

Pure CSS Katy

3D Particle Tornado

Blurry cat and trees

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

April 18, 2019

Collective #509

Inspirational Website of the Week: Greater Than Avatars

A stunning design with great balance and details. Our pick this week.

Get inspired

This content is sponsored via Thought Leaders

Northwestern MS in Information Design and Strategy

Prepare for a range of dynamic communication roles and build the in-demand skills needed to drive user interactions.

Apply Now

Web Design Trends 2019

A very inspirational list of fundamental web design trends for 2019.

Read it

Optimizing Performance With Resource Hints

Learn how you can use Resource Hints to help the browser stay one step ahead of the user in this article by Drew McLellan.

Read it

Solar CSSystem

All the solar system’s planets made with CSS by Rob DiMarzo.

Check it out

Diagonal Containers in CSS

A tutorial by Sebastiano Guerriero, where he shows how to create full-width, diagonal sections in CSS using the clip-path property.

Read it

Limitation Breeds Creativity

Cassie Evans’ great talk at Bytes Conf 2019.

Watch it

js-cloudimage-360-view

A simple, interactive resource that can be used to provide a virtual tour of your product.

Check it out

Simulating Mouse Movement

Louis Hoebregts shows how to simulate a moving mouse using the Simplex noise algorithm.

Read it

Why Notre-Dame Was a Tinderbox

An scrollable WebGL presentation that visualizes why Notre-Dame was all but assured to go up in flames.

Check it out

cube.js

In case you didn’t know about it: Cube.js is an open source modular framework to build analytical web applications.

Check it out

Animated grid

A hypnotizing animated grid demo made by David A.

Check it out

A graphical introduction to dynamic programming

Avik Das wrote and illustrated this visual introduction to dynamic programming.

Read it

HTML Includes That Work Today

Scott Jehl describes an experimental technique for including another file directly into a page.

Read it

ASCII WARP GITHUB

Ibrahim Tanyalcin shows how you can use LexiconMonoSeq to animate ASCII.

Check it out

ToneJS + canvas-sketch

An interactive and generative site made with canvas-sketch and Tone.js. By Matt DesLauriers.

Check it out

Fullscreen Scroll Slideshow

Yoichi Kobayashi created this useful fullscreen slideshow that works on scroll.

Check it out

Solid Template

Solid is a simple and responsive HTML landing page template for startups.

Check it out

Particles 101

Tibix’s tutorial on how to make animations based on moving particles.

Read it

Only CSS: STARFOX Arwing Drone

Yusuke Nakaya created this stunning CSS-only flying drone demo.

Check it out

URL equalizer

So much coding goodness in just a couple of tweets. A realtime favicon waveform follows.

Check it out

Nicedoc.io

Nicedoc.io aims to reduce the documentation friction, converting any markup file hosted on github.com into great looking documentation.

Check it out

IMGBIN

A place to find free PNG images for your next wild collage.

Check it out

From Our Blog

Awesome Demos Roundup #3

The third collection of beautiful, creative experiments that we’ve found around the web.

Check it out

Collective #509 was written by Pedro Botelho and published on Codrops.

April 15, 2019

Awesome Demos Roundup #3

For this third Awesome Demos Roundup we’ve collected some mesmerizing animations and artful experiments. Among them are some great ideas that will get you thinking “how was it done?” and that will make you wanna tinker with the variables. Dive in and get some inspiration for your next side project.

Enjoy!

Magnet

Particles Field

Art of Noise #6

Potential Flow

The Cube

GLSL: Looping simplex noise

React App

CSS Grid: Floor Plan

Wolfenstein: Ray Tracing On using WebGL1

Bach SVG Music Animation

Lumina

Art of Noise #8

The Plastic Ocean

Model transitions

Multiscale Turing Patterns

Magical Light Tunnel

Naughts and Crosses 3

Alien Invasion by Gal Shir : Web Animation by Kono

GRASS

Unicode art gallery – Unicode art gallery

Course Clear! (Splitting.js Demo)

Floating heart

Nails

Whirling

GLSL: Blinn-phong shading

Chasing

Previous Roundups

Awesome Demos Roundup #1

Awesome Demos Roundup #2

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

March 13, 2019

Awesome Demos Roundup #2

In our second Awesome Demos Roundup we are featuring some great experiments including pure CSS goodness and WebGL wonders. Play evolution with Matthew Main’s “Kiss The Sky” or swing the racket in Jon Slater’s “CSS Only Tennis Game”. But above all, we hope you get inspired with this little selection.

Enjoy!