はてなブックマーク

Try clicking different sides of the button Flipside – A button that seamlessly transitions from action to confirmation

Sketch Toy Draw sketches with shaky lines and share replays with friends. Over 65 million sketches saved to date.

A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. For a real-world example, check out any of the forms on slides.com. expand-left Submit expand-right Submit expand-up Submit expand-down Submit contract Submit co

A three dimensional and space efficient menu. Move your mouse towards the arrow — or swipe in from the arrow if you're on a touch device — to open. Test it with any page by appending a URL, like so: lab.hakim.se/meny/?u=http://hakim.se. Meny can be positioned on any side of the screen: top - right - bottom - left Instructions and download at github.com/hakimel/meny. The name, Meny, is swedish. Cre

A context-shift transition. Use the dots below or your keyboard arrows.

An album thumbnail preview concept. Hover and move horizontally. Created by @hakimel / http://lab.hakim.se

Fokus uses JavaScript to emphasize anything you select by covering the rest of the page with semi-transparent black. Try it out by selecting this paragraph or the sample content below. You'll see the entire page fade out while this text is highlighted. If you want to use Fokus on your site you just need to include the fokus.min.js script (3kb, no dependencies). Fokus is also available as a Chrome

Click and drag to add nodes.  Space to reset.  Reduce the browser window size if it's slow.  Style:

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 for free or check out this demo presentation. ResumeFilter.AI Upload a job description + resumes and ResumeFilter will tell you who's the best fit. Plus, get an individual report including strengths, wea

A modal concept which aims to give a sense of depth between the page and modal layers. Click the button below to give it a try. Open modal Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of it, not intended for any practical use. Avgrund is Swedish for abyss. Created by Hakim El Hattab @hakimel — http://hakim.se

A three dimensional and space efficient menu. Move your mouse towards the arrow — or swipe in from the arrow if you're on a touch device — to open. Test it with any page by appending a URL, like so: lab.hakim.se/meny/?u=http://hakim.se. Meny can be positioned on any side of the screen: top - right - bottom - left Instructions and download at github.com/hakimel/meny. The name, Meny, is swedish. Cre

An experimental animated ribbon which reveals a curtain of additional content. See the top right corner! Source on GitHub. This a concept for a more playful and animated GitHub ribbon. The intention was to let you use the detached ribbon to drag down an iframe-embed of the repository on github.com but I neglected to check their X-Frame-Options until finishing most of the work. Created by @hakimel

A Christmas tree built out of form elements.

Experiments / Particles / 01 A first go at the canvas.

With 3D effects. And stuff. This is old, check out the new version! Heads Up This requires a browser with support for CSS3 3D transforms, such as Mobile Safari. Vertical Slides Slides can be nested inside of other slides, try pressing down. Basement Level 1 Press down or up to navigate. Basement Level 2 This is totally the Google logo: Basement Level 3 That's it, time to go back up. Marvelous Unor

Experiments / BreakDOM A remix of the classic Breakout game. Inspired by http://the389.com/.

Experiments / Magnetic / 02 Particles orbit around magnets which can be dragged around. Double click to add more magnets. Change skin with keyboard left / right.

Experiments / Sinuous / 01 The goal is simple: avoid the red dots! Sound design by Plan8. Turn off? Sinuous1. Avoid red dots.2. Touch green dots for invulnerability.3. Use invulnerability to destroy red dots.4. Score extra points by moving around a lot.5. Stay alive.Start

Experiments / Wave / 03 Each bubble holds a tweet with the word water in it. Click on them to read.

Experiments / Bakemono / 01 A little monster that I brought to life. Everything is drawn through code and rendered using canvas. The character design was taken from here.

Experiments / Keylight / 03 Depending on where keys are placed, different tones will be played. Double click to add new keys or press & hold to drag them around. Copy the URL to save your tune. Reset - Randomize - Decrease / Increase speed (3/6)Changed to Flash audio to reduce bandwidth consumption. See original.