Particles slide across the screen and grow as they get close to the mouse. First thing I ever did using
http://hakim.se/experiments/html5/particles/01/
https://hakim.se/rss.xml
rss
Posts
A wave with bubbles floating on the surface, the bubbles each represent a tweet with the word "water" in it.
http://hakim.se/experiments/html5/wave/03/
Extensions
Particle positioning patterns using depth.
http://hakim.se/experiments/html5/particledepth/02/
Extensions
Particle movement patterns that generate smooth trails.
http://hakim.se/experiments/html5/trail/03/
Extensions
Create currents of particles which orbit around magnetic nodes.
http://hakim.se/experiments/html5/magnetic/02/
Extensions
Soft blobby physics. Imagine jelly, in your browser.
http://hakim.se/experiments/html5/blob/03/
Extensions
A playhead travels between keys which resonate in sound depending on where they are placed in the room.
http://hakim.se/experiments/html5/keylight/03/
Extensions
A little monster that I brought to life with JavaScript. Bakemono is Japanese for monster.
http://hakim.se/experiments/html5/bakemono/01/
Extensions
A devilishly simple but challenging game. Your objective is to steer clear of the evil red dots and stay alive as long as possible. Alsdescription available for iOS, search for it in the App Store.
http://sinuousgame.com/
Extensions
Sinuous' sibling game. More evil red dots!
http://hakim.se/experiments/html5/core/01/
Extensions
An online book that aims to better people's understanding about the inner workings of browsers and the web. Created for Googldescription while I was working at Fi.
http://www.20thingsilearned.com/
Extensions
An interactive experiment with bacteria in a playful and dynamic physics simulation.
http://hakim.se/experiments/html5/bacterium/01/
Extensions
An animated logo created for Yugen, a Canadian media production company.
http://lab.hakim.se/yugen/
Extensions
Ever wondered what it would feel like to attack a bunch of checkboxes with a radio button that's being steered by a scrollbar?
http://hakim.se/experiments/html5/breakdom/
Extensions
A holographic effect based on device orientation. Only tested in Safari for iOS.
http://hakim.se/experiments/css/holobox/
Extensions
Minimalistic game based on quick and precise pointer movement.
http://hakim.se/experiments/html5/coil/
Extensions
Browse for or drag an image onto the page and watch it be reconstructed purely out of text.
http://textify.it/
Extensions
When bored, I sometimes open a blank JavaScript file and start writing without any clear idea for what I want to do. This is the resuldescription of one such coding session.
http://hakim.se/experiments/html5/sphere/
Extensions
A colorful folding doodle. Click anywhere on the drawing – or use your keyboard – to switch layouts.
http://hakim.se/experiments/html5/origami
Extensions
Experimental 3D hover effect for links.
http://jsfiddle.net/hakim/Ht6Ym/
Extensions
Proof of concept JavaScript library for zooming in on DOM elements or points in a document.
http://lab.hakim.se/zoom-js/
Extensions
Happy holidays! I didn't get a pine tree for Christmas this year so I decided to compensate by creating a digital counterpart out odescription HTML form elements.
http://hakim.se/experiments/css/domtree
Extensions
CSS-based scroll effects for lists.
http://lab.hakim.se/scroll-effects
Extensions
A fun twist on the GitHub "fork" ribbon.
http://lab.hakim.se/forkit-js/
Extensions
An audio-visual experiment which synthesizes sound in real-time.
http://lab.hakim.se/radar/
Extensions
Experimental fold-in menu.
http://lab.hakim.se/meny/
Extensions
Modal concept which gives a sense of depth between the page and modal layers.
http://lab.hakim.se/avgrund/
Extensions
Interactive experiment based on the visuals originally created for Radar.
http://lab.hakim.se/linjer/
Extensions
Fokus emphasizes anything you select by obfuscating the rest of the page.
http://lab.hakim.se/fokus/
Extensions
UI concept for thumbnail previews. Hover over a single thumbnail to reveal it as a 3D stack. Works well on touch devices using swipdescription gestures.
http://lab.hakim.se/kort/
Extensions
An infinite and hypnotic animation. 3, 2, 1... You're feeling sleepy.
http://lab.hakim.se/hypnos
Extensions
A context-shift transition inspired by iOS.
http://lab.hakim.se/kontext
Extensions
Made as part of a series of CSS-only animations.
http://codepen.io/hakimel/full/fILbu
Extensions
Made as part of a series of CSS-only animations.
http://codepen.io/hakimel/full/CxliK
Extensions
Made as part of a series of CSS-only animations.
http://codepen.io/hakimel/full/aIhkf
Extensions
Pagination arrows that "flex" when you hover or press them.
http://lab.hakim.se/flexing-pagination
Extensions
Check a checkbox to generate a wave of checkboxes. Because why not.
http://lab.hakim.se/checkwave
Extensions
Draw sketches with vibrating lines – think old cartoons – and share replays with friends. My most popular project to datdescription with over 65m saved sketches.
http://sketchtoy.com/
Extensions
Hugely popular open source framework for creating HTML presentations.
http://lab.hakim.se/reveal-js
Extensions
A UI concept which merges loading indicators into the buttons that invoke them.
http://lab.hakim.se/ladda
Extensions
A platform for creating, presenting and sharing presentations.
https://slides.com
Extensions
Scroll the page and see list items expand under the magnifying area. Inspired by a Flash site I saw years ago.
http://lab.hakim.se/monocle
Extensions
A button that seamlessly transitions from action to confirmation.
http://lab.hakim.se/flipside
Extensions
Clock pattern animation.
http://lab.hakim.se/ticktock
Extensions
Interactive spiral animation.
http://lab.hakim.se/spiral
Extensions
An animated progress bar that highlights sections of a page that are currently in view.
http://lab.hakim.se/progress-nav