# [Focus Transition](http://n12v.com/focus-transition/)

![Flying Focus icon](http://nv.github.io/flying-focus/chrome/icon_128.png)

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](http://n12v.com/focus-transition/flying-focus.js) standalone script

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

## [Safari extension](http://n12v.com/focus-transition/FlyingFocus.safariextz)

Build with `rake safari`.

## [Chrome extension](https://chrome.google.com/webstore/detail/flying-focus/koojelgeljpacclbmiflpcohjkbklplk)

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

![Focus transition effects](http://n12v.com/keyboard-focus-transition/animation.gif)

## [focus-hug.js](http://n12v.com/keyboard-focus-transition/focus-hug.js)

Totally standalone, includes all necessary CSS and has no external dependencies.

To use, just include `<script src="focus-hug.js"></script>` inside either `<head>` or `<body>`.

To build from source use `rake standalone`.


## API

Focus Hug exposes `focusHug` global variable.

`focusHug.trigger(element)` manually trigger Focus Hug on the specified element.

`focusHug.enabled = true` don't do anything on focus event. Does not affect focusHug.trigger method.

Update the readme, remove the legacy of the Flying Focus.
Update the readme, remove the legacy of the Flying Focus.
