julmot / flying-focus

UI concept

Flying Focus · Focus Snail · Focus Zoom · Focus Hug

Improvements to Original Repository

This is a fork of flying-focus. In the original repository, the focus disappears after 150ms. In this fork, it will remain visible when navigating using tab. Also, this fork has a package.json for directly installing it from GitHub using:

$ npm install julmot/flying-focus#gh-pages

All other files that aren't necessary for the standalone version were removed.

Focus Transition

Flying Focus is a UI concept. It adds a transition to the focus outline when you tab around inputs, buttons, and links.

flying-focus.js standalone script

Includes all necessary CSS and has no external dependencies. Build with rake standalone.

Safari extension

Build with rake safari.

Chrome extension

No build step required; just load it as an unpacked extension from chrome/.

Related browser bugs

• TAB focus navigation doesn't show focus rings for buttons in Chrome
• Impossible to change outline CSS property of some form elements Chrome WebKit
• No way to hide focus outline in Firefox, none of the methods mentioned on StackOverflow work

Who uses Flying Focus