SOURCE

/*
 * Shape Shifter
 * http://www.kennethcachia.com/shape-shifter
 * A canvas experiment
 */

'use strict';

var canvas;
var ctx;
var pixelRadius;
var pixelContiner;
var fontSize = 500,
    fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';

var shapeShift = {
    init: function() {
        var action = window.location.href,
            i = action.indexOf('?a=');

        shapeShift.Drawing.init('.canvas');
        shapeShift.ShapeBuilder.init();
        shapeShift.UI.init();


        if (i !== -1) {
            shapeShift.UI.simulate(decodeURI(action).substring(i + 3));
        } else {
            shapeShift.UI.simulate('#rectangle 5x5|#circle 25|Shape|Shifter|Type|to start|#icon thumbs-up|#countdown 3||');
        }

        shapeShift.Drawing.loop(function() {
            shapeShift.Shape.render();
        });
    }
};

window.addEventListener('load', function() {
    canvas = document.createElement('canvas');
    canvas.id = 'mainCanvas';
    canvas.className = 'canvas';
    ctx = canvas.getContext('2d');

    pixelRadius = 4;
    pixelContiner = pixelRadius * 2 + 1;
    document.body.insertBefore(canvas, document.body.firstChild);


    document.body.classList.add('body--ready');

    shapeShift.init();
});

shapeShift.Drawing = (function() {
    var renderFn,
        requestFrame = window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };

    return {
        init: function(el) {

            this.adjustCanvas();

            window.addEventListener('resize', function() {
                shapeShift.Drawing.adjustCanvas();
            });
        },

        loop: function(fn) {
            renderFn = !renderFn ? fn : renderFn;
            this.clearFrame();
            renderFn();
            requestFrame.call(window, this.loop.bind(this));
        },

        adjustCanvas: function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        },

        clearFrame: function() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        },

        getArea: function() {
            return { w: canvas.width, h: canvas.height };
        },

        drawCircle: function(p, c) {
            ctx.fillStyle = c.render();
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, true);
            ctx.closePath();
            ctx.fill();
        }
    };
}());


shapeShift.Point = function(args) {
    this.x = args.x;
    this.y = args.y;
    this.r = args.r;
    this.a = args.a;
    this.h = args.h;
};


shapeShift.Color = function(r, g, b, a) {
    this.r = r;
    this.g = g;
    this.b = b;
    this.a = a;
};

shapeShift.Color.prototype = {
    render: function() {
        return 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',' + this.a + ')';
    }
};


shapeShift.UI = (function() {
    var input = document.querySelector('.ui-input'),
        ui = document.querySelector('.ui'),
        help = document.querySelector('.help'),
        commands = document.querySelector('.commands'),
        overlay = document.querySelector('.overlay'),
        interval,
        isTouch = false, //('ontouchstart' in window || navigator.msMaxTouchPoints),
        currentAction,
        resizeTimer,
        time,
        maxShapeSize = 30,
        firstAction = true,
        sequence = [],
        cmd = '#';

    function formatTime(date) {
        var h = date.getHours(),
            m = date.getMinutes();

        m = m < 10 ? '0' + m : m;
        return h + ':' + m;
    }

    function getValue(value) {
        return value && value.split(' ')[1];
    }

    function getAction(value) {
        value = value && value.split(' ')[0];
        return value && value[0] === cmd && value.substring(1);
    }

    function timedAction(fn, delay, max, reverse) {
        clearInterval(interval);
        currentAction = reverse ? max : 1;
        fn(currentAction);

        if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {
            interval = setInterval(function() {
                currentAction = reverse ? currentAction - 1 : currentAction + 1;
                fn(currentAction);

                if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {
                    clearInterval(interval);
                }
            }, delay);
        }
    }

    function reset(destroy) {
        clearInterval(interval);
        sequence = [];
        time = null;

        if (destroy) {
            shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(''));
        }
    }

    function performAction(value) {
        var action,
            current;

        overlay.classList.remove('overlay--visible');
        sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|'));
        input.value = '';
        checkInputWidth();

        timedAction(function() {
            current = sequence.shift();
            action = getAction(current);
            value = getValue(current);

            switch (action) {
                case 'countdown':
                    value = parseInt(value, 10) || 10;
                    value = value > 0 ? value : 10;

                    timedAction(function(index) {
                        if (index === 0) {
                            if (sequence.length === 0) {
                                shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(''));
                            } else {
                                performAction(sequence);
                            }
                        } else {
                            shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(index), true);
                        }
                    }, 1000, value, true);
                    break;

                case 'rectangle':
                    value = value && value.split('x');
                    value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2];

                    shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0], 10)), Math.min(maxShapeSize, parseInt(value[1], 10))));
                    break;

                case 'circle':
                    value = parseInt(value, 10) || maxShapeSize;
                    value = Math.min(value, maxShapeSize);
                    shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.circle(value));
                    break;

                case 'time':
                    var t = formatTime(new Date());

                    if (sequence.length > 0) {
                        shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(t));
                    } else {
                        timedAction(function() {
                            t = formatTime(new Date());
                            if (t !== time) {
                                time = t;
                                shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(time));
                            }
                        }, 1000);
                    }
                    break;

                case 'icon':
                    shapeShift.ShapeBuilder.imageFile('font-awesome/' + value + '.png', function(obj) {
                        shapeShift.Shape.switchShape(obj);
                    });
                    break;

                default:
                    shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current));
            }
        }, 2000, sequence.length);
    }

    function checkInputWidth() {
        if (input.value.length > 18) {
            ui.classList.add('ui--wide');
        } else {
            ui.classList.remove('ui--wide');
        }

        if (firstAction && input.value.length > 0) {
            ui.classList.add('ui--enter');
        } else {
            ui.classList.remove('ui--enter');
        }
    }

    function bindEvents() {
        document.body.addEventListener('keydown', function(e) {
            input.focus();

            if (e.keyCode === 13) {
                firstAction = false;
                reset();
                performAction(input.value);
            }
        });

        window.addEventListener('resize', function() {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                shapeShift.Shape.shuffleIdle();
                reset(true);
            }, 500);
        });

        input.addEventListener('input', checkInputWidth);
        input.addEventListener('change', checkInputWidth);
        input.addEventListener('focus', checkInputWidth);

        help.addEventListener('click', function() {
            overlay.classList.toggle('overlay--visible');

            if (overlay.classList.contains('overlay--visible')) {
                reset(true);
            }
        });

        commands.addEventListener('click', function(e) {
            var el,
                info,
                demo,
                url;

            if (e.target.classList.contains('commands-item')) {
                el = e.target;
            } else {
                el = e.target.parentNode.classList.contains('commands-item') ? e.target.parentNode : e.target.parentNode.parentNode;
            }

            info = el && el.querySelector('.commands-item-info');
            demo = el && info.getAttribute('data-demo');
            url = el && info.getAttribute('data-url');

            if (info) {
                overlay.classList.remove('overlay--visible');

                if (demo) {
                    input.value = demo;

                    if (isTouch) {
                        reset();
                        performAction(input.value);
                    } else {
                        input.focus();
                    }
                } else if (url) {
                    window.location = url;
                }
            }
        });

        canvas.addEventListener('click', function() {
            overlay.classList.remove('overlay--visible');
        });
    }

    return {
        init: function() {
            bindEvents();
            input.focus();

            if (isTouch) {
                document.body.classList.add('touch');
            }

            shapeShift.UI.Tabs.init();
        },

        simulate: function(action) {
            performAction(action);
        }
    };
}());


shapeShift.UI.Tabs = (function() {
    var labels = document.querySelector('.tabs-labels'),
        triggers = document.querySelectorAll('.tabs-label'),
        panels = document.querySelectorAll('.tabs-panel');

    function activate(i) {
        triggers[i].classList.add('tabs-label--active');
        panels[i].classList.add('tabs-panel--active');
    }

    function bindEvents() {
        labels.addEventListener('click', function(e) {
            var el = e.target,
                index;

            if (el.classList.contains('tabs-label')) {
                for (var t = 0; t < triggers.length; t++) {
                    triggers[t].classList.remove('tabs-label--active');
                    panels[t].classList.remove('tabs-panel--active');

                    if (el === triggers[t]) {
                        index = t;
                    }
                }

                activate(index);
            }
        });
    }

    return {
        init: function() {
            activate(0);
            bindEvents();
        }
    };
}());


shapeShift.Dot = function(x, y) {
    this.p = new shapeShift.Point({
        x: x,
        y: y,
        r: pixelRadius,
        a: 1,
        h: 0
    });

    this.e = 0.07;
    this.s = true;

    this.c = new shapeShift.Color(255, 255, 255, this.p.a);

    this.t = this.clone();
    this.q = [];
};

shapeShift.Dot.prototype = {
    clone: function() {
        return new shapeShift.Point({
            x: this.x,
            y: this.y,
            r: this.r,
            a: this.a,
            h: this.h
        });
    },

    _draw: function() {
        this.c.a = this.p.a;
        shapeShift.Drawing.drawCircle(this.p, this.c);
    },

    _moveTowards: function(n) {
        var details = this.distanceTo(n, true),
            dx = details[0],
            dy = details[1],
            d = details[2],
            e = this.e * d;

        if (this.p.h === -1) {
            this.p.x = n.x;
            this.p.y = n.y;
            return true;
        }

        if (d > 1) {
            this.p.x -= ((dx / d) * e);
            this.p.y -= ((dy / d) * e);
        } else {
            if (this.p.h > 0) {
                this.p.h--;
            } else {
                return true;
            }
        }

        return false;
    },

    _update: function() {
        var p,
            d;

        if (this._moveTowards(this.t)) {
            p = this.q.shift();

            if (p) {
                this.t.x = p.x || this.p.x;
                this.t.y = p.y || this.p.y;
                this.t.r = p.r || this.p.r;
                this.t.a = p.a || this.p.a;
                this.p.h = p.h || 0;
            } else {
                if (this.s) {
                    this.p.x -= Math.sin(Math.random() * 3.142);
                    this.p.y -= Math.sin(Math.random() * 3.142);
                } else {
                    this.move(new shapeShift.Point({
                        x: this.p.x + (Math.random() * 50) - 25,
                        y: this.p.y + (Math.random() * 50) - 25,
                    }));
                }
            }
        }

        d = this.p.a - this.t.a;
        this.p.a = Math.max(0.1, this.p.a - (d * 0.05));
        d = this.p.r - this.t.r;
        this.p.r = Math.max(1, this.p.r - (d * 0.05));
    },

    distanceTo: function(n, details) {
        var dx = this.p.x - n.x,
            dy = this.p.y - n.y,
            d = Math.sqrt(dx * dx + dy * dy);

        return details ? [dx, dy, d] : d;
    },

    move: function(p, avoidStatic) {
        if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) {
            this.q.push(p);
        }
    },

    render: function() {
        this._update();
        this._draw();
    }
};


shapeShift.ShapeBuilder = (function() {
    function fit() {
        canvas.width = Math.floor(window.innerWidth / pixelContiner) * pixelContiner;
        canvas.height = Math.floor(window.innerHeight / pixelContiner) * pixelContiner;
        ctx.fillStyle = 'red';
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'center';
    }

    function processCanvas() {
        var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data,
            dots = [],
            x = 0,
            y = 0,
            fx = canvas.width,
            fy = canvas.height,
            w = 0,
            h = 0;

        for (var p = 0; p < pixels.length; p += (4 * pixelContiner)) {
            if (pixels[p + 3] > 0) {
                dots.push(new shapeShift.Point({
                    x: x,
                    y: y
                }));

                w = x > w ? x : w;
                h = y > h ? y : h;
                fx = x < fx ? x : fx;
                fy = y < fy ? y : fy;
            }

            x += pixelContiner;

            if (x >= canvas.width) {
                x = 0;
                y += pixelContiner;
                p += pixelContiner * 4 * canvas.width;
            }
        }

        return { dots: dots, w: w + fx, h: h + fy };
    }

    function setFontSize(s) {
        ctx.font = 'bold ' + s + 'px ' + fontFamily;
    }

    function isNumber(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

    return {
        init: function() {
            fit();
            window.addEventListener('resize', fit);
        },

        imageFile: function(url, callback) {
            var image = new Image(),
                area = shapeShift.Drawing.getArea();

            image.onload = function() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(this, 0, 0, area.h * 0.6, area.h * 0.6);
                callback(processCanvas());
            };

            image.onerror = function() {
                callback(shapeShift.ShapeBuilder.letter('What?'));
            };

            image.src = url;
        },

        circle: function(d) {
            var r = Math.max(0, d) / 2;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.arc(r * pixelContiner, r * pixelContiner, r * pixelContiner, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.closePath();

            return processCanvas();
        },

        letter: function(text) {
            var s = 0;

            setFontSize(fontSize);
            s = Math.min(fontSize,
                (canvas.width / ctx.measureText(text).width) * 0.8 * fontSize,
                (canvas.height / fontSize) * (isNumber(text) ? 1 : 0.45) * fontSize);
            setFontSize(s);

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillText(text, canvas.width / 2, canvas.height / 2);

            return processCanvas();
        },

        rectangle: function(countW, countH) {
            var dots = [],
                width = pixelContiner * countW,
                height = pixelContiner * countH;

            for (var y = 0; y < height; y += pixelContiner) {
                for (var x = 0; x < width; x += pixelContiner) {
                    dots.push(new shapeShift.Point({
                        x: x,
                        y: y,
                    }));
                }
            }

            return { dots: dots, w: width, h: height };
        }
    };
}());


shapeShift.Shape = (function() {
    var dots = [],
        width = 0,
        height = 0,
        cx = 0,
        cy = 0;

    function compensate() {
        var a = shapeShift.Drawing.getArea();

        cx = a.w / 2 - width / 2;
        cy = a.h / 2 - height / 2;
    }

    return {
        shuffleIdle: function() {
            var a = shapeShift.Drawing.getArea();

            for (var d = 0; d < dots.length; d++) {
                if (!dots[d].s) {
                    dots[d].move({
                        x: Math.random() * a.w,
                        y: Math.random() * a.h
                    });
                }
            }
        },

        switchShape: function(n, fast) {
            var size,
                a = shapeShift.Drawing.getArea(),
                d = 0,
                i = 0;

            width = n.w;
            height = n.h;

            compensate();

            if (n.dots.length > dots.length) {
                size = n.dots.length - dots.length;
                for (d = 1; d <= size; d++) {
                    dots.push(new shapeShift.Dot(a.w / 2, a.h / 2));
                }
            }

            d = 0;

            while (n.dots.length > 0) {
                i = Math.floor(Math.random() * n.dots.length);
                dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11);

                if (dots[d].s) {
                    dots[d].move(new shapeShift.Point({
                        r: Math.random() * 20 + 10,
                        a: Math.random(),
                        h: 18
                    }));
                } else {
                    dots[d].move(new shapeShift.Point({
                        r: Math.random() * pixelRadius + pixelRadius,
                        h: fast ? 18 : 30
                    }));
                }

                dots[d].s = true;
                dots[d].move(new shapeShift.Point({
                    x: n.dots[i].x + cx,
                    y: n.dots[i].y + cy,
                    a: 1,
                    r: pixelRadius,
                    h: 0
                }));

                n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1));
                d++;
            }

            for (i = d; i < dots.length; i++) {
                if (dots[i].s) {
                    dots[i].move(new shapeShift.Point({
                        r: Math.random() * 20 + 10,
                        a: Math.random(),
                        h: 20
                    }));

                    dots[i].s = false;
                    dots[i].e = 0.04;
                    dots[i].move(new shapeShift.Point({
                        x: Math.random() * a.w,
                        y: Math.random() * a.h,
                        a: 0.3, //.4
                        r: Math.random() * 4,
                        h: 0
                    }));
                }
            }
        },

        render: function() {
            for (var d = 0; d < dots.length; d++) {
                dots[d].render();
            }
        }
    };
}());

<div class="help">?</div> 

<div class="ui">
  <input class="ui-input" type="text" />
  <span class="ui-return">↵</span>
</div>

<div class="overlay">
  <div class="tabs">
    <div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div>

    <div class="tabs-panels">
      <ul class="tabs-panel commands">
        <li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li>
        <li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span class="commands-item-action">Demo</span></li>
        <li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li>
        <li class="commands-item"><span class="commands-item-title">Rectangle</span><span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width x height</span></span><span class="commands-item-action">Demo</span></li>
        <li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info" data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span><span class="commands-item-action">Demo</span></li>

        <li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span class="commands-item-mode">command1</span>&nbsp;|<span class="commands-item-mode">command2</span></span><span class="commands-item-action">Demo</span></li>
      </ul>

      <div class="tabs-panel ui-details">
        <div class="ui-details-content">
          <h1>Shape Shifter</h1>
          <p>
            An experiment by <a href="//www.kennethcachia.com" target="_blank">Kenneth Cachia<a/>.<br/>
            <a href="//fortawesome.github.io/Font-Awesome/#icons-new" target="_blank">Font Awesome</a> is being used to render all #icons.
          </p>

          <br/><p>Visit <a href="http://www.kennethcachia.com/shape-shifter/?a=#icon thumbs-up" target="_blank">Shape Shifter</a> to use icons.</p>
        </div>
      </div>

      <div class="tabs-panel ui-share">
        <div class="ui-share-content">
          <h1>Sharing</h1>
          <p>Simply add <em>?a=</em> to the current URL to share any static or animated text. Examples:</p>
          <p>
            <a href="http://www.kennethcachia.com/shape-shifter?a=Hello" target="_blank">www.kennethcachia.com/shape-shifter?a=Hello</a><br/>
            <a href="http://www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3" target="_blank">www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

body {
  font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #79a8ae;
  color: #666;
  font-size: 16px;
  line-height: 1.5em;
  overflow: hidden;
}

h1 {
  color: #111;
  margin: 0 0 12px 0;
  font-size: 24px;
  line-height: 1.5em;
}

p {
  margin: 0 0 10x 0;
}

a {
  color: #888;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
}

a:hover {
  border-bottom-color: #888;
}

body,
.overlay {
  -webkit-perspective: 1000;
  -webkit-perspective-origin-y: 25%;
}

.body--ready {
  /* Ideas
  background: -webkit-linear-gradient(top, #e2b986 -10%, #241c35 140%);
  background: -webkit-linear-gradient(top, #c97369 -40%, #241c35 130%);
  background: -webkit-linear-gradient(top, #fac4c4 -10%, #606386 140%);
  background: -webkit-linear-gradient(top, #519ab0 0%, #414A6D 110%);
  background: -webkit-linear-gradient(top, rgb(129, 0, 170) 0%, rgb(43, 4, 114) 110%);
  background: -webkit-linear-gradient(top, rgb(163, 235, 189) 0%, rgb(16, 93, 145) 110%);
  background: -webkit-linear-gradient(top, rgb(165, 103, 189) 0%, rgb(75, 233, 214) 120%);
  */

  background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
}

.body--ready .overlay {
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -moz-transition: -moz-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -ms-transition: -ms-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -o-transition: -o-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
  transition: transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
}


.ui {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 300px;
  margin-left: -150px;
}

.ui-input {
  width: 100%;
  height: 50px;
  background: none;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  border: none;
  border-bottom: 2px solid white;
}

.ui-input:focus {
  outline: none;
  border: none;
  border-bottom: 2px solid white;
}

.ui-return {
  display: none;
  position: absolute;
  top: 20px;
  right: 0;
  padding: 3px 2px 0 2px;
  font-size: 10px;
  line-height: 10px;
  color: #fff;
  border: 1px solid #fff;
}

.ui--enter .ui-return {
  display: block;
}

.ui--wide {
  width: 76%;
  margin-left: 12%;
  left: 0;
}

.ui--wide .ui-return {
  right: -20px;
}

.help {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 25px;
  height: 25px;
  text-align: center;
  font-size: 13px;
  line-height: 27px;
  font-weight: bold;
  cursor: pointer;
  background: #fff;
  color: #79a8ae;
  opacity: .9;

  -webkit-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -moz-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -ms-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -o-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
}

.help:hover {
  opacity: 1;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 550px;
  height: 490px;
  margin: -260px 0 0 -275px;
  opacity: 0;

  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.overlay--visible {
  opacity: 1;

  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
}

.ui-share,
.ui-details {
  opacity: .9;
  background: #fff;
  z-index: 2;
}

.ui-details-content,
.ui-share-content {
  padding: 100px 50px;
}

.commands {
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: pointer;
}

.commands-item {
  font-size: 12px;
  line-height: 22px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 20px;
  background: #fff;
  margin-top: 1px;
  color: #333;
  opacity: .9;

  -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -moz-transition: -moz-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -ms-transition: -ms-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -o-transition: -o-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  transition: transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
}

.commands-item--gap {
  margin-top: 9px;
}

.commands-item:hover {
  opacity: 1;
}

.commands-item:hover .commands-item-action {
  background: #333;
}

.commands-item a {
  display: inline-block;
}

.commands-item-mode {
  display: inline-block;
  margin-left: 3px;
  font-style: italic;
  color: #ccc;
}

.commands-item-title {
  display: inline-block;
  width: 150px;
}

.commands-item-info {
  display: inline-block;
  width: 300px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
  color: #aaa;
}

.commands-item-action {
  display: inline-block;
  float: right;
  margin-top: 3px;
  text-transform: uppercase;
  font-size: 10px;
  line-height: 10px;
  color: #fff;
  background: #90c9d1;
  padding: 5px 10px 4px 10px;
  border-radius: 3px;
}

.commands-item:first-child {
  margin-top: 0;
}

.twitter-share {
  position: absolute;
  top: 4px;
  right: 20px;
}


.tabs-labels {
  margin-bottom: 9px;
}

.tabs-label {
  display: inline-block;
  background: #fff;
  padding: 10px 20px;
  font-size: 12px;
  line-height: 22px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #333;
  opacity: .5;
  cursor: pointer;
  margin-right: 2px;

  -webkit-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -moz-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -ms-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -o-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
}

.tabs-label:hover {
  opacity: .9;
}

.tabs-label--active {
  opacity: .9;
}

.tabs-panel {
  display: none;
}

.tabs-panel--active {
  display: block;
}

.tab-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.touch .ui-input {
  display: none;
}