updated readme

Author: geelen

README.md

@@ -10,7 +10,7 @@ _The GIF tag the internet deserves_
 <x-gif src="probably_cats.gif"></x-gif>
 ```
 
-Playback modes:
+###Playback modes:
 
 Mutually exclusive. Can't be changed once initialised (create a new x-gif if you want a new mode)
 
@@ -23,7 +23,7 @@ Defers playback to an external object. The DOM element will then expose a `clock
 `bpm="120"`
 Syncs GIFs to a given beats-per-minute. If multiple x-gifs are on the page, they will all be synced together. By default, will spread long GIFs over multiple beats, unless the `snap` option is also included. Uses `sync` and `clock` under the hood. Can be changed and will take immediate effect.
 
-Options:
+###Options:
 
 `stopped`
 Regardless of playback mode, this will prevent the GIF from animating. Removing this attribute resumes playback. In `speed` mode, the GIF will always resume playback from the beginning.
@@ -40,15 +40,15 @@ Instead of allowing longer GIFs to sync to multiple beats, force them to fit int
 `ping-pong`
 Boolean attribute. Plays the GIF front-to-back then back-to-front, which looks more awesome for some GIFs. Works with all playback modes. Can be removed/added at any time.
 
-Debugging:
+###Debugging:
 
 `debug`
 Turns on debug output from the Gif Exploder, which can help track down errors with some GIFs being parsed incorrectly.
 
 `exploded`
 For visual inspection of the frames. Stops playback, and renders each frame out side-by-side. Many frames will appear semi-transparent, because that's how GIFs work. But this might come in handy.
 
-What does it do?
+##What does it do?
 
 * AJAX fetches the GIF as a binary stream
 * Slices the GIF into frames like a total boss
@@ -57,52 +57,27 @@ What does it do?
 
 **[Here's a demo! It just might work in your browser!](http://geelen.github.io/x-gif)**
 
-## Options
-
-### Speed
-
-Spins through the frames at its natural rate multiplied by `speed`
-
-```html
-<x-gif src="definitely_cats.gif" speed="2.1"></x-gif>
-```
-
-### Bpm
-
-Breaks the GIF across 1 or more _beats_ (depending on how long the GIF is), where each beat is 1/`bpm` minutes long.
-
-```html
-<x-gif src="something_dumb_from_buzzfeed.gif" bpm="120"></x-gif>
-```
-
-### snap-bpm
-
-Just like `bpm` but locks all GIFs to one _beat_, regardless of how long they were originally.
-
-```html
-<x-gif src="something_dumb_from_buzzfeed.gif" snap-bpm="120"></x-gif>
-```
-
-### Stopped
-
-```html
-<x-gif src="something_rad_off_reddit.gif" stopped></x-gif>
-```
-
-Stops the `requestAnimationFrame` loop inside the GIF. You can add or remove the `stopped` attribute and it will stop or start. Obvs.
-
+**[Check out the rest of the demos](http://geelen.github.io/x-gif)**
 
-### Sync
+## Usage
 
 ```html
-<x-gif src="mr_t_works_it.gif" sync></x-gif>
+<script>
+  if ('registerElement' in document
+    && 'createShadowRoot' in HTMLElement.prototype
+    && 'import' in document.createElement('link')
+    && 'content' in document.createElement('template')) {
+    // We're using a browser with native WC support!
+  } else {
+    document.write('<script src="https:\/\/cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"><\/script>')
+  }
+</script>
+<link rel="import" href="x-gif.html">
 ```
 
-Defers playback to an external clock, such as beat data from an audio stream to make rad synchronised GIFs & music. [See an example](http://geelen.github.io/x-gif/demos/audio.html).
-
-**[Check out the rest of the demos](http://geelen.github.io/x-gif)**
+This will detect support for Web Components, shim them if needed, then load x-gif with a HTML import.
 
-## Status
+## Roadmap
 
 * Web Component - YES! (zero-dependencies on Chrome 36!)
 * Polymer element - Nah, just use the Web Component