The Playground features web experiments, concepts, and layouts that push the boundaries of traditional design and showcase the latest in animation techniques.
by Manoela Ilic
Ideas for revealing content in a schematic box look as seen around the Web lately. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers some content underneath.
+ more
by Manoela Ilic
Experimental ideas for playful musical interactions powered by MIDI.js and the Web Audio API. Play instruments or make sounds by interacting with content.
+ more
by Manoela Ilic
Some ideas for hover animations with a fancy tilt effect. Inspired by the hover effect seen on the Kikk 2015 website.
+ more
by Manoela Ilic
A simple template of a weekly surf report with an animated SVG graph and a sliding content panel. The layout is powered by flexbox and viewport units. Highly experimental.
+ more
by Manoela Ilic
A 3D cubes Advent calendar with fun hover effects and background color animations. Clicking the boxes opens another content level with different element animations.
+ more
by Manoela Ilic
A fun experiment with proof-of-concepts for various simple media pop ups on hover or touch. The idea is to show images, videos or other media in a pop up style with different effects.
+ more
by Manoela Ilic
A set of inspirational letter animations for display typography effects powered by anime.js.
+ more
by Manoela Ilic
The Line Maker is a plugin for creating and animating decorative lines on websites. Inspired by site designs like ‘Uber Brand Experience’ and ‘Details’.
+ more
by Manoela Ilic
A background image segment effect as seen on Filippo Bello’s Portfolio, employing the CSS clip-path property and powered by anime.js.
+ more
by Manoela Ilic
An experimental SVG letter animation based on the Dribbble shot “Shading Letters in Illustrator” by Jake Bartlett. Powered by Julian Garnier’s anime.js.
+ more
by Manoela Ilic
Some navigation style ideas for slideshows, pages and other components that require a navigation. Shown on the example of a vertical slideshow.
+ more
by Manoela Ilic
A simple decorative slideshow component with individual slide layouts and effects. Powered by anime.js.
+ more
by Manoela Ilic
A landing page template with a featured content section and background sounds that change according to the view.
+ more
by Manoela Ilic
An interactive transparency background effect that makes images visible when specific points are hovered, showing some content once clicked.
+ more
by Manoela Ilic
An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js.
+ more
by Manoela Ilic
An experimental template with an interactive old school record player powered by the Web Audio API.
+ more
by Manoela Ilic
Some experimental isometric and 3D grids. The idea is to use isometric/3D grids as decorative elements or with some interaction.
+ more
by Adrien Denat
A set of inspirational, highly experimental distortion effects for buttons using SVG filters.
+ more