View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
Find
→
←
⟲
Replace
⊗
All
Replace
var Neave=Neave||{};(function(d){d.setLangCookie=function(e){if(e.length===2){d.cookie("neave","lang="+e,{expires:7,path:"/"})}};d.cookie=function(h,i,f){if(arguments.length>1&&String(i)!=="[object Object]"){if(i===null||i===undefined){f.expires=-1}if(typeof f.expires==="number"){var k=f.expires,g=f.expires=new Date();g.setDate(g.getDate()+k)}i=String(i);return(document.cookie=[encodeURIComponent(h),"=",f.raw?i:encodeURIComponent(i),f.expires?"; expires="+f.expires.toUTCString():"",f.path?"; path="+f.path:"",f.domain?"; domain="+f.domain:"",f.secure?"; secure":""].join(""))}f=i||{};var e,j=f.raw?function(l){return l}:decodeURIComponent;return(e=new RegExp("(?:^|; )"+encodeURIComponent(h)+"=([^;]*)").exec(document.cookie))?j(e[1]):null};if(!d.cookie("neave")){var c=navigator.userLanguage||navigator.language||"en",b=window.location.pathname||"";if(!!c){c=c.substr(0,2);if(c==="ca"){c="es"}if(c!=="en"&&c!=="es"&&c!=="fr"&&c!=="it"&&c!=="pt"){c="en"}d.setLangCookie(c);var a=(!!b&&b.substr(3,1)==="/")?b.substr(1,2):"en";if(a!==c&&d.cookie("neave")==="lang="+c){window.location.reload()}}}}(Neave));(function(a){a.fn.noisy=function(o){o=a.extend({},a.fn.noisy.defaults,o);var f,m,g=false;try{m="localStorage" in window&&window.localStorage!==null}catch(h){m=false}if(window.JSON&&m){g=localStorage.getItem(window.JSON.stringify(o))}if(g){f=g}else{var e=document.createElement("canvas");if(!e.getContext){f=o.fallback}else{e.width=e.height=o.size;var n=e.getContext("2d"),c=n.createImageData(e.width,e.height),d=o.intensity*Math.pow(o.size,2),b=255*o.opacity;while(d--){var l=~~(Math.random()*e.width),k=~~(Math.random()*e.height),i=(l+k*c.width)*4;var j=d%255;c.data[i]=j;c.data[i+1]=o.monochrome?j:~~(Math.random()*255);c.data[i+2]=o.monochrome?j:~~(Math.random()*255);c.data[i+3]=~~(Math.random()*b)}n.putImageData(c,0,0);f=e.toDataURL("image/png");if(f.indexOf("data:image/png")!=0||a.browser.msie&&a.browser.version.substr(0,1)<9&&f.length>32768){f=o.fallback}}if(window.JSON&&m){localStorage.setItem(window.JSON.stringify(o),f)}}return this.each(function(){a(this).css("background-image","url('"+f+"'),"+a(this).css("background-image"))})};a.fn.noisy.defaults={intensity:1,size:200,opacity:0.04,fallback:"",monochrome:false}})(jQuery);$.fn.buttonClick=function(a){return this.each(function(){$(this).mousedown(function(){this._pressed=true}).mouseup(function(){if(this._pressed){this._pressed=false;a()}}).mouseout(function(){this._pressed=false});this.onselectstart=Neave.preventDefault})};(function(b){var a=navigator.userAgent.toLowerCase();b.staticURL=window.location.hostname==="neave.dev"?"/":"http://static.neave.com/";b.isIE6=/msie [2-6]\./.test(a);b.isIE7=/msie 7\./.test(a);b.isIE8=/msie 8\./.test(a);if(b.isIE6&&b.isIE8){b.isIE6=false}b.isIE9=/msie (9|10)\./.test(a);b.isIE7or8=b.isIE7||b.isIE8;b.isChrome=/chrome/.test(a);b.isFF=/firefox/.test(a);b.isOpera=/opera/.test(a)&&!(/opera mini/.test(a));b.isMac=/mac os/.test(a);b.isAndroid=/android/.test(a);b.isiPad=/iPad/.test(navigator.platform);b.isTouch=!!("ontouchstart" in window);b.hasStorage=!!(window.sessionStorage&&sessionStorage.getItem);b.hasHistory=!!(window.history&&history.pushState);b.hasCanvas=!!window.CanvasRenderingContext2D;b.hasWebGL=(function(){try{var d=document.createElement("canvas"),c=!!(window.WebGLRenderingContext&&(d.getContext("experimental-webgl")||d.getContext("webgl")));d=undefined}catch(f){c=false}return c})();b.swfVersion="9.0.0";b.resizeIEBackground=function(){var d=$(window).height()-50;var c=$("#intro").width();if(d*2<c){d=c/2}else{c=d*2}$("#ie-bg").css({width:c,height:d})};b.trackLink=function(d,e,c){if(_gat){_gat._getTrackerByName()._trackEvent(d,e,c)}};b.preventDefault=function(c){if(c){c.preventDefault()}};b.createApp=function(){};b.startApp=function(){$("#intro-body").delay(50).fadeOut(250,function(){setTimeout(function(){$("#intro").fadeOut(500,function(){$(this).remove();setTimeout(b.createApp,250)})},100)})}}(Neave));$(document).ready(function(){if(Neave.isIE6){return}if(Neave.isTouch){if(Neave.isiPad){$(document).bind("touchmove",Neave.preventDefault)}$("#start").bind("touchend",Neave.startApp)}else{$("#start").buttonClick(Neave.startApp);if(Neave.isIE7or8){$("#intro").resize(Neave.resizeIEBackground);Neave.resizeIEBackground()}}if(!Neave.isiPad&&window.swfobject&&Neave.swfVersion&&!swfobject.hasFlashPlayerVersion(Neave.swfVersion)){$("#intro-text").hide();$("#start").hide();$("#intro-no-flash").removeClass("hidden")}Neave.hasCSS3D=(function(){if(Neave.isChrome){return false}var d=document.createElement("div"),a=false,c=["perspectiveProperty","WebkitPerspective"],b;for(b=c.length;b--;){a=a?a:d.style[c[b]]!==undefined}return a})();$("#intro a").click(function(a){Neave.trackLink("Outbound",a.target.href)})}); var Stats = function () { var j, v, e = 0, n = 2, r = 0, t = Date.now(), o = t, c = t, g = 0, b = 1000, d = 0, u, i, s, h = [ [16, 16, 48], [0, 255, 255] ], f = 0, w = 1000, a = 0, p, l, k, m = [ [16, 48, 16], [0, 255, 0] ]; j = document.createElement("div"); j.style.position = "absolute"; j.style.left = "0px"; j.style.top = "0px"; j.style.cursor = "pointer"; j.style.width = "80px"; j.style.opacity = "0.9"; j.style.zIndex = "10001"; j.addEventListener("mousedown", function (x) { x.preventDefault(); e = (e + 1) % n; if (e == 0) { u.style.display = "block"; p.style.display = "none" } else { u.style.display = "none"; p.style.display = "block" } }, false); u = document.createElement("div"); u.style.textAlign = "left"; u.style.lineHeight = "1.2em"; u.style.backgroundColor = "rgb(" + Math.floor(h[0][0] / 2) + "," + Math.floor(h[0][1] / 2) + "," + Math.floor(h[0][2] / 2) + ")"; u.style.padding = "0 0 3px 3px"; j.appendChild(u); i = document.createElement("div"); i.style.fontFamily = "Helvetica, Arial, sans-serif"; i.style.fontSize = "9px"; i.style.color = "rgb(" + h[1][0] + "," + h[1][1] + "," + h[1][2] + ")"; i.style.fontWeight = "bold"; i.innerHTML = "FPS"; u.appendChild(i); s = document.createElement("div"); s.style.position = "relative"; s.style.width = "74px"; s.style.height = "30px"; s.style.backgroundColor = "rgb(" + h[1][0] + "," + h[1][1] + "," + h[1][2] + ")"; u.appendChild(s); while (s.children.length < 74) { v = document.createElement("span"); v.style.width = "1px"; v.style.height = "30px"; v.style.cssFloat = "left"; v.style.backgroundColor = "rgb(" + h[0][0] + "," + h[0][1] + "," + h[0][2] + ")"; s.appendChild(v) } p = document.createElement("div"); p.style.textAlign = "left"; p.style.lineHeight = "1.2em"; p.style.backgroundColor = "rgb(" + Math.floor(m[0][0] / 2) + "," + Math.floor(m[0][1] / 2) + "," + Math.floor(m[0][2] / 2) + ")"; p.style.padding = "0 0 3px 3px"; p.style.display = "none"; j.appendChild(p); l = document.createElement("div"); l.style.fontFamily = "Helvetica, Arial, sans-serif"; l.style.fontSize = "9px"; l.style.color = "rgb(" + m[1][0] + "," + m[1][1] + "," + m[1][2] + ")"; l.style.fontWeight = "bold"; l.innerHTML = "MS"; p.appendChild(l); k = document.createElement("div"); k.style.position = "relative"; k.style.width = "74px"; k.style.height = "30px"; k.style.backgroundColor = "rgb(" + m[1][0] + "," + m[1][1] + "," + m[1][2] + ")"; p.appendChild(k); while (k.children.length < 74) { v = document.createElement("span"); v.style.width = "1px"; v.style.height = Math.random() * 30 + "px"; v.style.cssFloat = "left"; v.style.backgroundColor = "rgb(" + m[0][0] + "," + m[0][1] + "," + m[0][2] + ")"; k.appendChild(v) } var q = function (y, x) { var z = y.appendChild(y.firstChild); z.style.height = x + "px" }; return { domElement: j, update: function () { t = Date.now(); f = t - o; w = Math.min(w, f); a = Math.max(a, f); l.textContent = f + " MS (" + w + "-" + a + ")"; q(k, Math.min(30, 30 - (f / 200) * 30)); o = t; r++; if (t > c + 1000) { g = Math.round((r * 1000) / (t - c)); b = Math.min(b, g); d = Math.max(d, g); i.textContent = g + " FPS (" + b + "-" + d + ")"; q(s, Math.min(30, 30 - (g / 100) * 30)); c = t; r = 0 } } } }; var WebcamToy = WebcamToy || {}; WebcamToy.Texture = (function () { var c; function b(d) { if (!c) { c = document.createElement("canvas") } c.width = d.width; c.height = d.height; var e = c.getContext("2d"); e.clearRect(0, 0, c.width, c.height); return e } function a(i, g, d, h, f, e) { this.gl = i; this.id = i.createTexture(); this.width = g; this.height = d; this.format = h; this.type = f; i.bindTexture(i.TEXTURE_2D, this.id); i.texParameteri(i.TEXTURE_2D, i.TEXTURE_MAG_FILTER, i.LINEAR); i.texParameteri(i.TEXTURE_2D, i.TEXTURE_MIN_FILTER, i.LINEAR); i.texParameteri(i.TEXTURE_2D, i.TEXTURE_WRAP_S, i.CLAMP_TO_EDGE); i.texParameteri(i.TEXTURE_2D, i.TEXTURE_WRAP_T, i.CLAMP_TO_EDGE); if (e) { this.loadContentsOf(e) } else { if (g && d) { i.texImage2D(i.TEXTURE_2D, 0, this.format, g, d, 0, this.format, this.type, null) } } } a.prototype.loadContentsOf = function (d) { this.gl.bindTexture(this.gl.TEXTURE_2D, this.id); try { this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.format, this.format, this.type, d) } catch (f) {} }; a.prototype.use = function (d) { this.gl.activeTexture(this.gl.TEXTURE0 + (d || 0)); this.gl.bindTexture(this.gl.TEXTURE_2D, this.id) }; a.prototype.drawTo = function (e) { var d = this.gl; d.framebuffer = d.framebuffer || d.createFramebuffer(); d.bindFramebuffer(d.FRAMEBUFFER, d.framebuffer); d.framebufferTexture2D(d.FRAMEBUFFER, d.COLOR_ATTACHMENT0, d.TEXTURE_2D, this.id, 0); d.viewport(0, 0, this.width, this.height); e(); d.bindFramebuffer(d.FRAMEBUFFER, null); return this }; a.prototype.toImage = function (g, f) { new WebcamToy.Shader(this.gl).drawRect(); var e = this.width * this.height * 4, l = new Uint8Array(e), k = b(this), j = k.createImageData(this.width, this.height); this.gl.readPixels(0, 0, this.width, this.height, this.gl.RGBA, this.gl.UNSIGNED_BYTE, l); for (var d = e; d--;) { j.data[d] = l[d] } k.putImageData(j, 0, 0); if (f) { k.translate(this.width, 0); k.scale(-1, 1); k.drawImage(c, 0, 0) } var h = c.toDataURL("image/jpeg", 0.85); g.src = h }; a.prototype.destroy = function () { this.gl.deleteTexture(this.id); this.id = null }; return a })(); var WebcamToy = WebcamToy || {}; WebcamToy.Shader = (function () { var f = "attribute vec2 vertex; attribute vec2 _texCoord; varying vec2 texCoord; void main() { texCoord = _texCoord; gl_Position = vec4(vertex * 2.0 - 1.0, 0.0, 1.0); }", b = "uniform sampler2D texture; varying vec2 texCoord; void main() { gl_FragColor = texture2D(texture, texCoord); }"; function a(g) { return Object.prototype.toString.call(g) === "[object Array]" } function c(g) { return Object.prototype.toString.call(g) === "[object Number]" } function e(j, g, i) { var h = j.createShader(g); j.shaderSource(h, i); j.compileShader(h); if (!j.getShaderParameter(h, j.COMPILE_STATUS)) { throw "Compilation error: " + j.getShaderInfoLog(h) } return h } function d(h, i, g) { this.gl = h; this.vertexAttribute = null; this.texCoordAttribute = null; this.program = h.createProgram(); i = i || f; g = g || b; g = "precision highp float;" + g; h.attachShader(this.program, e(h, h.VERTEX_SHADER, i)); h.attachShader(this.program, e(h, h.FRAGMENT_SHADER, g)); h.linkProgram(this.program); if (!h.getProgramParameter(this.program, h.LINK_STATUS)) { throw "Link error: " + h.getProgramInfoLog(this.program) } } d.prototype.uniforms = function (g) { var k = this.gl; k.useProgram(this.program); for (var i in g) { if (!g.hasOwnProperty(i)) { continue } var h = k.getUniformLocation(this.program, i); if (!h) { continue } var j = g[i]; if (a(j)) { switch (j.length) { case 1: k.uniform1fv(h, new Float32Array(j)); break; case 2: k.uniform2fv(h, new Float32Array(j)); break; case 3: k.uniform3fv(h, new Float32Array(j)); break; case 4: k.uniform4fv(h, new Float32Array(j)); break; case 9: k.uniformMatrix3fv(h, false, new Float32Array(j)); break; case 16: k.uniformMatrix4fv(h, false, new Float32Array(j)); break; default: throw 'Cannot load uniform "' + i + '" of length ' + j.length } } else { if (c(j)) { k.uniform1f(h, j) } else { throw 'Attempted to set uniform "' + i + '" to invalid value ' + (j || "undefined").toString() } } } return this }; d.prototype.paletteTexture = function () { this.gl.useProgram(this.program); this.gl.uniform1i(this.gl.getUniformLocation(this.program, "palette"), 1) }; d.prototype.drawRect = function (k, j, i, h) { var l = this.gl, g = l.getParameter(l.VIEWPORT); j = j ? (j - g[1]) / g[3] : 0; k = k ? (k - g[0]) / g[2] : 0; i = i ? (i - g[0]) / g[2] : 1; h = h ? (h - g[1]) / g[3] : 1; if (!l.vertexBuffer) { l.vertexBuffer = l.createBuffer() } l.bindBuffer(l.ARRAY_BUFFER, l.vertexBuffer); l.bufferData(l.ARRAY_BUFFER, new Float32Array([k, j, k, h, i, j, i, h]), l.STATIC_DRAW); if (!l.texCoordBuffer) { l.texCoordBuffer = l.createBuffer(); l.bindBuffer(l.ARRAY_BUFFER, l.texCoordBuffer); l.bufferData(l.ARRAY_BUFFER, new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]), l.STATIC_DRAW) } if (!this.vertexAttribute) { this.vertexAttribute = l.getAttribLocation(this.program, "vertex"); l.enableVertexAttribArray(this.vertexAttribute) } if (!this.texCoordAttribute) { this.texCoordAttribute = l.getAttribLocation(this.program, "_texCoord"); l.enableVertexAttribArray(this.texCoordAttribute) } l.useProgram(this.program); l.bindBuffer(l.ARRAY_BUFFER, l.vertexBuffer); l.vertexAttribPointer(this.vertexAttribute, 2, l.FLOAT, false, 0, 0); l.bindBuffer(l.ARRAY_BUFFER, l.texCoordBuffer); l.vertexAttribPointer(this.texCoordAttribute, 2, l.FLOAT, false, 0, 0); l.drawArrays(l.TRIANGLE_STRIP, 0, 4) }; d.prototype.destroy = function () { this.gl.deleteProgram(this.program); this.program = null }; return d })(); var WebcamToy = WebcamToy || {}; WebcamToy.Canvas = (function () { var c = ["mirror", "mirrorright", "mirrortop", "mirrorbottom", "mirrorsplit", "upsidedown", "mirrorquad", "kaleidoscope", "tunnel", "spiral", "twist", "dent", "bulge", "wedge", "ripple", "stretch", "outline", "sketch", "crosshatch", "mono", "lomo", "comicbook", "magazine", "blackwhite", "cartoon", "trueblue", "hotpink", "lsd", "xray", "nightvision", "thermal", "neon", "popart", "popbooth"], d = [], g = new Image(), f = new Image(), e = new Image(), b = new Image(); g.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAIAAAC+O+cgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGZJREFUKFOljAEKwCAMA5My9R/+/4PToZPBwLlVC4MjNOQoIyJAguaUlfDI5lu0P/8Lt0p3099DvW5xRZs+a/M9atB5rWUlDBD7lNRXWQkDguSBoDNfLQJyxdHANPUp2zTtW7ZpSp4yY8IBpvJcNAAAAABJRU5ErkJggg=="; f.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAIAAAC+O+cgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAENJREFUKFNjPMOwioHhPyMDA4RkZPjPgETCxYevLBgzMSIQIxKbiQGViywL1kWOLMw6kmWR3EmaLB4PgmUZYeTI4wIAJAIs/xpvDhoAAAAASUVORK5CYII="; e.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAECAIAAADu9naTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIxJREFUeNpiVFBQYBiOQOfnT91fvyAkEDGMKGBsjIJGAW7A8iDh/rD0mLDkWSnJs1+kzv6SPMsgdXZkxerZZwxnweSsswxnpUZTOR7A6LBgeHpMTVgBjtSFFUZWrL4VRkGjAE8NkLBgeOYAYcEHwkIQdIBB6MGIitRn7MbPOYyfcYDI5wqjGQAfAAgwAG0eMAVXDY/3AAAAAElFTkSuQmCC"; b.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAECAIAAADu9naTAAABZklEQVR4XtWRQa7UQAxEq8r9pX+Av2EBh2DNbbkOFwLRNi0rTitBiYgmLFKySs811c5i2D/jkrrkZt3kGm5u6rLjpMCsHppLw4+T+bYe5k2zk2QM7haH0hKKkDbXSjFX1FrJZkWVymtNnX03hftk+Glc59fwVrzmbfC/1fBM8dv3D1yRobVl3oYvK9/WMJMZVqcKXAsztCrPs6cXKtmE+B/izvlKmOJLIYn7FOqQhznU0z3ksJ4+OTvVLK5Or6bjmeKnL19xRUa2MeJ00uZacBrWqs2FK2f3ZQn3ilyHf7OSqW1eo826r2ky9rW6fPR1CfepU13Wlc4FkgskP/6ps0DmMjxTDe8/cEVBd0angzG4M37TjWHlKi4PMQFuCAsXkj0LUU98/2R/8zxR4FaRIQY1HFKQoeSCoKBkctNhspirsBxJJhNQHWQHIELc3fT9d+vIjcr/ILxFmKcfs3m04RHtkPFM/QFBti2L4HU+0gAAAABJRU5ErkJggg=="; function a(i, l, k, h) { if (this.gl) { return } try { this.gl = i.getContext("experimental-webgl", { premultipliedAlpha: false }) } catch (m) { this.gl = null } var n = this.gl; if (!n) { throw "This browser does not support WebGL."; return } var j = n.getExtension("OES_texture_float") ? n.FLOAT : n.UNSIGNED_BYTE; this.name = "normal"; this.source = l; this.width = i.width = k || 800; this.height = i.height = h || 600; this.texture = new WebcamToy.Texture(n, this.width, this.height, n.RGBA, j); this.spareTexture = new WebcamToy.Texture(n, 0, 0, n.RGBA, n.UNSIGNED_BYTE); this.shader = new WebcamToy.Shader(n); this.useMirror(true); this.shaderNum = 0; n.clearColor(0, 0, 0, 1); n.clear(n.COLOR_BUFFER_BIT | n.DEPTH_BUFFER_BIT) } WebcamToy.loadShaders = function (i) { var h = new XMLHttpRequest(); h.onload = function () { var l = h.responseText.split("/*:*/\n"), k = l.length - 1, j; while (k > 0) { k--; j = l[k].substr(3, l[k].indexOf(":*/") - 3); if (j) { d[j] = l[k] } } if (i) { i() } }; h.onerror = function () { console.error("Error loading shaders") }; h.open("GET", "/assets/videoeffects/fs.txt", true); h.send() }; a.prototype.useMirror = function (h) { this.mirror = h; if (this.flippedShader) { this.flippedShader.destroy() } this.flippedShader = new WebcamToy.Shader(this.gl, null, ["uniform sampler2D texture;", "varying vec2 texCoord;", "void main() { gl_FragColor = texture2D(texture, vec2(" + (h ? "1.0 - " : "") + "texCoord.x, 1.0 - texCoord.y)); }"].join("\n")); return this }; a.prototype.draw = function () { var i = this.shader, h = this.uniforms; this.spareTexture.loadContentsOf(this.source); if (this.paletteTexture) { this.paletteTexture.drawTo(function () { i.paletteTexture(this.paletteTexture) }).use(1) } this.texture.drawTo(function () { i.uniforms(h).drawRect() }).use(0); this.flippedShader.drawRect() }; a.prototype.getTexture = function (h) { return new WebcamToy.Texture(this.gl, 0, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, h) }; a.prototype.swapShader = function (i) { var j = i, h = [this.width / 2, this.height / 2]; switch (j) { case "dent": j = "bulge"; break; case "mirrorright": case "mirrortop": case "mirrorbottom": case "mirrorsplit": case "upsidedown": j = "mirror"; break; case "popbooth": j = "popart"; break } if (this.shader) { this.shader.destroy() } this.shader = new WebcamToy.Shader(this.gl, null, d[j] ? "uniform sampler2D texture; uniform vec2 texSize; varying vec2 texCoord;" + d[j] : null); if (this.paletteTexture) { this.paletteTexture.destroy(); this.paletteTexture = null } this.uniforms = { texSize: [this.width, this.height], }; this.name = i || "normal"; switch (i) { case "twist": this.uniforms.center = h; this.uniforms.radius = this.height / 3; this.uniforms.angle = -120 * Math.PI / 180; break; case "dent": this.uniforms.dent = 1; case "bulge": this.uniforms.center = h; this.uniforms.radius = this.height / 3; break; case "comicbook": this.uniforms.center = h; this.uniforms.scale = Math.PI / 4; this.uniforms.angle = Math.PI / 6; break; case "hotpink": this.paletteTexture = this.getTexture(f); break; case "kaleidoscope": this.uniforms.center = [this.width / 2, this.height * 0.9]; this.uniforms.offset = [this.width / 2, this.height / 2]; this.uniforms.angle = Math.PI * 2 / 12; this.uniforms.direction = Math.PI / -2; break; case "lomo": this.uniforms.center = h; this.uniforms.radius = this.width * 0.9; this.uniforms.exposure = 2.5; break; case "magazine": this.uniforms.center = h; this.uniforms.scale = Math.PI / 4; break; case "mirror": this.uniforms.mode = 0; break; case "mirrorright": this.uniforms.mode = 1; break; case "mirrortop": this.uniforms.mode = 2; break; case "mirrorbottom": this.uniforms.mode = 3; break; case "mirrorsplit": this.uniforms.mode = 4; break; case "upsidedown": this.uniforms.mode = 5; break; case "nightvision": this.uniforms.center = h; this.uniforms.radius = this.uniforms.width = this.width / 3.2; break; case "popart": this.paletteTexture = this.getTexture(e); break; case "popbooth": this.paletteTexture = this.getTexture(b); break; case "ripple": this.uniforms.wavelength = 30; this.uniforms.amplitude = 20; this.uniforms.offset = [2.5, 1.5]; break; case "spiral": this.uniforms.center = h; this.uniforms.spiral = [60, 200]; this.uniforms.angle = 4.3; this.uniforms.zoom = 1; break; case "thermal": this.paletteTexture = this.getTexture(g); break; case "tunnel": this.uniforms.center = h; this.uniforms.radius = this.height * 0.2; break; case "wedge": this.uniforms.center = h; break } }; a.prototype.previousShader = function () { this.shaderNum--; if (this.shaderNum < 0) { this.shaderNum = c.length } this.swapShader(c[this.shaderNum - 1]) }; a.prototype.nextShader = function () { this.shaderNum++; this.shaderNum %= c.length + 1; this.swapShader(c[this.shaderNum - 1]) }; a.prototype.getImage = function () { var h = new Image(); this.texture.toImage(h, this.mirror); this.draw(); return h }; a.prototype.destroy = function () { this.texture.destroy(); this.texture = null; this.spareTexture.destroy(); this.spareTexture = null; this.shader.destroy(); this.shader = null; this.uniforms = null; this.gl = null }; return a })(); var WebcamToy = WebcamToy || {}; (function (b) { var d = ["countdown", "capture"], c = []; function a(e) { var f = new Audio(); f.src = "/assets/videoeffects/" + e + ".ogg"; c[e] = f } b.playTrack = function (f, e) { if (window.Audio) { setTimeout(function () { c[f].play() }, e || 0) } }; b.loadAudio = function () { if (window.Audio) { for (var e = d.length; e--;) { a(d[e]) } } } }(WebcamToy)); (function () { var a = 0, b = 0, c = ["ms", "moz", "webkit", "o"]; while (a < c.length && !window.requestAnimationFrame) { window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; a++ } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (g, e) { var f = new Date().getTime(), d = Math.max(0, 1000 / 60 - f + b); setTimeout(g, d); b = f + d } } }()); $.fn.removeButtonClick = function (a) { return this.each(function () { $(this).unbind("mousedown").unbind("mouseup").unbind("mouseout"); this.onselectstart = null }) }; (function (p, s, u) { var ag, f = 0, B = document.createElement("video"), aC, N, am, S = false, V = false, l = "", n = true, W = true, C = $(".twitter .share-posting"), P = $(".facebook .share-posting"), at = P.text(), ah = C.text(), Z, ax = 0, aq, aw = parseInt(localStorage.getItem("downloadCount")) || 1, ab, aa = $("#toy"), K = $("#settings form"), i = $("#button-settings"), G = $("#button-previous"), X = $("#button-next"), k = $("#button-effects"), g = $("#button-capture"), az = $("#button-back"), a = $("#button-download"), ar = $("div.button.twitter"), L = $("div.button.facebook"), v = $("#toy-share-ui footer"), e = $("#prompt-sign-in"), D = $("#photo img"), ac = $("#photo form"), Y = $("#photo input"), w = Y.attr("placeholder"), ae = Y.attr("data-effect-text"), J = "Webcam Toy HTML5", I = { name: "", token: "", secret: "" }, q = { token: "", albumURL: "", albumIsPrivate: true }; var ay = new Stats(); function av(aG, aH, aF, aI, aE) { var aD = aE ? "fade-fast" : "fade-slow"; aH.show().addClass(aD); setTimeout(function () { aH.css("opacity", aG); setTimeout(function () { aH.removeClass(aD); if (!aG) { aH.hide() } if (aI) { aI() } }, aE ? 210 : 410) }, aF || 0) } function x() { ay.update(); f++; f %= 2; if (f) { aC.draw() } if (!B.paused) { requestAnimationFrame(x) } } function c() { aC.draw(); K.hide(); $("#button-effects p").hide(); $(".effect-" + aC.name).show() } function z() { var aD = aa.width(), aF = aa.height(), aE = aD / aF, aG = B.videoWidth, aI = B.videoHeight, aH = (aG / aI) || (4 / 3); if (aE > aH) { N.css({ width: aF * aH, height: aF, "margin-left": aF * aH / -2, "margin-top": aF / -2 }) } else { N.css({ width: aD, height: aD / aH, "margin-left": aD / -2, "margin-top": aD / aH / -2 }) } } function m() { if (S || V) { return } aC.previousShader(); c() } function o() { if (S || V) { return } aC.nextShader(); c() } function E() { B.play(); aC.draw(); x() } function Q() { K.hide(); if (B.paused) { E() } else { B.pause() } } function ai() { if (S || V) { return } aC.useMirror(!aC.mirror).draw() } function ak() { if (S || V) { return } W = !W } function al() { if (S || V) { return } n = !n } function ap() { if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen() } else { if (document.mozCancelFullScreen) { document.mozCancelFullScreen() } else { if (document.oCancelFullScreen) { document.oCancelFullScreen() } } } } function y() { var aD = aa[0]; if (aD.webkitRequestFullScreen) { aD.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT) } else { if (aD.mozRequestFullScreen) { aD.mozRequestFullScreen() } else { if (aD.oRequestFullScreen) { aD.oRequestFullScreen() } } } } function T() { if (document.webkitIsFullScreen) { ap() } else { y() } } function af() { return ab + aw + ".jpg" } function au() { setTimeout(function () { a.removeAttr("href") }, 50) } function d() { V = false; au(); av(0, $("#toy-share-ui"), 30, function () { $("#photo").fadeOut(250, function () { $("#photo").hide().css({ opacity: 1, bottom: 190 }); D.attr("src", "").removeClass("photo-shadow").addClass("rotate-two"); ac.hide()[0].reset(); aj(); $("div.button.twitter p,a.twitter,div.button.facebook p,a.facebook,#toy-share-ui footer p").hide(); am = null; av(0, aa, 200, function () { aa.removeClass("bg-share").addClass("bg-toy"); N.show(); E(); av(1, aa, 0, function () { av(1, $("#toy-ui")) }) }, true) }) }, true) } function h() { if (ax) { p.playTrack("countdown"); $("#toy-countdown").css("visibility", "visible").show().html("<p>" + ax + "</p>"); ax--; setTimeout(h, 900); $("#toy-countdown").delay(400).fadeOut(150) } else { setTimeout(A, 200) } } function ad() { D.addClass("photo-shadow"); if (s.isOpera) { L.hide(); ar.hide(); e.hide() } av(1, $("#toy-share-ui"), 300) } function A() { S = false; V = true; $("#toy-countdown").hide(); if (l === "facebook") { L.removeButtonClick().buttonClick(j).removeClass("button-inactive").show(); $(".facebook .share-post,#prompt-facebook-post").show() } else { if (l === "twitter") { ar.removeButtonClick().buttonClick(b).removeClass("button-inactive").show(); $(".twitter .share-compose,#prompt-twitter-compose").show() } else { $(".share-title,#prompt-disclaimer").show() } } p.playTrack("capture", 125); if (n) { $("#camera-flash").show().delay(250).fadeOut(250, ad) } else { D.hide().delay(150).fadeIn(400, ad) } am = aC.getImage(); $("#toy-ui").hide(); N.hide(); B.pause(); aa.removeClass("bg-toy").addClass("bg-share"); D.attr({ src: am.src, width: aC.width, height: aC.height }); $("#photo").show() } function ao() { if (S || V) { return } K.hide(); av(0, $("#toy-ui"), 0, null, true); ax = W ? 3 : 0; S = true; setTimeout(h, 250) } p.initVideo = function (aD) { navigator.getUserMedia_ = navigator.getUserMedia || navigator.webkitGetUserMedia; if ( !! navigator.getUserMedia_) { navigator.getUserMedia_("video", function (aE) { var aF = window.URL || window.webkitURL; B.src = aF ? aF.createObjectURL(aE) : aE }, function (aE) { console.error("Error #" + aE.code) }) } else { console.warn("This browser does not support HTML5 webcam streaming."); $("#warning").show(); B.src = "/assets/videoeffects/video8." + (s.isFF || s.isOpera ? "ogg" : "mp4") } B.loop = true; B.muted = true; if (aD) { aq = setTimeout(aD, 500); B.addEventListener("canplay", function () { clearTimeout(aq); aD() }) } B.addEventListener("canplay", z) }; p.twitterAuth = function () { if (!I.token) { var aG = 700, aK = window.screenX || 0, aJ = aK ? $(window).width() : screen.availWidth, aI = 520, aD = window.screenY || 0, aF = aD ? $(window).height() : screen.availHeight, aE = aK + (aJ - aG) / 2, aH = aD + (aF - aI) / 2; window.open("http://neave.com/webcam/twitter/", "neavetwitter", "resizable=yes,toolbar=no,scrollbars=yes,status=no,width=" + aG + ",height=" + aI + ",left=" + aE + ",top=" + aH) } else { O() } }; function r() { if (aC.name === "normal" || aC.name === "upsidedown") { return w } var aD = $(".effect-" + aC.name).text(); return aD ? ae.replace("%s", aD) : w } function an(aE) { var aK = atob(aE.split(",")[1]), aD = aE.split(",")[0].split(":")[1].split(";")[0], aI = new ArrayBuffer(aK.length), aF = new Uint8Array(aI), aG, aJ, aH = window.WebKitBlobBuilder || window.MozBlobBuilder || window.BlobBuilder; for (aG = aK.length; aG--;) { aF[aG] = aK.charCodeAt(aG) } aJ = new aH(); aJ.append(aI); return aJ.getBlob(aD) } function t(aD, aE) { aj(); $(".twitter .share-error").show(); console.error("Twitter post error", aD, aE); ar.removeClass("button-inactive").buttonClick(aA) } function M(aD) { aj(); if (aD.statusText === "OK" && aD.responseText) { var aE = $.parseJSON(aD.responseText).id; if (aE) { ar.hide(); $("a.twitter").attr("href", "http://twitter.com/" + I.name + "/status/" + aE).click(function (aF) { s.trackLink("Outbound", aF.target.href) }); $("a.twitter,#prompt-twitter-posted").show(); s.trackLink(J, "Twitter", aC.name) } } else { t() } } function aA() { Y[0].disabled = true; $(".twitter .share-post,.twitter .share-error,#prompt-twitter-post").hide(); C.show(); ar.removeButtonClick().addClass("button-inactive"); U(C, ah, ""); var aE = new FormData(), aD = Y.attr("value"); if (!aD) { aD = r() } aE.append("format", "json"); aE.append("token", I.token); aE.append("secret", I.secret); aE.append("message", aD); aE.append("width", aC.width); aE.append("height", aC.height); aE.append("file", an(am.src)); $.ajax({ url: "http://neave.com/webcam/twitter/tweet.php", data: aE, type: "POST", cache: false, contentType: false, processData: false, statusCode: { 400: t, 401: t, 403: t, 500: t }, complete: M }) } function b() { $("#photo").css("bottom", 250); D.removeClass("rotate-two"); Y.attr("placeholder", r())[0].disabled = false; ac.css("opacity", 0); av(1, ac, 100, null, true); ar.removeButtonClick().buttonClick(aA); $(".twitter .share-compose,#prompt-twitter-compose").hide(); $(".twitter .share-post,#prompt-twitter-post").show() } function O() { if (l === "twitter") { return } l = "twitter"; if (L.is(":visible")) { L.fadeOut(200) } else { L.hide() } ar.fadeOut(200); av(0, e, 0, null, true); av(0, v, 0, function () { ar.removeClass("share-left").addClass("share-center"); ar.delay(250).fadeIn(400); $(".twitter .share-title,#prompt-disclaimer").hide(); $(".twitter .share-compose,#prompt-twitter-compose").show(); av(1, v, 250, null, true); ar.removeButtonClick().buttonClick(b) }, true) } p.twitterUser = function (aF, aG, aD) { if (aF && aG && aD) { I = { name: aF, token: aG, secret: aD }; var aE = $("#prompt-twitter-post"); aE.text(aE.text().replace("@", "@" + aF)); if (V) { O() } } }; function U(aD, aE, aF) { if (aF.length === 3) { aF = "" } else { aF += "." } aD.text(aE + aF); Z = setTimeout(U, 400, aD, aE, aF) } function aj() { clearTimeout(Z); P.hide(); C.hide() } function F(aD, aE) { aj(); $(".facebook .share-error").show(); console.error("Facebook post error", aD, aE); L.removeClass("button-inactive").buttonClick(j) } function H(aD) { aj(); if (aD.statusText === "OK" && aD.responseText && $.parseJSON(aD.responseText).id) { L.hide(); $("a.facebook,#prompt-facebook-posted").show(); p.facebookAlbum(); s.trackLink(J, "Facebook", aC.name) } else { F() } } function j() { $(".facebook .share-post,.facebook .share-error,#prompt-facebook-post").hide(); P.show(); L.removeButtonClick().addClass("button-inactive"); U(P, at, ""); var aD = new FormData(); aD.append("file", an(am.src)); aD.append("access_token", q.token); aD.append("message", r()); $.ajax({ url: "https://graph.facebook.com/me/photos", data: aD, type: "POST", cache: false, contentType: false, processData: false, statusCode: { 400: F, 401: F, 403: F, 500: F }, complete: H }) } function R() { if (l === "facebook") { return } l = "facebook"; if (ar.is(":visible")) { ar.fadeOut(200) } else { ar.hide() } L.fadeOut(200); av(0, e, 0, null, true); av(0, v, 0, function () { L.removeClass("share-right").addClass("share-center"); L.delay(250).fadeIn(400); $(".facebook .share-title,#prompt-disclaimer").hide(); $(".facebook .share-post,#prompt-facebook-post").show(); av(1, v, 250, null, true); L.removeButtonClick().buttonClick(j) }, true) } function aB(aD) { var aE = aD.authResponse ? aD.authResponse.accessToken : ""; if (aD.status === "connected" && aE) { q.token = aE; if (V) { R() } } else { q.token = "" } } p.facebookAuth = function () { if (!q.token) { u.login(function () {}, { scope: "publish_stream, user_photos" }) } else { R() } }; p.facebookStatus = function () { u.getLoginStatus(aB) }; p.facebookAlbum = function () { if (!q.albumURL) { u.api("/me/albums", function (aD) { if (aD.data) { for (var aE = aD.data.length; aE--;) { if (/Webcam Toy/.test(aD.data[aE].name)) { q.albumURL = aD.data[aE].link; q.albumIsPrivate = aD.data[aE].privacy.toLowerCase() !== "everyone"; if (q.albumURL) { var aF = $("a.facebook"); if (!q.albumIsPrivate) { aF.click(function () { s.trackLink("Outbound", q.albumURL) }) } aF.attr("href", q.albumURL) } break } } } }) } }; p.initServices = function () { if (s.isOpera) { return } u.Event.subscribe("auth.statusChange", aB); u.init({ appId: "201969246526783", cookie: true, channelUrl: s.facebookChannelURL, oauth: true }); $.ajax({ url: "http://neave.com/webcam/twitter/verify.php?format=json", dataType: "json", cache: false, success: function (aD) { if (aD.success === 1) { p.twitterUser(aD.n, aD.t, aD.s) } } }) }; p.initUI = function () { if (aC) { return } N = $("#toy-canvas"); try { aC = new p.Canvas(N[0], B, B.videoWidth, B.videoHeight) } catch (aD) { console.error(aD); alert(aD); return }(function () { var aE = ["check.svg", "gear.png", "camera.svg", "twitter.svg", "facebook.svg", "dark-linen.jpg"]; aE.forEach(function (aG) { var aF = new Image(); aF.src = "/assets/videoeffects/" + aG }) }()); G.buttonClick(m); X.buttonClick(o); k.addClass("button-inactive"); g.buttonClick(ao); N.click(function () { K.hide() }); i.buttonClick(function () { K.toggle() }); az.buttonClick(d); ar.buttonClick(p.twitterAuth); L.buttonClick(p.facebookAuth); ac.submit(s.preventDefault); $(".twitter,.facebook").hover(function () { v.stop(true, true).fadeIn(150) }, function () { v.stop(true, true).delay(100).fadeOut(150) }); $("#prompt-disclaimer").show(); $("#setting-mirror").click(function () { aC.useMirror(this.checked).draw() }).mousedown(function () { $('label[for="setting-mirror"]').addClass("settings-active") }).mouseup(function () { $('label[for="setting-mirror"]').removeClass("settings-active") }); $("#setting-square").click(function () {}).mousedown(function () { $('label[for="setting-square"]').addClass("settings-active") }).mouseup(function () { $('label[for="setting-square"]').removeClass("settings-active") }); $("#setting-countdown").click(function () { ak(); this.checked = W }).mousedown(function () { $('label[for="setting-countdown"]').addClass("settings-active") }).mouseup(function () { $('label[for="setting-countdown"]').removeClass("settings-active") }); $("#setting-flash").click(function () { al(); this.checked = n }).mousedown(function () { $('label[for="setting-flash"]').addClass("settings-active") }).mouseup(function () { $('label[for="setting-flash"]').removeClass("settings-active") }); $("#setting-full-screen").click(function () { if (this.checked) { y() } else { ap() } }).mousedown(function () { $('label[for="setting-full-screen"]').addClass("settings-active") }).mouseup(function () { $('label[for="setting-full-screen"]').removeClass("settings-active") }); $('#setting-square,#settings label[for="setting-square"]').hide(); ab = a.attr("download"); ab = ab.substr(0, ab.indexOf(".")); a.click(function () { $(this).attr("download", af()); aw++; localStorage.clear(); localStorage.setItem("downloadCount", aw); s.trackLink(J, "Download", aC.name) }).mousedown(function () { $(this).attr("href", am.src) }).mouseup(au).mouseout(au); $(document).keydown(function (aE) { if (aE.altKey || aE.ctrlKey || aE.shiftKey || aE.metaKey) { return } switch (aE.keyCode) { case 8: if (!Y.is(":focus")) { aE.preventDefault() } break; case 32: g.addClass("button-active"); break; case 37: G.addClass("button-active"); break; case 39: X.addClass("button-active"); break; case 67: $('#setting-countdown,label[for="setting-countdown"]').addClass("settings-active"); break; case 70: $('#setting-flash,label[for="setting-flash"]').addClass("settings-active"); break; case 71: break; case 73: i.addClass("button-active"); break; case 77: $('#setting-mirror,label[for="setting-mirror"]').addClass("settings-active"); break; case 83: break } }).keyup(function (aE) { switch (aE.keyCode) { case 8: if (!Y.is(":focus")) { aE.preventDefault() } break; case 27: ap(); break; case 32: g.removeClass("button-active"); ao(); break; case 37: G.removeClass("button-active"); m(); break; case 39: X.removeClass("button-active"); o(); break; case 67: ak(); $('#setting-countdown,label[for="setting-countdown"]').removeClass("settings-active"); $("#setting-countdown")[0].checked = W; break; case 70: al(); $('#setting-flash,label[for="setting-flash"]').removeClass("settings-active"); $("#setting-flash")[0].checked = n; break; case 71: break; case 73: i.removeClass("button-active"); !S && !V && K.toggle(); break; case 77: ai(); $('#setting-mirror,label[for="setting-mirror"]').removeClass("settings-active"); $("#setting-mirror")[0].checked = aC.mirror; break; case 80: Q(); break; case 83: break } }); $(window).resize(z); s.onMenuToggled = z; $(document).bind("webkitvisibilitychange", function () { if (document.webkitHidden) { B.pause() } }); $("#setting-mirror")[0].checked = aC.mirror; $("#setting-countdown")[0].checked = W; $("#setting-flash")[0].checked = n; $("body").bind("webkitfullscreenchange", function () { $("#setting-full-screen")[0].checked = document.webkitIsFullScreen }).bind("mozfullscreenchange", function () { $("#setting-full-screen")[0].checked = document.mozIsFullScreen }); z(); c(); E(); aa.addClass("bg-toy"); av(1, $("#toy>div"), 0, function () { av(1, $("#toy-ui")) }) } }(WebcamToy, Neave, FB)); (function (a) { a.facebookChannelURL = "http://neave.com/webcam/channel.html"; a.twitterUser = WebcamToy.twitterUser; a.createApp = function () { WebcamToy.loadShaders(function () { WebcamToy.initVideo(function () { $("#app").show(); WebcamToy.initUI() }) }); WebcamToy.loadAudio() }; $(document).ready(function () { if (a.isIE6) { return } //WebcamToy.initServices(); if (!$("body").hasClass("main")) { a.createApp() } }) }(Neave));
<!DOCTYPE html> <html lang="en"> <!-- Made by Paul Neave (neave.com, @neave) using TextMate, a MacBook Pro and the latest web technologies. HTML5 Webcam Toy uses the JavaScript getUserMedia API for webcam access, which is only currently available in these browsers: * Opera Labs Camera - download from http://snapshot.opera.com/labs/camera/ and more info at http://dev.opera.com/articles/view/getusermedia-access-camera-privacy-ui/ * Google Chrome Canary (or Dev) - http://tools.google.com/dlpage/chromesxs - with "Media Stream" flag enabled. Go to chrome://flags in Canary/Dev to enable. If you're looking for an open source alternative, check out: * http://seriouslyjs.org/ * http://evanw.github.com/glfx.js/ * http://camanjs.com/ --> <head> <title>HTML5 Webcam Toy - Photo effects using WebGL and WebRTC getUserMedia</title> <meta charset="utf-8"> </head> <body> <div id="toy"> <div> <canvas id="toy-canvas"></canvas> <div id="toy-countdown"><p> </p></div> <div id="toy-ui"> <div id="settings"> <div id="button-settings" class="button page-color"> <div class="icon"></div> </div> <form> <fieldset> <p><input type="checkbox" id="setting-mirror" value="mirror" class="page-color"><label for="setting-mirror">Mirror</label></p> <p><input type="checkbox" id="setting-square" value="square" class="page-color"><label for="setting-square">Square</label></p> <p><input type="checkbox" id="setting-countdown" value="countdown" class="page-color"><label for="setting-countdown">Countdown</label></p> <p><input type="checkbox" id="setting-flash" value="flash" class="page-color"><label for="setting-flash">Flash</label></p> <p><input type="checkbox" id="setting-full-screen" value="full-screen" class="page-color"><label for="setting-full-screen">Full Screen</label></p> </fieldset> </form> </div> <div id="button-previous" class="button page-color"> <div class="arrow rotate-180"></div> </div> <div id="button-effects" class="button page-color"> <p class="effect-normal">Normal</p> <p class="effect-blackwhite">Black & White</p> <p class="effect-bulge">Bulge</p> <p class="effect-cartoon">Cartoon</p> <p class="effect-comicbook">Comic Book</p> <p class="effect-crosshatch">Crosshatch</p> <p class="effect-dent">Dent</p> <p class="effect-hotpink">Hot Pink</p> <p class="effect-kaleidoscope">Kaleidoscope</p> <p class="effect-lsd">LSD</p> <p class="effect-lomo">Lomo</p> <p class="effect-magazine">Magazine</p> <p class="effect-mirror">Left Mirror</p> <p class="effect-mirrorright">Right Mirror</p> <p class="effect-mirrortop">Top Mirror</p> <p class="effect-mirrorbottom">Bottom Mirror</p> <p class="effect-mirrorsplit">Split Mirror</p> <p class="effect-mirrorquad">Quad Mirror</p> <p class="effect-mono">Mono</p> <p class="effect-neon">Neon</p> <p class="effect-nightvision">Night Vision</p> <p class="effect-outline">Outline</p> <p class="effect-popart">Pop Art</p> <p class="effect-popbooth">Pop Booth</p> <p class="effect-sketch">Sketch</p> <p class="effect-spiral">Spiral</p> <p class="effect-stretch">Stretch</p> <p class="effect-thermal">Thermal</p> <p class="effect-ripple">Ripple</p> <p class="effect-trueblue">True Blue</p> <p class="effect-tunnel">Tunnel</p> <p class="effect-twist">Twist</p> <p class="effect-upsidedown">Upside-Down</p> <p class="effect-wedge">Wedge</p> <p class="effect-xray">X-Ray</p> </div> <div id="button-next" class="button page-color"> <div class="arrow"></div> </div> <div id="capture"> <div id="button-capture" class="button page-color"> <div class="icon"></div> </div> <p>Take a photo</p> </div> </div> <div id="photo"> <img src="" width="800" height="600" alt="" class="rotate-two"> <form> <fieldset> <input type="text" value="" placeholder="Playing with Webcam Toy!" data-effect-text="Playing with the %s effect on Webcam Toy!" maxlength="109" class="photo-shadow"> </fieldset> </form> </div> <div id="toy-share-ui"> <div id="button-back" class="button page-color"> <div class="arrow rotate-180"></div> <p>Go back</p> </div> <div class="button twitter share-left"> <div class="icon"></div> <p class="share-title">Twitter</p> <p class="share-compose">Write a tweet</p> <p class="share-post">Post to Twitter</p> <p class="share-posting">Tweeting</p> <p class="share-error">Please try again!</p> </div> <a href="http://twitter.com/" rel="nofollow" target="_blank" class="button twitter share-center"> <div class="icon"></div> <p>Photo tweeted!</p> </a> <div class="button facebook share-right"> <div class="icon"></div> <p class="share-title">Facebook</p> <p class="share-post">Post to Facebook</p> <p class="share-posting">Posting</p> <p class="share-error">Please try again!</p> </div> <a href="http://www.facebook.com/profile.php?sk=photos" rel="nofollow" target="_blank" class="button facebook share-center"> <div class="icon"></div> <p>Photo posted!</p> </a> <a download="webcam-toy-photo.jpg" rel="nofollow" target="_blank" id="button-download" class="button page-color"> <div class="arrow rotate-90"></div><p>Download</p> </a> <p id="prompt-sign-in">Sign in and share this photo:</p> <footer> <p id="prompt-disclaimer">Webcam Toy does <strong>not</strong> store any of your personal information.</p> <p id="prompt-twitter-compose">Compose a tweet to go with your photo.</p> <p id="prompt-twitter-post">This photo and tweet will be posted to your @ Twitter account.</p> <p id="prompt-twitter-posted">View your photo on Twitter.</p> <p id="prompt-facebook-post">This photo will appear in a separate album on your Facebook page.</p> <p id="prompt-facebook-posted">View your photo on Facebook.</p> </footer> </div> <div id="camera-flash"></div> </div> </div> <p id="warning">Please use <a href="http://tools.google.com/dlpage/chromesxs">Google Chrome Canary</a> and enable the 'Media Stream' flag under chrome://flags</p> <div id="fb-root"></div> <script src="/assets/videoeffects/jquery.1.7.1.js"></script> <script src="//connect.facebook.net/en_US/all.js"></script> </body> </html>
html,body,div,span,object,iframe,h1,h2,h3,p,img,ul,li,article,aside,footer,header,nav,section,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,footer,header,nav,section{display:block}input,select{vertical-align:middle}html{height:100%}body{font:15px sans-serif;line-height:1.25;color:#fff;background-color:#000;overflow:hidden;height:100%}h1,h2,h3{font:oblique 19px Georgia,serif;font-weight:normal;line-height:100%}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;text-decoration:none;color:#fff;background-color:transparent}a:hover,a:active,a:focus{outline:0}a:active{color:#999}a:link{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}ul{list-style:none}.mobile{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}.hidden{display:none;visibility:hidden}.page-color{color:#fff;background-color:#666;background-image:url(/assets/videoeffects/gradient.svg);background-image:-webkit-gradient(linear,left top,left bottom,from(#777),to(#333));background-image:-webkit-linear-gradient(#777,#333);background-image:-moz-linear-gradient(#777,#333);background-image:linear-gradient(#777,#333)}.black-color{background-color:#333;background-image:url(/assets/videoeffects/gradient2.svg);background-image:-webkit-gradient(linear,left top,left bottom,from(#444),to(#181818));background-image:-webkit-linear-gradient(#444,#181818);background-image:-moz-linear-gradient(#444,#181818);background-image:linear-gradient(#444,#181818)}.rotate-90{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.rotate-180{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.rotate-270{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.arrow{width:50px;height:50px;background-position:50%;background-repeat:no-repeat}.arrow,#scroller .arrow{background-image:url(/assets/videoeffects/arrow-light.png)}.dark .arrow{background-image:url(/assets/videoeffects/arrow-dark.png)}.button{position:relative;display:inline-block;height:50px;max-width:320px;margin-top:30px;cursor:pointer;color:#fff;background-color:#333;-webkit-box-shadow:0 10px 15px rgba(0,0,0,0.4);-moz-box-shadow:0 10px 15px rgba(0,0,0,0.4);box-shadow:0 10px 15px rgba(0,0,0,0.4);-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-transition:top 30ms ease-out,-webkit-box-shadow 30ms ease-out;-moz-transition:top 30ms ease-out,-moz-box-shadow 30ms ease-out;transition:top 30ms ease-out,box-shadow 30ms ease-out;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.button:active{color:#fff}.button.dark,.dark .button:active{color:#222}.android .button p{line-height:52px}.button .arrow{float:left}.button p{height:50px;line-height:50px;font-family:Georgia,serif;font-style:oblique;font-size:19px;text-align:left;white-space:nowrap;margin-left:49px;padding-left:16px;padding-right:22px;border-left:1px dashed #111;border-left:1px solid rgba(0,0,0,0.25);pointer-events:none}.button.black-color p{border-left:1px solid #282828}.button:active,.button-active{top:3px;-webkit-box-shadow:inset 0 5px 10px rgba(0,0,0,0.6);-moz-box-shadow:inset 0 5px 10px rgba(0,0,0,0.6);box-shadow:inset 0 5px 10px rgba(0,0,0,0.6)}.button-inactive,.button-inactive:active{top:0;-webkit-box-shadow:0 10px 15px rgba(0,0,0,0.4);-moz-box-shadow:0 10px 15px rgba(0,0,0,0.4);box-shadow:0 10px 15px rgba(0,0,0,0.4);cursor:auto}.button:active:before{position:absolute;display:block;content:"\00a0";top:-3px;width:100%;height:3px}#logo{position:absolute;width:50px;height:50px;z-index:3}#logo div{width:50px;height:50px;background-image:url(/assets/videoeffects/n-light.png)}.dark #logo div{background-image:url(/assets/videoeffects/n-dark.png)}#logo a{display:block;padding:0;margin:0;height:50px;background:0;border:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}#logo a:hover,#logo:focus{background:0}header{position:relative;height:49px;border-bottom:1px solid #282828;background-color:#282828;background-image:url(/assets/videoeffects/gradient-header.svg);background-image:-webkit-gradient(linear,left top,left bottom,from(#444),to(#181818));background-image:-webkit-linear-gradient(#444,#181818);background-image:-moz-linear-gradient(#444,#181818);background-image:linear-gradient(#444,#181818);-webkit-user-select:none;-moz-user-select:none;user-select:none}header:before{position:absolute;left:50px;top:0;width:8px;height:50px;content:"\00a0";background-image:url(/assets/videoeffects/gradient-header-shadow-logo.svg);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0.15)),to(transparent));background-image:-webkit-linear-gradient(left,rgba(0,0,0,0.15),transparent);background-image:-moz-linear-gradient(left,rgba(0,0,0,0.15),transparent);background-image:linear-gradient(left,rgba(0,0,0,0.15),transparent);z-index:4}header h1{position:absolute;left:50px;top:0;padding-left:15px;height:50px;line-height:50px;color:#fff;-webkit-user-select:text;-moz-user-select:text;user-select:text}.mobile header h1{padding-left:15px}.iphone header h1,.iphone .button p{-webkit-text-stroke:.5px #fff}.iphone.dark .button p{-webkit-text-stroke:.2px #222}.app #head-home{position:absolute;right:12px}.mobile #head-home{right:10px}header nav a{display:inline-block;margin-top:10px;padding:6px 10px 0 10px;height:23px;color:#ddd;background-color:#1a1a1a;background-color:rgba(0,0,0,0.4);border-bottom:1px solid #282828;-webkit-font-smoothing:antialiased;-webkit-box-shadow:inset 0 3px 10px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 3px 10px rgba(0,0,0,0.4);box-shadow:inset 0 3px 10px rgba(0,0,0,0.4);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.iphone header nav a,.ipad header nav a{padding-top:5px;padding-bottom:1px}header nav a:hover,header nav a:focus{color:#222;border-bottom:0;background-color:#eee;background-image:url(/assets/videoeffects/gradient-header-item.svg);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ccc));background-image:-webkit-linear-gradient(#fff,#ccc);background-image:-moz-linear-gradient(#fff,#ccc);background-image:linear-gradient(#fff,#ccc);-webkit-box-shadow:0 3px 10px rgba(0,0,0,0.6);-moz-box-shadow:0 3px 10px rgba(0,0,0,0.6);box-shadow:0 3px 10px rgba(0,0,0,0.6)}header nav a:active{opacity:.95;background-color:transparent;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);box-shadow:inset 0 1px 3px rgba(0,0,0,0.5)}#content{position:absolute;left:0;top:50px;right:0;bottom:0;overflow:hidden;background-color:#000;z-index:1}#intro{position:absolute;top:0;width:100%;height:100%;background-position:50% 50%;-webkit-background-size:100% 100%;-moz-background-size:100% 100%;background-size:100% 100%;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-webkit-user-select:text;-moz-user-select:text;user-select:text;text-align:center}#intro-body{position:absolute;width:480px;left:50%;top:50%;margin-left:-240px;margin-top:-145px}.mobile #intro-body{width:100%;left:0;margin-left:0}#intro-body>p{margin-left:auto;margin-right:auto}#intro-text-again{margin-top:-20px}#intro-text-ipad{width:420px}#app>div>div{height:100%}#intro h1{font-size:72px;line-height:96px;color:#fff;background-repeat:no-repeat;background-position:50%;-ms-interpolation-mode:bicubic}#intro-body>p,#ie7 p,#no-js{font-size:17px;line-height:22px;color:#fff;max-width:560px;padding:20px;-webkit-font-smoothing:antialiased}#intro a{text-decoration:underline}#intro a.button{text-decoration:none}#ie7 p,#no-js{color:#c00;background-color:#eee;border:1px solid #ccc}#ie7 a,#no-js a{color:#c00!important;text-decoration:underline}#ie7{padding-bottom:10px}#app{position:absolute;display:none;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}#app-flash{height:100%}#app-bg{position:absolute;top:0;width:100%;height:100%}#intro footer{position:absolute;color:#fff;font-size:17px;bottom:0;left:50%;text-align:center;width:600px;margin:0 0 25px -300px;-webkit-font-smoothing:antialiased;-webkit-user-select:text;-moz-user-select:text;user-select:text}.iphone noscript{display:none}#head-sponsor{position:absolute;width:468px;height:15px;left:50%;top:10px;margin-left:-246px;padding:8px 10px 6px 10px;color:#ddd;background-color:#1a1a1a;background-color:rgba(0,0,0,0.4);border-bottom:1px solid #282828;-webkit-box-shadow:inset 0 3px 10px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 3px 10px rgba(0,0,0,0.4);box-shadow:inset 0 3px 10px rgba(0,0,0,0.4);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.mobile aside{position:absolute;bottom:0;width:100%}#sponsor{position:relative;width:320px;height:50px;margin-left:auto;margin-right:auto}.mobile #content{bottom:50px}#ie-bg{position:absolute;left:0;width:100%;height:100%}.ie6 body{background-color:#080808;background-image:url(/assets/videoeffects/crosshatch.png)}.ie6 header,.ie7 header,.ie8 header{filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr="#444444",endColorStr="#181818")}.ie7 .page-color,.ie8 .page-color{filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr="#999999",endColorStr="#555555")}.ie7 .black-color,.ie8 .black-color{filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr="#444444",endColorStr="#181818")}.ie7 .arrow.rotate-180{filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/images/arrow-light.png'), progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"}.ie7 .dark .arrow.rotate-180{filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/images/arrow-dark.png'), progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"}.ie8 .arrow.rotate-180{margin:16px 0 0 16px;-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/images/arrow-light.png'), progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"}.ie8 .dark .arrow.rotate-180{margin:16px 0 0 16px;-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/images/arrow-dark.png'), progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"}.ie6 #content,.ie6 #intro,.ie7 #intro,.ie8 #intro{position:relative;background-image:none}.ie6 #logo,.ie6 #ie-bg,.ie6 #app-bg{background:0;display:none}.ie6 #content,.ie6 #intro-body{margin-left:0;margin-top:0;left:0;top:0;text-align:left}.ie6 #intro h1{color:#fff;background:0;font-size:60px;height:auto;margin-bottom:10px}.ie6 #intro-body{background:0;width:75%;color:#ddd;padding-top:10px;padding-left:35px}.ie7 #intro-body{margin-top:50px!important}.ie6 #intro-body p{font-size:17px;line-height:21px;margin-bottom:20px}.ie6 #intro a{color:#fff;text-decoration:underline}.ie6 #intro a:active{color:#999}.ie6 header a,.ie6 header a:active,.ie6 #head-sponsor,.ie7 header a,.ie7 header a:active,.ie7 #head-sponsor{background-color:#1a1a1a}.ie6 header a:hover,.ie7 header a:hover{background-color:#eee}.ie6 header a,.ie7 header a,.ie8 header a{padding-top:5px;padding-bottom:1px}.ie6 #head-sponsor,.ie7 #head-sponsor,.ie8 #head-sponsor{padding-top:7px;padding-bottom:7px}.ie7 .button p{text-align:center}@media all and (max-width:930px){#head-sponsor{display:none;visibility:hidden}}@media all and (max-height:590px){#intro footer{display:none;visibility:hidden}}@media all and (min-height:750px){#intro footer{margin-bottom:75px}}@media all and (min-width:931px){#intro-body{width:600px;margin-left:-300px}#intro-body h1{min-width:600px}}@media all and (max-width:480px){#intro-body{width:100%;left:0;margin-left:0}}@media all and (max-width:480px),all and (max-height:480px){#intro-body>p,#no-js{font-size:16px;line-height:20px}#intro-body{margin-top:-100px}#home-by span{display:none;visibility:hidden}#start{margin-top:10px}}@media all and (max-width:280px){#logo,header:before{display:none;visibility:hidden}header h1,.main #head-home{left:0}}@media all and (orientation:landscape),all and (max-height:300px){.mobile header{display:none;visibility:hidden}.mobile #content{top:0;bottom:0}.mobile aside{visibility:hidden;bottom:5px}}@media all and (-webkit-min-device-pixel-ratio:1.5){#logo div{background-image:url(/assets/videoeffects/n-light-2x.png);-webkit-background-size:50px 50px;-moz-background-size:50px 50px;background-size:50px 50px}.dark #logo div{background-image:url(/assets/videoeffects/n-dark-2x.png)}.arrow,#scroller .arrow{background-image:url(/assets/videoeffects/arrow-light-2x.png);-webkit-background-size:18px 18px;-moz-background-size:18px 18px;background-size:18px 18px}.dark .arrow{background-image:url(/assets/videoeffects/arrow-dark-2x.png);-webkit-background-size:18px 18px;-moz-background-size:18px 18px;background-size:18px 18px}} .page-color{background-color:#ff0080;background-image:url(/assets/videoeffects/gradient2.svg);background-image:-webkit-gradient(linear,left top,left bottom,from(#f09),to(#d06));background-image:-webkit-linear-gradient(#f09,#d06);background-image:-moz-linear-gradient(#f09,#d06);background-image:-o-linear-gradient(#f09,#d06);background-image:linear-gradient(#f09,#d06)}.ie7 .page-color,.ie8 .page-color{filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0099",endColorStr="#dd0066")!important}#intro{background-color:#ccc;background-image:url(/assets/videoeffects/gradient3.svg);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#bbb));background-image:-webkit-linear-gradient(#fff,#bbb);background-image:-moz-linear-gradient(#fff,#bbb);background-image:-o-linear-gradient(#fff,#bbb);background-image:linear-gradient(#fff,#bbb)}#ie-bg{background-color:#ddd;filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff",endColorStr="#cccccc")}#intro-bg{position:absolute;left:0;width:100%;height:100%}#intro h1 span,#intro-text span,.intro-effects,#intro-body ul,.app.desktop #start,.app footer,.tablet footer,.mobile footer,#app-store span{display:none}#intro h1{background-image:url(/assets/videoeffects/title.2.png);-webkit-background-size:328px 227px;-moz-background-size:328px 227px;background-size:328px 227px;height:227px;margin-bottom:-20px}#intro-body{margin-top:-250px}.tablet #intro-body{margin-top:-220px}.ie7 #intro-body,.ie8 #intro-body{margin-top:-240px}.ie8 #start{margin-top:15px}#intro-body>p,#intro-body a{color:#222;padding-bottom:10px}#intro-body a:active,#intro footer a:active{color:#666}#intro-photos a{position:absolute;left:50%;top:50%;border:10px solid #fff;width:260px;height:195px;background-color:#fff;-webkit-box-shadow:0 3px 5px rgba(0,0,0,0.25);-moz-box-shadow:0 3px 5px rgba(0,0,0,0.25);box-shadow:0 3px 5px rgba(0,0,0,0.25)}#intro-photos a div{width:260px;height:195px;-webkit-background-size:262px 197px;-moz-background-size:262px 197px;background-size:262px 197px;background-repeat:no-repeat;background-position:50% 50%}.photo1,.photo2,.photo3{margin-left:-540px}.photo4,.photo5,.photo6{margin-left:260px}.photo3,.photo6{margin-top:-320px}.photo2{margin-left:-580px}.photo5{margin-left:300px}.photo2,.photo5{margin-top:-110px}.photo1,.photo4{margin-top:100px}.photo1,.photo3,.photo5{-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-ms-transform:rotate(-3deg);-o-transform:rotate(-3deg);transform:rotate(-3deg)}.photo2,.photo4,.photo6{-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-ms-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg)}.ie6 #intro-photos,.ie7 #intro-photos,.ie8 #intro-photos{display:none;visibility:hidden}#intro footer,#intro footer a{color:#222}#app-store{display:inline-block;width:250px;height:50px;padding:13px;background-image:url(/assets/videoeffects/chrome-store-badge.png);background-position:center;background-repeat:no-repeat}#app-store:active{padding-top:10px}.tablet footer,.mobile footer{display:none}@media all and (min-height:750px) and (min-width:1180px){#intro-body{margin-top:-290px}#intro-photos a{width:320px;height:240px}#intro-photos a div{width:320px;height:240px;-webkit-background-size:322px 242px;-moz-background-size:322px 242px;background-size:322px 242px}.photo1,.photo2,.photo3{margin-left:-620px}.photo4,.photo5,.photo6{margin-left:280px}.photo3,.photo6{margin-top:-385px}.photo2{margin-left:-650px}.photo5{margin-left:310px}.photo2,.photo5{margin-top:-130px}.photo1,.photo4{margin-top:125px}#intro h1{background-image:url(/assets/videoeffects/title-large.2.png);-webkit-background-size:414px 290px;-moz-background-size:414px 290px;background-size:414px 290px;height:290px;margin-bottom:-22px}}@media all and (max-height:590px){#intro-body{margin-top:-190px}}@media all and (max-width:1100px){#intro-photos{display:none;visibility:hidden}}@media all and (max-width:480px),all and (max-height:480px){#intro-body{margin-top:-115px}#intro h1{background-image:url(/assets/videoeffects/title-mobile.2.png);-webkit-background-size:200px 139px;-moz-background-size:200px 139px;background-size:200px 139px;height:139px;margin-bottom:-20px}}@media all and (-webkit-min-device-pixel-ratio:1.5){.mobile #intro h1{background-image:url(/assets/videoeffects/title-mobile-2x.2.png)}} @font-face{font-family:'Museo-700';font-style:normal;font-weight:700;src:url('/assets/videoeffects/museo-700.woff') format('woff'),url('/assets/videoeffects/museo-700.otf') format('opentype'),url('/assets/videoeffects/museo-700.eot') format('embedded-opentype')}#warning{display:none;position:absolute;left:50%;top:10px;width:320px;margin-left:-175px;text-align:center;background-color:rgba(0,0,0,0.75);line-height:20px;border-radius:5px;padding:15px;-webkit-text-stroke:.4px #fff}#warning a{text-decoration:underline}#toy{position:absolute;width:100%;height:100%;-webkit-transition:opacity 400ms linear;-moz-transition:opacity 400ms linear;-o-transition:opacity 400ms linear;transition:opacity 400ms linear}.bg-toy{background-color:#1b191a;background-image:url(/assets/videoeffects/dark-wood.jpg)}.bg-share{background-color:#2a2a2a;background-image:url(/assets/videoeffects/dark-linen.jpg);background-image:-webkit-linear-gradient(rgba(255,255,255,0.2),transparent),url(/assets/videoeffects/dark-linen.jpg);background-image:-moz-linear-gradient(rgba(255,255,255,0.2),transparent),url(/assets/videoeffects/dark-linen.jpg);background-image:-o-linear-gradient(rgba(255,255,255,0.2),transparent),url(/assets/videoeffects/dark-linen.jpg);background-image:linear-gradient(rgba(255,255,255,0.2),transparent),url(/assets/videoeffects/dark-linen.jpg)}.icon{pointer-events:none}#settings p,#capture p{-webkit-text-stroke:.3px #fff;white-space:nowrap}#toy>div,#toy-ui,#toy-share-ui{display:none;opacity:0}#toy .fade-slow{-webkit-transition:opacity 400ms linear;-moz-transition:opacity 400ms linear;-o-transition:opacity 400ms linear;transition:opacity 400ms linear}#toy .fade-fast{-webkit-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;transition:opacity 200ms linear}#toy .button{-webkit-transition:top 20ms ease-out,-webkit-box-shadow 20ms ease-out;-moz-transition:top 20ms ease-out,-moz-box-shadow 20ms ease-out;-o-transition:top 20ms ease-out,-o-box-shadow 20ms ease-out;transition:top 20ms ease-out,box-shadow 20ms ease-out}#toy-canvas{position:absolute;width:800px;height:600px;left:50%;top:50%;margin-left:-400px;margin-right:-300px;box-shadow:0 0 16px 16px rgba(0,0,0,0.5)}#toy-ui{position:absolute;left:50%;bottom:50px;margin-left:-200px;width:350px;height:50px}.button{position:absolute;margin:0}#button-effects{width:230px;left:60px}#button-effects p{margin-left:0;border-left:none;text-align:center;display:none;white-space:nowrap}#button-previous{opacity:.99}#button-next{left:300px}#button-settings{left:-115px}#button-settings .icon{width:50px;height:50px;background-position:50%;background-repeat:no-repeat;background-image:url(/assets/videoeffects/gear.png)}.share-left{margin-left:-175px}.share-right{margin-left:5px}.share-left p,.share-right p{width:82px;text-align:center}.share-center{margin-left:-145px;width:290px}.share-center p{width:202px;text-align:center}.share-compose,.share-post,.share-posting,.share-error,#toy-share-ui footer,a.facebook,a.twitter{display:none}#settings form{display:none;position:absolute;left:-115px;bottom:70px;width:250px;margin-left:-100px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}#settings fieldset{margin:0;padding:4px 8px 4px 4px;border:0;background-color:rgba(0,0,0,0.75);border-radius:8px;margin:0 auto;width:50%;pointer-events:auto}#settings fieldset:after{position:absolute;content:"\00a0";width:0;height:0;margin-left:55px;margin-top:4px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,0.75)}#settings label{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none;height:32px;margin-left:36px;margin-top:-32px;padding:0 8px;top:-4px;line-height:32px;cursor:pointer}#settings input{display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;color:#fff;width:32px;height:32px;margin:4px;padding:0;border:0;border-radius:5px;cursor:pointer;opacity:.99}.settings-active,#settings input:active,#settings label:active{opacity:.75!important}#settings input:checked:after{position:absolute;content:"\00a0";width:32px;height:32px;background-repeat:no-repeat;background-position:7px 8px;background-image:url(/assets/videoeffects/check.svg)}#button-capture{width:100px;left:415px}#button-capture .icon{width:100px;height:48px;background-position:50%;background-repeat:no-repeat;background-image:url(/assets/videoeffects/camera.svg)}#capture p{visibility:hidden;opacity:0;-webkit-transition:visibility 150ms linear,opacity 150ms linear;-moz-transition:visibility 150ms linear,opacity 150ms linear;-o-transition:visibility 150ms linear,opacity 150ms linear;transition:visibility 150ms linear,opacity 150ms linear;-webkit-transition-delay:80ms;-moz-transition-delay:80ms;-o-transition-delay:80ms;transition-delay:80ms;position:relative;left:415px;margin-left:-1px;width:100px;top:-28px;text-align:center;text-shadow:#000 0 0 5px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}#capture:hover p{visibility:visible;opacity:1}#toy-share-ui{position:absolute;left:0;bottom:50px;width:100%;height:50px}#button-back{left:50px}.facebook{left:50%;background-color:#3c5a98;background-image:url(/assets/videoeffects/gradient-facebook.svg);background-image:-webkit-linear-gradient(#6d84b3,#3c5a98);background-image:-moz-linear-gradient(#6d84b3,#3c5a98);background-image:-o-linear-gradient(#6d84b3,#3c5a98);background-image:linear-gradient(#6d84b3,#3c5a98)}.twitter{left:50%;background-color:#3cf;background-image:url(/assets/videoeffects/gradient-twitter.svg);background-image:-webkit-linear-gradient(#6fdbff,#39c);background-image:-moz-linear-gradient(#6fdbff,#39c);background-image:-o-linear-gradient(#6fdbff,#39c);background-image:linear-gradient(#6fdbff,#39c)}.twitter .icon{float:left;width:32px;height:32px;margin:9px;background-image:url(/assets/videoeffects/twitter.svg);background-color:#39c;border-radius:3px}.facebook .icon{float:left;width:32px;height:32px;margin:9px;background-image:url(/assets/videoeffects/facebook.svg);background-color:#3c5a98;border-radius:3px}#button-download{right:50px}#photo{display:none;position:absolute;left:0;top:50px;right:0;bottom:190px;text-align:center;-webkit-transition:bottom 250ms ease-out;-moz-transition:bottom 250ms ease-out;transition:bottom 250ms ease-out}#photo img{display:inline-block;width:auto;min-height:150px;height:100%;border:12px solid #fff;background-color:#fff;-webkit-transition:-webkit-transform 300ms ease-out,-webkit-box-shadow 250ms ease-out;-moz-transition:-moz-transform 300ms ease-out,-moz-box-shadow 250ms ease-out;transition:transform 300ms ease-out,box-shadow 250ms ease-out}#photo form{display:none}#photo fieldset{position:relative;left:50%;top:20px;margin:0 0 0 -280px;width:500px;height:50px;border:0}#photo fieldset:before{position:absolute;content:"\00a0";margin:-10px 0 0 15px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff}#photo input{width:100%;height:50px;padding:0 15px;border:0;font:18px sans-serif;line-height:18px;color:#999;border-radius:8px}#photo input:focus{color:#444;outline:0}.rotate-two{-webkit-transform:rotate(-2deg);-moz-transform:rotate(-2deg);-ms-transform:rotate(-2deg);-o-transform:rotate(-2deg);transform:rotate(-2deg)}.photo-shadow{-webkit-box-shadow:0 15px 30px rgba(0,0,0,0.6);-moz-box-shadow:0 15px 30px rgba(0,0,0,0.6);box-shadow:0 15px 30px rgba(0,0,0,0.6)}#toy-countdown{visibility:hidden;position:absolute;width:280px;height:280px;left:50%;top:50%;margin-left:-140px;margin-top:-108px;font:bold 180px 'Museo-700',sans-serif;text-align:center}#toy-countdown p{width:100%;height:100%;text-shadow:rgba(0,0,0,0.75) 0 2px 32px;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default}#camera-flash{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#fff}#toy-share-ui footer p{display:none;position:absolute;width:100%;bottom:-33px;color:#999;text-align:center;-webkit-font-smoothing:antialiased;text-shadow:rgba(0,0,0,0.4) 0 3px 5px}#prompt-sign-in{position:absolute;width:100%;bottom:65px;text-align:center;-webkit-font-smoothing:antialiased;text-shadow:rgba(0,0,0,0.4) 0 3px 5px}@media all and (min-width:950px) and (min-height:750px){#button-capture,#capture p{left:445px}#button-settings,#settings form{left:-145px}#toy-countdown{margin-top:-145px;font-size:240px}}@media all and (max-width:900px){#button-back{left:25px}#button-download{right:25px}}@media all and (max-width:780px){#settings,.twitter{display:none;visibility:hidden}#toy-ui{margin-left:-258px}.facebook.share-right{margin-left:-85px}}@media all and (max-width:720px){.facebook,#prompt-sign-in,#toy-share-ui footer{display:none;visibility:hidden}}
Pop out
Help
About
×
×