banner ad demo added

2014-02-12 10:33:52 -08:00 · 2014-02-12 10:33:52 -08:00 · f94872941f
parent 4d9fd5ef7a
commit f94872941f
59 changed files with 32078 additions and 0 deletions
--- a/demos/snap-ad/Gruntfile.js
+++ b/demos/snap-ad/Gruntfile.js
@ -0,0 +1,75 @@
+module.exports = function(grunt) {
+
+    var pkg = grunt.file.readJSON("package.json");
+
+    // Project configuration.
+    grunt.initConfig({
+        copy: {
+            main: {
+                files: [
+                    {
+                        expand: true,
+                        cwd: './src/',
+                        src: [
+                            '*',
+                            '!config.rb',
+                            'js/vendor/require.min.js',
+                            'js/vendor/modernizr.min.js'
+                            ],
+                        dest: './site/',
+                        filter: 'isFile'
+                    },
+                    {
+                        expand: true,
+                        cwd: './src',
+                        src: ['assets/**'],
+                        dest: './site/'
+                    }
+                ]
+            }
+        },
+        requirejs: {
+            compile: {
+                options: {
+                    name: "main",
+                    baseUrl: "./src/js/",
+                    mainConfigFile: "./src/js/main.js",
+                    out: "./site/js/main.js"
+                }
+            }
+        },
+        compass: {
+            dist: {
+                options: {
+                    config: './src/config.rb',
+                    sassDir: './src/sass',
+                    cssDir: './site/css'
+                }
+            }
+        },
+        processhtml: {
+            options: {
+                // Task-specific options go here.
+            },
+            dist: {
+                files: {
+                    './site/index.html': ['./site/index.html']
+                }
+            }
+        },
+        inline: {
+            dist: {
+                src: ['./site/index.html'],
+                dest: ['./site/index.min.html']
+            }
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-copy');
+    grunt.loadNpmTasks('grunt-contrib-requirejs');
+    grunt.loadNpmTasks("grunt-contrib-compass");
+    grunt.loadNpmTasks("grunt-processhtml");
+    grunt.loadNpmTasks("grunt-inline");
+
+    grunt.registerTask("default", ["copy", "requirejs", "compass", "processhtml", "inline"]);
+};
--- a/demos/snap-ad/README.md
+++ b/demos/snap-ad/README.md
@ -0,0 +1,13 @@
+snap-ad
+=======
+
+Snap.svg banner ad
+
+run
+`npm install` 
+to add node modules
+
+
+run
+`grunt`
+to build
--- a/demos/snap-ad/SnapAd.tmproj
+++ b/demos/snap-ad/SnapAd.tmproj
@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>currentDocument</key>
+	<string>src/js/app/app.js</string>
+	<key>documents</key>
+	<array>
+		<dict>
+			<key>expanded</key>
+			<true/>
+			<key>name</key>
+			<string>src</string>
+			<key>regexFolderFilter</key>
+			<string>!.*/(\.[^/]*|CVS|_darcs|_MTN|\{arch\}|blib|.*~\.nib|.*\.(framework|app|pbproj|pbxproj|xcode(proj)?|bundle))$</string>
+			<key>sourceDirectory</key>
+			<string>src</string>
+		</dict>
+	</array>
+	<key>fileHierarchyDrawerWidth</key>
+	<integer>185</integer>
+	<key>metaData</key>
+	<dict>
+		<key>src/index.html</key>
+		<dict>
+			<key>caret</key>
+			<dict>
+				<key>column</key>
+				<integer>0</integer>
+				<key>line</key>
+				<integer>17</integer>
+			</dict>
+			<key>columnSelection</key>
+			<false/>
+			<key>firstVisibleColumn</key>
+			<integer>0</integer>
+			<key>firstVisibleLine</key>
+			<integer>3</integer>
+			<key>selectFrom</key>
+			<dict>
+				<key>column</key>
+				<integer>7</integer>
+				<key>line</key>
+				<integer>19</integer>
+			</dict>
+			<key>selectTo</key>
+			<dict>
+				<key>column</key>
+				<integer>0</integer>
+				<key>line</key>
+				<integer>17</integer>
+			</dict>
+		</dict>
+		<key>src/js/app/app.js</key>
+		<dict>
+			<key>caret</key>
+			<dict>
+				<key>column</key>
+				<integer>0</integer>
+				<key>line</key>
+				<integer>222</integer>
+			</dict>
+			<key>firstVisibleColumn</key>
+			<integer>0</integer>
+			<key>firstVisibleLine</key>
+			<integer>199</integer>
+		</dict>
+		<key>src/js/main.js</key>
+		<dict>
+			<key>caret</key>
+			<dict>
+				<key>column</key>
+				<integer>4</integer>
+				<key>line</key>
+				<integer>46</integer>
+			</dict>
+			<key>firstVisibleColumn</key>
+			<integer>0</integer>
+			<key>firstVisibleLine</key>
+			<integer>47</integer>
+		</dict>
+		<key>src/sass/screen.scss</key>
+		<dict>
+			<key>caret</key>
+			<dict>
+				<key>column</key>
+				<integer>2</integer>
+				<key>line</key>
+				<integer>81</integer>
+			</dict>
+			<key>firstVisibleColumn</key>
+			<integer>0</integer>
+			<key>firstVisibleLine</key>
+			<integer>0</integer>
+		</dict>
+	</dict>
+	<key>openDocuments</key>
+	<array>
+		<string>src/index.html</string>
+		<string>src/js/main.js</string>
+		<string>src/sass/screen.scss</string>
+		<string>src/js/app/app.js</string>
+	</array>
+	<key>showFileHierarchyDrawer</key>
+	<true/>
+	<key>windowFrame</key>
+	<string>{{642, 51}, {651, 811}}</string>
+</dict>
+</plist>
--- a/demos/snap-ad/package.json
+++ b/demos/snap-ad/package.json
@ -0,0 +1,19 @@
+{
+  "name": "snapad",
+  "version": "0.0.1",
+  "description": "snap ad",
+  "main": "Gruntfile.js",
+  "repository": {
+    "type": "git"
+  },
+  "author": "CJ Gammon",
+  "license": "Apache License v2",
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-copy": "*",
+    "grunt-contrib-compass": "*",
+    "grunt-contrib-requirejs": "*",
+    "grunt-processhtml": "*",
+    "grunt-inline": "*"
+  }
+}
--- a/demos/snap-ad/site/assets/computer.svg
+++ b/demos/snap-ad/site/assets/computer.svg
@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 648 500" enable-background="new 0 0 648 500" xml:space="preserve">
+<g>
+	<rect x="81.479" y="30.406" fill="#989898" width="485.58" height="345.509"/>
+	<polygon fill="#818181" points="81.479,375.915 6.775,450.619 641.765,450.619 567.06,375.915 	"/>
+	<polygon fill="#676767" points="620.983,469.296 23.345,469.296 4.669,450.619 639.659,450.619 	"/>
+	<rect x="100.156" y="77.096" fill="#0DAE8A" width="448.228" height="261.466"/>
+	<g opacity="0.2">
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_1_" x="81.479" y="30.417" width="485.58" height="345.509"/>
+				</defs>
+				<clipPath id="SVGID_2_">
+					<use xlink:href="#SVGID_1_"  overflow="visible"/>
+				</clipPath>
+				<polygon clip-path="url(#SVGID_2_)" fill="#FFFFFF" points="567.06,95.772 81.479,375.915 81.479,30.406 567.06,30.406 				"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
--- a/demos/snap-ad/site/assets/fonts/OpenSans-Light.ttf
+++ b/demos/snap-ad/site/assets/fonts/OpenSans-Light.ttf
--- a/demos/snap-ad/site/assets/fonts/SourceSansPro-Semibold.ttf
+++ b/demos/snap-ad/site/assets/fonts/SourceSansPro-Semibold.ttf
--- a/demos/snap-ad/site/assets/heart.svg
+++ b/demos/snap-ad/site/assets/heart.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 75.863 60.214" enable-background="new 0 0 75.863 60.214" xml:space="preserve">
+<path fill="#0DAE8A" d="M52.547,0C46.668,0,41.428,2.418,38,6.192C34.572,2.418,29.332,0,23.453,0C13.124,0,0,4.75,0,23.75
+	s38,35.414,38,35.414S76,42.75,76,23.75S62.877,0,52.547,0"/>
+</svg>
--- a/demos/snap-ad/site/assets/phone.svg
+++ b/demos/snap-ad/site/assets/phone.svg
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 56.205 100.385" enable-background="new 0 0 56.205 100.385" xml:space="preserve">
+<g>
+	<path fill="#818181" d="M0,100h56V0H0V100z M52,88H4V12h48V88z"/>
+	<rect x="4" y="12" fill="#0CAE8B" width="48" height="76"/>
+	<g opacity="0.2">
+		<g>
+			<defs>
+				<rect id="SVGID_1_" x="0" y="0.005" width="56" height="88"/>
+			</defs>
+			<clipPath id="SVGID_2_">
+				<use xlink:href="#SVGID_1_"  overflow="visible"/>
+			</clipPath>
+			<polygon clip-path="url(#SVGID_2_)" fill="#FFFFFF" points="56,28 0,88 0,0 56,0 			"/>
+		</g>
+	</g>
+</g>
+</svg>
--- a/demos/snap-ad/site/assets/tablet.svg
+++ b/demos/snap-ad/site/assets/tablet.svg
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 92.103 132.009" enable-background="new 0 0 92.103 132.009" xml:space="preserve">
+<g>
+	<path fill="#818181" d="M0,132h92V0H0V132z M84,116H8V16h76V116z"/>
+	<rect x="8" y="16" fill="#0DAE8A" width="76" height="100"/>
+	<g opacity="0.2">
+		<g>
+			<defs>
+				<rect id="SVGID_1_" x="0" y="0.005" width="92" height="88"/>
+			</defs>
+			<clipPath id="SVGID_2_">
+				<use xlink:href="#SVGID_1_"  overflow="visible"/>
+			</clipPath>
+			<polygon clip-path="url(#SVGID_2_)" fill="#FFFFFF" points="92,28 0,88 0,0 92,0 			"/>
+		</g>
+	</g>
+</g>
+</svg>
--- a/demos/snap-ad/site/backup.jpg
+++ b/demos/snap-ad/site/backup.jpg
--- a/demos/snap-ad/site/css/screen.css
+++ b/demos/snap-ad/site/css/screen.css
@ -0,0 +1,93 @@
+/* line 3, ../../src/sass/screen.scss */
+.base-font {
+  font-family: 'Open Sans', serif;
+}
+
+/* line 7, ../../src/sass/screen.scss */
+.snap-font {
+  font-family: 'Source Sans Pro', serif;
+}
+
+/* line 11, ../../src/sass/screen.scss */
+body {
+  margin: 0;
+  cursor: pointer;
+}
+
+/* line 16, ../../src/sass/screen.scss */
+text {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* line 25, ../../src/sass/screen.scss */
+svg {
+  -webkit-transform-origin: top left;
+  -moz-transform-origin: top left;
+  -ms-transform-origin: top left;
+  -o-transform-origin: top left;
+  transform-origin: top left;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+  transform: scale(1);
+}
+
+/* line 30, ../../src/sass/screen.scss */
+#learn-btn {
+  cursor: pointer;
+}
+/* line 33, ../../src/sass/screen.scss */
+#learn-btn path, #learn-btn text {
+  -webkit-transform: translateY(0);
+  -moz-transform: translateY(0);
+  -ms-transform: translateY(0);
+  -o-transform: translateY(0);
+  transform: translateY(0);
+}
+/* line 39, ../../src/sass/screen.scss */
+#learn-btn:hover path:first-child {
+  fill: #076656;
+}
+/* line 46, ../../src/sass/screen.scss */
+#learn-btn:hover path:nth-child(2) {
+  fill: #7cd1c2;
+}
+/* line 51, ../../src/sass/screen.scss */
+#learn-btn:hover text {
+  fill: #0a9a87;
+}
+/* line 59, ../../src/sass/screen.scss */
+#learn-btn:active path:nth-child(2) {
+  -webkit-transform: translateY(2px);
+  -moz-transform: translateY(2px);
+  -ms-transform: translateY(2px);
+  -o-transform: translateY(2px);
+  transform: translateY(2px);
+}
+/* line 64, ../../src/sass/screen.scss */
+#learn-btn:active text {
+  -webkit-transform: translateY(2px);
+  -moz-transform: translateY(2px);
+  -ms-transform: translateY(2px);
+  -o-transform: translateY(2px);
+  transform: translateY(2px);
+}
+
+/* line 71, ../../src/sass/screen.scss */
+#replay-btn:hover {
+  opacity: 0.5;
+}
+
+/*
+@media (max-width: 400px) {
+	svg{
+		@include transform(scale(0.375));
+	}
+}
+*/
--- a/demos/snap-ad/site/index.html
+++ b/demos/snap-ad/site/index.html
@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<title>Snap! SVG</title>
+		<link href="css/screen.css?__inline=true" media="screen, projection" rel="stylesheet" type="text/css" />
+		<!--[if IE]>
+	        <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+	    <![endif]-->
+	</head>
+	<body>
+		<svg id="ad" width="400" height="400">
+			<g id="meshAContainer">
+				<rect x="0" y="0" width="400" height="400" fill="#efefef"/>
+			</g>
+			
+			<g id="screen1">
+				<text id="text1" x="200" y="130" width="400" 
+					class="base-font"
+					font-weight="100" 
+					font-size="40" 
+					fill="#686868"
+					text-anchor="middle">
+					Screens
+				</text>
+			
+				<text id="text2" x="200" y="300" width="400" 
+					class="base-font"
+					font-weight="100" 
+					font-size="40" 
+					fill="#686868"
+					text-anchor="middle">
+					SVG
+				</text>
+			</g>
+			
+			<text id="text3"
+				class="base-font"
+				font-weight="100" 
+				font-size="50" 
+				fill="white"
+				text-anchor="middle"
+				opacity="0">
+				<tspan x="200" y="180">Make SVG</tspan>
+				<tspan x="200" y="250">a Snap!</tspan>
+			</text>
+			
+			<g id="heart" transform="translate(200, 200)">
+				<path id="heart-shape" fill="#0DAE8A" d="M14.803-28.95c-5.879,0-11.119,2.418-14.547,6.192c-3.428-3.774-8.668-6.192-14.547-6.192c-10.329,0-23.453,4.75-23.453,23.75s38,35.414,38,35.414s38-16.414,38-35.414S25.133-28.95,14.803-28.95"/>
+			</g>
+			
+			<g id="burst" transform="translate(200, 200)" opacity="0">
+				<polygon fill="#FFFFFF" points="0.451,0.063 149.256,-214.94 227.256,-214.94 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 49.256,-214.94 77.256,-214.94 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 -78.328,-214.94 -50.744,-212.273 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 -113.661,209.06 -86.077,211.727 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,-214.94 -213.41,-135.607 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,-39 -213.41,10.334 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,101 -213.41,130.334 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 215.697,21.383 241.697,50.717 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 215.697,-88.617 241.697,-59.283 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 208.691,137.42 207.805,194.354 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 95.256,211.727 61.923,240.194 	"/>
+			</g>
+			
+			<g id="resolve" opacity="0">
+				
+				<g id="replay-btn" transform="translate(345, 10)">
+					<rect fill="transparent" width="48" height="49.5"/>
+					<path fill="#cccccc" d="M25.207,9.594V4.082L12.793,11.25l12.415,7.168v-5.792C31.57,13.466,36.5,18.912,36.5,25.5
+						c0,7.168-5.832,13-13,13s-13-5.832-13-13c0-0.565,0.049-1.118,0.119-1.664l-2.922-0.717C7.58,23.898,7.5,24.689,7.5,25.5
+						c0,8.822,7.178,16,16,16s16-7.178,16-16C39.5,17.255,33.229,10.449,25.207,9.594z"/>
+				</g>
+				
+				<text id="text4"
+					font-weight="100" 
+					fill="#02225d"
+					text-anchor="middle">
+					<tspan x="200" y="100" 
+						class="base-font"
+						font-size="46">
+						with
+					</tspan>
+					<tspan x="200" y="160" 
+						class="snap-font"
+						font-size="70">
+						Snap.svg
+					</tspan>
+				</text>
+				
+				<g id="learn-btn" transform="translate(10, 350)">
+					<path fill="#0B9B87" d="M147.129,37.886c0,3.156-2.558,5.714-5.714,5.714H5.714C2.558,43.6,0,41.042,0,37.886V8.175
+						c0-3.156,2.558-5.714,5.714-5.714h135.702c3.156,0,5.714,2.558,5.714,5.714V37.886z"/>
+					<path fill="#10B29C" d="M147.129,35.425c0,3.156-2.558,5.714-5.714,5.714H5.714C2.558,41.139,0,38.581,0,35.425V5.714
+						C0,2.558,2.558,0,5.714,0h135.702c3.156,0,5.714,2.558,5.714,5.714V35.425z"/>
+					<text x="10" y="30"
+						fill="#FFFFFF" 
+						class="base-font"
+						font-size="22.6026">
+						Learn More
+					</text>
+				</g>
+				
+				<g id="snap-logo" transform="translate(200, 260)">
+					<path id="snap-logo-bottom" fill="#192350" d="M39.197,39.001c0.061,0.246,0.121,0.492,0.182,0.738c-12.801,6.518-39.257,19.54-39.257,19.54
+						s-31.604-14.952-38.953-18.708c6.5-3.264,13.001-6.529,19.502-9.792c6.328,3.094,12.655,6.187,18.985,9.281
+						c6.617-3.305,13.03-6.509,19.442-9.712C25.797,33.232,32.497,36.116,39.197,39.001z"/>
+					<path id="snap-logo-right" fill="#03A69A" d="M39.331-54.922c-0.436-0.191-12.519,6.201-18.125,9.588c0,11.23,0,22.46,0,34.096
+						C15.45-8.229-33.891,16.743-40.257,20.134c0.058,6.744,0.117,13.489,0.175,20.233c0.417,0.068,0.834,0.136,1.25,0.204
+						c6.5-3.264,72.753-37.591,78.221-40.492C39.369-18.255,39.35-36.588,39.331-54.922z"/>
+					<path id="snap-logo-top" fill="#1E2A5A" d="M39.331-54.922c-5.606,3.387-12.519,6.201-18.126,9.588c-7.193-3.185-14.386-6.371-21.719-9.617
+						c-7.287,3.21-14.6,6.432-21.914,9.654c-5.869-2.958-11.739-5.916-17.609-8.874c-0.039-0.239-0.078-0.478-0.117-0.717
+						c12.766-6.485,25.531-12.969,38.297-19.454C11.437-68.06,26.037-61.204,39.331-54.922z"/>
+					<path id="snap-logo-left" fill="#133F68" d="M-22.676-11.256c0-3.489,0-6.949,0-10.408c0-7.878,0.198-15.755,0.346-23.633
+						c-5.869-2.958-11.788-5.916-17.658-8.874c0.003,11.317-0.018,22.635-0.015,33.952c-0.034,6.737-0.081,13.474-0.114,20.21
+						c5.781,2.841,52.704,26.952,59.219,30.356c6.7,2.884,13.397,5.769,20.096,8.654c0.029-6.258,0.134-12.516,0.163-18.773
+						C33.044,16.882-15.406-7.438-22.676-11.256z"/>
+				</g>
+				
+				<g id="adobe-logo" transform="translate(350, 340)">
+					<polygon fill="#787878" points="22.447,0 35.605,0 35.605,31.389 	"/>
+					<polygon fill="#787878" points="13.172,0 0,0 0,31.389 	"/>
+					<polygon fill="#787878" points="17.809,11.565 26.195,31.387 20.698,31.387 18.189,25.074 12.049,25.074 	"/>
+					<g>
+						<path fill="#787878" d="M38.294,0c0.843,0,1.515,0.678,1.515,1.524c0,0.859-0.672,1.538-1.521,1.538S36.75,2.383,36.75,1.524
+							C36.75,0.677,37.438,0,38.288,0H38.294z M38.287,0.259c-0.675,0-1.217,0.567-1.217,1.27c0,0.707,0.542,1.271,1.224,1.271
+							c0.672,0.007,1.212-0.566,1.212-1.271c0-0.702-0.54-1.27-1.212-1.27H38.287z M38.01,2.414H37.7V0.716
+							c0.144-0.025,0.285-0.049,0.512-0.049c0.271,0,0.442,0.053,0.556,0.141c0.094,0.068,0.146,0.188,0.146,0.346
+							c0,0.22-0.142,0.363-0.33,0.411v0.017c0.149,0.026,0.245,0.161,0.277,0.414c0.042,0.265,0.077,0.367,0.105,0.419h-0.311
+							c-0.039-0.052-0.075-0.207-0.112-0.435c-0.035-0.201-0.146-0.286-0.356-0.286h-0.179v0.721L38.01,2.414L38.01,2.414z M38.01,1.458
+							h0.185c0.221,0,0.406-0.074,0.406-0.271c0-0.15-0.107-0.285-0.392-0.285c-0.093,0-0.152,0-0.197,0.005v0.552L38.01,1.458
+							L38.01,1.458z"/>
+					</g>
+					<path fill="#787878" d="M4.782,44.511L4.366,42.05c-0.123-0.715-0.271-1.823-0.382-2.59H3.941c-0.124,0.771-0.294,1.914-0.42,2.596
+						l-0.449,2.456L4.782,44.511L4.782,44.511z M2.847,46.12l-0.541,2.732h-2.01l2.501-11.373h2.457l2.271,11.373H5.507l-0.53-2.732
+						H2.847z"/>
+					<path fill="#787878" d="M12.086,43.77c0-0.147,0-0.329-0.03-0.492c-0.078-0.561-0.381-1.067-0.863-1.067
+						c-0.818,0-1.125,1.188-1.125,2.575c0,1.599,0.437,2.51,1.096,2.51c0.309,0,0.662-0.157,0.854-0.826
+						c0.045-0.131,0.069-0.314,0.069-0.523L12.086,43.77L12.086,43.77z M14.148,37.174v9.318c0,0.743,0.037,1.647,0.067,2.359h-1.779
+						l-0.119-0.947h-0.041c-0.298,0.583-0.948,1.086-1.721,1.086c-1.702,0-2.547-1.874-2.547-4.238c0-2.877,1.263-4.275,2.629-4.275
+						c0.711,0,1.182,0.346,1.415,0.852h0.034v-4.152h2.062C14.148,37.177,14.148,37.174,14.148,37.174z"/>
+					<path fill="#787878" d="M18.428,47.415c0.782,0,0.982-1.474,0.982-2.697c0-1.159-0.2-2.67-1.018-2.67
+						c-0.869,0-1.054,1.511-1.054,2.67c0,1.402,0.232,2.697,1.071,2.697H18.428z M18.387,48.989c-1.889,0-3.081-1.522-3.081-4.238
+						c0-2.963,1.529-4.275,3.127-4.275c1.877,0,3.05,1.592,3.05,4.232c0,3.393-1.838,4.281-3.076,4.281H18.387z"/>
+					<path fill="#787878" d="M24.692,45.907c0,0.204,0.035,0.399,0.078,0.525c0.206,0.693,0.561,0.863,0.837,0.863
+						c0.795,0,1.12-1.004,1.12-2.612c0-1.462-0.343-2.472-1.129-2.472c-0.392,0-0.72,0.423-0.832,0.877
+						c-0.039,0.142-0.074,0.363-0.074,0.521C24.692,43.609,24.692,45.907,24.692,45.907z M22.634,37.174h2.058v4.293h0.032
+						c0.406-0.634,0.945-0.994,1.731-0.994c1.55,0,2.331,1.758,2.331,4.049c0,2.91-1.168,4.467-2.67,4.467
+						c-0.723,0-1.199-0.32-1.631-1.123h-0.042l-0.112,0.986h-1.765c0.03-0.688,0.069-1.616,0.069-2.359v-9.318L22.634,37.174
+						L22.634,37.174z"/>
+					<path fill="#787878" d="M33.712,43.945c0.007-1.161-0.328-1.976-0.982-1.976c-0.749,0-1.064,1.094-1.088,1.976H33.712z
+						 M31.635,45.393c0.024,1.49,0.811,1.978,1.788,1.978c0.623,0,1.153-0.135,1.545-0.287l0.282,1.474
+						c-0.548,0.238-1.393,0.383-2.201,0.383c-2.211,0-3.411-1.498-3.411-4.067c0-2.759,1.394-4.408,3.221-4.408
+						c1.769,0,2.748,1.458,2.748,3.85c0,0.545-0.026,0.85-0.063,1.093L31.635,45.393z"/>
+				</g>
+			</g>
+			
+			<rect id="cover" width="400" height="400" fill="#efefef"/>
+		</svg>
+		<script>
+		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+		  ga('create', 'UA-47561728-1', 'codepen.io');
+		  ga('send', 'pageview');
+
+		</script>
+		
+		<script src="js/vendor/require.min.js?__inline=true"></script>
+		<script src="js/main.js?__inline=true"></script>
+		<script src="http://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
+
+		<script>
+			WebFont.load(WebFontConfig);
+		</script>
+		
+	</body>
+</html>
--- a/demos/snap-ad/site/index.min.html
+++ b/demos/snap-ad/site/index.min.html
--- a/demos/snap-ad/site/js/main.js
+++ b/demos/snap-ad/site/js/main.js
--- a/demos/snap-ad/site/js/vendor/modernizr.min.js
+++ b/demos/snap-ad/site/js/vendor/modernizr.min.js
--- a/demos/snap-ad/site/js/vendor/require.js
+++ b/demos/snap-ad/site/js/vendor/require.js
--- a/demos/snap-ad/site/js/vendor/require.min.js
+++ b/demos/snap-ad/site/js/vendor/require.min.js
@ -0,0 +1,36 @@
+/*
+ RequireJS 2.1.10 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved.
+ Available via the MIT or new BSD license.
+ see: http://github.com/jrburke/requirejs for details
+*/
+var requirejs,require,define;
+(function(ca){function G(b){return"[object Function]"===N.call(b)}function H(b){return"[object Array]"===N.call(b)}function v(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function U(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function s(b,c){return ga.call(b,c)}function j(b,c){return s(b,c)&&b[c]}function B(b,c){for(var d in b)if(s(b,d)&&c(b[d],d))break}function V(b,c,d,g){c&&B(c,function(c,h){if(d||!s(b,h))g&&"object"===typeof c&&c&&!H(c)&&!G(c)&&!(c instanceof
+RegExp)?(b[h]||(b[h]={}),V(b[h],c,d,g)):b[h]=c});return b}function t(b,c){return function(){return c.apply(b,arguments)}}function da(b){throw b;}function ea(b){if(!b)return b;var c=ca;v(b.split("."),function(b){c=c[b]});return c}function C(b,c,d,g){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=g;d&&(c.originalError=d);return c}function ha(b){function c(a,e,b){var f,n,c,d,g,h,i,I=e&&e.split("/");n=I;var m=l.map,k=m&&m["*"];if(a&&"."===a.charAt(0))if(e){n=
+I.slice(0,I.length-1);a=a.split("/");e=a.length-1;l.nodeIdCompat&&R.test(a[e])&&(a[e]=a[e].replace(R,""));n=a=n.concat(a);d=n.length;for(e=0;e<d;e++)if(c=n[e],"."===c)n.splice(e,1),e-=1;else if(".."===c)if(1===e&&(".."===n[2]||".."===n[0]))break;else 0<e&&(n.splice(e-1,2),e-=2);a=a.join("/")}else 0===a.indexOf("./")&&(a=a.substring(2));if(b&&m&&(I||k)){n=a.split("/");e=n.length;a:for(;0<e;e-=1){d=n.slice(0,e).join("/");if(I)for(c=I.length;0<c;c-=1)if(b=j(m,I.slice(0,c).join("/")))if(b=j(b,d)){f=b;
+g=e;break a}!h&&(k&&j(k,d))&&(h=j(k,d),i=e)}!f&&h&&(f=h,g=i);f&&(n.splice(0,g,f),a=n.join("/"))}return(f=j(l.pkgs,a))?f:a}function d(a){z&&v(document.getElementsByTagName("script"),function(e){if(e.getAttribute("data-requiremodule")===a&&e.getAttribute("data-requirecontext")===i.contextName)return e.parentNode.removeChild(e),!0})}function g(a){var e=j(l.paths,a);if(e&&H(e)&&1<e.length)return e.shift(),i.require.undef(a),i.require([a]),!0}function u(a){var e,b=a?a.indexOf("!"):-1;-1<b&&(e=a.substring(0,
+b),a=a.substring(b+1,a.length));return[e,a]}function m(a,e,b,f){var n,d,g=null,h=e?e.name:null,l=a,m=!0,k="";a||(m=!1,a="_@r"+(N+=1));a=u(a);g=a[0];a=a[1];g&&(g=c(g,h,f),d=j(p,g));a&&(g?k=d&&d.normalize?d.normalize(a,function(a){return c(a,h,f)}):c(a,h,f):(k=c(a,h,f),a=u(k),g=a[0],k=a[1],b=!0,n=i.nameToUrl(k)));b=g&&!d&&!b?"_unnormalized"+(Q+=1):"";return{prefix:g,name:k,parentMap:e,unnormalized:!!b,url:n,originalName:l,isDefine:m,id:(g?g+"!"+k:k)+b}}function q(a){var e=a.id,b=j(k,e);b||(b=k[e]=new i.Module(a));
+return b}function r(a,e,b){var f=a.id,n=j(k,f);if(s(p,f)&&(!n||n.defineEmitComplete))"defined"===e&&b(p[f]);else if(n=q(a),n.error&&"error"===e)b(n.error);else n.on(e,b)}function w(a,e){var b=a.requireModules,f=!1;if(e)e(a);else if(v(b,function(e){if(e=j(k,e))e.error=a,e.events.error&&(f=!0,e.emit("error",a))}),!f)h.onError(a)}function x(){S.length&&(ia.apply(A,[A.length,0].concat(S)),S=[])}function y(a){delete k[a];delete W[a]}function F(a,e,b){var f=a.map.id;a.error?a.emit("error",a.error):(e[f]=
+!0,v(a.depMaps,function(f,c){var d=f.id,g=j(k,d);g&&(!a.depMatched[c]&&!b[d])&&(j(e,d)?(a.defineDep(c,p[d]),a.check()):F(g,e,b))}),b[f]=!0)}function D(){var a,e,b=(a=1E3*l.waitSeconds)&&i.startTime+a<(new Date).getTime(),f=[],c=[],h=!1,k=!0;if(!X){X=!0;B(W,function(a){var i=a.map,m=i.id;if(a.enabled&&(i.isDefine||c.push(a),!a.error))if(!a.inited&&b)g(m)?h=e=!0:(f.push(m),d(m));else if(!a.inited&&(a.fetched&&i.isDefine)&&(h=!0,!i.prefix))return k=!1});if(b&&f.length)return a=C("timeout","Load timeout for modules: "+
+f,null,f),a.contextName=i.contextName,w(a);k&&v(c,function(a){F(a,{},{})});if((!b||e)&&h)if((z||fa)&&!Y)Y=setTimeout(function(){Y=0;D()},50);X=!1}}function E(a){s(p,a[0])||q(m(a[0],null,!0)).init(a[1],a[2])}function L(a){var a=a.currentTarget||a.srcElement,e=i.onScriptLoad;a.detachEvent&&!Z?a.detachEvent("onreadystatechange",e):a.removeEventListener("load",e,!1);e=i.onScriptError;(!a.detachEvent||Z)&&a.removeEventListener("error",e,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function M(){var a;
+for(x();A.length;){a=A.shift();if(null===a[0])return w(C("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));E(a)}}var X,$,i,K,Y,l={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},k={},W={},aa={},A=[],p={},T={},ba={},N=1,Q=1;K={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?a.exports:a.exports=p[a.map.id]={}},module:function(a){return a.module?a.module:
+a.module={id:a.map.id,uri:a.map.url,config:function(){return j(l.config,a.map.id)||{}},exports:K.exports(a)}}};$=function(a){this.events=j(aa,a.id)||{};this.map=a;this.shim=j(l.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};$.prototype={init:function(a,e,b,f){f=f||{};if(!this.inited){this.factory=e;if(b)this.on("error",b);else this.events.error&&(b=t(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=b;this.inited=
+!0;this.ignore=f.ignore;f.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,e){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=e)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],t(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
+this.map.url;T[a]||(T[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,e,b=this.map.id;e=this.depExports;var f=this.exports,c=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(G(c)){if(this.events.error&&this.map.isDefine||h.onError!==da)try{f=i.execCb(b,c,e,f)}catch(d){a=d}else f=i.execCb(b,c,e,f);this.map.isDefine&&void 0===f&&((e=this.module)?f=e.exports:this.usingExports&&
+(f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=c;this.exports=f;if(this.map.isDefine&&!this.ignore&&(p[b]=f,h.onResourceLoad))h.onResourceLoad(i,this.map,this.depMaps);y(b);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=
+this.map,b=a.id,d=m(a.prefix);this.depMaps.push(d);r(d,"defined",t(this,function(f){var d,g;g=j(ba,this.map.id);var J=this.map.name,u=this.map.parentMap?this.map.parentMap.name:null,p=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(J=f.normalize(J,function(a){return c(a,u,!0)})||""),f=m(a.prefix+"!"+J,this.map.parentMap),r(f,"defined",t(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),g=j(k,f.id)){this.depMaps.push(f);
+if(this.events.error)g.on("error",t(this,function(a){this.emit("error",a)}));g.enable()}}else g?(this.map.url=i.nameToUrl(g),this.load()):(d=t(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),d.error=t(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(k,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),d.fromText=t(this,function(f,c){var g=a.name,J=m(g),k=O;c&&(f=c);k&&(O=!1);q(J);s(l.config,b)&&(l.config[g]=l.config[b]);try{h.exec(f)}catch(j){return w(C("fromtexteval",
+"fromText eval for "+b+" failed: "+j,j,[b]))}k&&(O=!0);this.depMaps.push(J);i.completeLoad(g);p([g],d)}),f.load(a.name,p,d,l))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){W[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,t(this,function(a,b){var c,f;if("string"===typeof a){a=m(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=j(K,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;r(a,"defined",t(this,function(a){this.defineDep(b,
+a);this.check()}));this.errback&&r(a,"error",t(this,this.errback))}c=a.id;f=k[c];!s(K,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,t(this,function(a){var b=j(k,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:l,contextName:b,registry:k,defined:p,urlFetched:T,defQueue:A,Module:$,makeModuleMap:m,
+nextTick:h.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=l.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(l[b]||(l[b]={}),V(l[b],a,!0,!0)):l[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(ba[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);b[c]=a}),l.shim=b);a.packages&&v(a.packages,function(a){var b,
+a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(l.paths[b]=a.location);l.pkgs[b]=a.name+"/"+(a.main||"main").replace(ja,"").replace(R,"")});B(k,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=m(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ca,arguments));return b||a.exports&&ea(a.exports)}},makeRequire:function(a,e){function g(f,c,d){var j,l;e.enableBuildCallback&&(c&&G(c))&&(c.__requireJsBuild=
+!0);if("string"===typeof f){if(G(c))return w(C("requireargs","Invalid require call"),d);if(a&&s(K,f))return K[f](k[a.id]);if(h.get)return h.get(i,f,a,g);j=m(f,a,!1,!0);j=j.id;return!s(p,j)?w(C("notloaded",'Module name "'+j+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):p[j]}M();i.nextTick(function(){M();l=q(m(null,a));l.skipMap=e.skipMap;l.init(f,c,d,{enabled:!0});D()});return g}e=e||{};V(g,{isBrowser:z,toUrl:function(b){var e,d=b.lastIndexOf("."),g=b.split("/")[0];if(-1!==
+d&&(!("."===g||".."===g)||1<d))e=b.substring(d,b.length),b=b.substring(0,d);return i.nameToUrl(c(b,a&&a.id,!0),e,!0)},defined:function(b){return s(p,m(b,a,!1,!0).id)},specified:function(b){b=m(b,a,!1,!0).id;return s(p,b)||s(k,b)}});a||(g.undef=function(b){x();var c=m(b,a,!0),e=j(k,b);d(b);delete p[b];delete T[c.url];delete aa[b];U(A,function(a,c){a[0]===b&&A.splice(c,1)});e&&(e.events.defined&&(aa[b]=e.events),y(b))});return g},enable:function(a){j(k,a.id)&&q(a).enable()},completeLoad:function(a){var b,
+c,f=j(l.shim,a)||{},d=f.exports;for(x();A.length;){c=A.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);E(c)}c=j(k,a);if(!b&&!s(p,a)&&c&&!c.inited){if(l.enforceDefine&&(!d||!ea(d)))return g(a)?void 0:w(C("nodefine","No define call for "+a,null,[a]));E([a,f.deps||[],f.exportsFn])}D()},nameToUrl:function(a,b,c){var f,d,g;(f=j(l.pkgs,a))&&(a=f);if(f=j(ba,a))return i.nameToUrl(f,b,c);if(h.jsExtRegExp.test(a))f=a+(b||"");else{f=l.paths;a=a.split("/");for(d=a.length;0<d;d-=1)if(g=a.slice(0,
+d).join("/"),g=j(f,g)){H(g)&&(g=g[0]);a.splice(0,d,g);break}f=a.join("/");f+=b||(/^data\:|\?/.test(f)||c?"":".js");f=("/"===f.charAt(0)||f.match(/^[\w\+\.\-]+:/)?"":l.baseUrl)+f}return l.urlArgs?f+((-1===f.indexOf("?")?"?":"&")+l.urlArgs):f},load:function(a,b){h.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ka.test((a.currentTarget||a.srcElement).readyState))P=null,a=L(a),i.completeLoad(a.id)},onScriptError:function(a){var b=L(a);if(!g(b.id))return w(C("scripterror",
+"Script error for: "+b.id,a,[b.id]))}};i.require=i.makeRequire();return i}var h,x,y,D,L,E,P,M,q,Q,la=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,ma=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,R=/\.js$/,ja=/^\.\//;x=Object.prototype;var N=x.toString,ga=x.hasOwnProperty,ia=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),fa=!z&&"undefined"!==typeof importScripts,ka=z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,
+Z="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),F={},r={},S=[],O=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(G(requirejs))return;r=requirejs;requirejs=void 0}"undefined"!==typeof require&&!G(require)&&(r=require,require=void 0);h=requirejs=function(b,c,d,g){var u,m="_";!H(b)&&"string"!==typeof b&&(u=b,H(c)?(b=c,c=d,d=g):b=[]);u&&u.context&&(m=u.context);(g=j(F,m))||(g=F[m]=h.s.newContext(m));u&&g.configure(u);return g.require(b,c,d)};h.config=function(b){return h(b)};
+h.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=h);h.version="2.1.10";h.jsExtRegExp=/^\/|:|\?|\.js$/;h.isBrowser=z;x=h.s={contexts:F,newContext:ha};h({});v(["toUrl","undef","defined","specified"],function(b){h[b]=function(){var c=F._;return c.require[b].apply(c,arguments)}});if(z&&(y=x.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))y=x.head=D.parentNode;h.onError=da;h.createNode=function(b){var c=
+b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};h.load=function(b,c,d){var g=b&&b.config||{};if(z)return g=h.createNode(g,c,d),g.setAttribute("data-requirecontext",b.contextName),g.setAttribute("data-requiremodule",c),g.attachEvent&&!(g.attachEvent.toString&&0>g.attachEvent.toString().indexOf("[native code"))&&!Z?(O=!0,g.attachEvent("onreadystatechange",b.onScriptLoad)):
+(g.addEventListener("load",b.onScriptLoad,!1),g.addEventListener("error",b.onScriptError,!1)),g.src=d,M=g,D?y.insertBefore(g,D):y.appendChild(g),M=null,g;if(fa)try{importScripts(d),b.completeLoad(c)}catch(j){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,j,[c]))}};z&&!r.skipDataMain&&U(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(L=b.getAttribute("data-main"))return q=L,r.baseUrl||(E=q.split("/"),q=E.pop(),Q=E.length?E.join("/")+"/":"./",r.baseUrl=
+Q),q=q.replace(R,""),h.jsExtRegExp.test(q)&&(q=L),r.deps=r.deps?r.deps.concat(q):[q],!0});define=function(b,c,d){var g,h;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(la,"").replace(ma,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(O){if(!(g=M))P&&"interactive"===P.readyState||U(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return P=b}),g=P;g&&(b||
+(b=g.getAttribute("data-requiremodule")),h=F[g.getAttribute("data-requirecontext")])}(h?h.defQueue:S).push([b,c,d])};define.amd={jQuery:!0};h.exec=function(b){return eval(b)};h(r)}})(this);
--- a/demos/snap-ad/src/.sass-cache/7eb2e4ecfecd432261de95f74b5302c6e0956ac9/screen.scssc
+++ b/demos/snap-ad/src/.sass-cache/7eb2e4ecfecd432261de95f74b5302c6e0956ac9/screen.scssc
--- a/demos/snap-ad/src/assets/computer.svg
+++ b/demos/snap-ad/src/assets/computer.svg
@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 648 500" enable-background="new 0 0 648 500" xml:space="preserve">
+<g>
+	<rect x="81.479" y="30.406" fill="#989898" width="485.58" height="345.509"/>
+	<polygon fill="#818181" points="81.479,375.915 6.775,450.619 641.765,450.619 567.06,375.915 	"/>
+	<polygon fill="#676767" points="620.983,469.296 23.345,469.296 4.669,450.619 639.659,450.619 	"/>
+	<rect x="100.156" y="77.096" fill="#0DAE8A" width="448.228" height="261.466"/>
+	<g opacity="0.2">
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_1_" x="81.479" y="30.417" width="485.58" height="345.509"/>
+				</defs>
+				<clipPath id="SVGID_2_">
+					<use xlink:href="#SVGID_1_"  overflow="visible"/>
+				</clipPath>
+				<polygon clip-path="url(#SVGID_2_)" fill="#FFFFFF" points="567.06,95.772 81.479,375.915 81.479,30.406 567.06,30.406 				"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
--- a/demos/snap-ad/src/assets/fonts/OpenSans-Light.ttf
+++ b/demos/snap-ad/src/assets/fonts/OpenSans-Light.ttf
--- a/demos/snap-ad/src/assets/fonts/SourceSansPro-Semibold.ttf
+++ b/demos/snap-ad/src/assets/fonts/SourceSansPro-Semibold.ttf
--- a/demos/snap-ad/src/assets/heart.svg
+++ b/demos/snap-ad/src/assets/heart.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 75.863 60.214" enable-background="new 0 0 75.863 60.214" xml:space="preserve">
+<path fill="#0DAE8A" d="M52.547,0C46.668,0,41.428,2.418,38,6.192C34.572,2.418,29.332,0,23.453,0C13.124,0,0,4.75,0,23.75
+	s38,35.414,38,35.414S76,42.75,76,23.75S62.877,0,52.547,0"/>
+</svg>
--- a/demos/snap-ad/src/assets/phone.svg
+++ b/demos/snap-ad/src/assets/phone.svg
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 56.205 100.385" enable-background="new 0 0 56.205 100.385" xml:space="preserve">
+<g>
+	<path fill="#818181" d="M0,100h56V0H0V100z M52,88H4V12h48V88z"/>
+	<rect x="4" y="12" fill="#0CAE8B" width="48" height="76"/>
+	<g opacity="0.2">
+		<g>
+			<defs>
+				<rect id="SVGID_1_" x="0" y="0.005" width="56" height="88"/>
+			</defs>
+			<clipPath id="SVGID_2_">
+				<use xlink:href="#SVGID_1_"  overflow="visible"/>
+			</clipPath>
+			<polygon clip-path="url(#SVGID_2_)" fill="#FFFFFF" points="56,28 0,88 0,0 56,0 			"/>
+		</g>
+	</g>
+</g>
+</svg>
--- a/demos/snap-ad/src/assets/tablet.svg
+++ b/demos/snap-ad/src/assets/tablet.svg
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 92.103 132.009" enable-background="new 0 0 92.103 132.009" xml:space="preserve">
+<g>
+	<path fill="#818181" d="M0,132h92V0H0V132z M84,116H8V16h76V116z"/>
+	<rect x="8" y="16" fill="#0DAE8A" width="76" height="100"/>
+	<g opacity="0.2">
+		<g>
+			<defs>
+				<rect id="SVGID_1_" x="0" y="0.005" width="92" height="88"/>
+			</defs>
+			<clipPath id="SVGID_2_">
+				<use xlink:href="#SVGID_1_"  overflow="visible"/>
+			</clipPath>
+			<polygon clip-path="url(#SVGID_2_)" fill="#FFFFFF" points="92,28 0,88 0,0 92,0 			"/>
+		</g>
+	</g>
+</g>
+</svg>
--- a/demos/snap-ad/src/backup.jpg
+++ b/demos/snap-ad/src/backup.jpg
--- a/demos/snap-ad/src/config.rb
+++ b/demos/snap-ad/src/config.rb
@ -0,0 +1,24 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "assets/images"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
--- a/demos/snap-ad/src/css/screen.css
+++ b/demos/snap-ad/src/css/screen.css
@ -0,0 +1,93 @@
+/* line 3, ../sass/screen.scss */
+.base-font {
+  font-family: 'Open Sans', serif;
+}
+
+/* line 7, ../sass/screen.scss */
+.snap-font {
+  font-family: 'Source Sans Pro', serif;
+}
+
+/* line 11, ../sass/screen.scss */
+body {
+  margin: 0;
+  cursor: pointer;
+}
+
+/* line 16, ../sass/screen.scss */
+text {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* line 25, ../sass/screen.scss */
+svg {
+  -webkit-transform-origin: top left;
+  -moz-transform-origin: top left;
+  -ms-transform-origin: top left;
+  -o-transform-origin: top left;
+  transform-origin: top left;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+  transform: scale(1);
+}
+
+/* line 30, ../sass/screen.scss */
+#learn-btn {
+  cursor: pointer;
+}
+/* line 33, ../sass/screen.scss */
+#learn-btn path, #learn-btn text {
+  -webkit-transform: translateY(0);
+  -moz-transform: translateY(0);
+  -ms-transform: translateY(0);
+  -o-transform: translateY(0);
+  transform: translateY(0);
+}
+/* line 39, ../sass/screen.scss */
+#learn-btn:hover path:first-child {
+  fill: #076656;
+}
+/* line 46, ../sass/screen.scss */
+#learn-btn:hover path:nth-child(2) {
+  fill: #7cd1c2;
+}
+/* line 51, ../sass/screen.scss */
+#learn-btn:hover text {
+  fill: #0a9a87;
+}
+/* line 59, ../sass/screen.scss */
+#learn-btn:active path:nth-child(2) {
+  -webkit-transform: translateY(2px);
+  -moz-transform: translateY(2px);
+  -ms-transform: translateY(2px);
+  -o-transform: translateY(2px);
+  transform: translateY(2px);
+}
+/* line 64, ../sass/screen.scss */
+#learn-btn:active text {
+  -webkit-transform: translateY(2px);
+  -moz-transform: translateY(2px);
+  -ms-transform: translateY(2px);
+  -o-transform: translateY(2px);
+  transform: translateY(2px);
+}
+
+/* line 71, ../sass/screen.scss */
+#replay-btn:hover {
+  opacity: 0.5;
+}
+
+/*
+@media (max-width: 400px) {
+	svg{
+		@include transform(scale(0.375));
+	}
+}
+*/
--- a/demos/snap-ad/src/index.html
+++ b/demos/snap-ad/src/index.html
@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<title>Snap! SVG</title>
+		<link href="css/screen.css?__inline=true" media="screen, projection" rel="stylesheet" type="text/css" />
+		<!--[if IE]>
+	        <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+	    <![endif]-->
+	</head>
+	<body>
+		<svg id="ad" width="400" height="400">
+			<g id="meshAContainer">
+				<rect x="0" y="0" width="400" height="400" fill="#efefef"/>
+			</g>
+			
+			<g id="screen1">
+				<text id="text1" x="200" y="130" width="400" 
+					class="base-font"
+					font-weight="100" 
+					font-size="40" 
+					fill="#686868"
+					text-anchor="middle">
+					Screens
+				</text>
+			
+				<text id="text2" x="200" y="300" width="400" 
+					class="base-font"
+					font-weight="100" 
+					font-size="40" 
+					fill="#686868"
+					text-anchor="middle">
+					SVG
+				</text>
+			</g>
+			
+			<text id="text3"
+				class="base-font"
+				font-weight="100" 
+				font-size="50" 
+				fill="white"
+				text-anchor="middle"
+				opacity="0">
+				<tspan x="200" y="180">Make SVG</tspan>
+				<tspan x="200" y="250">a Snap!</tspan>
+			</text>
+			
+			<g id="heart" transform="translate(200, 200)">
+				<path id="heart-shape" fill="#0DAE8A" d="M14.803-28.95c-5.879,0-11.119,2.418-14.547,6.192c-3.428-3.774-8.668-6.192-14.547-6.192c-10.329,0-23.453,4.75-23.453,23.75s38,35.414,38,35.414s38-16.414,38-35.414S25.133-28.95,14.803-28.95"/>
+			</g>
+			
+			<g id="burst" transform="translate(200, 200)" opacity="0">
+				<polygon fill="#FFFFFF" points="0.451,0.063 149.256,-214.94 227.256,-214.94 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 49.256,-214.94 77.256,-214.94 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 -78.328,-214.94 -50.744,-212.273 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 -113.661,209.06 -86.077,211.727 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,-214.94 -213.41,-135.607 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,-39 -213.41,10.334 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,101 -213.41,130.334 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 215.697,21.383 241.697,50.717 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 215.697,-88.617 241.697,-59.283 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 208.691,137.42 207.805,194.354 	"/>
+				<polygon fill="#FFFFFF" points="0.451,0.063 95.256,211.727 61.923,240.194 	"/>
+			</g>
+			
+			<g id="resolve" opacity="0">
+				
+				<g id="replay-btn" transform="translate(345, 10)">
+					<rect fill="transparent" width="48" height="49.5"/>
+					<path fill="#cccccc" d="M25.207,9.594V4.082L12.793,11.25l12.415,7.168v-5.792C31.57,13.466,36.5,18.912,36.5,25.5
+						c0,7.168-5.832,13-13,13s-13-5.832-13-13c0-0.565,0.049-1.118,0.119-1.664l-2.922-0.717C7.58,23.898,7.5,24.689,7.5,25.5
+						c0,8.822,7.178,16,16,16s16-7.178,16-16C39.5,17.255,33.229,10.449,25.207,9.594z"/>
+				</g>
+				
+				<text id="text4"
+					font-weight="100" 
+					fill="#02225d"
+					text-anchor="middle">
+					<tspan x="200" y="100" 
+						class="base-font"
+						font-size="46">
+						with
+					</tspan>
+					<tspan x="200" y="160" 
+						class="snap-font"
+						font-size="70">
+						Snap.svg
+					</tspan>
+				</text>
+				
+				<g id="learn-btn" transform="translate(10, 350)">
+					<path fill="#0B9B87" d="M147.129,37.886c0,3.156-2.558,5.714-5.714,5.714H5.714C2.558,43.6,0,41.042,0,37.886V8.175
+						c0-3.156,2.558-5.714,5.714-5.714h135.702c3.156,0,5.714,2.558,5.714,5.714V37.886z"/>
+					<path fill="#10B29C" d="M147.129,35.425c0,3.156-2.558,5.714-5.714,5.714H5.714C2.558,41.139,0,38.581,0,35.425V5.714
+						C0,2.558,2.558,0,5.714,0h135.702c3.156,0,5.714,2.558,5.714,5.714V35.425z"/>
+					<text x="10" y="30"
+						fill="#FFFFFF" 
+						class="base-font"
+						font-size="22.6026">
+						Learn More
+					</text>
+				</g>
+				
+				<g id="snap-logo" transform="translate(200, 260)">
+					<path id="snap-logo-bottom" fill="#192350" d="M39.197,39.001c0.061,0.246,0.121,0.492,0.182,0.738c-12.801,6.518-39.257,19.54-39.257,19.54
+						s-31.604-14.952-38.953-18.708c6.5-3.264,13.001-6.529,19.502-9.792c6.328,3.094,12.655,6.187,18.985,9.281
+						c6.617-3.305,13.03-6.509,19.442-9.712C25.797,33.232,32.497,36.116,39.197,39.001z"/>
+					<path id="snap-logo-right" fill="#03A69A" d="M39.331-54.922c-0.436-0.191-12.519,6.201-18.125,9.588c0,11.23,0,22.46,0,34.096
+						C15.45-8.229-33.891,16.743-40.257,20.134c0.058,6.744,0.117,13.489,0.175,20.233c0.417,0.068,0.834,0.136,1.25,0.204
+						c6.5-3.264,72.753-37.591,78.221-40.492C39.369-18.255,39.35-36.588,39.331-54.922z"/>
+					<path id="snap-logo-top" fill="#1E2A5A" d="M39.331-54.922c-5.606,3.387-12.519,6.201-18.126,9.588c-7.193-3.185-14.386-6.371-21.719-9.617
+						c-7.287,3.21-14.6,6.432-21.914,9.654c-5.869-2.958-11.739-5.916-17.609-8.874c-0.039-0.239-0.078-0.478-0.117-0.717
+						c12.766-6.485,25.531-12.969,38.297-19.454C11.437-68.06,26.037-61.204,39.331-54.922z"/>
+					<path id="snap-logo-left" fill="#133F68" d="M-22.676-11.256c0-3.489,0-6.949,0-10.408c0-7.878,0.198-15.755,0.346-23.633
+						c-5.869-2.958-11.788-5.916-17.658-8.874c0.003,11.317-0.018,22.635-0.015,33.952c-0.034,6.737-0.081,13.474-0.114,20.21
+						c5.781,2.841,52.704,26.952,59.219,30.356c6.7,2.884,13.397,5.769,20.096,8.654c0.029-6.258,0.134-12.516,0.163-18.773
+						C33.044,16.882-15.406-7.438-22.676-11.256z"/>
+				</g>
+				
+				<g id="adobe-logo" transform="translate(350, 340)">
+					<polygon fill="#787878" points="22.447,0 35.605,0 35.605,31.389 	"/>
+					<polygon fill="#787878" points="13.172,0 0,0 0,31.389 	"/>
+					<polygon fill="#787878" points="17.809,11.565 26.195,31.387 20.698,31.387 18.189,25.074 12.049,25.074 	"/>
+					<g>
+						<path fill="#787878" d="M38.294,0c0.843,0,1.515,0.678,1.515,1.524c0,0.859-0.672,1.538-1.521,1.538S36.75,2.383,36.75,1.524
+							C36.75,0.677,37.438,0,38.288,0H38.294z M38.287,0.259c-0.675,0-1.217,0.567-1.217,1.27c0,0.707,0.542,1.271,1.224,1.271
+							c0.672,0.007,1.212-0.566,1.212-1.271c0-0.702-0.54-1.27-1.212-1.27H38.287z M38.01,2.414H37.7V0.716
+							c0.144-0.025,0.285-0.049,0.512-0.049c0.271,0,0.442,0.053,0.556,0.141c0.094,0.068,0.146,0.188,0.146,0.346
+							c0,0.22-0.142,0.363-0.33,0.411v0.017c0.149,0.026,0.245,0.161,0.277,0.414c0.042,0.265,0.077,0.367,0.105,0.419h-0.311
+							c-0.039-0.052-0.075-0.207-0.112-0.435c-0.035-0.201-0.146-0.286-0.356-0.286h-0.179v0.721L38.01,2.414L38.01,2.414z M38.01,1.458
+							h0.185c0.221,0,0.406-0.074,0.406-0.271c0-0.15-0.107-0.285-0.392-0.285c-0.093,0-0.152,0-0.197,0.005v0.552L38.01,1.458
+							L38.01,1.458z"/>
+					</g>
+					<path fill="#787878" d="M4.782,44.511L4.366,42.05c-0.123-0.715-0.271-1.823-0.382-2.59H3.941c-0.124,0.771-0.294,1.914-0.42,2.596
+						l-0.449,2.456L4.782,44.511L4.782,44.511z M2.847,46.12l-0.541,2.732h-2.01l2.501-11.373h2.457l2.271,11.373H5.507l-0.53-2.732
+						H2.847z"/>
+					<path fill="#787878" d="M12.086,43.77c0-0.147,0-0.329-0.03-0.492c-0.078-0.561-0.381-1.067-0.863-1.067
+						c-0.818,0-1.125,1.188-1.125,2.575c0,1.599,0.437,2.51,1.096,2.51c0.309,0,0.662-0.157,0.854-0.826
+						c0.045-0.131,0.069-0.314,0.069-0.523L12.086,43.77L12.086,43.77z M14.148,37.174v9.318c0,0.743,0.037,1.647,0.067,2.359h-1.779
+						l-0.119-0.947h-0.041c-0.298,0.583-0.948,1.086-1.721,1.086c-1.702,0-2.547-1.874-2.547-4.238c0-2.877,1.263-4.275,2.629-4.275
+						c0.711,0,1.182,0.346,1.415,0.852h0.034v-4.152h2.062C14.148,37.177,14.148,37.174,14.148,37.174z"/>
+					<path fill="#787878" d="M18.428,47.415c0.782,0,0.982-1.474,0.982-2.697c0-1.159-0.2-2.67-1.018-2.67
+						c-0.869,0-1.054,1.511-1.054,2.67c0,1.402,0.232,2.697,1.071,2.697H18.428z M18.387,48.989c-1.889,0-3.081-1.522-3.081-4.238
+						c0-2.963,1.529-4.275,3.127-4.275c1.877,0,3.05,1.592,3.05,4.232c0,3.393-1.838,4.281-3.076,4.281H18.387z"/>
+					<path fill="#787878" d="M24.692,45.907c0,0.204,0.035,0.399,0.078,0.525c0.206,0.693,0.561,0.863,0.837,0.863
+						c0.795,0,1.12-1.004,1.12-2.612c0-1.462-0.343-2.472-1.129-2.472c-0.392,0-0.72,0.423-0.832,0.877
+						c-0.039,0.142-0.074,0.363-0.074,0.521C24.692,43.609,24.692,45.907,24.692,45.907z M22.634,37.174h2.058v4.293h0.032
+						c0.406-0.634,0.945-0.994,1.731-0.994c1.55,0,2.331,1.758,2.331,4.049c0,2.91-1.168,4.467-2.67,4.467
+						c-0.723,0-1.199-0.32-1.631-1.123h-0.042l-0.112,0.986h-1.765c0.03-0.688,0.069-1.616,0.069-2.359v-9.318L22.634,37.174
+						L22.634,37.174z"/>
+					<path fill="#787878" d="M33.712,43.945c0.007-1.161-0.328-1.976-0.982-1.976c-0.749,0-1.064,1.094-1.088,1.976H33.712z
+						 M31.635,45.393c0.024,1.49,0.811,1.978,1.788,1.978c0.623,0,1.153-0.135,1.545-0.287l0.282,1.474
+						c-0.548,0.238-1.393,0.383-2.201,0.383c-2.211,0-3.411-1.498-3.411-4.067c0-2.759,1.394-4.408,3.221-4.408
+						c1.769,0,2.748,1.458,2.748,3.85c0,0.545-0.026,0.85-0.063,1.093L31.635,45.393z"/>
+				</g>
+			</g>
+			
+			<rect id="cover" width="400" height="400" fill="#efefef"/>
+		</svg>
+		<script>
+		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+		  ga('create', 'UA-47561728-1', 'codepen.io');
+		  ga('send', 'pageview');
+
+		</script>
+		
+		<!-- build:js js/vendor/require.min.js?__inline=true -->
+		<!-- /build -->
+		<!-- build:js js/main.js?__inline=true -->
+		<script data-main="js/main" src="./js/vendor/require.js"></script>	
+		<!-- /build -->	
+		<script src="http://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
+
+		<script>
+			WebFont.load(WebFontConfig);
+		</script>
+		
+	</body>
+</html>
--- a/demos/snap-ad/src/js/app/app.js
+++ b/demos/snap-ad/src/js/app/app.js
@ -0,0 +1,269 @@
+define(function (require) {
+
+	require('snap');
+	
+	var App,
+		Heart = require('app/heart'),
+		Device = require('app/device'),
+		Burst = require('app/burst');
+		Mesh = require('app/mesh');
+		Logo = require('app/logo');
+
+	App = function () {
+		var instance = this;
+		
+		this.started = false;
+				
+		this.init = function () {
+			var timeline,
+				ad,
+				s,
+				cover,
+				device,
+				heart,
+				burst,
+				screen1,
+				text1,
+				text2,
+				text3,
+				text4,
+				resolveScreen,
+				logo,
+				meshA,
+				meshAContainer,
+				replaycount = 0,
+				WIDTH = 400,
+				HEIGHT = 400,
+				WHITE = "#ffffff",
+				GREEN = "#09ae8a";
+			
+			this.started = true;
+			
+			ad = document.getElementById('ad');
+			s = new Snap("#ad");
+			cover = s.select('#cover');
+			meshAContainer = s.select('#meshAContainer');
+			screen1 = s.select('#screen1');
+			text1 = s.select('#text1');
+			text2 = s.select('#text2');
+			text3 = s.select('#text3');
+			text4 = s.select('#text4');
+			replayBtn = s.select('#replay-btn');
+			resolveScreen = s.select('#resolve');
+			logo = new Logo(s);
+			
+			handle_RESIZE();
+			window.addEventListener('resize', handle_RESIZE);
+			ad.addEventListener('click', handle_CLICK);			
+			replayBtn.click(replay_CLICK);
+			
+			addMeshA();	
+			cover.remove();
+			addHeart();
+			addComputer();
+			addBurst();
+			
+			function addHeart() {
+				heart = new Heart(s, WIDTH / 2, HEIGHT / 2);
+			}
+			
+			function addComputer() {
+				device = new Device(s, WIDTH / 2, HEIGHT / 2);
+				device.setScreen(192, 112);
+				device.setBack(208, 148);
+				device.setScale(0.1);
+				text2.after(device.el);
+			}
+			
+			function addBurst() {
+				burst = new Burst(s);
+			}
+			
+			function addMeshA() {
+				meshA = new Mesh(s, meshAContainer, '#afafaf', '#afafaf');
+			}
+			
+			function addMeshB() {
+				meshA.el.remove();
+				meshB = new Mesh(s, meshBContainer, '#09ae8a', '#777777');
+			}
+			
+			function showMeshB() {
+				if (mobilecheck() !== true) {
+					meshB.start();
+				}
+			}
+			
+			function showComputer() {
+				text1.animate({y: 80}, 100);
+				text2.animate({y: 350}, 100);
+				device.animScale(10, 300, mina.bounce);
+				heart.animFill(WHITE);
+			}
+			
+			function toTablet() {
+				device.animRotation(-90);	
+				device.animScreen(76, 100);
+				device.animBack(92, 132);
+				heart.animScale(0.5, 200);				
+			}
+			
+			function toPhone() {
+				device.hideKeyboard();
+				device.animScreen(48, 76);
+				device.animBack(56, 100);
+				heart.animScale(0.3);
+			}
+			
+			function rotate() {
+				device.animRotation(90);
+				heart.animScale(0.4);
+			}
+			
+			function zoom() {
+				meshA.stop();
+				device.animScale(10, 600);
+				heart.animScale(4, 600);
+				burst.anim();
+			}
+			
+			function greenMesh() {
+				
+				meshA.setColor('#09ae8a', '#777777');
+				
+				if (mobilecheck() !== true) {
+					meshA.start();
+				}
+				
+				device.animOpacity(0, 200);
+				screen1.animate({
+					opacity: 0
+				}, 100);
+			}
+			
+			function maskReveal() {
+				heart.mask();
+			}
+			
+			function showText3() {
+				device.setScale(0.01);
+				text3.animate({
+					opacity: 1
+				}, 200);
+			}
+			
+			function hideText3() {
+				text3.animate({
+					opacity: 0
+				}, 200);
+				
+				if (mobilecheck() !== true) {
+					meshA.rippleColor('#afafaf', '#afafaf');
+				} else {
+					meshA.setColor('#afafaf', '#afafaf');
+				}
+			}
+			
+			function resolve() {
+				resolveScreen.animate({
+					opacity: 1
+				}, 200);
+			}
+			
+			function stop() {
+				logo.animate();
+				meshA.stop();
+			}
+			
+			function reset() {
+				resolveScreen.attr({
+					opacity: 0
+				});		
+				
+				screen1.attr({
+					opacity: 1
+				});
+				
+				text1.attr({y: 130});
+				text2.attr({y: 300});
+				
+				heart.setScale(1);
+				heart.setFill('#0DAE8A');
+				heart.unmask();
+				device.setOpacity(1);
+				device.setScreen(192, 112);
+				device.setBack(208, 148);
+				device.showKeyboard();
+				meshA.start();
+				burst.reset();
+			}
+			
+			function replay_CLICK(e) {
+				e.stopPropagation();
+				
+				replaycount += 1;
+				ga('send', 'event', 'button', 'click', 'replay', replaycount);
+				reset();
+				run();
+			}
+			
+			function handle_CLICK(e) {
+				ga('send', 'event', 'button', 'click', 'ad');
+				top.window.location.href = 'http://snapsvg.io/';
+			}
+			
+			function handle_RESIZE() {
+				var _w = window.innerWidth,
+					scale = _w / 400;
+				
+				ad.style.webkitTransform = 'scale(' + scale + ')';
+				ad.style.MozTransform = 'scale(' + scale + ')';
+				ad.style.msTransform = 'scale(' + scale + ')';
+				ad.style.oTransform = 'scale(' + scale + ')';
+				ad.style.transform = 'scale(' + scale + ')';
+				
+			}
+			
+			function run() {
+				if (mobilecheck() !== true) {
+					meshA.start();
+				}
+				setTimeout(showComputer, 2000);
+				setTimeout(toPhone, 3000);
+				setTimeout(rotate, 4000);
+				setTimeout(toTablet, 5000);
+				setTimeout(zoom, 6000);
+				setTimeout(greenMesh, 6300);
+				setTimeout(maskReveal, 6700);
+				setTimeout(showText3, 7000);
+				setTimeout(hideText3, 10000);
+				setTimeout(resolve, 10500);
+				setTimeout(stop, 10900);
+			}
+			
+			function basic() {
+				screen1.attr({opacity: 0});
+				heart.el.attr({opacity: 0});
+				replayBtn.attr({opacity: 0});
+				logo.show();
+				text4.select('tspan').attr({opacity: 0});
+				text4.select('tspan:nth-child(2)').attr({y: 120});
+				resolveScreen.attr({opacity: 1});
+			}
+			
+			if (window.replay !== true) {
+				replayBtn.attr({opacity: 0});
+			}
+			
+			if (window.supported !== false) {
+				run();
+			} else {
+				basic();
+			}
+			
+		}
+		
+	}
+
+	return App;
+});
--- a/demos/snap-ad/src/js/app/burst.js
+++ b/demos/snap-ad/src/js/app/burst.js
@ -0,0 +1,52 @@
+define(function (require) {
+	
+	var Burst = function (s, x, y) {
+		var instance = this,
+			polygons,
+			mask,
+			maskCircle,
+			maskBg;
+		
+		this.el = s.select("#burst");
+		
+		mask = s.g();
+		mask.toDefs();
+		
+		maskBg = s.rect(-200, -200, 400, 400);
+		maskBg.attr({
+			fill: 'white'
+		});
+		mask.append(maskBg);
+		
+		maskCircle = s.circle(0, 0, 30);
+		mask.append(maskCircle);
+		
+		this.el.attr({
+			mask: mask
+		});
+		
+		this.anim = function () {
+			this.el.animate({
+				opacity: 1
+			}, 100);
+			
+			maskCircle.animate({
+				transform: 'scale(6)'
+			}, 300);
+			
+			setTimeout(function () {
+				instance.el.animate({
+					opacity: 0
+				}, 100);
+			}, 300)
+		}
+		
+		this.reset = function () {
+			maskCircle.attr({
+				transform: 'scale(1)'
+			});
+		}
+	}
+	
+	return Burst;
+});
--- a/demos/snap-ad/src/js/app/device.js
+++ b/demos/snap-ad/src/js/app/device.js
@ -0,0 +1,218 @@
+define(function (require) {
+	
+	var Device = function (s, x, y) {
+		var instance = this;
+		
+		this.el = s.g();
+		this.matrix = new Snap.Matrix();
+		this.matrix.translate(x, y);
+		this.el.transform(this.matrix.toTransformString());
+		
+		this.keyboardMatrix = new Snap.Matrix();
+		this.keyboardMatrix.translate(0, 70);
+		
+		instance.maskElement = s.polygon();
+		instance.maskElement.toDefs();
+		
+		addBack();
+		addScreen();
+		//addGloss();
+		addKeyboard();
+		
+		function addBack() {
+			instance.back = s.rect(0, 0, 0, 0);
+			instance.back.attr({
+				fill: '#696969'
+			});
+
+			instance.el.append(instance.back);	
+		}
+		
+		function addScreen() {
+			instance.scr = s.rect(0, 0, 0, 0);
+			instance.scr.attr({
+				fill: "#09ae8a"
+			});
+
+			instance.el.append(instance.scr);
+		}
+		
+		function addKeyboard() {
+			var p1,
+				p2;
+				
+			instance.keyboard = s.g();
+			instance.keyboard.transform(instance.keyboardMatrix.toTransformString());
+			
+			p1 = s.polygon('-103.324,0 -135.324,32 136.676,32 104.676,0 ');
+			p1.attr({
+				fill: '#818181'
+			});
+			
+			p2 = s.polygon('127.774,40 -128.226,40 -136.226,32 135.774,32 ');
+			p2.attr({
+				fill: '#676767'
+			});
+			
+			instance.keyboard.append(p1);
+			instance.keyboard.append(p2);
+			instance.el.append(instance.keyboard);
+		}
+		
+		function addGloss() {
+			instance.gl = s.rect(0, 0, 0, 0);
+			instance.gl.attr({
+				opacity: 0.2,
+				fill: "white",
+				clipPath: instance.maskElement
+			});
+			
+			instance.el.append(instance.gl);
+		}
+		
+		this.hideKeyboard = function () {
+			this.keyboardMatrix = new Snap.Matrix();
+			instance.keyboardMatrix.translate(0, 50);
+			instance.keyboardMatrix.scale(0.01, 0.01, 0, 0);
+			instance.keyboard.animate({
+				opacity: 0,
+				transform: instance.keyboardMatrix.toTransformString()
+			}, 100);
+		}
+		
+		this.showKeyboard = function () {
+			this.keyboardMatrix = new Snap.Matrix();
+			instance.keyboardMatrix.translate(0, 70);
+			instance.keyboardMatrix.scale(1, 1, 0, 0);
+			instance.keyboard.attr({
+				opacity: 1,
+				transform: instance.keyboardMatrix.toTransformString()
+			});
+		}
+		
+		this.setScreen = function(w, h) {
+			this.scr.attr({
+				x: -w / 2,
+				y: -h / 2,
+				width: w,
+				height: h
+			});
+		}
+		
+		this.setBack = function (w, h) {
+			this.back.attr({
+				x: -w / 2,
+				y: -h / 2,
+				width: w,
+				height: h
+			});
+			
+			/*
+			this.gl.attr({
+				x: -w / 2,
+				y: -h / 2,
+				width: w,
+				height: h
+			});
+			
+			var pointString = -w / 2 + ' ' + -h / 2 + ',' + w / 2 + ' ' + -h / 2 + ',' + -w / 2 + ' ' + h / 2;
+			
+			instance.maskElement.attr({
+				points: pointString
+			});
+			*/
+		}
+		
+		this.setScale = function (scale) {
+			this.matrix.scale(scale, scale, 0, 0);
+			this.el.transform(this.matrix.toTransformString());
+		}
+		
+		this.animScreen = function(w, h) {
+			this.scr.animate({
+				x: -w / 2,
+				y: -h / 2,
+				width: w,
+				height: h
+			}, 100);
+		}
+		
+		this.animBack = function (w, h) {
+			this.back.animate({
+				x: -w / 2,
+				y: -h / 2,
+				width: w,
+				height: h
+			}, 100);
+			
+			/*
+			this.gl.animate({
+				x: -w / 2,
+				y: -h / 2,
+				width: w,
+				height: h
+			}, 100);
+			
+			var pointString = -w / 2 + ' ' + -h / 2 + ',' + w / 2 + ' ' + -h / 2 + ',' + -w / 2 + ' ' + h / 2;
+			
+			instance.maskElement.attr({
+				points: pointString
+			});
+			*/
+		}
+		
+		this.animRotation = function (r) {
+			instance.matrix.rotate(r, 0, 0);
+					
+			instance.el.animate({
+				transform: instance.matrix.toTransformString()
+			}, 100, mina.easeIn);
+			
+			/*
+			if (r == 90) {
+				var w = 100,
+					h = 56,
+					pointString = -w / 2 + ' ' + -h / 2 + ',' + w / 2 + ' ' + -h / 2 + ',' + -w / 2 + ' ' + h / 2;
+				
+				instance.maskElement.attr({
+					points: pointString
+				});
+				
+				instance.maskElement.animate({
+					transform: 'rotate(-90)'
+				}, 100, mina.easeIn);
+			} else {
+				instance.maskElement.animate({
+					transform: 'rotate(0)'
+				}, 100, mina.easeIn);
+			}
+			*/
+		}
+		
+		this.animScale = function (scale, dur, ease) {
+			dur = dur ? dur : 100;
+			ease = ease ? ease : mina.easeout;
+			
+			this.matrix.scale(scale, scale, 0, 0);
+			this.el.animate({
+				transform: this.matrix.toTransformString()
+			}, dur, ease);
+		}
+		
+		this.animOpacity = function (opacity, dur) {
+			dur = dur ? dur : 200;
+			
+			this.el.animate({
+				opacity: opacity
+			}, dur);
+		}
+		
+		this.setOpacity = function (opacity) {			
+			this.el.attr({
+				opacity: opacity
+			});
+		}
+	}
+	
+	return Device;
+});
--- a/demos/snap-ad/src/js/app/heart.js
+++ b/demos/snap-ad/src/js/app/heart.js
@ -0,0 +1,103 @@
+define(function (require) {
+	
+	var Heart = function (s, x, y) {
+		var instance = this,
+			heart,
+			heartMatrix,
+			totalMaskVertices = 50;
+		
+		this.el = s.select("#heart");
+		heart = this.el.select('#heart-shape');
+		
+		instance.maskElement = s.path(getPath(totalMaskVertices));		
+		instance.el.attr({
+			clipPath: instance.maskElement
+		});
+		
+		this.animFill = function (f, dur) {
+			heart.animate({
+				fill: f
+			}, 200);
+		}
+		
+		this.setFill = function (f, dur) {
+			heart.attr({
+				fill: f
+			}, 200);
+		}
+		
+		this.animScale = function (scale, dur) {
+			dur = dur ? dur : 300;
+			
+			this.matrix = new Snap.Matrix();
+			this.matrix.translate(x, y);
+			this.matrix.scale(scale);
+			this.el.animate({
+				transform: this.matrix.toTransformString()
+			}, dur, mina.bounce);
+		}
+		
+		this.setScale = function (scale, dur) {
+			dur = dur ? dur : 300;
+			
+			this.matrix = new Snap.Matrix();
+			this.matrix.translate(x, y);
+			this.matrix.scale(scale, scale, 0, 0);
+			this.el.attr({
+				transform: this.matrix.toTransformString()
+			});
+			
+		}
+		
+		this.mask = function () {
+			var n = totalMaskVertices;
+			
+			instance.maskElement.attr({
+				d: getPath(n)
+			});
+			
+			function updatePath() {
+				n -= 1;
+				instance.maskElement.attr({
+					d: getPath(n)
+				});
+				
+				if (n > 0) {
+					setTimeout(updatePath, 10);
+				}
+			}
+		
+			setTimeout(updatePath, 10);
+		}
+		
+		this.unmask = function () {
+			instance.maskElement.attr({
+				d: getPath(totalMaskVertices)
+			});
+		}
+		
+		function getPath(n) {
+			var pathString,
+				i,
+				_x,
+				_y;
+			
+			pathString = "M0 0";
+			
+			for (i = 0; i < n + 1; i += 1) {
+				a = 2 * Math.PI * i / totalMaskVertices;
+                a += Math.PI;
+
+				_x = Math.sin(a) * 50;
+				_y = Math.cos(a) * 50;
+				
+				pathString += "L" + _x + " " + _y;
+			}
+			
+			pathString += "Z";
+			return pathString;
+		}
+	}
+	
+	return Heart;
+});
--- a/demos/snap-ad/src/js/app/logo.js
+++ b/demos/snap-ad/src/js/app/logo.js
@ -0,0 +1,59 @@
+define(function (require) {
+		
+	var Logo = function (s) {
+		var instance = this,
+			logo,
+			parts = [
+				['top', 0, 20], 
+				['left', 20, 0], 
+				['bottom', 0, -20],
+				['right', -20, 0]
+			],
+			components = [],
+			i = 0,
+			k = 0,
+			isLogoAnimated = false,
+			isCrocAnimated = false,
+			isCroc2Animated = false;
+		
+		logo = s.select("#snap-logo");
+
+		for (i = 0; i < parts.length; i++) {
+			var el = parts[i]
+			elid = el[0];
+			element = logo.select("#snap-logo-" + elid);
+			element.attr({opacity:0, transform: "t" + (el[1]) + "," + (el[2])});
+		    components.push(element);
+		}
+
+		function animateEach() {
+			if (!components[k]) {
+				return;
+			}
+		    components[k].animate({ 
+		        transform: "t" + (0) + "," + (0),
+		        opacity: 1
+		    }, 250, mina.easeout);
+			setTimeout(animateEach, 150);
+			k++;
+		};
+		
+		this.animate = function () {
+			setTimeout(animateEach, 150);
+		}
+		
+		this.show = function () {
+			var i;
+			
+			for (i = 0; i < components.length; i += 1) {
+				components[i].attr({ 
+			    	transform: "t" + (0) + "," + (0),
+			    	opacity: 1
+			    });
+			}
+		    
+		}
+	}
+	
+	return Logo;
+});
--- a/demos/snap-ad/src/js/app/mesh.js
+++ b/demos/snap-ad/src/js/app/mesh.js
@ -0,0 +1,143 @@
+define(function (require) {
+	
+	require('vendor/fss');
+	
+	var Mesh = function (s, container, colorA, colorB) {
+		var instance = this,
+			_width = 440,
+			_height = 440,
+			now,
+			start = Date.now(),
+			renderer,
+			scene,
+			geometry,
+			material,
+			mesh,
+			light;
+		
+		instance.animating = false;
+		
+		instance.init = function () {
+			renderer = new FSS.SVGRenderer(s);
+			renderer.setSize(_width, _height);
+			renderer.element.transform('translate(-20, -20)'); //keep edges from showing
+			
+			instance.el = renderer.element;
+			
+			container.append(renderer.element);
+
+			scene = new FSS.Scene();
+			material = new FSS.Material(colorA, colorB);
+		    geometry = new FSS.Plane(_width, _height, 10, 10, s, material);
+			mesh = new FSS.Mesh(geometry, material);
+			scene.add(mesh);
+
+			light = new FSS.Light('#eeeeee', '#eeeeee');
+			light.setPosition(300*Math.sin(0.001), 200*Math.cos(0.0005), 100);
+			scene.add(light);
+
+			now = Date.now() - start;
+
+			tweakMesh();
+			distortMesh();			
+			renderer.render(scene);
+		}
+		
+		instance.start = function () {
+			instance.animating = true;
+			animate();
+		}
+		
+		instance.stop = function () {
+			instance.animating = false;
+		}
+		
+		instance.setColor = function (colorA, colorB) {
+			var i;
+			
+			material = new FSS.Material(colorA, colorB);
+			
+			for (i = geometry.triangles.length - 1; i > -1; i -= 1) {	
+				geometry.triangles[i].material = material;
+			}
+			
+			animate();
+		}
+		
+		instance.rippleColor = function (colorA, colorB) {
+			var i;
+			
+			material = new FSS.Material(colorA, colorB);
+
+			function colorTriangle(j) {
+				geometry.triangles[j].material = material;
+
+				if (j == 0) {
+					setTimeout(function () {
+						animate();
+					}, 10); //force clear
+				}
+			}
+
+			for (i = geometry.triangles.length - 1; i > -1; i -= 1) {								
+				var speed = 200 + Math.sin(0.1 + Math.abs(geometry.triangles[i].centroid[0] / geometry.triangles[i].centroid[1])) * 100;
+				setTimeout(colorTriangle, speed * 2, i);
+			}			
+		}
+		
+		
+		function tweakMesh() {
+			var v, vertex;
+			
+			for (v = geometry.vertices.length - 1; v >= 0; v--) {
+			      vertex = geometry.vertices[v];
+			      vertex.anchor = FSS.Vector3.clone(vertex.position);
+			      vertex.step = FSS.Vector3.create(
+			        Math.randomInRange(0.2, 1.0),
+			        Math.randomInRange(0.2, 1.0),
+			        Math.randomInRange(0.2, 1.0)
+			      );
+				vertex.time = Math.randomInRange(0, Math.PIM2);
+			}
+		}
+		
+		function distortMesh() {
+			var v,
+				vertex,
+				ox, oy, oz,
+				offset = 10 / 2;
+			
+			for (v = geometry.vertices.length - 1; v >= 0; v--) {
+		      vertex = geometry.vertices[v];
+		      ox = Math.sin(vertex.time + vertex.step[0] * now * 0.002);
+		      oy = Math.cos(vertex.time + vertex.step[1] * now * 0.002);
+		      oz = Math.sin(vertex.time + vertex.step[2] * now * 0.002);
+		      FSS.Vector3.set(vertex.position,
+		        0.2 * geometry.segmentWidth * ox,
+		        0.1 * geometry.sliceHeight * oy,
+		        0.7 * offset * oz - offset);
+		      FSS.Vector3.add(vertex.position, vertex.anchor);
+		    }
+
+		    geometry.dirty = true;
+		}
+	
+		function animate() {
+			now = Date.now() - start;
+			
+			if (mobilecheck() !== true) {
+				distortMesh();
+			}
+			
+			renderer.render(scene);
+			
+			if (instance.animating !== false) {
+				requestAnimationFrame(animate);
+			}
+		}
+		
+		instance.init();
+	}
+	
+	return Mesh;
+});
--- a/demos/snap-ad/src/js/main.js
+++ b/demos/snap-ad/src/js/main.js
@ -0,0 +1,94 @@
+/*global require*/
+
+require.config({
+    shim: {
+
+    },
+    paths: {
+	    snap: 'vendor/snap.svg',
+	    tweenlite: 'vendor/greensock/TweenLite',
+	    timelinelite: 'vendor/greensock/TimelineLite'
+    }
+});
+
+/**
+* check support
+*/
+window.ua = navigator.userAgent.toLowerCase();
+window.isAndroid = ua.indexOf("android") > -1;
+window.isSafari = ua.indexOf("safari") > -1 && ua.indexOf("chrome") === -1;
+
+function checkSVG() {
+	return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
+}
+
+/**
+* check mobile
+*/
+window.mobilecheck = function() {
+	var check = false;
+	(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
+	return check; 
+}
+
+function addFallback() {
+	var link,
+		img;
+		
+	link = document.createElement('a');
+	link.href = "http://snapsvg.io/";
+	document.body.appendChild(link);
+	
+	img = new Image();
+	img.src = "backup.jpg";
+	img.style.position = "absolute";
+	img.style.top = "0";
+	img.style.left = "0";
+	img.width = "100%";
+	link.appendChild(img);
+}
+
+window.supported = true;
+window.replay = true;
+
+require(['app/app'], function (App) {
+	
+	if (checkSVG() !== true) {
+		addFallback();
+		return;
+	}
+
+	if (isAndroid === true) {
+		window.supported = false;
+	}
+
+	if (isSafari === true) {
+		window.replay = false;
+	}
+	
+	window.app = new App();
+	//app.init(); //fired from font loading
+});
+
+
+
+/**
+* font loading
+*/
+WebFontConfig = {
+	google: {
+		families: ['Open+Sans:300:latin', 'Source+Sans+Pro::latin']
+	},
+	inactive: function () {
+		if (typeof(app) !== 'undefined' && app.started !== true) {
+			app.init();
+		}
+	},
+	fontactive: function(familyName, fvd) {
+		if (typeof(app) !== 'undefined' && familyName == 'Open Sans') {
+			if (app.started !== true) {
+				app.init();
+			}
+		}
+	}
+}
--- a/demos/snap-ad/src/js/vendor/fss.js
+++ b/demos/snap-ad/src/js/vendor/fss.js
@ -0,0 +1,760 @@
+//============================================================
+//
+// Copyright (C) 2013 Matthew Wagerfield
+//
+// Twitter: https://twitter.com/mwagerfield
+//
+// Permission is hereby granted, free of charge, to any
+// person obtaining a copy of this software and associated
+// documentation files (the "Software"), to deal in the
+// Software without restriction, including without limitation
+// the rights to use, copy, modify, merge, publish, distribute,
+// sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do
+// so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice
+// shall be included in all copies or substantial portions
+// of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY
+// OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+// LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+// EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
+// FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+// AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+// OR OTHER DEALINGS IN THE SOFTWARE.
+//
+//============================================================
+
+/**
+ * Defines the Flat Surface Shader namespace for all the awesomeness to exist upon.
+ * @author Matthew Wagerfield
+ */
+FSS = {
+  FRONT  : 0,
+  BACK   : 1,
+  DOUBLE : 2,
+  SVGNS  : 'http://www.w3.org/2000/svg'
+};
+
+/**
+ * @class Array
+ * @author Matthew Wagerfield
+ */
+FSS.Array = typeof Float32Array === 'function' ? Float32Array : Array;
+
+/**
+ * @class Utils
+ * @author Matthew Wagerfield
+ */
+FSS.Utils = {
+  isNumber: function(value) {
+    return !isNaN(parseFloat(value)) && isFinite(value);
+  }
+};
+
+/**
+ * Request Animation Frame Polyfill.
+ * @author Paul Irish
+ * @see https://gist.github.com/paulirish/1579671
+ */
+(function() {
+
+  var lastTime = 0;
+  var vendors = ['ms', 'moz', 'webkit', 'o'];
+
+  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+    window.cancelAnimationFrame  = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
+  }
+
+  if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = function(callback, element) {
+      var currentTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (currentTime - lastTime));
+      var id = window.setTimeout(function() {
+        callback(currentTime + timeToCall);
+      }, timeToCall);
+      lastTime = currentTime + timeToCall;
+      return id;
+    };
+  }
+
+  if (!window.cancelAnimationFrame) {
+    window.cancelAnimationFrame = function(id) {
+      clearTimeout(id);
+    };
+  }
+
+}());
+
+/**
+ * @object Math Augmentation
+ * @author Matthew Wagerfield
+ */
+Math.PIM2 = Math.PI*2;
+Math.PID2 = Math.PI/2;
+Math.randomInRange = function(min, max) {
+  return min + (max - min) * Math.random();
+};
+Math.clamp = function(value, min, max) {
+  value = Math.max(value, min);
+  value = Math.min(value, max);
+  return value;
+};
+
+/**
+ * @object Vector3
+ * @author Matthew Wagerfield
+ */
+FSS.Vector3 = {
+  create: function(x, y, z) {
+    var vector = new FSS.Array(3);
+    this.set(vector, x, y, z);
+    return vector;
+  },
+  clone: function(a) {
+    var vector = this.create();
+    this.copy(vector, a);
+    return vector;
+  },
+  set: function(target, x, y, z) {
+    target[0] = x || 0;
+    target[1] = y || 0;
+    target[2] = z || 0;
+    return this;
+  },
+  setX: function(target, x) {
+    target[0] = x || 0;
+    return this;
+  },
+  setY: function(target, y) {
+    target[1] = y || 0;
+    return this;
+  },
+  setZ: function(target, z) {
+    target[2] = z || 0;
+    return this;
+  },
+  copy: function(target, a) {
+    target[0] = a[0];
+    target[1] = a[1];
+    target[2] = a[2];
+    return this;
+  },
+  add: function(target, a) {
+    target[0] += a[0];
+    target[1] += a[1];
+    target[2] += a[2];
+    return this;
+  },
+  addVectors: function(target, a, b) {
+    target[0] = a[0] + b[0];
+    target[1] = a[1] + b[1];
+    target[2] = a[2] + b[2];
+    return this;
+  },
+  addScalar: function(target, s) {
+    target[0] += s;
+    target[1] += s;
+    target[2] += s;
+    return this;
+  },
+  subtract: function(target, a) {
+    target[0] -= a[0];
+    target[1] -= a[1];
+    target[2] -= a[2];
+    return this;
+  },
+  subtractVectors: function(target, a, b) {
+    target[0] = a[0] - b[0];
+    target[1] = a[1] - b[1];
+    target[2] = a[2] - b[2];
+    return this;
+  },
+  subtractScalar: function(target, s) {
+    target[0] -= s;
+    target[1] -= s;
+    target[2] -= s;
+    return this;
+  },
+  multiply: function(target, a) {
+    target[0] *= a[0];
+    target[1] *= a[1];
+    target[2] *= a[2];
+    return this;
+  },
+  multiplyVectors: function(target, a, b) {
+    target[0] = a[0] * b[0];
+    target[1] = a[1] * b[1];
+    target[2] = a[2] * b[2];
+    return this;
+  },
+  multiplyScalar: function(target, s) {
+    target[0] *= s;
+    target[1] *= s;
+    target[2] *= s;
+    return this;
+  },
+  divide: function(target, a) {
+    target[0] /= a[0];
+    target[1] /= a[1];
+    target[2] /= a[2];
+    return this;
+  },
+  divideVectors: function(target, a, b) {
+    target[0] = a[0] / b[0];
+    target[1] = a[1] / b[1];
+    target[2] = a[2] / b[2];
+    return this;
+  },
+  divideScalar: function(target, s) {
+    if (s !== 0) {
+      target[0] /= s;
+      target[1] /= s;
+      target[2] /= s;
+    } else {
+      target[0] = 0;
+      target[1] = 0;
+      target[2] = 0;
+    }
+    return this;
+  },
+  cross: function(target, a) {
+    var x = target[0];
+    var y = target[1];
+    var z = target[2];
+    target[0] = y*a[2] - z*a[1];
+    target[1] = z*a[0] - x*a[2];
+    target[2] = x*a[1] - y*a[0];
+    return this;
+  },
+  crossVectors: function(target, a, b) {
+    target[0] = a[1]*b[2] - a[2]*b[1];
+    target[1] = a[2]*b[0] - a[0]*b[2];
+    target[2] = a[0]*b[1] - a[1]*b[0];
+    return this;
+  },
+  min: function(target, value) {
+    if (target[0] < value) { target[0] = value; }
+    if (target[1] < value) { target[1] = value; }
+    if (target[2] < value) { target[2] = value; }
+    return this;
+  },
+  max: function(target, value) {
+    if (target[0] > value) { target[0] = value; }
+    if (target[1] > value) { target[1] = value; }
+    if (target[2] > value) { target[2] = value; }
+    return this;
+  },
+  clamp: function(target, min, max) {
+    this.min(target, min);
+    this.max(target, max);
+    return this;
+  },
+  limit: function(target, min, max) {
+    var length = this.length(target);
+    if (min !== null && length < min) {
+      this.setLength(target, min);
+    } else if (max !== null && length > max) {
+      this.setLength(target, max);
+    }
+    return this;
+  },
+  dot: function(a, b) {
+    return a[0]*b[0] + a[1]*b[1] + a[2]*b[2];
+  },
+  normalise: function(target) {
+    return this.divideScalar(target, this.length(target));
+  },
+  negate: function(target) {
+    return this.multiplyScalar(target, -1);
+  },
+  distanceSquared: function(a, b) {
+    var dx = a[0] - b[0];
+    var dy = a[1] - b[1];
+    var dz = a[2] - b[2];
+    return dx*dx + dy*dy + dz*dz;
+  },
+  distance: function(a, b) {
+    return Math.sqrt(this.distanceSquared(a, b));
+  },
+  lengthSquared: function(a) {
+    return a[0]*a[0] + a[1]*a[1] + a[2]*a[2];
+  },
+  length: function(a) {
+    return Math.sqrt(this.lengthSquared(a));
+  },
+  setLength: function(target, l) {
+    var length = this.length(target);
+    if (length !== 0 && l !== length) {
+      this.multiplyScalar(target, l / length);
+    }
+    return this;
+  }
+};
+
+/**
+ * @object Vector4
+ * @author Matthew Wagerfield
+ */
+FSS.Vector4 = {
+  create: function(x, y, z, w) {
+    var vector = new FSS.Array(4);
+    this.set(vector, x, y, z);
+    return vector;
+  },
+  set: function(target, x, y, z, w) {
+    target[0] = x || 0;
+    target[1] = y || 0;
+    target[2] = z || 0;
+    target[3] = w || 0;
+    return this;
+  },
+  setX: function(target, x) {
+    target[0] = x || 0;
+    return this;
+  },
+  setY: function(target, y) {
+    target[1] = y || 0;
+    return this;
+  },
+  setZ: function(target, z) {
+    target[2] = z || 0;
+    return this;
+  },
+  setW: function(target, w) {
+    target[3] = w || 0;
+    return this;
+  },
+  add: function(target, a) {
+    target[0] += a[0];
+    target[1] += a[1];
+    target[2] += a[2];
+    target[3] += a[3];
+    return this;
+  },
+  multiplyVectors: function(target, a, b) {
+    target[0] = a[0] * b[0];
+    target[1] = a[1] * b[1];
+    target[2] = a[2] * b[2];
+    target[3] = a[3] * b[3];
+    return this;
+  },
+  multiplyScalar: function(target, s) {
+    target[0] *= s;
+    target[1] *= s;
+    target[2] *= s;
+    target[3] *= s;
+    return this;
+  },
+  min: function(target, value) {
+    if (target[0] < value) { target[0] = value; }
+    if (target[1] < value) { target[1] = value; }
+    if (target[2] < value) { target[2] = value; }
+    if (target[3] < value) { target[3] = value; }
+    return this;
+  },
+  max: function(target, value) {
+    if (target[0] > value) { target[0] = value; }
+    if (target[1] > value) { target[1] = value; }
+    if (target[2] > value) { target[2] = value; }
+    if (target[3] > value) { target[3] = value; }
+    return this;
+  },
+  clamp: function(target, min, max) {
+    this.min(target, min);
+    this.max(target, max);
+    return this;
+  }
+};
+
+/**
+ * @class Color
+ * @author Matthew Wagerfield
+ */
+FSS.Color = function(hex, opacity) {
+  this.rgba = FSS.Vector4.create();
+  this.hex = hex || '#000000';
+  this.opacity = FSS.Utils.isNumber(opacity) ? opacity : 1;
+  this.set(this.hex, this.opacity);
+};
+
+FSS.Color.prototype = {
+  set: function(hex, opacity) {
+    hex = hex.replace('#', '');
+    var size = hex.length / 3;
+    this.rgba[0] = parseInt(hex.substring(size*0, size*1), 16) / 255;
+    this.rgba[1] = parseInt(hex.substring(size*1, size*2), 16) / 255;
+    this.rgba[2] = parseInt(hex.substring(size*2, size*3), 16) / 255;
+    this.rgba[3] = FSS.Utils.isNumber(opacity) ? opacity : this.rgba[3];
+    return this;
+  },
+  hexify: function(channel) {
+    var hex = Math.ceil(channel*255).toString(16);
+    if (hex.length === 1) { hex = '0' + hex; }
+    return hex;
+  },
+  format: function() {
+    var r = this.hexify(this.rgba[0]);
+    var g = this.hexify(this.rgba[1]);
+    var b = this.hexify(this.rgba[2]);
+    this.hex = '#' + r + g + b;
+    return this.hex;
+  }
+};
+
+/**
+ * @class Object
+ * @author Matthew Wagerfield
+ */
+FSS.Object = function() {
+  this.position = FSS.Vector3.create();
+};
+
+FSS.Object.prototype = {
+  setPosition: function(x, y, z) {
+    FSS.Vector3.set(this.position, x, y, z);
+    return this;
+  }
+};
+
+/**
+ * @class Light
+ * @author Matthew Wagerfield
+ */
+FSS.Light = function(ambient, diffuse) {
+  FSS.Object.call(this);
+  this.ambient = new FSS.Color(ambient || '#FFFFFF');
+  this.diffuse = new FSS.Color(diffuse || '#FFFFFF');
+  this.ray = FSS.Vector3.create();
+};
+
+FSS.Light.prototype = Object.create(FSS.Object.prototype);
+
+/**
+ * @class Vertex
+ * @author Matthew Wagerfield
+ */
+FSS.Vertex = function(x, y, z) {
+  this.position = FSS.Vector3.create(x, y, z);
+};
+
+FSS.Vertex.prototype = {
+  setPosition: function(x, y, z) {
+    FSS.Vector3.set(this.position, x, y, z);
+    return this;
+  }
+};
+
+/**
+ * @class Triangle
+ * @author Matthew Wagerfield
+ */
+FSS.Triangle = function(a, b, c, s, material) {
+  this.a = a || new FSS.Vertex();
+  this.b = b || new FSS.Vertex();
+  this.c = c || new FSS.Vertex();
+  this.vertices = [this.a, this.b, this.c];
+  this.u = FSS.Vector3.create();
+  this.v = FSS.Vector3.create();
+  this.centroid = FSS.Vector3.create();
+  this.normal = FSS.Vector3.create();
+  this.material = material || new FSS.Material();
+  this.color = new FSS.Color();
+  this.polygon = s.polygon();
+  this.polygon.attr({
+    'stroke-linejoin': 'round',
+	'stroke-miterlimit': 1,
+	'stroke-width': 1
+  });
+
+  this.computeCentroid();
+  this.computeNormal();
+};
+
+FSS.Triangle.prototype = {
+  computeCentroid: function() {
+    this.centroid[0] = this.a.position[0] + this.b.position[0] + this.c.position[0];
+    this.centroid[1] = this.a.position[1] + this.b.position[1] + this.c.position[1];
+    this.centroid[2] = this.a.position[2] + this.b.position[2] + this.c.position[2];
+    FSS.Vector3.divideScalar(this.centroid, 3);
+    return this;
+  },
+  computeNormal: function() {
+    FSS.Vector3.subtractVectors(this.u, this.b.position, this.a.position);
+    FSS.Vector3.subtractVectors(this.v, this.c.position, this.a.position);
+    FSS.Vector3.crossVectors(this.normal, this.u, this.v);
+    FSS.Vector3.normalise(this.normal);
+    return this;
+  }
+};
+
+/**
+ * @class Geometry
+ * @author Matthew Wagerfield
+ */
+FSS.Geometry = function() {
+  this.vertices = [];
+  this.triangles = [];
+  this.dirty = false;
+};
+
+FSS.Geometry.prototype = {
+  update: function() {
+    if (this.dirty) {
+      var t,triangle;
+      for (t = this.triangles.length - 1; t >= 0; t--) {
+        triangle = this.triangles[t];
+        triangle.computeCentroid();
+        triangle.computeNormal();
+      }
+      this.dirty = false;
+    }
+    return this;
+  }
+};
+
+/**
+ * @class Plane
+ * @author Matthew Wagerfield
+ */
+FSS.Plane = function(width, height, segments, slices, s, material) {
+  FSS.Geometry.call(this);
+  this.width = width || 100;
+  this.height = height || 100;
+  this.segments = segments || 4;
+  this.slices = slices || 4;
+  this.segmentWidth = this.width / this.segments;
+  this.sliceHeight = this.height / this.slices;
+
+  // Cache Variables
+  var x, y, v0, v1, v2, v3,
+      vertex, triangle, vertices = [],
+      offsetX = this.width * -0.5,
+      offsetY = this.height * 0.5;
+
+  // Add Vertices
+  for (x = 0; x <= this.segments; x++) {
+    vertices.push([]);
+    for (y = 0; y <= this.slices; y++) {
+      vertex = new FSS.Vertex(offsetX + x*this.segmentWidth, offsetY - y*this.sliceHeight);
+      vertices[x].push(vertex);
+      this.vertices.push(vertex);
+    }
+  }
+
+  // Add Triangles
+  for (x = 0; x < this.segments; x++) {
+    for (y = 0; y < this.slices; y++) {
+      v0 = vertices[x+0][y+0];
+      v1 = vertices[x+0][y+1];
+      v2 = vertices[x+1][y+0];
+      v3 = vertices[x+1][y+1];
+      t0 = new FSS.Triangle(v0, v1, v2, s, material);
+      t1 = new FSS.Triangle(v2, v1, v3, s, material);
+      this.triangles.push(t0, t1);
+    }
+  }
+};
+
+FSS.Plane.prototype = Object.create(FSS.Geometry.prototype);
+
+/**
+ * @class Material
+ * @author Matthew Wagerfield
+ */
+FSS.Material = function(ambient, diffuse) {
+  this.ambient = new FSS.Color(ambient || '#444444');
+  this.diffuse = new FSS.Color(diffuse || '#FFFFFF');
+  this.slave = new FSS.Color();
+};
+
+/**
+ * @class Mesh
+ * @author Matthew Wagerfield
+ */
+FSS.Mesh = function(geometry, material) {
+  FSS.Object.call(this);
+  this.geometry = geometry || new FSS.Geometry();
+  this.material = material || new FSS.Material();
+  this.side = FSS.FRONT;
+  this.visible = true;
+};
+
+FSS.Mesh.prototype = Object.create(FSS.Object.prototype);
+
+FSS.Mesh.prototype.update = function(lights, calculate) {
+  var t,triangle, l,light, illuminance;
+
+  // Update Geometry
+  this.geometry.update();
+
+  // Calculate the triangle colors
+  if (calculate) {
+
+    // Iterate through Triangles
+    for (t = this.geometry.triangles.length - 1; t >= 0; t--) {
+      triangle = this.geometry.triangles[t];
+
+      // Reset Triangle Color
+      FSS.Vector4.set(triangle.color.rgba);
+
+      // Iterate through Lights
+      for (l = lights.length - 1; l >= 0; l--) {
+        light = lights[l];
+
+        // Calculate Illuminance
+        FSS.Vector3.subtractVectors(light.ray, light.position, triangle.centroid);
+        FSS.Vector3.normalise(light.ray);
+        illuminance = FSS.Vector3.dot(triangle.normal, light.ray);
+        if (this.side === FSS.FRONT) {
+          illuminance = Math.max(illuminance, 0);
+        } else if (this.side === FSS.BACK) {
+          illuminance = Math.abs(Math.min(illuminance, 0));
+        } else if (this.side === FSS.DOUBLE) {
+          illuminance = Math.max(Math.abs(illuminance), 0);
+        }
+
+        // Calculate Ambient Light
+        FSS.Vector4.multiplyVectors(triangle.material.slave.rgba, triangle.material.ambient.rgba, light.ambient.rgba);
+        FSS.Vector4.add(triangle.color.rgba, triangle.material.slave.rgba);
+
+        // Calculate Diffuse Light
+        FSS.Vector4.multiplyVectors(triangle.material.slave.rgba, triangle.material.diffuse.rgba, light.diffuse.rgba);
+        FSS.Vector4.multiplyScalar(triangle.material.slave.rgba, illuminance);
+        FSS.Vector4.add(triangle.color.rgba, triangle.material.slave.rgba);
+      }
+
+      // Clamp & Format Color
+      FSS.Vector4.clamp(triangle.color.rgba, 0, 1);
+    }
+  }
+  return this;
+};
+
+/**
+ * @class Scene
+ * @author Matthew Wagerfield
+ */
+FSS.Scene = function() {
+  this.meshes = [];
+  this.lights = [];
+};
+
+FSS.Scene.prototype = {
+  add: function(object) {
+    if (object instanceof FSS.Mesh && !~this.meshes.indexOf(object)) {
+      this.meshes.push(object);
+    } else if (object instanceof FSS.Light && !~this.lights.indexOf(object)) {
+      this.lights.push(object);
+    }
+    return this;
+  },
+  remove: function(object) {
+    if (object instanceof FSS.Mesh && ~this.meshes.indexOf(object)) {
+      this.meshes.splice(this.meshes.indexOf(object), 1);
+    } else if (object instanceof FSS.Light && ~this.lights.indexOf(object)) {
+      this.lights.splice(this.lights.indexOf(object), 1);
+    }
+    return this;
+  }
+};
+
+/**
+ * @class Renderer
+ * @author Matthew Wagerfield
+ */
+FSS.Renderer = function() {
+  this.width = 0;
+  this.height = 0;
+  this.halfWidth = 0;
+  this.halfHeight = 0;
+};
+
+FSS.Renderer.prototype = {
+  setSize: function(width, height) {
+    if (this.width === width && this.height === height) return;
+    this.width = width;
+    this.height = height;
+    this.halfWidth = this.width * 0.5;
+    this.halfHeight = this.height * 0.5;
+    return this;
+  },
+  clear: function() {
+    return this;
+  },
+  render: function(scene) {
+    return this;
+  }
+};
+
+/**
+ * @class SVG Renderer
+ * @author Matthew Wagerfield
+ */
+FSS.SVGRenderer = function(s) {
+  FSS.Renderer.call(this);
+  this.element = s.g();
+};
+
+FSS.SVGRenderer.prototype = Object.create(FSS.Renderer.prototype);
+
+FSS.SVGRenderer.prototype.setSize = function(width, height) {
+  FSS.Renderer.prototype.setSize.call(this, width, height);
+  return this;
+};
+
+FSS.SVGRenderer.prototype.clear = function() {
+  FSS.Renderer.prototype.clear.call(this);
+  for (var i = this.element.childNodes.length - 1; i >= 0; i--) {
+    this.element.removeChild(this.element.childNodes[i]);
+  }
+  return this;
+};
+
+FSS.SVGRenderer.prototype.render = function(scene) {
+  FSS.Renderer.prototype.render.call(this, scene);
+  var m,mesh, t,triangle, points, style;
+
+  // Update Meshes
+  for (m = scene.meshes.length - 1; m >= 0; m--) {
+    mesh = scene.meshes[m];
+    if (mesh.visible) {
+      mesh.update(scene.lights, true);
+
+      // Render Triangles
+      for (t = mesh.geometry.triangles.length - 1; t >= 0; t--) {
+        triangle = mesh.geometry.triangles[t];
+
+		if (triangle.polygon.parent() !== this.element) {
+			this.element.append(triangle.polygon);
+		}
+		
+        points  = this.formatPoint(triangle.a)+' ';
+        points += this.formatPoint(triangle.b)+' ';
+        points += this.formatPoint(triangle.c);
+        style = this.formatStyle(triangle.color.format());
+		
+		triangle.polygon.attr({
+			points: points,
+			style: style
+		});
+      }
+    }
+  }
+  return this;
+};
+
+FSS.SVGRenderer.prototype.formatPoint = function(vertex) {
+  return (this.halfWidth+vertex.position[0])+','+(this.halfHeight-vertex.position[1]);
+};
+
+FSS.SVGRenderer.prototype.formatStyle = function(color) {
+  var style = 'fill:'+color+';';
+  style += 'stroke:'+color+';';
+  return style;
+};
--- a/demos/snap-ad/src/js/vendor/fss/Color.js
+++ b/demos/snap-ad/src/js/vendor/fss/Color.js
@ -0,0 +1,34 @@
+/**
+ * @class Color
+ * @author Matthew Wagerfield
+ */
+FSS.Color = function(hex, opacity) {
+  this.rgba = FSS.Vector4.create();
+  this.hex = hex || '#000000';
+  this.opacity = FSS.Utils.isNumber(opacity) ? opacity : 1;
+  this.set(this.hex, this.opacity);
+};
+
+FSS.Color.prototype = {
+  set: function(hex, opacity) {
+    hex = hex.replace('#', '');
+    var size = hex.length / 3;
+    this.rgba[0] = parseInt(hex.substring(size*0, size*1), 16) / 255;
+    this.rgba[1] = parseInt(hex.substring(size*1, size*2), 16) / 255;
+    this.rgba[2] = parseInt(hex.substring(size*2, size*3), 16) / 255;
+    this.rgba[3] = FSS.Utils.isNumber(opacity) ? opacity : this.rgba[3];
+    return this;
+  },
+  hexify: function(channel) {
+    var hex = Math.ceil(channel*255).toString(16);
+    if (hex.length === 1) { hex = '0' + hex; }
+    return hex;
+  },
+  format: function() {
+    var r = this.hexify(this.rgba[0]);
+    var g = this.hexify(this.rgba[1]);
+    var b = this.hexify(this.rgba[2]);
+    this.hex = '#' + r + g + b;
+    return this.hex;
+  }
+};
--- a/demos/snap-ad/src/js/vendor/fss/Core.js
+++ b/demos/snap-ad/src/js/vendor/fss/Core.js
@ -0,0 +1,61 @@
+/**
+ * Defines the Flat Surface Shader namespace for all the awesomeness to exist upon.
+ * @author Matthew Wagerfield
+ */
+FSS = {
+  FRONT  : 0,
+  BACK   : 1,
+  DOUBLE : 2,
+  SVGNS  : 'http://www.w3.org/2000/svg'
+};
+
+/**
+ * @class Array
+ * @author Matthew Wagerfield
+ */
+FSS.Array = typeof Float32Array === 'function' ? Float32Array : Array;
+
+/**
+ * @class Utils
+ * @author Matthew Wagerfield
+ */
+FSS.Utils = {
+  isNumber: function(value) {
+    return !isNaN(parseFloat(value)) && isFinite(value);
+  }
+};
+
+/**
+ * Request Animation Frame Polyfill.
+ * @author Paul Irish
+ * @see https://gist.github.com/paulirish/1579671
+ */
+(function() {
+
+  var lastTime = 0;
+  var vendors = ['ms', 'moz', 'webkit', 'o'];
+
+  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+    window.cancelAnimationFrame  = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
+  }
+
+  if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = function(callback, element) {
+      var currentTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (currentTime - lastTime));
+      var id = window.setTimeout(function() {
+        callback(currentTime + timeToCall);
+      }, timeToCall);
+      lastTime = currentTime + timeToCall;
+      return id;
+    };
+  }
+
+  if (!window.cancelAnimationFrame) {
+    window.cancelAnimationFrame = function(id) {
+      clearTimeout(id);
+    };
+  }
+
+}());
--- a/demos/snap-ad/src/js/vendor/fss/Geometry.js
+++ b/demos/snap-ad/src/js/vendor/fss/Geometry.js
@ -0,0 +1,24 @@
+/**
+ * @class Geometry
+ * @author Matthew Wagerfield
+ */
+FSS.Geometry = function() {
+  this.vertices = [];
+  this.triangles = [];
+  this.dirty = false;
+};
+
+FSS.Geometry.prototype = {
+  update: function() {
+    if (this.dirty) {
+      var t,triangle;
+      for (t = this.triangles.length - 1; t >= 0; t--) {
+        triangle = this.triangles[t];
+        triangle.computeCentroid();
+        triangle.computeNormal();
+      }
+      this.dirty = false;
+    }
+    return this;
+  }
+};
--- a/demos/snap-ad/src/js/vendor/fss/Light.js
+++ b/demos/snap-ad/src/js/vendor/fss/Light.js
@ -0,0 +1,12 @@
+/**
+ * @class Light
+ * @author Matthew Wagerfield
+ */
+FSS.Light = function(ambient, diffuse) {
+  FSS.Object.call(this);
+  this.ambient = new FSS.Color(ambient || '#FFFFFF');
+  this.diffuse = new FSS.Color(diffuse || '#FFFFFF');
+  this.ray = FSS.Vector3.create();
+};
+
+FSS.Light.prototype = Object.create(FSS.Object.prototype);
--- a/demos/snap-ad/src/js/vendor/fss/Material.js
+++ b/demos/snap-ad/src/js/vendor/fss/Material.js
@ -0,0 +1,9 @@
+/**
+ * @class Material
+ * @author Matthew Wagerfield
+ */
+FSS.Material = function(ambient, diffuse) {
+  this.ambient = new FSS.Color(ambient || '#444444');
+  this.diffuse = new FSS.Color(diffuse || '#FFFFFF');
+  this.slave = new FSS.Color();
+};
--- a/demos/snap-ad/src/js/vendor/fss/Math.js
+++ b/demos/snap-ad/src/js/vendor/fss/Math.js
@ -0,0 +1,14 @@
+/**
+ * @object Math Augmentation
+ * @author Matthew Wagerfield
+ */
+Math.PIM2 = Math.PI*2;
+Math.PID2 = Math.PI/2;
+Math.randomInRange = function(min, max) {
+  return min + (max - min) * Math.random();
+};
+Math.clamp = function(value, min, max) {
+  value = Math.max(value, min);
+  value = Math.min(value, max);
+  return value;
+};
--- a/demos/snap-ad/src/js/vendor/fss/Mesh.js
+++ b/demos/snap-ad/src/js/vendor/fss/Mesh.js
@ -0,0 +1,62 @@
+/**
+ * @class Mesh
+ * @author Matthew Wagerfield
+ */
+FSS.Mesh = function(geometry, material) {
+  FSS.Object.call(this);
+  this.geometry = geometry || new FSS.Geometry();
+  this.material = material || new FSS.Material();
+  this.side = FSS.FRONT;
+  this.visible = true;
+};
+
+FSS.Mesh.prototype = Object.create(FSS.Object.prototype);
+
+FSS.Mesh.prototype.update = function(lights, calculate) {
+  var t,triangle, l,light, illuminance;
+
+  // Update Geometry
+  this.geometry.update();
+
+  // Calculate the triangle colors
+  if (calculate) {
+
+    // Iterate through Triangles
+    for (t = this.geometry.triangles.length - 1; t >= 0; t--) {
+      triangle = this.geometry.triangles[t];
+
+      // Reset Triangle Color
+      FSS.Vector4.set(triangle.color.rgba);
+
+      // Iterate through Lights
+      for (l = lights.length - 1; l >= 0; l--) {
+        light = lights[l];
+
+        // Calculate Illuminance
+        FSS.Vector3.subtractVectors(light.ray, light.position, triangle.centroid);
+        FSS.Vector3.normalise(light.ray);
+        illuminance = FSS.Vector3.dot(triangle.normal, light.ray);
+        if (this.side === FSS.FRONT) {
+          illuminance = Math.max(illuminance, 0);
+        } else if (this.side === FSS.BACK) {
+          illuminance = Math.abs(Math.min(illuminance, 0));
+        } else if (this.side === FSS.DOUBLE) {
+          illuminance = Math.max(Math.abs(illuminance), 0);
+        }
+
+        // Calculate Ambient Light
+        FSS.Vector4.multiplyVectors(this.material.slave.rgba, this.material.ambient.rgba, light.ambient.rgba);
+        FSS.Vector4.add(triangle.color.rgba, this.material.slave.rgba);
+
+        // Calculate Diffuse Light
+        FSS.Vector4.multiplyVectors(this.material.slave.rgba, this.material.diffuse.rgba, light.diffuse.rgba);
+        FSS.Vector4.multiplyScalar(this.material.slave.rgba, illuminance);
+        FSS.Vector4.add(triangle.color.rgba, this.material.slave.rgba);
+      }
+
+      // Clamp & Format Color
+      FSS.Vector4.clamp(triangle.color.rgba, 0, 1);
+    }
+  }
+  return this;
+};
--- a/demos/snap-ad/src/js/vendor/fss/Object.js
+++ b/demos/snap-ad/src/js/vendor/fss/Object.js
@ -0,0 +1,14 @@
+/**
+ * @class Object
+ * @author Matthew Wagerfield
+ */
+FSS.Object = function() {
+  this.position = FSS.Vector3.create();
+};
+
+FSS.Object.prototype = {
+  setPosition: function(x, y, z) {
+    FSS.Vector3.set(this.position, x, y, z);
+    return this;
+  }
+};
--- a/demos/snap-ad/src/js/vendor/fss/Plane.js
+++ b/demos/snap-ad/src/js/vendor/fss/Plane.js
@ -0,0 +1,44 @@
+/**
+ * @class Plane
+ * @author Matthew Wagerfield
+ */
+FSS.Plane = function(width, height, segments, slices, s) {
+  FSS.Geometry.call(this);
+  this.width = width || 100;
+  this.height = height || 100;
+  this.segments = segments || 4;
+  this.slices = slices || 4;
+  this.segmentWidth = this.width / this.segments;
+  this.sliceHeight = this.height / this.slices;
+
+  // Cache Variables
+  var x, y, v0, v1, v2, v3,
+      vertex, triangle, vertices = [],
+      offsetX = this.width * -0.5,
+      offsetY = this.height * 0.5;
+
+  // Add Vertices
+  for (x = 0; x <= this.segments; x++) {
+    vertices.push([]);
+    for (y = 0; y <= this.slices; y++) {
+      vertex = new FSS.Vertex(offsetX + x*this.segmentWidth, offsetY - y*this.sliceHeight);
+      vertices[x].push(vertex);
+      this.vertices.push(vertex);
+    }
+  }
+
+  // Add Triangles
+  for (x = 0; x < this.segments; x++) {
+    for (y = 0; y < this.slices; y++) {
+      v0 = vertices[x+0][y+0];
+      v1 = vertices[x+0][y+1];
+      v2 = vertices[x+1][y+0];
+      v3 = vertices[x+1][y+1];
+      t0 = new FSS.Triangle(v0, v1, v2, s);
+      t1 = new FSS.Triangle(v2, v1, v3, s);
+      this.triangles.push(t0, t1);
+    }
+  }
+};
+
+FSS.Plane.prototype = Object.create(FSS.Geometry.prototype);
--- a/demos/snap-ad/src/js/vendor/fss/Renderer.js
+++ b/demos/snap-ad/src/js/vendor/fss/Renderer.js
@ -0,0 +1,27 @@
+/**
+ * @class Renderer
+ * @author Matthew Wagerfield
+ */
+FSS.Renderer = function() {
+  this.width = 0;
+  this.height = 0;
+  this.halfWidth = 0;
+  this.halfHeight = 0;
+};
+
+FSS.Renderer.prototype = {
+  setSize: function(width, height) {
+    if (this.width === width && this.height === height) return;
+    this.width = width;
+    this.height = height;
+    this.halfWidth = this.width * 0.5;
+    this.halfHeight = this.height * 0.5;
+    return this;
+  },
+  clear: function() {
+    return this;
+  },
+  render: function(scene) {
+    return this;
+  }
+};
--- a/demos/snap-ad/src/js/vendor/fss/SVGRenderer.js
+++ b/demos/snap-ad/src/js/vendor/fss/SVGRenderer.js
@ -0,0 +1,66 @@
+/**
+ * @class SVG Renderer
+ * @author Matthew Wagerfield
+ */
+FSS.SVGRenderer = function(s) {
+  FSS.Renderer.call(this);
+  this.element = s.g();
+};
+
+FSS.SVGRenderer.prototype = Object.create(FSS.Renderer.prototype);
+
+FSS.SVGRenderer.prototype.setSize = function(width, height) {
+  FSS.Renderer.prototype.setSize.call(this, width, height);
+  return this;
+};
+
+FSS.SVGRenderer.prototype.clear = function() {
+  FSS.Renderer.prototype.clear.call(this);
+  for (var i = this.element.childNodes.length - 1; i >= 0; i--) {
+    this.element.removeChild(this.element.childNodes[i]);
+  }
+  return this;
+};
+
+FSS.SVGRenderer.prototype.render = function(scene) {
+  FSS.Renderer.prototype.render.call(this, scene);
+  var m,mesh, t,triangle, points, style;
+
+  // Update Meshes
+  for (m = scene.meshes.length - 1; m >= 0; m--) {
+    mesh = scene.meshes[m];
+    if (mesh.visible) {
+      mesh.update(scene.lights, true);
+
+      // Render Triangles
+      for (t = mesh.geometry.triangles.length - 1; t >= 0; t--) {
+        triangle = mesh.geometry.triangles[t];
+
+		if (triangle.polygon.parent() !== this.element) {
+			this.element.append(triangle.polygon);
+		}
+		
+        points  = this.formatPoint(triangle.a)+' ';
+        points += this.formatPoint(triangle.b)+' ';
+        points += this.formatPoint(triangle.c);
+        style = this.formatStyle(triangle.color.format());
+		
+		triangle.polygon.attr({
+			points: points,
+			style: style
+		});
+      }
+    }
+  }
+  return this;
+};
+
+FSS.SVGRenderer.prototype.formatPoint = function(vertex) {
+  return (this.halfWidth+vertex.position[0])+','+(this.halfHeight-vertex.position[1]);
+};
+
+FSS.SVGRenderer.prototype.formatStyle = function(color) {
+  var style = 'fill:'+color+';';
+  style += 'stroke:'+color+';';
+  return style;
+};
--- a/demos/snap-ad/src/js/vendor/fss/Scene.js
+++ b/demos/snap-ad/src/js/vendor/fss/Scene.js
@ -0,0 +1,27 @@
+/**
+ * @class Scene
+ * @author Matthew Wagerfield
+ */
+FSS.Scene = function() {
+  this.meshes = [];
+  this.lights = [];
+};
+
+FSS.Scene.prototype = {
+  add: function(object) {
+    if (object instanceof FSS.Mesh && !~this.meshes.indexOf(object)) {
+      this.meshes.push(object);
+    } else if (object instanceof FSS.Light && !~this.lights.indexOf(object)) {
+      this.lights.push(object);
+    }
+    return this;
+  },
+  remove: function(object) {
+    if (object instanceof FSS.Mesh && ~this.meshes.indexOf(object)) {
+      this.meshes.splice(this.meshes.indexOf(object), 1);
+    } else if (object instanceof FSS.Light && ~this.lights.indexOf(object)) {
+      this.lights.splice(this.lights.indexOf(object), 1);
+    }
+    return this;
+  }
+};
--- a/demos/snap-ad/src/js/vendor/fss/Triangle.js
+++ b/demos/snap-ad/src/js/vendor/fss/Triangle.js
@ -0,0 +1,41 @@
+/**
+ * @class Triangle
+ * @author Matthew Wagerfield
+ */
+FSS.Triangle = function(a, b, c, s) {
+  this.a = a || new FSS.Vertex();
+  this.b = b || new FSS.Vertex();
+  this.c = c || new FSS.Vertex();
+  this.vertices = [this.a, this.b, this.c];
+  this.u = FSS.Vector3.create();
+  this.v = FSS.Vector3.create();
+  this.centroid = FSS.Vector3.create();
+  this.normal = FSS.Vector3.create();
+  this.color = new FSS.Color();
+  this.polygon = s.polygon();
+  this.polygon.attr({
+    'stroke-linejoin': 'round',
+	'stroke-miterlimit': 1,
+	'stroke-width': 1
+  });
+
+  this.computeCentroid();
+  this.computeNormal();
+};
+
+FSS.Triangle.prototype = {
+  computeCentroid: function() {
+    this.centroid[0] = this.a.position[0] + this.b.position[0] + this.c.position[0];
+    this.centroid[1] = this.a.position[1] + this.b.position[1] + this.c.position[1];
+    this.centroid[2] = this.a.position[2] + this.b.position[2] + this.c.position[2];
+    FSS.Vector3.divideScalar(this.centroid, 3);
+    return this;
+  },
+  computeNormal: function() {
+    FSS.Vector3.subtractVectors(this.u, this.b.position, this.a.position);
+    FSS.Vector3.subtractVectors(this.v, this.c.position, this.a.position);
+    FSS.Vector3.crossVectors(this.normal, this.u, this.v);
+    FSS.Vector3.normalise(this.normal);
+    return this;
+  }
+};
--- a/demos/snap-ad/src/js/vendor/fss/Vector3.js
+++ b/demos/snap-ad/src/js/vendor/fss/Vector3.js
@ -0,0 +1,190 @@
+/**
+ * @object Vector3
+ * @author Matthew Wagerfield
+ */
+FSS.Vector3 = {
+  create: function(x, y, z) {
+    var vector = new FSS.Array(3);
+    this.set(vector, x, y, z);
+    return vector;
+  },
+  clone: function(a) {
+    var vector = this.create();
+    this.copy(vector, a);
+    return vector;
+  },
+  set: function(target, x, y, z) {
+    target[0] = x || 0;
+    target[1] = y || 0;
+    target[2] = z || 0;
+    return this;
+  },
+  setX: function(target, x) {
+    target[0] = x || 0;
+    return this;
+  },
+  setY: function(target, y) {
+    target[1] = y || 0;
+    return this;
+  },
+  setZ: function(target, z) {
+    target[2] = z || 0;
+    return this;
+  },
+  copy: function(target, a) {
+    target[0] = a[0];
+    target[1] = a[1];
+    target[2] = a[2];
+    return this;
+  },
+  add: function(target, a) {
+    target[0] += a[0];
+    target[1] += a[1];
+    target[2] += a[2];
+    return this;
+  },
+  addVectors: function(target, a, b) {
+    target[0] = a[0] + b[0];
+    target[1] = a[1] + b[1];
+    target[2] = a[2] + b[2];
+    return this;
+  },
+  addScalar: function(target, s) {
+    target[0] += s;
+    target[1] += s;
+    target[2] += s;
+    return this;
+  },
+  subtract: function(target, a) {
+    target[0] -= a[0];
+    target[1] -= a[1];
+    target[2] -= a[2];
+    return this;
+  },
+  subtractVectors: function(target, a, b) {
+    target[0] = a[0] - b[0];
+    target[1] = a[1] - b[1];
+    target[2] = a[2] - b[2];
+    return this;
+  },
+  subtractScalar: function(target, s) {
+    target[0] -= s;
+    target[1] -= s;
+    target[2] -= s;
+    return this;
+  },
+  multiply: function(target, a) {
+    target[0] *= a[0];
+    target[1] *= a[1];
+    target[2] *= a[2];
+    return this;
+  },
+  multiplyVectors: function(target, a, b) {
+    target[0] = a[0] * b[0];
+    target[1] = a[1] * b[1];
+    target[2] = a[2] * b[2];
+    return this;
+  },
+  multiplyScalar: function(target, s) {
+    target[0] *= s;
+    target[1] *= s;
+    target[2] *= s;
+    return this;
+  },
+  divide: function(target, a) {
+    target[0] /= a[0];
+    target[1] /= a[1];
+    target[2] /= a[2];
+    return this;
+  },
+  divideVectors: function(target, a, b) {
+    target[0] = a[0] / b[0];
+    target[1] = a[1] / b[1];
+    target[2] = a[2] / b[2];
+    return this;
+  },
+  divideScalar: function(target, s) {
+    if (s !== 0) {
+      target[0] /= s;
+      target[1] /= s;
+      target[2] /= s;
+    } else {
+      target[0] = 0;
+      target[1] = 0;
+      target[2] = 0;
+    }
+    return this;
+  },
+  cross: function(target, a) {
+    var x = target[0];
+    var y = target[1];
+    var z = target[2];
+    target[0] = y*a[2] - z*a[1];
+    target[1] = z*a[0] - x*a[2];
+    target[2] = x*a[1] - y*a[0];
+    return this;
+  },
+  crossVectors: function(target, a, b) {
+    target[0] = a[1]*b[2] - a[2]*b[1];
+    target[1] = a[2]*b[0] - a[0]*b[2];
+    target[2] = a[0]*b[1] - a[1]*b[0];
+    return this;
+  },
+  min: function(target, value) {
+    if (target[0] < value) { target[0] = value; }
+    if (target[1] < value) { target[1] = value; }
+    if (target[2] < value) { target[2] = value; }
+    return this;
+  },
+  max: function(target, value) {
+    if (target[0] > value) { target[0] = value; }
+    if (target[1] > value) { target[1] = value; }
+    if (target[2] > value) { target[2] = value; }
+    return this;
+  },
+  clamp: function(target, min, max) {
+    this.min(target, min);
+    this.max(target, max);
+    return this;
+  },
+  limit: function(target, min, max) {
+    var length = this.length(target);
+    if (min !== null && length < min) {
+      this.setLength(target, min);
+    } else if (max !== null && length > max) {
+      this.setLength(target, max);
+    }
+    return this;
+  },
+  dot: function(a, b) {
+    return a[0]*b[0] + a[1]*b[1] + a[2]*b[2];
+  },
+  normalise: function(target) {
+    return this.divideScalar(target, this.length(target));
+  },
+  negate: function(target) {
+    return this.multiplyScalar(target, -1);
+  },
+  distanceSquared: function(a, b) {
+    var dx = a[0] - b[0];
+    var dy = a[1] - b[1];
+    var dz = a[2] - b[2];
+    return dx*dx + dy*dy + dz*dz;
+  },
+  distance: function(a, b) {
+    return Math.sqrt(this.distanceSquared(a, b));
+  },
+  lengthSquared: function(a) {
+    return a[0]*a[0] + a[1]*a[1] + a[2]*a[2];
+  },
+  length: function(a) {
+    return Math.sqrt(this.lengthSquared(a));
+  },
+  setLength: function(target, l) {
+    var length = this.length(target);
+    if (length !== 0 && l !== length) {
+      this.multiplyScalar(target, l / length);
+    }
+    return this;
+  }
+};
--- a/demos/snap-ad/src/js/vendor/fss/Vector4.js
+++ b/demos/snap-ad/src/js/vendor/fss/Vector4.js
@ -0,0 +1,74 @@
+/**
+ * @object Vector4
+ * @author Matthew Wagerfield
+ */
+FSS.Vector4 = {
+  create: function(x, y, z, w) {
+    var vector = new FSS.Array(4);
+    this.set(vector, x, y, z);
+    return vector;
+  },
+  set: function(target, x, y, z, w) {
+    target[0] = x || 0;
+    target[1] = y || 0;
+    target[2] = z || 0;
+    target[3] = w || 0;
+    return this;
+  },
+  setX: function(target, x) {
+    target[0] = x || 0;
+    return this;
+  },
+  setY: function(target, y) {
+    target[1] = y || 0;
+    return this;
+  },
+  setZ: function(target, z) {
+    target[2] = z || 0;
+    return this;
+  },
+  setW: function(target, w) {
+    target[3] = w || 0;
+    return this;
+  },
+  add: function(target, a) {
+    target[0] += a[0];
+    target[1] += a[1];
+    target[2] += a[2];
+    target[3] += a[3];
+    return this;
+  },
+  multiplyVectors: function(target, a, b) {
+    target[0] = a[0] * b[0];
+    target[1] = a[1] * b[1];
+    target[2] = a[2] * b[2];
+    target[3] = a[3] * b[3];
+    return this;
+  },
+  multiplyScalar: function(target, s) {
+    target[0] *= s;
+    target[1] *= s;
+    target[2] *= s;
+    target[3] *= s;
+    return this;
+  },
+  min: function(target, value) {
+    if (target[0] < value) { target[0] = value; }
+    if (target[1] < value) { target[1] = value; }
+    if (target[2] < value) { target[2] = value; }
+    if (target[3] < value) { target[3] = value; }
+    return this;
+  },
+  max: function(target, value) {
+    if (target[0] > value) { target[0] = value; }
+    if (target[1] > value) { target[1] = value; }
+    if (target[2] > value) { target[2] = value; }
+    if (target[3] > value) { target[3] = value; }
+    return this;
+  },
+  clamp: function(target, min, max) {
+    this.min(target, min);
+    this.max(target, max);
+    return this;
+  }
+};
--- a/demos/snap-ad/src/js/vendor/fss/Vertex.js
+++ b/demos/snap-ad/src/js/vendor/fss/Vertex.js
@ -0,0 +1,14 @@
+/**
+ * @class Vertex
+ * @author Matthew Wagerfield
+ */
+FSS.Vertex = function(x, y, z) {
+  this.position = FSS.Vector3.create(x, y, z);
+};
+
+FSS.Vertex.prototype = {
+  setPosition: function(x, y, z) {
+    FSS.Vector3.set(this.position, x, y, z);
+    return this;
+  }
+};
--- a/demos/snap-ad/src/js/vendor/modernizr.min.js
+++ b/demos/snap-ad/src/js/vendor/modernizr.min.js
--- a/demos/snap-ad/src/js/vendor/require.js
+++ b/demos/snap-ad/src/js/vendor/require.js
--- a/demos/snap-ad/src/js/vendor/require.min.js
+++ b/demos/snap-ad/src/js/vendor/require.min.js
@ -0,0 +1,36 @@
+/*
+ RequireJS 2.1.10 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved.
+ Available via the MIT or new BSD license.
+ see: http://github.com/jrburke/requirejs for details
+*/
+var requirejs,require,define;
+(function(ca){function G(b){return"[object Function]"===N.call(b)}function H(b){return"[object Array]"===N.call(b)}function v(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function U(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function s(b,c){return ga.call(b,c)}function j(b,c){return s(b,c)&&b[c]}function B(b,c){for(var d in b)if(s(b,d)&&c(b[d],d))break}function V(b,c,d,g){c&&B(c,function(c,h){if(d||!s(b,h))g&&"object"===typeof c&&c&&!H(c)&&!G(c)&&!(c instanceof
+RegExp)?(b[h]||(b[h]={}),V(b[h],c,d,g)):b[h]=c});return b}function t(b,c){return function(){return c.apply(b,arguments)}}function da(b){throw b;}function ea(b){if(!b)return b;var c=ca;v(b.split("."),function(b){c=c[b]});return c}function C(b,c,d,g){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=g;d&&(c.originalError=d);return c}function ha(b){function c(a,e,b){var f,n,c,d,g,h,i,I=e&&e.split("/");n=I;var m=l.map,k=m&&m["*"];if(a&&"."===a.charAt(0))if(e){n=
+I.slice(0,I.length-1);a=a.split("/");e=a.length-1;l.nodeIdCompat&&R.test(a[e])&&(a[e]=a[e].replace(R,""));n=a=n.concat(a);d=n.length;for(e=0;e<d;e++)if(c=n[e],"."===c)n.splice(e,1),e-=1;else if(".."===c)if(1===e&&(".."===n[2]||".."===n[0]))break;else 0<e&&(n.splice(e-1,2),e-=2);a=a.join("/")}else 0===a.indexOf("./")&&(a=a.substring(2));if(b&&m&&(I||k)){n=a.split("/");e=n.length;a:for(;0<e;e-=1){d=n.slice(0,e).join("/");if(I)for(c=I.length;0<c;c-=1)if(b=j(m,I.slice(0,c).join("/")))if(b=j(b,d)){f=b;
+g=e;break a}!h&&(k&&j(k,d))&&(h=j(k,d),i=e)}!f&&h&&(f=h,g=i);f&&(n.splice(0,g,f),a=n.join("/"))}return(f=j(l.pkgs,a))?f:a}function d(a){z&&v(document.getElementsByTagName("script"),function(e){if(e.getAttribute("data-requiremodule")===a&&e.getAttribute("data-requirecontext")===i.contextName)return e.parentNode.removeChild(e),!0})}function g(a){var e=j(l.paths,a);if(e&&H(e)&&1<e.length)return e.shift(),i.require.undef(a),i.require([a]),!0}function u(a){var e,b=a?a.indexOf("!"):-1;-1<b&&(e=a.substring(0,
+b),a=a.substring(b+1,a.length));return[e,a]}function m(a,e,b,f){var n,d,g=null,h=e?e.name:null,l=a,m=!0,k="";a||(m=!1,a="_@r"+(N+=1));a=u(a);g=a[0];a=a[1];g&&(g=c(g,h,f),d=j(p,g));a&&(g?k=d&&d.normalize?d.normalize(a,function(a){return c(a,h,f)}):c(a,h,f):(k=c(a,h,f),a=u(k),g=a[0],k=a[1],b=!0,n=i.nameToUrl(k)));b=g&&!d&&!b?"_unnormalized"+(Q+=1):"";return{prefix:g,name:k,parentMap:e,unnormalized:!!b,url:n,originalName:l,isDefine:m,id:(g?g+"!"+k:k)+b}}function q(a){var e=a.id,b=j(k,e);b||(b=k[e]=new i.Module(a));
+return b}function r(a,e,b){var f=a.id,n=j(k,f);if(s(p,f)&&(!n||n.defineEmitComplete))"defined"===e&&b(p[f]);else if(n=q(a),n.error&&"error"===e)b(n.error);else n.on(e,b)}function w(a,e){var b=a.requireModules,f=!1;if(e)e(a);else if(v(b,function(e){if(e=j(k,e))e.error=a,e.events.error&&(f=!0,e.emit("error",a))}),!f)h.onError(a)}function x(){S.length&&(ia.apply(A,[A.length,0].concat(S)),S=[])}function y(a){delete k[a];delete W[a]}function F(a,e,b){var f=a.map.id;a.error?a.emit("error",a.error):(e[f]=
+!0,v(a.depMaps,function(f,c){var d=f.id,g=j(k,d);g&&(!a.depMatched[c]&&!b[d])&&(j(e,d)?(a.defineDep(c,p[d]),a.check()):F(g,e,b))}),b[f]=!0)}function D(){var a,e,b=(a=1E3*l.waitSeconds)&&i.startTime+a<(new Date).getTime(),f=[],c=[],h=!1,k=!0;if(!X){X=!0;B(W,function(a){var i=a.map,m=i.id;if(a.enabled&&(i.isDefine||c.push(a),!a.error))if(!a.inited&&b)g(m)?h=e=!0:(f.push(m),d(m));else if(!a.inited&&(a.fetched&&i.isDefine)&&(h=!0,!i.prefix))return k=!1});if(b&&f.length)return a=C("timeout","Load timeout for modules: "+
+f,null,f),a.contextName=i.contextName,w(a);k&&v(c,function(a){F(a,{},{})});if((!b||e)&&h)if((z||fa)&&!Y)Y=setTimeout(function(){Y=0;D()},50);X=!1}}function E(a){s(p,a[0])||q(m(a[0],null,!0)).init(a[1],a[2])}function L(a){var a=a.currentTarget||a.srcElement,e=i.onScriptLoad;a.detachEvent&&!Z?a.detachEvent("onreadystatechange",e):a.removeEventListener("load",e,!1);e=i.onScriptError;(!a.detachEvent||Z)&&a.removeEventListener("error",e,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function M(){var a;
+for(x();A.length;){a=A.shift();if(null===a[0])return w(C("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));E(a)}}var X,$,i,K,Y,l={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},k={},W={},aa={},A=[],p={},T={},ba={},N=1,Q=1;K={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?a.exports:a.exports=p[a.map.id]={}},module:function(a){return a.module?a.module:
+a.module={id:a.map.id,uri:a.map.url,config:function(){return j(l.config,a.map.id)||{}},exports:K.exports(a)}}};$=function(a){this.events=j(aa,a.id)||{};this.map=a;this.shim=j(l.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};$.prototype={init:function(a,e,b,f){f=f||{};if(!this.inited){this.factory=e;if(b)this.on("error",b);else this.events.error&&(b=t(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=b;this.inited=
+!0;this.ignore=f.ignore;f.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,e){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=e)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],t(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
+this.map.url;T[a]||(T[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,e,b=this.map.id;e=this.depExports;var f=this.exports,c=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(G(c)){if(this.events.error&&this.map.isDefine||h.onError!==da)try{f=i.execCb(b,c,e,f)}catch(d){a=d}else f=i.execCb(b,c,e,f);this.map.isDefine&&void 0===f&&((e=this.module)?f=e.exports:this.usingExports&&
+(f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=c;this.exports=f;if(this.map.isDefine&&!this.ignore&&(p[b]=f,h.onResourceLoad))h.onResourceLoad(i,this.map,this.depMaps);y(b);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=
+this.map,b=a.id,d=m(a.prefix);this.depMaps.push(d);r(d,"defined",t(this,function(f){var d,g;g=j(ba,this.map.id);var J=this.map.name,u=this.map.parentMap?this.map.parentMap.name:null,p=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(J=f.normalize(J,function(a){return c(a,u,!0)})||""),f=m(a.prefix+"!"+J,this.map.parentMap),r(f,"defined",t(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),g=j(k,f.id)){this.depMaps.push(f);
+if(this.events.error)g.on("error",t(this,function(a){this.emit("error",a)}));g.enable()}}else g?(this.map.url=i.nameToUrl(g),this.load()):(d=t(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),d.error=t(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(k,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),d.fromText=t(this,function(f,c){var g=a.name,J=m(g),k=O;c&&(f=c);k&&(O=!1);q(J);s(l.config,b)&&(l.config[g]=l.config[b]);try{h.exec(f)}catch(j){return w(C("fromtexteval",
+"fromText eval for "+b+" failed: "+j,j,[b]))}k&&(O=!0);this.depMaps.push(J);i.completeLoad(g);p([g],d)}),f.load(a.name,p,d,l))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){W[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,t(this,function(a,b){var c,f;if("string"===typeof a){a=m(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=j(K,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;r(a,"defined",t(this,function(a){this.defineDep(b,
+a);this.check()}));this.errback&&r(a,"error",t(this,this.errback))}c=a.id;f=k[c];!s(K,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,t(this,function(a){var b=j(k,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:l,contextName:b,registry:k,defined:p,urlFetched:T,defQueue:A,Module:$,makeModuleMap:m,
+nextTick:h.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=l.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(l[b]||(l[b]={}),V(l[b],a,!0,!0)):l[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(ba[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);b[c]=a}),l.shim=b);a.packages&&v(a.packages,function(a){var b,
+a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(l.paths[b]=a.location);l.pkgs[b]=a.name+"/"+(a.main||"main").replace(ja,"").replace(R,"")});B(k,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=m(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ca,arguments));return b||a.exports&&ea(a.exports)}},makeRequire:function(a,e){function g(f,c,d){var j,l;e.enableBuildCallback&&(c&&G(c))&&(c.__requireJsBuild=
+!0);if("string"===typeof f){if(G(c))return w(C("requireargs","Invalid require call"),d);if(a&&s(K,f))return K[f](k[a.id]);if(h.get)return h.get(i,f,a,g);j=m(f,a,!1,!0);j=j.id;return!s(p,j)?w(C("notloaded",'Module name "'+j+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):p[j]}M();i.nextTick(function(){M();l=q(m(null,a));l.skipMap=e.skipMap;l.init(f,c,d,{enabled:!0});D()});return g}e=e||{};V(g,{isBrowser:z,toUrl:function(b){var e,d=b.lastIndexOf("."),g=b.split("/")[0];if(-1!==
+d&&(!("."===g||".."===g)||1<d))e=b.substring(d,b.length),b=b.substring(0,d);return i.nameToUrl(c(b,a&&a.id,!0),e,!0)},defined:function(b){return s(p,m(b,a,!1,!0).id)},specified:function(b){b=m(b,a,!1,!0).id;return s(p,b)||s(k,b)}});a||(g.undef=function(b){x();var c=m(b,a,!0),e=j(k,b);d(b);delete p[b];delete T[c.url];delete aa[b];U(A,function(a,c){a[0]===b&&A.splice(c,1)});e&&(e.events.defined&&(aa[b]=e.events),y(b))});return g},enable:function(a){j(k,a.id)&&q(a).enable()},completeLoad:function(a){var b,
+c,f=j(l.shim,a)||{},d=f.exports;for(x();A.length;){c=A.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);E(c)}c=j(k,a);if(!b&&!s(p,a)&&c&&!c.inited){if(l.enforceDefine&&(!d||!ea(d)))return g(a)?void 0:w(C("nodefine","No define call for "+a,null,[a]));E([a,f.deps||[],f.exportsFn])}D()},nameToUrl:function(a,b,c){var f,d,g;(f=j(l.pkgs,a))&&(a=f);if(f=j(ba,a))return i.nameToUrl(f,b,c);if(h.jsExtRegExp.test(a))f=a+(b||"");else{f=l.paths;a=a.split("/");for(d=a.length;0<d;d-=1)if(g=a.slice(0,
+d).join("/"),g=j(f,g)){H(g)&&(g=g[0]);a.splice(0,d,g);break}f=a.join("/");f+=b||(/^data\:|\?/.test(f)||c?"":".js");f=("/"===f.charAt(0)||f.match(/^[\w\+\.\-]+:/)?"":l.baseUrl)+f}return l.urlArgs?f+((-1===f.indexOf("?")?"?":"&")+l.urlArgs):f},load:function(a,b){h.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ka.test((a.currentTarget||a.srcElement).readyState))P=null,a=L(a),i.completeLoad(a.id)},onScriptError:function(a){var b=L(a);if(!g(b.id))return w(C("scripterror",
+"Script error for: "+b.id,a,[b.id]))}};i.require=i.makeRequire();return i}var h,x,y,D,L,E,P,M,q,Q,la=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,ma=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,R=/\.js$/,ja=/^\.\//;x=Object.prototype;var N=x.toString,ga=x.hasOwnProperty,ia=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),fa=!z&&"undefined"!==typeof importScripts,ka=z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,
+Z="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),F={},r={},S=[],O=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(G(requirejs))return;r=requirejs;requirejs=void 0}"undefined"!==typeof require&&!G(require)&&(r=require,require=void 0);h=requirejs=function(b,c,d,g){var u,m="_";!H(b)&&"string"!==typeof b&&(u=b,H(c)?(b=c,c=d,d=g):b=[]);u&&u.context&&(m=u.context);(g=j(F,m))||(g=F[m]=h.s.newContext(m));u&&g.configure(u);return g.require(b,c,d)};h.config=function(b){return h(b)};
+h.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=h);h.version="2.1.10";h.jsExtRegExp=/^\/|:|\?|\.js$/;h.isBrowser=z;x=h.s={contexts:F,newContext:ha};h({});v(["toUrl","undef","defined","specified"],function(b){h[b]=function(){var c=F._;return c.require[b].apply(c,arguments)}});if(z&&(y=x.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))y=x.head=D.parentNode;h.onError=da;h.createNode=function(b){var c=
+b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};h.load=function(b,c,d){var g=b&&b.config||{};if(z)return g=h.createNode(g,c,d),g.setAttribute("data-requirecontext",b.contextName),g.setAttribute("data-requiremodule",c),g.attachEvent&&!(g.attachEvent.toString&&0>g.attachEvent.toString().indexOf("[native code"))&&!Z?(O=!0,g.attachEvent("onreadystatechange",b.onScriptLoad)):
+(g.addEventListener("load",b.onScriptLoad,!1),g.addEventListener("error",b.onScriptError,!1)),g.src=d,M=g,D?y.insertBefore(g,D):y.appendChild(g),M=null,g;if(fa)try{importScripts(d),b.completeLoad(c)}catch(j){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,j,[c]))}};z&&!r.skipDataMain&&U(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(L=b.getAttribute("data-main"))return q=L,r.baseUrl||(E=q.split("/"),q=E.pop(),Q=E.length?E.join("/")+"/":"./",r.baseUrl=
+Q),q=q.replace(R,""),h.jsExtRegExp.test(q)&&(q=L),r.deps=r.deps?r.deps.concat(q):[q],!0});define=function(b,c,d){var g,h;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(la,"").replace(ma,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(O){if(!(g=M))P&&"interactive"===P.readyState||U(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return P=b}),g=P;g&&(b||
+(b=g.getAttribute("data-requiremodule")),h=F[g.getAttribute("data-requirecontext")])}(h?h.defQueue:S).push([b,c,d])};define.amd={jQuery:!0};h.exec=function(b){return eval(b)};h(r)}})(this);
--- a/demos/snap-ad/src/js/vendor/snap.svg-min.js
+++ b/demos/snap-ad/src/js/vendor/snap.svg-min.js
--- a/demos/snap-ad/src/js/vendor/snap.svg.js
+++ b/demos/snap-ad/src/js/vendor/snap.svg.js
--- a/demos/snap-ad/src/sass/screen.scss
+++ b/demos/snap-ad/src/sass/screen.scss
@ -0,0 +1,82 @@
+@import 'compass/css3';
+
+.base-font{
+	font-family: 'Open Sans', serif;
+}
+
+.snap-font{
+	font-family: 'Source Sans Pro', serif;
+}
+
+body{
+	margin: 0;
+	cursor: pointer;
+}
+
+text{
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+svg{
+	@include transform-origin(top, left);
+	@include transform(scale(1));
+}
+
+#learn-btn{
+	cursor: pointer;
+	
+	path, text{
+		@include transform(translateY(0));
+	}
+	
+	&:hover{
+		path{
+			&:first-child{
+				fill: #076656;
+				
+			}
+		}
+		
+		path{
+			&:nth-child(2){
+				fill: #7cd1c2;
+			}
+		}
+		
+		text{
+			fill: #0a9a87;
+			
+		}
+	};
+	
+	&:active{
+		path{
+			&:nth-child(2){
+				@include transform(translateY(2px));
+			}
+		}
+		
+		text{
+			@include transform(translateY(2px));
+		}
+	}
+}
+
+#replay-btn{
+	&:hover{
+		opacity: 0.5;
+	};
+}
+
+/*
+@media (max-width: 400px) {
+	svg{
+		@include transform(scale(0.375));
+	}
+}
+*/