I'm Hakim El Hattab, a Swedish front end developer and interface designer. I co-founded and am working on Slides. Slides is a platform for creating, presenting and sharing slide decks. Sign up and give it a try or learn more in this example presentation.
I love to experiment with graphics and interactivity. Take a look at some of my favorite projects:
What if form focus wasn't indicated by an outline around the input field?
A platform for creating, presenting and sharing slide decks.
A tool for writing interactive and engaging technical documentation. Write and host on kodemo.com or publish on your own domain.
Draw sketches with shaky lines and share replays with friends. My most popular project to date with over 500m views and 65m saved sketches.
UI concept which merges loading indicators into the buttons that invoke them.
Open source framework for creating HTML presentations. Support PDF exports, speaker notes, Markdown and much more.
My work consists of a healthy mix of useful interface libraries, pointless animations and minimalist games. I've focused on my personal work and excluded projects that I worked on at my previous jobs.
A super simple, no fuss, math quiz for kids. No ads. No external links. Super simple UI. Made for my daughters ❤️
An animated progress bar that highlights sections of a page that are currently in view.
An infinitely scrolling painting.
A video course that teaches you how to everything you need to know to create great looking presentations with reveal.js.
A game built out of checkboxes. Stack boxes and reach the top to win.
Move your mouse or swipe to navigate the stars.
Interactive spiral animation.
Scroll the page and see list items expand under the magnifying area. Inspired by a Flash site I saw years ago.
Clock pattern animation.
A button that seamlessly transitions from action to confirmation.
Check a checkbox to generate a wave of checkboxes. Because not.
Pagination arrows that "flex" when you hover or press them.
3/3 in a series of CSS-only animations.
2/3 in a series of CSS-only animations.
1/3 in a series of CSS-only animations.
A context-shift transition inspired by iOS.
An infinite and hypnotic animation.
3, 2, 1... You're feeling sleepy.
UI concept for thumbnail previews. Hover over a single thumbnail to reveal it as a 3D stack.
Emphasize text selection by obfuscating the rest of the page.
Interactive experiment based on the visuals originally created for Radar.
Modal concept which gives a sense of depth between the page and modal layers.
Experimental fold-in menu.
An audio-visual experiment which synthesizes sound in real-time.
A fun twist on the GitHub "fork" ribbon.
CSS-based scroll effects for lists.
A digital christmas tree made out of HTML form elements.
Experimental 3D hover effect for links.
A colorful folding doodle. Click anywhere on the drawing — or use your keyboard — to switch layouts.
Thousands of particles animated in an ever morphing spherical pattern.
Browse for or drag an image onto the page and watch it be reconstructed purely out of text.
Minimalistic game based on quick and precise pointer movement.
A holographic effect based on device orientation. Only tested in Safari for iOS.
Ever wondered what it would feel like to attack a bunch of checkboxes with a radio button that's being steered by a scrollbar?
An animated logo created for Yugen, a Canadian media production company.
An interactive experiment with bacteria in a playful and dynamic physics simulation.
20 Things I Learned About Browsers and the Web
An online book that aims to better people's understanding about the inner workings of browsers and the web.
Created for Google while I was working at Fi.
Sinuous' sibling game. More evil red dots!
A devilishly simple but challenging game. Your objective is to steer clear of the evil red dots and stay alive as long as possible. Also available for iOS, search for it in the App Store.
A playhead travels between keys which resonate in sound depending on where they are placed in the room.
Soft blobby physics. Imagine jelly, in your browser.
Create currents of particles which orbit around magnetic nodes.
Particle movement patterns that generate smooth trails.
Particle positioning patterns using depth.
A wave with bubbles floating on the surface, the bubbles each represent a tweet with the word "water" in it.
Particles slide across the screen and grow as they get close to the mouse. First thing I ever did using
Most of my projects are released open source so you can freely modify or improve on them.
I'm born and raised in Sweden and currently live in Jönköping. In the past, I've lived in Stockholm, San Francisco and New York.
I co-founded and am working full time on Slides. A platform for creating, presenting and sharing slide decks.
Slides is based on reveal.js — an open source HTML presentation framework that I first released in 2011 and still maintain today.
I started out at Fi – a digital production company in Stockholm. During my five years with Fi I had the opportunity to lead the development of projects for clients including Google, BBC, Nintendo and SAS.
Then I moved halfway across the world to join Qwiki, a silicon valley startup. Qwiki was acquired by Yahoo in 2013.
After Qwiki I joined Squarespace as their Lead Interface Engineer.
Not for now. I'm focusing all my time on making Slides the best it can be.