Creative Audio Visualizers
An exploration of modern, line-style sound visualization powered by p5.js and its p5.sound library.
+ moreThe Playground features web experiments, concepts, and layouts that push the boundaries of traditional design and showcase the latest in animation techniques.
An exploration of modern, line-style sound visualization powered by p5.js and its p5.sound library.
+ moreby Manoela Ilic
A switching title effect where a fixed text element changes with an animation depending on the scroll position.
+ moreby Manoela Ilic
A reveal effect where animated slices cover and uncover an image. Inspired by Zhenya Rynzhuk’s transitions experiments.
+ moreby Manoela Ilic
An implementation of Gil Huybrecht’s “Outdoors” design project powered by layered CSS grids.
+ moreby Manoela Ilic
An organic SVG shape layer animation based on Diana Hlevnjak’s work “Gradient Topography”. Powered by anime.js.
+ moreby Manoela Ilic
Some decorative shape and letter animations based on the Dribbble shot “Us By Night” by Animography.
+ moreby Jack Rugile
An inspirational set of demos that explores particle animations in 3D space with three.js. This type of animations could be very suitable for page loaders.
+ more
A creative strokes animation of a bike illustration powered by SVG and GSAP.
+ more
A collection of decorative shapes displayed as backgrounds using WebGL. The shapes are created with Three.js and animated with the TweenMax library.
+ moreby Manoela Ilic
An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles.
+ moreby Manoela Ilic
A grid item animation where the thumbnail scales up when the details view is opened. Based on the Dribbble shot “Surf Project” by Filip Slováček.
+ moreby Petr Urbánek
A Star Wars Kylo Ren page preloader made with HTML and CSS only.
+ more
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.
+ more
A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP.
+ moreby Manoela Ilic
Some layouts with sliced background images, slideshow functionality and glitch effect.
+ moreby Manoela Ilic
A small set of ideas for organic shape effects. The demos show some ways to use animated SVG morphs interactively on a website, including a menu hover and a content reveal effect.
+ moreby Manoela Ilic
A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up.
+ moreby Manoela Ilic
Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations.
+ more