[
  {
    "path": ".gitignore",
    "content": "*.DS_Store\n\n# Windows thumbnail cache files\nThumbs.db\nehthumbs.db\nehthumbs_vista.db\n\n# Folder config file\nDesktop.ini\n\n# Recycle Bin used on file shares\n$RECYCLE.BIN/\n\n# Windows Installer files\n*.cab\n*.msi\n*.msm\n*.msp\n\n# Windows shortcuts\n*.lnk\n\n# Dropbox settings and caches\n.dropbox\n.dropbox.attr\n.dropbox.cache\n"
  },
  {
    "path": "README.md",
    "content": "# WebGL Scroll Spiral\n\nSome decorative background scroll effects for websites using WebGL and regl. By Xoihazard.\n\n![WebGL Scroll Spiral](https://tympanus.net/codrops/wp-content/uploads/2017/04/WebGLScrollSpiral_800x600.jpg)\n\n[Article on Codrops](https://tympanus.net/codrops/?p=30761)\n\n[Demo](https://tympanus.net/Development/ScrollSpiral/)\n\n## Credits\n\n- [Official regl website](http://regl.party)\n- Images copyright by [RuleByArt](https://creativemarket.com/RuleByArt?u=codrops). Purchase on Creative Market: [Flight](https://creativemarket.com/RuleByArt/468537-Flight?u=codrops) and [Surface Shapes](https://creativemarket.com/RuleByArt/32279-Surface-Shapes?u=codrops) \n\n## License\nThis resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource \"as-is\" and sell it, redistribute, re-publish it, or sell \"pluginized\" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.\n\n## Misc\n\nFollow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/)\n\n[© Codrops 2017](http://www.codrops.com)\n\n\n\n\n\n"
  },
  {
    "path": "css/demo.css",
    "content": "*,\r\n*::after,\r\n*::before {\r\n\tbox-sizing: border-box;\r\n}\r\n\r\nbody {\r\n\tfont-family: 'Roboto Mono', monospace;\r\n\tcolor: #fff;\r\n\tbackground: #000;\r\n}\r\n\r\na {\r\n\ttext-decoration: none;\r\n\tcolor: #fff;\r\n\toutline: none;\r\n}\r\n\r\na:hover,\r\na:focus {\r\n\tcolor: #fff;\r\n}\r\n\r\n.hidden {\r\n\tposition: absolute;\r\n\toverflow: hidden;\r\n\twidth: 0;\r\n\theight: 0;\r\n\tpointer-events: none;\r\n}\r\n\r\n/* Overlay */\r\nmain::before {\r\n\tcontent: '';\r\n\tposition: fixed;\r\n\tz-index: -1;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tpointer-events: none;\r\n\tbackground: rgba(0,0,0,0.4);\r\n}\r\n\r\n/* Icons */\r\n\r\n.icon {\r\n\tdisplay: block;\r\n\twidth: 1.5em;\r\n\theight: 1.5em;\r\n\tmargin: 0 auto;\r\n\tfill: currentColor;\r\n}\r\n\r\n/* Page Loader */\r\n\r\n.js .loading::before {\r\n\tcontent: '';\r\n\tposition: fixed;\r\n\tz-index: 1000;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tbackground: #000;\r\n}\r\n\r\n.js .loading::after {\r\n\tcontent: '';\r\n\tposition: fixed;\r\n\tz-index: 1001;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tmargin: -25px 0 0 -25px;\r\n\tpointer-events: none;\r\n\tborder-radius: 50%;\r\n\tbackground: #3b3b3b;\r\n\tanimation: loaderAnim 0.8s ease-out infinite alternate forwards;\r\n}\r\n\r\n@keyframes loaderAnim {\r\n\tto {\r\n\t\ttransform: scale3d(0.5,0.5,1);\r\n\t}\r\n}\r\n\r\n.content {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\tmin-height: 100vh;\r\n}\r\n\r\n.content--main {\r\n\tmin-height: 500vh;\r\n}\r\n\r\n.content--main::before,\r\n.content--main::after {\r\n\tposition: fixed;\r\n\tleft: 50%;\r\n}\r\n\r\n.content--main::before {\r\n\tcontent: '';\r\n\tbottom: 3em;\r\n\theight: 1.5em;\r\n\twidth: 1px;\r\n\tbackground: #fff;\r\n}\r\n\r\n.content--main::after {\r\n\tcontent: 'Scroll';\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\twidth: 6em;\r\n\ttext-align: center;\r\n\tmargin: 0 0 1.5em -3em;\r\n\tfont-size: 0.75em;\r\n\ttext-transform: uppercase;\r\n\tletter-spacing: 2px;\r\n\ttext-indent: 2px;\r\n}\r\n\r\n.content--header {\r\n\tposition: relative;\r\n\tz-index: 11;\r\n\talign-items: flex-start;\r\n\twidth: 100%;\r\n\tpadding: 1.5em;\r\n}\r\n\r\n.content__top {\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tflex-wrap: wrap;\r\n\talign-items: center;\r\n\twidth: 100%;\r\n}\r\n\r\n.main-title {\r\n\tfont-size: 1em;\r\n\tfont-weight: normal;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}\r\n\r\n.main-tagline {\r\n\tfont-size: 0.865em;\r\n\tmargin: 0 1em;\r\n\topacity: 0.8;\r\n}\r\n\r\n.main-tagline::before,\r\n.main-tagline::after {\r\n\tcontent: ' // ';\r\n}\r\n\r\n.github {\r\n\tfont-size: 0.865em;\r\n}\r\n\r\n/* Top Navigation Style */\r\n\r\n.codrops-links {\r\n\tposition: relative;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\tmargin: 0 0 0 auto;\r\n\ttext-align: center;\r\n\twhite-space: nowrap;\r\n}\r\n\r\n.codrops-icon {\r\n\tdisplay: inline-block;\r\n\tmargin: 0.25em;\r\n\tpadding: 0.5em;\r\n}\r\n\r\n/* Demo links */\r\n\r\n.demos {\r\n\tposition: fixed;\r\n\ttop: 6em;\r\n\tleft: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: flex-start;\r\n\tpadding: 0 1.25em;\r\n}\r\n\r\n.demo {\r\n\tfont-size: 0.865em;\r\n\tposition: relative;\r\n\tmargin: 0 1em 0.5em 0;\r\n\tpadding: 0 0 0.25em 0.25em;\r\n\twhite-space: nowrap;\r\n}\r\n\r\n.demo:hover,\r\n.demo--current {\r\n\ttext-decoration: underline;\r\n}\r\n\r\n/* Related demos */\r\n\r\n.content--related {\r\n\tposition: relative;\r\n\tz-index: 10;\r\n\tjustify-content: center;\r\n\tpadding: 3em 1.5em;\r\n\ttext-align: center;\r\n\tbackground: #000;\r\n\talign-content: center;\r\n}\r\n\r\n.content--related a,\r\n.github {\r\n\ttext-decoration: underline;\r\n}\r\n\r\n.content--related a:hover,\r\n.content--related a:focus,\r\n.github:hover,\r\n.github:focus {\r\n\ttext-decoration: none;\r\n}\r\n\r\n.content__text {\r\n\tfont-size: 0.865em;\r\n\tfont-weight: normal;\r\n\twidth: 100%;\r\n\tmargin: 0 0 1em 0;\r\n}\r\n\r\n.content__text:first-child {\r\n\tmargin: 0 0 5em 0;\r\n}\r\n\r\n.media-item {\r\n\tdisplay: inline-block;\r\n\tpadding: 1em;\r\n\tvertical-align: top;\r\n\ttransition: color 0.3s;\r\n}\r\n\r\n.media-item__img {\r\n\tmax-width: 100%;\r\n\topacity: 0.6;\r\n\ttransition: opacity 0.3s;\r\n}\r\n\r\n.media-item:hover .media-item__img,\r\n.media-item:focus .media-item__img {\r\n\topacity: 1;\r\n}\r\n\r\n.media-item__title {\r\n\tfont-size: 0.865em;\r\n\tfont-weight: normal;\r\n\tmax-width: 200px;\r\n\tmargin: 0;\r\n\tpadding: 0.5em;\r\n}\r\n\r\n#webgl {\r\n\tposition: fixed;\r\n\tz-index: -1;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tdisplay: block;\r\n\twidth: 100vw;\r\n\theight: 100vh;\r\n}\r\n\r\n/* Colors for demos */\r\n\r\n/* Demo 2 */\r\n.demo-2 {\r\n\tbackground: #5ae6ae;\r\n}\r\n.demo-2 main::before {\r\n\tbackground: rgba(60, 145, 110, 0.3);\r\n}\r\n.demo-2 .content--related {\r\n\tbackground: #5ae6ae;\r\n}\r\n\r\n/* Demo 3 */\r\n.demo-3 {\r\n\tbackground: #d8d9cd;\r\n}\r\n.demo-3 main::before {\r\n\tbackground: rgba(169, 175, 66, 0.3);\r\n}\r\n.demo-3 .content--related {\r\n\tbackground: #d8d9cd;\r\n}\r\n\r\n/* Demo 4 */\r\n.demo-4 {\r\n\tbackground: #babed1;\r\n}\r\n.demo-4 main::before {\r\n\tbackground: rgba(175, 179, 194, 0.3);\r\n}\r\n.demo-4 .content--related {\r\n\tbackground: #babed1;\r\n}\r\n\r\n/* Demo 5 */\r\n.demo-5 {\r\n\tbackground: #000;\r\n}\r\n.demo-5 main::before {\r\n\tbackground: rgba(0,0,0,0.4);\r\n}\r\n.demo-5 .content--related {\r\n\tbackground: #000;\r\n}\r\n\r\n/* Demo 6 */\r\n.demo-6 {\r\n\tbackground: #e8dac5;\r\n}\r\n.demo-6 main::before {\r\n\tbackground: rgba(0, 0, 0, 0.3);\r\n}\r\n.demo-6 .content--related {\r\n\tbackground: #e8dac5;\r\n}\r\n\r\n/* Demo 7 */\r\n.demo-7 {\r\n\tbackground: #000;\r\n}\r\n.demo-7 main::before {\r\n\tbackground: rgba(0, 0, 0, 0.6);\r\n}\r\n.demo-7 .content--related {\r\n\tbackground: #000;\r\n}\r\n\r\n/* Demo 8 */\r\n.demo-8 {\r\n\tbackground: #232121;\r\n}\r\n.demo-8 main::before {\r\n\tbackground: rgba(84, 115, 243, 0.3);\r\n}\r\n.demo-8 .content--related {\r\n\tbackground: #232121;\r\n}\r\n\r\n/* Demo 9 */\r\n.demo-9 {\r\n\tbackground: #232121;\r\n}\r\n.demo-9 main::before {\r\n\tbackground: rgba(0, 0, 0, 0.3);\r\n}\r\n.demo-9 .content--related {\r\n\tbackground: #2a2acf;\r\n}\r\n\r\n@media screen and (max-width: 40em) {\r\n\t.content--header {\r\n\t\tpadding: 1em 0.5em 0;\r\n\t}\r\n\t.content__top {\r\n\t\tdisplay: block;\r\n\t\ttext-align: center;\r\n\t}\r\n\t.main-tagline {\r\n\t\tmargin: 0;\r\n\t}\r\n\t.demos {\r\n\t\tposition: relative;\r\n\t\twidth: 100%;\r\n\t\tmargin: 0;\r\n\t\tpadding: 0.5em;\r\n\t\ttransform: none;\r\n\t\ttop: auto;\r\n\t\tdisplay: block;\r\n\t}\r\n}\r\n"
  },
  {
    "path": "css/normalize.css",
    "content": "article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:\"\\201C\" \"\\201D\" \"\\2018\" \"\\2019\";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type=\"button\"],input[type=\"reset\"],input[type=\"submit\"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type=\"checkbox\"],input[type=\"radio\"]{box-sizing:border-box;padding:0;}input[type=\"search\"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n<head>\n\t<meta charset=\"UTF-8\" />\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<title>WebGL Scroll Spiral | Demo 1 | Codrops</title>\n\t<meta name=\"description\" content=\"Some decorative background scroll effects for websites using WebGL and regl\" />\n\t<meta name=\"keywords\" content=\"regl, webgl, background, website, decorative, scroll effect, spiral, distortion \" />\n\t<meta name=\"author\" content=\"Codrops\" />\n\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\n\t<link href=\"https://fonts.googleapis.com/css?family=Roboto+Mono:400,700\" rel=\"stylesheet\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/normalize.css\" />\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t<script>document.documentElement.className = 'js';</script>\n</head>\n<body class=\"demo-1 loading\">\n\t<canvas id=\"webgl\"></canvas>\n\t<svg class=\"hidden\">\n\t\t<symbol id=\"icon-arrow\" viewBox=\"0 0 24 24\">\n\t\t\t<title>arrow</title>\n\t\t\t<polygon points=\"6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 \" />\n\t\t</symbol>\n\t\t<symbol id=\"icon-drop\" viewBox=\"0 0 24 24\">\n\t\t\t<title>drop</title>\n\t\t\t<path d=\"M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z\" />\n\t\t\t<path d=\"M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z\" />\n\t\t</symbol>\n\t</svg>\n\t<main>\n\t\t<header class=\"content content--header\">\n\t\t\t<div class=\"content__top\">\n\t\t\t\t<h1 class=\"main-title\">Scroll Spirals</h1>\n\t\t\t\t<p class=\"main-tagline\">Decorative Background Effects with WebGL</p>\n\t\t\t\t<a class=\"github\" href=\"https://github.com/codrops/ScrollSpiral/\">GitHub</a>\n\t\t\t\t<div class=\"codrops-links\">\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--prev\" href=\"https://tympanus.net/Development/DeveloperDesignerPageLayout/\" title=\"Previous Demo\"><svg class=\"icon icon--arrow\"><use xlink:href=\"#icon-arrow\"></use></svg></a>\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--drop\" href=\"https://tympanus.net/codrops/?p=30761\" title=\"Back to the article\"><svg class=\"icon icon--drop\"><use xlink:href=\"#icon-drop\"></use></svg></a>\n\t\t\t\t</div>\n\t\t\t\t<nav class=\"demos\">\n\t\t\t\t\t<a class=\"demo demo--current\" href=\"index.html\">Demo 1</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index2.html\">Demo 2</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index3.html\">Demo 3</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index4.html\">Demo 4</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index5.html\">Demo 5</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index6.html\">Demo 6</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index7.html\">Demo 7</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index8.html\">Demo 8</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index9.html\">Demo 9</a>\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t</header>\n\t\t<section class=\"content content--main\"></section>\n\t\t<section class=\"content content--related\">\n\t\t\t<p class=\"content__text\">This demo is powered by <a href=\"http://regl.party/\">regl &mdash; declarative and stateless webgl</a></p>\n\t\t\t<h3 class=\"content__text\">If you enjoyed this demo you might also like:</h3>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Development/AnimatedHeaderBackgrounds/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/AnimatedHeaderBackgrounds.png\">\n\t\t\t\t<h3 class=\"media-item__title\">Animated Background Headers</h3>\n\t\t\t</a>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Tutorials/PrismEffectSlider/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/PrismEffectSlider.jpg\">\n\t\t\t\t<h3 class=\"media-item__title\">Prism Effect Slider</h3>\n\t\t\t</a>\n\t\t</section>\n\t</main>\n\t<script src=\"js/regl.min.js\"></script>\n\t<script type=\"x-shader/x-fragment\" id=\"fragmentShader\">\n\t#define TWO_PI 6.2831853072\n\t#define PI 3.14159265359\n\n\tprecision highp float;\n\n\tuniform float globaltime;\n\tuniform vec2 resolution;\n\tuniform float aspect;\n\tuniform float scroll;\n\tuniform float velocity;\n\n\tconst float timescale = 0.15;\n\tconst float displace = 0.03;\n\tconst float gridSize = 20.0;\n\tconst int layers = 3;\n\tconst float detail = 2.0;\n\tconst float wave = 1.0;\n\n\tvec2 rotate(vec2 v, float angle) {\n\t\tfloat c = cos(angle);\n\t\tfloat s = sin(angle);\n\t\treturn v * mat2(c, -s, s, c);\n\t}\n\n\tvec3 coordToHex(vec2 coord, float scale, float angle) {\n\t\tvec2 c = rotate(coord, angle);\n\t\tfloat q = (1.0 / 3.0 * sqrt(3.0) * c.x - 1.0 / 3.0 * c.y) * scale;\n\t\tfloat r = 2.0 / 3.0 * c.y * scale;\n\t\treturn vec3(q, r, -q - r);\n\t}\n\n\tvec3 hexToCell(vec3 hex, float m) {\n\t\treturn fract(hex / m) * 2.0 - 1.0;\n\t}\n\n\tfloat absMax(vec3 v) {\n\t\treturn max(max(abs(v.x), abs(v.y)), abs(v.z));\n\t}\n\n\tfloat nsin(float value) {\n\t\treturn sin(value * TWO_PI) * 0.5 + 0.5;\n\t}\n\n\tfloat hexToFloat(vec3 hex, float amt) {\n\t\treturn mix(absMax(hex), 1.0 - length(hex) / sqrt(3.0), amt);\n\t}\n\n\tfloat calc(vec3 hex, float time, float len) {\n\t\tfloat value = 0.0;\n\n\t\tfor (int i = 0; i < layers; i++) {\n\t\t\tvec3 cell = hexToCell(hex, 1.0 + float(i));\n\t\t\tvalue += nsin(\n\t\t\t\thexToFloat(\n\t\t\t\t\tcell,\n\t\t\t\t\tnsin(len * wave + time + float(i) / float(layers))\n\t\t\t\t) * detail + nsin(time * 0.5)\n\t\t\t);\n\t\t}\n\n\t\treturn value / float(layers);\n\t}\n\n\tvoid main(void) {\n\t\tvec2 tx = (gl_FragCoord.xy / resolution.xy - 0.5) * vec2(aspect, 1.0) * 2.0;\n\t\tfloat time = globaltime * timescale - scroll;\n\t\tfloat invScroll = 1.0 - scroll;\n\t\tfloat rgb[3];\n\t\tfloat len = 1.0 - length(tx) * 0.3;\n\t\tfloat zoom = nsin(time * 0.1) + len * velocity * 3.0;\n\t\tfloat angle = TWO_PI * nsin(time * 0.05) + PI * len * scroll;\n\t\tvec3 hex = coordToHex(tx, gridSize * zoom, angle);\n\n\t\tfor (int i = 0; i < 3; i++) {\n\t\t\tfloat time2 = time + float(i) * displace * invScroll;\n\t\t\trgb[i] = pow(calc(hex, time2, len), 3.0) * (0.2 + 0.8 * sin(PI * len * 0.5));\n\t\t}\n\n\t\tgl_FragColor = vec4(\n\t\t\trgb[0] * (1.0 - scroll * 0.2),\n\t\t\trgb[1] * invScroll,\n\t\t\t(rgb[2] + 0.2) * invScroll,\n\t\t\t1.0\n\t\t);\n\t}\n\t</script>\n\t<script src=\"js/demo1.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "index2.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n<head>\n\t<meta charset=\"UTF-8\" />\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<title>WebGL Scroll Spiral | Demo 2 | Codrops</title>\n\t<meta name=\"description\" content=\"Some decorative background scroll effects for websites using WebGL and regl\" />\n\t<meta name=\"keywords\" content=\"regl, webgl, background, website, decorative, scroll effect, spiral, distortion \" />\n\t<meta name=\"author\" content=\"Codrops\" />\n\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\n\t<link href=\"https://fonts.googleapis.com/css?family=Roboto+Mono:400,700\" rel=\"stylesheet\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/normalize.css\" />\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t<script>document.documentElement.className = 'js';</script>\n</head>\n<body class=\"demo-2 loading\">\n\t<canvas id=\"webgl\"></canvas>\n\t<svg class=\"hidden\">\n\t\t<symbol id=\"icon-arrow\" viewBox=\"0 0 24 24\">\n\t\t\t<title>arrow</title>\n\t\t\t<polygon points=\"6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 \" />\n\t\t</symbol>\n\t\t<symbol id=\"icon-drop\" viewBox=\"0 0 24 24\">\n\t\t\t<title>drop</title>\n\t\t\t<path d=\"M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z\" />\n\t\t\t<path d=\"M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z\" />\n\t\t</symbol>\n\t</svg>\n\t<main>\n\t\t<header class=\"content content--header\">\n\t\t\t<div class=\"content__top\">\n\t\t\t\t<h1 class=\"main-title\">Scroll Spirals</h1>\n\t\t\t\t<p class=\"main-tagline\">Decorative Background Effects with WebGL</p>\n\t\t\t\t<a class=\"github\" href=\"https://github.com/codrops/ScrollSpiral/\">GitHub</a>\n\t\t\t\t<div class=\"codrops-links\">\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--prev\" href=\"https://tympanus.net/Development/DeveloperDesignerPageLayout/\" title=\"Previous Demo\"><svg class=\"icon icon--arrow\"><use xlink:href=\"#icon-arrow\"></use></svg></a>\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--drop\" href=\"https://tympanus.net/codrops/?p=30761\" title=\"Back to the article\"><svg class=\"icon icon--drop\"><use xlink:href=\"#icon-drop\"></use></svg></a>\n\t\t\t\t</div>\n\t\t\t\t<nav class=\"demos\">\n\t\t\t\t\t<a class=\"demo\" href=\"index.html\">Demo 1</a>\n\t\t\t\t\t<a class=\"demo demo--current\" href=\"index2.html\">Demo 2</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index3.html\">Demo 3</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index4.html\">Demo 4</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index5.html\">Demo 5</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index6.html\">Demo 6</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index7.html\">Demo 7</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index8.html\">Demo 8</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index9.html\">Demo 9</a>\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t</header>\n\t\t<section class=\"content content--main\"></section>\n\t\t<section class=\"content content--related\">\n\t\t\t<p class=\"content__text\">This demo is powered by <a href=\"http://regl.party/\">regl &mdash; declarative and stateless webgl</a></p>\n\t\t\t<h3 class=\"content__text\">If you enjoyed this demo you might also like:</h3>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Development/AnimatedHeaderBackgrounds/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/AnimatedHeaderBackgrounds.png\">\n\t\t\t\t<h3 class=\"media-item__title\">Animated Background Headers</h3>\n\t\t\t</a>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Tutorials/PrismEffectSlider/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/PrismEffectSlider.jpg\">\n\t\t\t\t<h3 class=\"media-item__title\">Prism Effect Slider</h3>\n\t\t\t</a>\n\t\t</section>\n\t</main>\n\t<script src=\"js/regl.min.js\"></script>\n\t<script type=\"x-shader/x-fragment\" id=\"fragmentShader\">\n\t#define TWO_PI 6.2831853072\n\t#define PI 3.14159265359\n\n\tprecision highp float;\n\n\tuniform float globaltime;\n\tuniform vec2 resolution;\n\tuniform float aspect;\n\tuniform float scroll;\n\tuniform float velocity;\n\tuniform sampler2D texture;\n\n\tconst float timescale = 0.1;\n\tconst float twist = 2.0;\n\n\tvec2 rotate(vec2 v, float angle) {\n\t\tfloat c = cos(angle);\n\t\tfloat s = sin(angle);\n\t\treturn v * mat2(c, -s, s, c);\n\t}\n\n\tfloat nsin(float value) {\n\t\treturn sin(value * TWO_PI) * 0.5 + 0.5;\n\t}\n\n\tvoid main(void) {\n\t\tfloat time = globaltime * timescale;\n\t\tvec2 center = vec2(sin(TWO_PI * time * 0.2), cos(TWO_PI * time * 0.2)) * nsin(time * 0.3) * 0.5;\n\t\tvec2 tx = (gl_FragCoord.xy / resolution.xy - 0.5 - center) * vec2(aspect, 1.0);\n\t\tfloat len = 1.0 - length(tx);\n\t\tfloat zoom = 1.0 + scroll - len * 3.0 * (1.0 - scroll) + len * velocity * 2.0;\n\n\t\tvec4 imgColor = texture2D(\n\t\t\ttexture,\n\t\t\trotate(\n\t\t\t\t(tx + center) * vec2(1.0, -1.0) * zoom,\n\t\t\t\ttwist * TWO_PI * nsin(len + time) * scroll + time\n\t\t\t) + 0.5\n\t\t);\n\n\t\tgl_FragColor = imgColor;\n\t}\n\t</script>\n\t<script src=\"js/demo2.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "index3.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n<head>\n\t<meta charset=\"UTF-8\" />\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<title>WebGL Scroll Spiral | Demo 2 | Codrops</title>\n\t<meta name=\"description\" content=\"Some decorative background scroll effects for websites using WebGL and regl\" />\n\t<meta name=\"keywords\" content=\"regl, webgl, background, website, decorative, scroll effect, spiral, distortion \" />\n\t<meta name=\"author\" content=\"Codrops\" />\n\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\n\t<link href=\"https://fonts.googleapis.com/css?family=Roboto+Mono:400,700\" rel=\"stylesheet\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/normalize.css\" />\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t<script>document.documentElement.className = 'js';</script>\n</head>\n<body class=\"demo-3 loading\">\n\t<canvas id=\"webgl\"></canvas>\n\t<svg class=\"hidden\">\n\t\t<symbol id=\"icon-arrow\" viewBox=\"0 0 24 24\">\n\t\t\t<title>arrow</title>\n\t\t\t<polygon points=\"6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 \" />\n\t\t</symbol>\n\t\t<symbol id=\"icon-drop\" viewBox=\"0 0 24 24\">\n\t\t\t<title>drop</title>\n\t\t\t<path d=\"M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z\" />\n\t\t\t<path d=\"M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z\" />\n\t\t</symbol>\n\t</svg>\n\t<main>\n\t\t<header class=\"content content--header\">\n\t\t\t<div class=\"content__top\">\n\t\t\t\t<h1 class=\"main-title\">Scroll Spirals</h1>\n\t\t\t\t<p class=\"main-tagline\">Decorative Background Effects with WebGL</p>\n\t\t\t\t<a class=\"github\" href=\"https://github.com/codrops/ScrollSpiral/\">GitHub</a>\n\t\t\t\t<div class=\"codrops-links\">\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--prev\" href=\"https://tympanus.net/Development/DeveloperDesignerPageLayout/\" title=\"Previous Demo\"><svg class=\"icon icon--arrow\"><use xlink:href=\"#icon-arrow\"></use></svg></a>\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--drop\" href=\"https://tympanus.net/codrops/?p=30761\" title=\"Back to the article\"><svg class=\"icon icon--drop\"><use xlink:href=\"#icon-drop\"></use></svg></a>\n\t\t\t\t</div>\n\t\t\t\t<nav class=\"demos\">\n\t\t\t\t\t<a class=\"demo\" href=\"index.html\">Demo 1</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index2.html\">Demo 2</a>\n\t\t\t\t\t<a class=\"demo demo--current\" href=\"index3.html\">Demo 3</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index4.html\">Demo 4</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index5.html\">Demo 5</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index6.html\">Demo 6</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index7.html\">Demo 7</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index8.html\">Demo 8</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index9.html\">Demo 9</a>\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t</header>\n\t\t<section class=\"content content--main\"></section>\n\t\t<section class=\"content content--related\">\n\t\t\t<p class=\"content__text\">This demo is powered by <a href=\"http://regl.party/\">regl &mdash; declarative and stateless webgl</a></p>\n\t\t\t<h3 class=\"content__text\">If you enjoyed this demo you might also like:</h3>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Development/AnimatedHeaderBackgrounds/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/AnimatedHeaderBackgrounds.png\">\n\t\t\t\t<h3 class=\"media-item__title\">Animated Background Headers</h3>\n\t\t\t</a>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Tutorials/PrismEffectSlider/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/PrismEffectSlider.jpg\">\n\t\t\t\t<h3 class=\"media-item__title\">Prism Effect Slider</h3>\n\t\t\t</a>\n\t\t</section>\n\t</main>\n\t<script src=\"js/regl.min.js\"></script>\n\t<script type=\"x-shader/x-fragment\" id=\"fragmentShader\">\n\t#define TWO_PI 6.2831853072\n\t#define PI 3.14159265359\n\n\tprecision highp float;\n\n\tuniform float globaltime;\n\tuniform vec2 resolution;\n\tuniform float aspect;\n\tuniform float scroll;\n\tuniform float velocity;\n\tuniform sampler2D texture;\n\n\tconst float timescale = 0.1;\n\tconst float twist = 2.0;\n\n\tvec2 rotate(vec2 v, float angle) {\n\t\tfloat c = cos(angle);\n\t\tfloat s = sin(angle);\n\t\treturn v * mat2(c, -s, s, c);\n\t}\n\n\tfloat nsin(float value) {\n\t\treturn sin(value * TWO_PI) * 0.5 + 0.5;\n\t}\n\n\tvoid main(void) {\n\t\tfloat time = globaltime * timescale;\n\t\tvec2 center = vec2(sin(TWO_PI * time * 0.2), cos(TWO_PI * time * 0.2)) * nsin(time * 0.3) * 0.5;\n\t\tvec2 tx = (gl_FragCoord.xy / resolution.xy - 0.5 - center) * vec2(aspect, 1.0);\n\t\tfloat len = 1.0 - length(tx);\n\t\tfloat zoom = 0.0 + scroll - len * 2.0 * (1.0 - scroll) + len * velocity;\n\n\t\tvec4 imgColor = texture2D(\n\t\t\ttexture,\n\t\t\trotate(\n\t\t\t\t(tx + center) * vec2(1.0, -1.0) * zoom,\n\t\t\t\ttwist * TWO_PI * nsin(len + time) * scroll + time\n\t\t\t) + 0.5\n\t\t);\n\n\t\tgl_FragColor = imgColor;\n\t}\n\t</script>\n\t<script src=\"js/demo3.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "index4.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n<head>\n\t<meta charset=\"UTF-8\" />\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<title>WebGL Scroll Spiral | Demo 2 | Codrops</title>\n\t<meta name=\"description\" content=\"Some decorative background scroll effects for websites using WebGL and regl\" />\n\t<meta name=\"keywords\" content=\"regl, webgl, background, website, decorative, scroll effect, spiral, distortion \" />\n\t<meta name=\"author\" content=\"Codrops\" />\n\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\n\t<link href=\"https://fonts.googleapis.com/css?family=Roboto+Mono:400,700\" rel=\"stylesheet\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/normalize.css\" />\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t<script>document.documentElement.className = 'js';</script>\n</head>\n<body class=\"demo-4 loading\">\n\t<canvas id=\"webgl\"></canvas>\n\t<svg class=\"hidden\">\n\t\t<symbol id=\"icon-arrow\" viewBox=\"0 0 24 24\">\n\t\t\t<title>arrow</title>\n\t\t\t<polygon points=\"6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 \" />\n\t\t</symbol>\n\t\t<symbol id=\"icon-drop\" viewBox=\"0 0 24 24\">\n\t\t\t<title>drop</title>\n\t\t\t<path d=\"M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z\" />\n\t\t\t<path d=\"M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z\" />\n\t\t</symbol>\n\t</svg>\n\t<main>\n\t\t<header class=\"content content--header\">\n\t\t\t<div class=\"content__top\">\n\t\t\t\t<h1 class=\"main-title\">Scroll Spirals</h1>\n\t\t\t\t<p class=\"main-tagline\">Decorative Background Effects with WebGL</p>\n\t\t\t\t<a class=\"github\" href=\"https://github.com/codrops/ScrollSpiral/\">GitHub</a>\n\t\t\t\t<div class=\"codrops-links\">\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--prev\" href=\"https://tympanus.net/Development/DeveloperDesignerPageLayout/\" title=\"Previous Demo\"><svg class=\"icon icon--arrow\"><use xlink:href=\"#icon-arrow\"></use></svg></a>\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--drop\" href=\"https://tympanus.net/codrops/?p=30761\" title=\"Back to the article\"><svg class=\"icon icon--drop\"><use xlink:href=\"#icon-drop\"></use></svg></a>\n\t\t\t\t</div>\n\t\t\t\t<nav class=\"demos\">\n\t\t\t\t\t<a class=\"demo\" href=\"index.html\">Demo 1</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index2.html\">Demo 2</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index3.html\">Demo 3</a>\n\t\t\t\t\t<a class=\"demo demo--current\" href=\"index4.html\">Demo 4</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index5.html\">Demo 5</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index6.html\">Demo 6</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index7.html\">Demo 7</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index8.html\">Demo 8</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index9.html\">Demo 9</a>\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t</header>\n\t\t<section class=\"content content--main\"></section>\n\t\t<section class=\"content content--related\">\n\t\t\t<p class=\"content__text\">This demo is powered by <a href=\"http://regl.party/\">regl &mdash; declarative and stateless webgl</a></p>\n\t\t\t<h3 class=\"content__text\">If you enjoyed this demo you might also like:</h3>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Development/AnimatedHeaderBackgrounds/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/AnimatedHeaderBackgrounds.png\">\n\t\t\t\t<h3 class=\"media-item__title\">Animated Background Headers</h3>\n\t\t\t</a>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Tutorials/PrismEffectSlider/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/PrismEffectSlider.jpg\">\n\t\t\t\t<h3 class=\"media-item__title\">Prism Effect Slider</h3>\n\t\t\t</a>\n\t\t</section>\n\t</main>\n\t<script src=\"js/regl.min.js\"></script>\n\t<script type=\"x-shader/x-fragment\" id=\"fragmentShader\">\n\t#define TWO_PI 6.2831853072\n\t#define PI 3.14159265359\n\n\tprecision highp float;\n\n\tuniform float globaltime;\n\tuniform vec2 resolution;\n\tuniform float aspect;\n\tuniform float scroll;\n\tuniform float velocity;\n\tuniform sampler2D texture;\n\n\tconst float timescale = 0.1;\n\tconst float twist = 2.0;\n\n\tvec2 rotate(vec2 v, float angle) {\n\t\tfloat c = cos(angle);\n\t\tfloat s = sin(angle);\n\t\treturn v * mat2(c, -s, s, c);\n\t}\n\n\tfloat nsin(float value) {\n\t\treturn sin(value * TWO_PI) * 0.5 + 0.5;\n\t}\n\n\tvoid main(void) {\n\t\tfloat time = globaltime * timescale;\n\t\tvec2 center = vec2(sin(TWO_PI * time * 0.2), cos(TWO_PI * time * 0.2)) * nsin(time * 0.3) * 0.5;\n\t\tvec2 tx = (gl_FragCoord.xy / resolution.xy - 0.5 - center) * vec2(aspect, 1.0);\n\t\tfloat len = length(tx);\n\t\tfloat zoom = 1.0 + scroll - len * 10.0 * (1.0 - scroll) + len * velocity * 10.0;\n\n\t\tvec4 imgColor = texture2D(\n\t\t\ttexture,\n\t\t\trotate(\n\t\t\t\t(tx + center) * vec2(1.0, -1.0) * zoom,\n\t\t\t\ttwist * TWO_PI * nsin(len + time) * scroll + time\n\t\t\t) + 0.5\n\t\t);\n\n\t\tgl_FragColor = imgColor;\n\t}\n\t</script>\n\t<script src=\"js/demo4.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "index5.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n<head>\n\t<meta charset=\"UTF-8\" />\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<title>WebGL Scroll Spiral | Demo 2 | Codrops</title>\n\t<meta name=\"description\" content=\"Some decorative background scroll effects for websites using WebGL and regl\" />\n\t<meta name=\"keywords\" content=\"regl, webgl, background, website, decorative, scroll effect, spiral, distortion \" />\n\t<meta name=\"author\" content=\"Codrops\" />\n\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\n\t<link href=\"https://fonts.googleapis.com/css?family=Roboto+Mono:400,700\" rel=\"stylesheet\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/normalize.css\" />\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t<script>document.documentElement.className = 'js';</script>\n</head>\n<body class=\"demo-5 loading\">\n\t<canvas id=\"webgl\"></canvas>\n\t<svg class=\"hidden\">\n\t\t<symbol id=\"icon-arrow\" viewBox=\"0 0 24 24\">\n\t\t\t<title>arrow</title>\n\t\t\t<polygon points=\"6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 \" />\n\t\t</symbol>\n\t\t<symbol id=\"icon-drop\" viewBox=\"0 0 24 24\">\n\t\t\t<title>drop</title>\n\t\t\t<path d=\"M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z\" />\n\t\t\t<path d=\"M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z\" />\n\t\t</symbol>\n\t</svg>\n\t<main>\n\t\t<header class=\"content content--header\">\n\t\t\t<div class=\"content__top\">\n\t\t\t\t<h1 class=\"main-title\">Scroll Spirals</h1>\n\t\t\t\t<p class=\"main-tagline\">Decorative Background Effects with WebGL</p>\n\t\t\t\t<a class=\"github\" href=\"https://github.com/codrops/ScrollSpiral/\">GitHub</a>\n\t\t\t\t<div class=\"codrops-links\">\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--prev\" href=\"https://tympanus.net/Development/DeveloperDesignerPageLayout/\" title=\"Previous Demo\"><svg class=\"icon icon--arrow\"><use xlink:href=\"#icon-arrow\"></use></svg></a>\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--drop\" href=\"https://tympanus.net/codrops/?p=30761\" title=\"Back to the article\"><svg class=\"icon icon--drop\"><use xlink:href=\"#icon-drop\"></use></svg></a>\n\t\t\t\t</div>\n\t\t\t\t<nav class=\"demos\">\n\t\t\t\t\t<a class=\"demo\" href=\"index.html\">Demo 1</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index2.html\">Demo 2</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index3.html\">Demo 3</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index4.html\">Demo 4</a>\n\t\t\t\t\t<a class=\"demo demo--current\" href=\"index5.html\">Demo 5</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index6.html\">Demo 6</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index7.html\">Demo 7</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index8.html\">Demo 8</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index9.html\">Demo 9</a>\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t</header>\n\t\t<section class=\"content content--main\"></section>\n\t\t<section class=\"content content--related\">\n\t\t\t<p class=\"content__text\">This demo is powered by <a href=\"http://regl.party/\">regl &mdash; declarative and stateless webgl</a></p>\n\t\t\t<h3 class=\"content__text\">If you enjoyed this demo you might also like:</h3>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Development/AnimatedHeaderBackgrounds/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/AnimatedHeaderBackgrounds.png\">\n\t\t\t\t<h3 class=\"media-item__title\">Animated Background Headers</h3>\n\t\t\t</a>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Tutorials/PrismEffectSlider/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/PrismEffectSlider.jpg\">\n\t\t\t\t<h3 class=\"media-item__title\">Prism Effect Slider</h3>\n\t\t\t</a>\n\t\t</section>\n\t</main>\n\t<script src=\"js/regl.min.js\"></script>\n\t<script type=\"x-shader/x-fragment\" id=\"fragmentShader\">\n\t#define TWO_PI 6.2831853072\n\t#define PI 3.14159265359\n\n\tprecision highp float;\n\n\tuniform float globaltime;\n\tuniform vec2 resolution;\n\tuniform float aspect;\n\tuniform float scroll;\n\tuniform float velocity;\n\tuniform sampler2D texture;\n\n\tconst float timescale = 0.1;\n\tconst float twist = 2.0;\n\n\tvec2 rotate(vec2 v, float angle) {\n\t\tfloat c = cos(angle);\n\t\tfloat s = sin(angle);\n\t\treturn v * mat2(c, -s, s, c);\n\t}\n\n\tfloat nsin(float value) {\n\t\treturn sin(value * TWO_PI) * 0.5 + 0.5;\n\t}\n\n\tvoid main(void) {\n\t\tfloat time = globaltime * timescale;\n\t\tvec2 center = vec2(sin(TWO_PI * time * 0.2), cos(TWO_PI * time * 0.2)) * nsin(time * 0.3) * 0.5;\n\t\tvec2 tx = (gl_FragCoord.xy / resolution.xy - 0.5 - center) * vec2(aspect, 1.0);\n\t\tfloat len = 1.0 - length(tx);\n\t\tfloat zoom = 1.0 + scroll - len * 3.0 * (1.0 - scroll) + len * velocity * 10.0;\n\n\t\tvec4 imgColor = texture2D(\n\t\t\ttexture,\n\t\t\trotate(\n\t\t\t\t(tx + center) * vec2(1.0, -1.0) * zoom,\n\t\t\t\ttwist * TWO_PI * nsin(len + time) * scroll + time\n\t\t\t) + 0.5\n\t\t);\n\n\t\tgl_FragColor = imgColor;\n\t}\n\t</script>\n\t<script src=\"js/demo5.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "index6.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n<head>\n\t<meta charset=\"UTF-8\" />\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<title>WebGL Scroll Spiral | Demo 3 | Codrops</title>\n\t<meta name=\"description\" content=\"Some decorative background scroll effects for websites using WebGL and regl\" />\n\t<meta name=\"keywords\" content=\"regl, webgl, background, website, decorative, scroll effect, spiral, distortion \" />\n\t<meta name=\"author\" content=\"Codrops\" />\n\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\n\t<link href=\"https://fonts.googleapis.com/css?family=Roboto+Mono:400,700\" rel=\"stylesheet\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/normalize.css\" />\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t<script>document.documentElement.className = 'js';</script>\n</head>\n<body class=\"demo-6 loading\">\n\t<canvas id=\"webgl\"></canvas>\n\t<svg class=\"hidden\">\n\t\t<symbol id=\"icon-arrow\" viewBox=\"0 0 24 24\">\n\t\t\t<title>arrow</title>\n\t\t\t<polygon points=\"6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 \" />\n\t\t</symbol>\n\t\t<symbol id=\"icon-drop\" viewBox=\"0 0 24 24\">\n\t\t\t<title>drop</title>\n\t\t\t<path d=\"M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z\" />\n\t\t\t<path d=\"M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z\" />\n\t\t</symbol>\n\t</svg>\n\t<main>\n\t\t<header class=\"content content--header\">\n\t\t\t<div class=\"content__top\">\n\t\t\t\t<h1 class=\"main-title\">Scroll Spirals</h1>\n\t\t\t\t<p class=\"main-tagline\">Decorative Background Effects with WebGL</p>\n\t\t\t\t<a class=\"github\" href=\"https://github.com/codrops/ScrollSpiral/\">GitHub</a>\n\t\t\t\t<div class=\"codrops-links\">\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--prev\" href=\"https://tympanus.net/Development/DeveloperDesignerPageLayout/\" title=\"Previous Demo\"><svg class=\"icon icon--arrow\"><use xlink:href=\"#icon-arrow\"></use></svg></a>\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--drop\" href=\"https://tympanus.net/codrops/?p=30761\" title=\"Back to the article\"><svg class=\"icon icon--drop\"><use xlink:href=\"#icon-drop\"></use></svg></a>\n\t\t\t\t</div>\n\t\t\t\t<nav class=\"demos\">\n\t\t\t\t\t<a class=\"demo\" href=\"index.html\">Demo 1</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index2.html\">Demo 2</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index3.html\">Demo 3</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index4.html\">Demo 4</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index5.html\">Demo 5</a>\n\t\t\t\t\t<a class=\"demo demo--current\" href=\"index6.html\">Demo 6</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index7.html\">Demo 7</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index8.html\">Demo 8</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index9.html\">Demo 9</a>\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t</header>\n\t\t<section class=\"content content--main\"></section>\n\t\t<section class=\"content content--related\">\n\t\t\t<p class=\"content__text\">This demo is powered by <a href=\"http://regl.party/\">regl &mdash; declarative and stateless webgl</a></p>\n\t\t\t<h3 class=\"content__text\">If you enjoyed this demo you might also like:</h3>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Development/AnimatedHeaderBackgrounds/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/AnimatedHeaderBackgrounds.png\">\n\t\t\t\t<h3 class=\"media-item__title\">Animated Background Headers</h3>\n\t\t\t</a>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Tutorials/PrismEffectSlider/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/PrismEffectSlider.jpg\">\n\t\t\t\t<h3 class=\"media-item__title\">Prism Effect Slider</h3>\n\t\t\t</a>\n\t\t</section>\n\t</main>\n\t<script src=\"js/regl.min.js\"></script>\n\t<script type=\"x-shader/x-fragment\" id=\"fragmentShader\">\n\t#define TWO_PI 6.2831853072\n\t#define PI 3.14159265359\n\n\tprecision highp float;\n\n\tuniform float globaltime;\n\tuniform vec2 resolution;\n\tuniform float aspect;\n\tuniform float scroll;\n\tuniform float velocity;\n\tuniform sampler2D gradient;\n\n\tconst float timescale = 0.05;\n\n\tfloat nsin(float value) {\n\t\treturn sin(value * TWO_PI) * 0.5 + 0.5;\n\t}\n\n\tvec2 rotate(vec2 v, float angle) {\n\t\tfloat c = cos(angle);\n\t\tfloat s = sin(angle);\n\t\treturn v * mat2(c, -s, s, c);\n\t}\n\n\tvec3 coordToHex(vec2 coord, float scale, float angle) {\n\t\tvec2 c = rotate(coord, angle);\n\t\tfloat q = (1.0 / 3.0 * sqrt(3.0) * c.x - 1.0 / 3.0 * c.y) * scale;\n\t\tfloat r = 2.0 / 3.0 * c.y * scale;\n\t\treturn vec3(q, r, -q - r);\n\t}\n\n\tvec3 hexToCell(vec3 hex, float m) {\n\t\treturn fract(hex / m) * 2.0 - 1.0;\n\t}\n\n\tfloat absMax(vec3 v) {\n\t\treturn max(max(abs(v.x), abs(v.y)), abs(v.z));\n\t}\n\n\tfloat hexToFloat(vec3 hex, float amt) {\n\t\treturn mix(absMax(hex), 1.0 - length(hex) / sqrt(3.0), amt);\n\t}\n\n\tint getHexDir(vec3 hex) {\n\t\tif (mod(floor(hex.x) - floor(hex.y) - floor(hex.z), 2.0) == 0.0) {\n\t\t\treturn 0;\n\t\t} else {\n\t\t\treturn 1;\n\t\t}\n\t}\n\n\tint getHexType(vec3 hex) {\n\t\tif (mod(floor(hex.x) - floor(hex.y) - floor(hex.z), 3.0) == 0.0) {\n\t\t\treturn 0;\n\t\t} else if (mod(floor(hex.x) - floor(hex.y) - floor(hex.z) - 1.0, 3.0) == 0.0) {\n\t\t\treturn 1;\n\t\t} else {\n\t\t\treturn 2;\n\t\t}\n\t}\n\n\tvec3 divideHex(vec3 hex, inout int age, float time) {\n\t\tvec3 cell;\n\t\tint dir = 0, type = 0;\n\t\tfloat scale = 0.0;\n\n\t\tfor (int i = 0; i < 4; i++) {\n\t\t\tscale = 1.0 + float(type) * nsin(time);\n\t\t\tcell = hexToCell(hex * scale, 1.0);\n\t\t\tdir = getHexDir(hex);\n\t\t\ttype = getHexType(hex);\n\t\t\thex = cell;\n\t\t\tif (dir == 1 && type == 1) {\n\t\t\t\tage = i;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t\treturn cell;\n\t}\n\n\tvoid main(void) {\n\t\tfloat time = globaltime * timescale;\n\t\tvec2 center = vec2(sin(TWO_PI * time * 0.5), cos(TWO_PI * time * 0.5)) * nsin(time * 0.3) * 0.3;\n\t\tvec2 tx = (gl_FragCoord.xy / resolution.xy - 0.5 + center) * vec2(aspect, 1.0) * 2.0;\n\t\tfloat len = 1.0 - length(tx - center * 2.0) * 0.3;\n\t\tfloat zoom = 15.0 + scroll * 0.5 * 20.0;\n\t\tfloat angle = PI * scroll * len;\n\t\tfloat value = 0.0;\n\t\tint age = 0;\n\t\tvec3 hex = coordToHex(tx, zoom, angle);\n\t\tvec3 cell = divideHex(hex, age, time * 0.1);\n\t\tfloat shift = float(age) / 3.0;\n\n\t\tvalue = nsin(\n\t\t\thexToFloat(cell, nsin(time + shift)) * 0.1 * nsin(time * 0.5 + shift)\n\t\t\t+ shift\n\t\t\t+ time\n\t\t) * len;\n\n\t\tgl_FragColor = texture2D(gradient, vec2(0.0, value));\n\t}\n\t</script>\n\t<script src=\"js/demo6.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "index7.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n<head>\n\t<meta charset=\"UTF-8\" />\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<title>WebGL Scroll Spiral | Demo 3 | Codrops</title>\n\t<meta name=\"description\" content=\"Some decorative background scroll effects for websites using WebGL and regl\" />\n\t<meta name=\"keywords\" content=\"regl, webgl, background, website, decorative, scroll effect, spiral, distortion \" />\n\t<meta name=\"author\" content=\"Codrops\" />\n\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\n\t<link href=\"https://fonts.googleapis.com/css?family=Roboto+Mono:400,700\" rel=\"stylesheet\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/normalize.css\" />\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t<script>document.documentElement.className = 'js';</script>\n</head>\n<body class=\"demo-7 loading\">\n\t<canvas id=\"webgl\"></canvas>\n\t<svg class=\"hidden\">\n\t\t<symbol id=\"icon-arrow\" viewBox=\"0 0 24 24\">\n\t\t\t<title>arrow</title>\n\t\t\t<polygon points=\"6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 \" />\n\t\t</symbol>\n\t\t<symbol id=\"icon-drop\" viewBox=\"0 0 24 24\">\n\t\t\t<title>drop</title>\n\t\t\t<path d=\"M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z\" />\n\t\t\t<path d=\"M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z\" />\n\t\t</symbol>\n\t</svg>\n\t<main>\n\t\t<header class=\"content content--header\">\n\t\t\t<div class=\"content__top\">\n\t\t\t\t<h1 class=\"main-title\">Scroll Spirals</h1>\n\t\t\t\t<p class=\"main-tagline\">Decorative Background Effects with WebGL</p>\n\t\t\t\t<a class=\"github\" href=\"https://github.com/codrops/ScrollSpiral/\">GitHub</a>\n\t\t\t\t<div class=\"codrops-links\">\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--prev\" href=\"https://tympanus.net/Development/DeveloperDesignerPageLayout/\" title=\"Previous Demo\"><svg class=\"icon icon--arrow\"><use xlink:href=\"#icon-arrow\"></use></svg></a>\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--drop\" href=\"https://tympanus.net/codrops/?p=30761\" title=\"Back to the article\"><svg class=\"icon icon--drop\"><use xlink:href=\"#icon-drop\"></use></svg></a>\n\t\t\t\t</div>\n\t\t\t\t<nav class=\"demos\">\n\t\t\t\t\t<a class=\"demo\" href=\"index.html\">Demo 1</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index2.html\">Demo 2</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index3.html\">Demo 3</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index4.html\">Demo 4</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index5.html\">Demo 5</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index6.html\">Demo 6</a>\n\t\t\t\t\t<a class=\"demo demo--current\" href=\"index7.html\">Demo 7</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index8.html\">Demo 8</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index9.html\">Demo 9</a>\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t</header>\n\t\t<section class=\"content content--main\"></section>\n\t\t<section class=\"content content--related\">\n\t\t\t<p class=\"content__text\">This demo is powered by <a href=\"http://regl.party/\">regl &mdash; declarative and stateless webgl</a></p>\n\t\t\t<h3 class=\"content__text\">If you enjoyed this demo you might also like:</h3>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Development/AnimatedHeaderBackgrounds/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/AnimatedHeaderBackgrounds.png\">\n\t\t\t\t<h3 class=\"media-item__title\">Animated Background Headers</h3>\n\t\t\t</a>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Tutorials/PrismEffectSlider/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/PrismEffectSlider.jpg\">\n\t\t\t\t<h3 class=\"media-item__title\">Prism Effect Slider</h3>\n\t\t\t</a>\n\t\t</section>\n\t</main>\n\t<script src=\"js/regl.min.js\"></script>\n\t<script type=\"x-shader/x-fragment\" id=\"fragmentShader\">\n\t#define TWO_PI 6.2831853072\n\t#define PI 3.14159265359\n\n\tprecision highp float;\n\n\tuniform float globaltime;\n\tuniform vec2 resolution;\n\tuniform float aspect;\n\tuniform float scroll;\n\tuniform float velocity;\n\tuniform sampler2D gradient;\n\n\tconst float timescale = 0.05;\n\n\tfloat nsin(float value) {\n\t\treturn sin(value * TWO_PI) * 0.5 + 0.5;\n\t}\n\n\tvec2 rotate(vec2 v, float angle) {\n\t\tfloat c = cos(angle);\n\t\tfloat s = sin(angle);\n\t\treturn v * mat2(c, -s, s, c);\n\t}\n\n\tvec3 coordToHex(vec2 coord, float scale, float angle) {\n\t\tvec2 c = rotate(coord, angle);\n\t\tfloat q = (1.0 / 3.0 * sqrt(3.0) * c.x - 1.0 / 3.0 * c.y) * scale;\n\t\tfloat r = 2.0 / 3.0 * c.y * scale;\n\t\treturn vec3(q, r, -q - r);\n\t}\n\n\tvec3 hexToCell(vec3 hex, float m) {\n\t\treturn fract(hex / m) * 2.0 - 1.0;\n\t}\n\n\tfloat absMax(vec3 v) {\n\t\treturn max(max(abs(v.x), abs(v.y)), abs(v.z));\n\t}\n\n\tfloat hexToFloat(vec3 hex, float amt) {\n\t\treturn mix(absMax(hex), 1.0 - length(hex) / sqrt(3.0), amt);\n\t}\n\n\tint getHexDir(vec3 hex) {\n\t\tif (mod(floor(hex.x) - floor(hex.y) - floor(hex.z), 2.0) == 0.0) {\n\t\t\treturn 0;\n\t\t} else {\n\t\t\treturn 1;\n\t\t}\n\t}\n\n\tint getHexType(vec3 hex) {\n\t\tif (mod(floor(hex.x) - floor(hex.y) - floor(hex.z), 3.0) == 0.0) {\n\t\t\treturn 0;\n\t\t} else if (mod(floor(hex.x) - floor(hex.y) - floor(hex.z) - 1.0, 3.0) == 0.0) {\n\t\t\treturn 1;\n\t\t} else {\n\t\t\treturn 2;\n\t\t}\n\t}\n\n\tvec3 divideHex(vec3 hex, inout int age, float time) {\n\t\tvec3 cell;\n\t\tint dir = 0, type = 0;\n\t\tfloat scale = 0.0;\n\n\t\tfor (int i = 0; i < 4; i++) {\n\t\t\tscale = 1.0 + float(type) * nsin(time);\n\t\t\tcell = hexToCell(hex * scale, 1.0);\n\t\t\tdir = getHexDir(hex);\n\t\t\ttype = getHexType(hex);\n\t\t\thex = cell;\n\t\t\tif (dir == 1 && type == 1) {\n\t\t\t\tage = i;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t\treturn cell;\n\t}\n\n\tvoid main(void) {\n\t\tfloat time = globaltime * timescale;\n\t\tvec2 center = vec2(sin(TWO_PI * time * 0.5), cos(TWO_PI * time * 0.5)) * nsin(time * 0.3) * 0.5;\n\t\tvec2 tx = (gl_FragCoord.xy / resolution.xy - 0.5 + center) * vec2(aspect, 1.0) * 2.0;\n\t\tfloat len = 1.0 - length(tx - center * 2.0) * 0.3;\n\t\tfloat zoom = 5.0 + scroll * 0.5 * 10.0;\n\t\tfloat angle = PI * scroll * len;\n\t\tfloat value = 0.0;\n\t\tint age = 0;\n\t\tvec3 hex = coordToHex(tx, zoom, angle);\n\t\tvec3 cell = divideHex(hex, age, time * 0.1);\n\t\tfloat shift = float(age) / 3.0;\n\n\t\tvalue = nsin(\n\t\t\thexToFloat(cell, nsin(time + shift)) * 0.1 * nsin(time * 0.5 + shift)\n\t\t\t+ shift\n\t\t\t+ time\n\t\t) * len;\n\n\t\tgl_FragColor = texture2D(gradient, vec2(0.0, value));\n\t}\n\t</script>\n\t<script src=\"js/demo7.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "index8.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n<head>\n\t<meta charset=\"UTF-8\" />\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<title>WebGL Scroll Spiral | Demo 3 | Codrops</title>\n\t<meta name=\"description\" content=\"Some decorative background scroll effects for websites using WebGL and regl\" />\n\t<meta name=\"keywords\" content=\"regl, webgl, background, website, decorative, scroll effect, spiral, distortion \" />\n\t<meta name=\"author\" content=\"Codrops\" />\n\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\n\t<link href=\"https://fonts.googleapis.com/css?family=Roboto+Mono:400,700\" rel=\"stylesheet\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/normalize.css\" />\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t<script>document.documentElement.className = 'js';</script>\n</head>\n<body class=\"demo-8 loading\">\n\t<canvas id=\"webgl\"></canvas>\n\t<svg class=\"hidden\">\n\t\t<symbol id=\"icon-arrow\" viewBox=\"0 0 24 24\">\n\t\t\t<title>arrow</title>\n\t\t\t<polygon points=\"6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 \" />\n\t\t</symbol>\n\t\t<symbol id=\"icon-drop\" viewBox=\"0 0 24 24\">\n\t\t\t<title>drop</title>\n\t\t\t<path d=\"M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z\" />\n\t\t\t<path d=\"M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z\" />\n\t\t</symbol>\n\t</svg>\n\t<main>\n\t\t<header class=\"content content--header\">\n\t\t\t<div class=\"content__top\">\n\t\t\t\t<h1 class=\"main-title\">Scroll Spirals</h1>\n\t\t\t\t<p class=\"main-tagline\">Decorative Background Effects with WebGL</p>\n\t\t\t\t<a class=\"github\" href=\"https://github.com/codrops/ScrollSpiral/\">GitHub</a>\n\t\t\t\t<div class=\"codrops-links\">\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--prev\" href=\"https://tympanus.net/Development/DeveloperDesignerPageLayout/\" title=\"Previous Demo\"><svg class=\"icon icon--arrow\"><use xlink:href=\"#icon-arrow\"></use></svg></a>\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--drop\" href=\"https://tympanus.net/codrops/?p=30761\" title=\"Back to the article\"><svg class=\"icon icon--drop\"><use xlink:href=\"#icon-drop\"></use></svg></a>\n\t\t\t\t</div>\n\t\t\t\t<nav class=\"demos\">\n\t\t\t\t\t<a class=\"demo\" href=\"index.html\">Demo 1</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index2.html\">Demo 2</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index3.html\">Demo 3</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index4.html\">Demo 4</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index5.html\">Demo 5</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index6.html\">Demo 6</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index7.html\">Demo 7</a>\n\t\t\t\t\t<a class=\"demo demo--current\" href=\"index8.html\">Demo 8</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index9.html\">Demo 9</a>\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t</header>\n\t\t<section class=\"content\"></section>\n\t\t<section class=\"content\"></section>\n\t\t<section class=\"content\"></section>\n\t\t<section class=\"content\"></section>\n\t\t<section class=\"content content--related\">\n\t\t\t<p class=\"content__text\">This demo is powered by <a href=\"http://regl.party/\">regl &mdash; declarative and stateless webgl</a></p>\n\t\t\t<h3 class=\"content__text\">If you enjoyed this demo you might also like:</h3>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Development/AnimatedHeaderBackgrounds/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/AnimatedHeaderBackgrounds.png\">\n\t\t\t\t<h3 class=\"media-item__title\">Animated Background Headers</h3>\n\t\t\t</a>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Tutorials/PrismEffectSlider/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/PrismEffectSlider.jpg\">\n\t\t\t\t<h3 class=\"media-item__title\">Prism Effect Slider</h3>\n\t\t\t</a>\n\t\t</section>\n\t</main>\n\t<script src=\"js/regl.min.js\"></script>\n\t<script type=\"x-shader/x-fragment\" id=\"fragmentShader\">\n\t#define TWO_PI 6.2831853072\n\t#define PI 3.14159265359\n\n\tprecision highp float;\n\n\tuniform float globaltime;\n\tuniform vec2 resolution;\n\tuniform float aspect;\n\tuniform float scroll;\n\tuniform float velocity;\n\tuniform sampler2D gradient;\n\n\tconst float timescale = 0.05;\n\n\tfloat nsin(float value) {\n\t\treturn sin(value * TWO_PI) * 0.5 + 0.5;\n\t}\n\n\tvec2 rotate(vec2 v, float angle) {\n\t\tfloat c = cos(angle);\n\t\tfloat s = sin(angle);\n\t\treturn v * mat2(c, -s, s, c);\n\t}\n\n\tvec3 coordToHex(vec2 coord, float scale, float angle) {\n\t\tvec2 c = rotate(coord, angle);\n\t\tfloat q = (1.0 / 3.0 * sqrt(3.0) * c.x - 1.0 / 3.0 * c.y) * scale;\n\t\tfloat r = 2.0 / 3.0 * c.y * scale;\n\t\treturn vec3(q, r, -q - r);\n\t}\n\n\tvec3 hexToCell(vec3 hex, float m) {\n\t\treturn fract(hex / m) * 2.0 - 1.0;\n\t}\n\n\tfloat absMax(vec3 v) {\n\t\treturn max(max(abs(v.x), abs(v.y)), abs(v.z));\n\t}\n\n\tfloat hexToFloat(vec3 hex, float amt) {\n\t\treturn mix(absMax(hex), 1.0 - length(hex) / sqrt(3.0), amt);\n\t}\n\n\tint getHexDir(vec3 hex) {\n\t\tif (mod(floor(hex.x) - floor(hex.y) - floor(hex.z), 2.0) == 0.0) {\n\t\t\treturn 0;\n\t\t} else {\n\t\t\treturn 1;\n\t\t}\n\t}\n\n\tint getHexType(vec3 hex) {\n\t\tif (mod(floor(hex.x) - floor(hex.y) - floor(hex.z), 3.0) == 0.0) {\n\t\t\treturn 0;\n\t\t} else if (mod(floor(hex.x) - floor(hex.y) - floor(hex.z) - 1.0, 3.0) == 0.0) {\n\t\t\treturn 1;\n\t\t} else {\n\t\t\treturn 2;\n\t\t}\n\t}\n\n\tvec3 divideHex(vec3 hex, inout int age, float time) {\n\t\tvec3 cell;\n\t\tint dir = 0, type = 0;\n\t\tfloat scale = 0.0;\n\n\t\tfor (int i = 0; i < 4; i++) {\n\t\t\tscale = 1.0 + float(type) * nsin(time);\n\t\t\tcell = hexToCell(hex * scale, 1.0);\n\t\t\tdir = getHexDir(hex);\n\t\t\ttype = getHexType(hex);\n\t\t\thex = cell;\n\t\t\tif (dir == 1 && type == 1) {\n\t\t\t\tage = i;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t\treturn cell;\n\t}\n\n\tvoid main(void) {\n\t\tfloat time = globaltime * timescale;\n\t\tvec2 center = vec2(sin(TWO_PI * time * 0.5), cos(TWO_PI * time * 0.5)) * nsin(time * 0.3) * 0.3;\n\t\tvec2 tx = (gl_FragCoord.xy / resolution.xy - 0.5 + center) * vec2(aspect, 1.0) * 2.0;\n\t\tfloat len = 1.0 - length(tx - center * 2.0) * 0.3;\n\t\tfloat zoom = 15.0 + scroll * 20.0;\n\t\tfloat angle = PI * scroll * len;\n\t\tfloat value = 0.0;\n\t\tint age = 0;\n\t\tvec3 hex = coordToHex(tx, zoom, angle);\n\t\tvec3 cell = divideHex(hex, age, time * 0.1);\n\t\tfloat shift = float(age) / 3.0;\n\n\t\tvalue = nsin(\n\t\t\thexToFloat(cell, nsin(time + shift)) * 0.1 * nsin(time * 0.5 + shift)\n\t\t\t+ shift\n\t\t\t+ time\n\t\t) * len;\n\n\t\tgl_FragColor = texture2D(gradient, vec2(0.0, value));\n\t}\n\t</script>\n\t<script src=\"js/demo8.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "index9.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n<head>\n\t<meta charset=\"UTF-8\" />\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<title>WebGL Scroll Spiral | Demo 1 | Codrops</title>\n\t<meta name=\"description\" content=\"Some decorative background scroll effects for websites using WebGL and regl\" />\n\t<meta name=\"keywords\" content=\"regl, webgl, background, website, decorative, scroll effect, spiral, distortion \" />\n\t<meta name=\"author\" content=\"Codrops\" />\n\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\n\t<link href=\"https://fonts.googleapis.com/css?family=Roboto+Mono:400,700\" rel=\"stylesheet\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/normalize.css\" />\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t<script>document.documentElement.className = 'js';</script>\n</head>\n<body class=\"demo-9 loading\">\n\t<canvas id=\"webgl\"></canvas>\n\t<svg class=\"hidden\">\n\t\t<symbol id=\"icon-arrow\" viewBox=\"0 0 24 24\">\n\t\t\t<title>arrow</title>\n\t\t\t<polygon points=\"6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 \" />\n\t\t</symbol>\n\t\t<symbol id=\"icon-drop\" viewBox=\"0 0 24 24\">\n\t\t\t<title>drop</title>\n\t\t\t<path d=\"M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z\" />\n\t\t\t<path d=\"M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z\" />\n\t\t</symbol>\n\t</svg>\n\t<main>\n\t\t<header class=\"content content--header\">\n\t\t\t<div class=\"content__top\">\n\t\t\t\t<h1 class=\"main-title\">Scroll Spirals</h1>\n\t\t\t\t<p class=\"main-tagline\">Decorative Background Effects with WebGL</p>\n\t\t\t\t<a class=\"github\" href=\"https://github.com/codrops/ScrollSpiral/\">GitHub</a>\n\t\t\t\t<div class=\"codrops-links\">\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--prev\" href=\"https://tympanus.net/Development/DeveloperDesignerPageLayout/\" title=\"Previous Demo\"><svg class=\"icon icon--arrow\"><use xlink:href=\"#icon-arrow\"></use></svg></a>\n\t\t\t\t\t<a class=\"codrops-icon codrops-icon--drop\" href=\"https://tympanus.net/codrops/?p=30761\" title=\"Back to the article\"><svg class=\"icon icon--drop\"><use xlink:href=\"#icon-drop\"></use></svg></a>\n\t\t\t\t</div>\n\t\t\t\t<nav class=\"demos\">\n\t\t\t\t\t<a class=\"demo\" href=\"index.html\">Demo 1</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index2.html\">Demo 2</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index3.html\">Demo 3</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index4.html\">Demo 4</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index5.html\">Demo 5</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index6.html\">Demo 6</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index7.html\">Demo 7</a>\n\t\t\t\t\t<a class=\"demo\" href=\"index8.html\">Demo 8</a>\n\t\t\t\t\t<a class=\"demo demo--current\" href=\"index9.html\">Demo 9</a>\n\t\t\t\t</nav>\n\t\t\t</div>\n\t\t</header>\n\t\t<section class=\"content content--main\"></section>\n\t\t<section class=\"content content--related\">\n\t\t\t<p class=\"content__text\">This demo is powered by <a href=\"http://regl.party/\">regl &mdash; declarative and stateless webgl</a></p>\n\t\t\t<h3 class=\"content__text\">If you enjoyed this demo you might also like:</h3>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Development/AnimatedHeaderBackgrounds/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/AnimatedHeaderBackgrounds.png\">\n\t\t\t\t<h3 class=\"media-item__title\">Animated Background Headers</h3>\n\t\t\t</a>\n\t\t\t<a class=\"media-item\" href=\"https://tympanus.net/Tutorials/PrismEffectSlider/\">\n\t\t\t\t<img class=\"media-item__img\" src=\"img/related/PrismEffectSlider.jpg\">\n\t\t\t\t<h3 class=\"media-item__title\">Prism Effect Slider</h3>\n\t\t\t</a>\n\t\t</section>\n\t</main>\n\t<script src=\"js/regl.min.js\"></script>\n\t<script type=\"x-shader/x-fragment\" id=\"fragmentShader\">\n\t#define TWO_PI 6.2831853072\n\t#define PI 3.14159265359\n\n\tprecision highp float;\n\n\tuniform float globaltime;\n\tuniform vec2 resolution;\n\tuniform float aspect;\n\tuniform float scroll;\n\tuniform float velocity;\n\n\tconst float timescale = 0.05;\n\tconst float displace = 0.09;\n\tconst float gridSize = 15.0;\n\tconst int layers = 2;\n\tconst float detail = 4.0;\n\tconst float wave = 2.0;\n\n\tvec2 rotate(vec2 v, float angle) {\n\t\tfloat c = cos(angle);\n\t\tfloat s = sin(angle);\n\t\treturn v * mat2(c, -s, s, c);\n\t}\n\n\tvec3 coordToHex(vec2 coord, float scale, float angle) {\n\t\tvec2 c = rotate(coord, angle);\n\t\tfloat q = (1.0 / 3.0 * sqrt(3.0) * c.x - 1.0 / 3.0 * c.y) * scale;\n\t\tfloat r = 2.0 / 3.0 * c.y * scale;\n\t\treturn vec3(q, r, -q - r);\n\t}\n\n\tvec3 hexToCell(vec3 hex, float m) {\n\t\treturn fract(hex / m) * 2.0 - 1.0;\n\t}\n\n\tfloat absMax(vec3 v) {\n\t\treturn max(max(abs(v.x), abs(v.y)), abs(v.z));\n\t}\n\n\tfloat nsin(float value) {\n\t\treturn sin(value * TWO_PI) * 0.5 + 0.5;\n\t}\n\n\tfloat hexToFloat(vec3 hex, float amt) {\n\t\treturn mix(absMax(hex), 1.0 - length(hex) / sqrt(3.0), amt);\n\t}\n\n\tfloat calc(vec3 hex, float time, float len) {\n\t\tfloat value = 0.0;\n\n\t\tfor (int i = 0; i < layers; i++) {\n\t\t\tvec3 cell = hexToCell(hex, 1.0 + float(i));\n\t\t\tvalue += nsin(\n\t\t\t\thexToFloat(\n\t\t\t\t\tcell,\n\t\t\t\t\tnsin(len * wave + time + float(i) / float(layers))\n\t\t\t\t) * detail + nsin(time * 0.5)\n\t\t\t);\n\t\t}\n\n\t\treturn value / float(layers);\n\t}\n\n\tvoid main(void) {\n\t\tvec2 tx = (gl_FragCoord.xy / resolution.xy - 0.5) * vec2(aspect, 1.0) * 2.0;\n\t\tfloat time = globaltime * timescale - scroll;\n\t\tfloat invScroll = 1.0 - scroll;\n\t\tfloat rgb[3];\n\t\tfloat len = length(tx) * 0.9;\n\t\tfloat zoom = nsin(time * 0.1) + len * velocity;\n\t\tfloat angle = TWO_PI * nsin(time * 0.05) + PI * len * scroll * -2.0;\n\t\tvec3 hex = coordToHex(tx, gridSize * zoom, angle);\n\n\t\tfor (int i = 0; i < 3; i++) {\n\t\t\tfloat time2 = time + float(i) * displace * scroll;\n\t\t\trgb[i] = pow(calc(hex, time2, len), 5.0) * (0.2 + 0.8 * sin(PI * len * 0.5));\n\t\t}\n\n\t\tgl_FragColor = vec4(\n\t\t\trgb[0] * invScroll,\n\t\t\trgb[1] * invScroll,\n\t\t\trgb[2] * scroll,\n\t\t\t1.0\n\t\t);\n\t}\n\t</script>\n\t<script src=\"js/demo9.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "js/demo1.js",
    "content": "!function() {\n\t'use strict';\n\n\tvar canvas = document.querySelector('#webgl');\n\n\t// Scroll variables\n\tvar scroll = 0.0, velocity = 0.0, lastScroll = 0.0;\n\n\t// initialize REGL from a canvas element\n\tvar regl = createREGL({\n\t\tcanvas: canvas,\n\t\tonDone: function(error, regl) {\n\t\t\tif (error) { alert(error); }\n\t\t}\n\t});\n\n\t// Create a REGL draw command\n\tvar draw = regl({\n\t\tfrag: document.querySelector('#fragmentShader').textContent,\n\t\tvert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }',\n\t\tattributes: { position: [-1, 0, 0, -1, 1, 1] },\n\t\tcount: 3,\n\t\tuniforms: {\n\t\t\tglobaltime: regl.prop('globaltime'),\n\t\t\tresolution: regl.prop('resolution'),\n\t\t\taspect: regl.prop('aspect'),\n\t\t\tscroll: regl.prop('scroll'),\n\t\t\tvelocity: regl.prop('velocity')\n\t\t}\n\t});\n\n\t// Hook a callback to execute each frame\n\tregl.frame(function(ctx) {\n\t\t// Resize a canvas element with the aspect ratio (100vw, 100vh)\n\t\tvar aspect = canvas.scrollWidth / canvas.scrollHeight;\n\t\tcanvas.width = 512 * aspect;\n\t\tcanvas.height = 512;\n\n\t\t// Scroll amount (0.0 to 1.0)\n\t\tscroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight);\n\n\t\t// Scroll velocity\n\t\t// Inertia example:\n\t\t// velocity = velocity * 0.99 + (scroll - lastScroll);\n\t\t// lastScroll = scroll;\n\n\t\t// Clear the draw buffer\n\t\tregl.clear({ color: [0, 0, 0, 0] });\n\n\t\t// Execute a REGL draw command\n\t\tdraw({\n\t\t\tglobaltime: ctx.time,\n\t\t\tresolution: [ctx.viewportWidth, ctx.viewportHeight],\n\t\t\taspect: aspect,\n\t\t\tscroll: scroll,\n\t\t\tvelocity: velocity\n\t\t});\n\t});\n\n\tsetTimeout(function() { document.body.classList.remove('loading');}, 1000);\n\n}();\n"
  },
  {
    "path": "js/demo2.js",
    "content": "!function() {\n\t'use strict';\n\n\tvar canvas = document.querySelector('#webgl');\n\n\t// Scroll variables\n\tvar scroll = 0.0, velocity = 0.0, lastScroll = 0.0;\n\n\t// Initialize REGL from a canvas element\n\tvar regl = createREGL({\n\t\tcanvas: canvas,\n\t\tonDone: function(error, regl) {\n\t\t\tif (error) { alert(error); }\n\t\t}\n\t});\n\n\t// Loading a texture\n\tvar img = new Image();\n\timg.src = 'img/img1.jpg';\n\timg.onload = function() {\n\t\tsetTimeout(function() { document.body.classList.remove('loading');}, 1000);\n\n\t\t// Create a REGL draw command\n\t\tvar draw = regl({\n\t\t\tfrag: document.querySelector('#fragmentShader').textContent,\n\t\t\tvert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }',\n\t\t\tattributes: { position: [-1, 0, 0, -1, 1, 1] },\n\t\t\tcount: 3,\n\t\t\tuniforms: {\n\t\t\t\tglobaltime: regl.prop('globaltime'),\n\t\t\t\tresolution: regl.prop('resolution'),\n\t\t\t\taspect: regl.prop('aspect'),\n\t\t\t\tscroll: regl.prop('scroll'),\n\t\t\t\tvelocity: regl.prop('velocity'),\n\t\t\t\ttexture: regl.texture(img)\n\t\t\t}\n\t\t});\n\n\t\t// Hook a callback to execute each frame\n\t\tregl.frame(function(ctx) {\n\n\t\t\t// Resize a canvas element with the aspect ratio (100vw, 100vh)\n\t\t\tvar aspect = canvas.scrollWidth / canvas.scrollHeight;\n\t\t\tcanvas.width = 1024 * aspect;\n\t\t\tcanvas.height = 1024;\n\n\t\t\t// Scroll amount (0.0 to 1.0)\n\t\t\tscroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight);\n\n\t\t\t// Scroll Velocity\n\t\t\t// Inertia example:\n\t\t\t// velocity = velocity * 0.99 + (scroll - lastScroll);\n\t\t\t// lastScroll = scroll;\n\n\t\t\t// Clear the draw buffer\n\t\t\tregl.clear({ color: [0, 0, 0, 0] });\n\n\t\t\t// Execute a REGL draw command\n\t\t\tdraw({\n\t\t\t\tglobaltime: ctx.time,\n\t\t\t\tresolution: [ctx.viewportWidth, ctx.viewportHeight],\n\t\t\t\taspect: aspect,\n\t\t\t\tscroll: scroll,\n\t\t\t\tvelocity: velocity\n\t\t\t});\n\t\t});\n\t};\n\n}();\n"
  },
  {
    "path": "js/demo3.js",
    "content": "!function() {\n\t'use strict';\n\n\tvar canvas = document.querySelector('#webgl');\n\n\t// Scroll variables\n\tvar scroll = 0.0, velocity = 0.0, lastScroll = 0.0;\n\n\t// Initialize REGL from a canvas element\n\tvar regl = createREGL({\n\t\tcanvas: canvas,\n\t\tonDone: function(error, regl) {\n\t\t\tif (error) { alert(error); }\n\t\t}\n\t});\n\n\t// Loading a texture\n\tvar img = new Image();\n\timg.src = 'img/img2.jpg';\n\timg.onload = function() {\n\t\tsetTimeout(function() { document.body.classList.remove('loading');}, 1000);\n\n\t\t// Create a REGL draw command\n\t\tvar draw = regl({\n\t\t\tfrag: document.querySelector('#fragmentShader').textContent,\n\t\t\tvert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }',\n\t\t\tattributes: { position: [-1, 0, 0, -1, 1, 1] },\n\t\t\tcount: 3,\n\t\t\tuniforms: {\n\t\t\t\tglobaltime: regl.prop('globaltime'),\n\t\t\t\tresolution: regl.prop('resolution'),\n\t\t\t\taspect: regl.prop('aspect'),\n\t\t\t\tscroll: regl.prop('scroll'),\n\t\t\t\tvelocity: regl.prop('velocity'),\n\t\t\t\ttexture: regl.texture(img)\n\t\t\t}\n\t\t});\n\n\t\t// Hook a callback to execute each frame\n\t\tregl.frame(function(ctx) {\n\n\t\t\t// Resize a canvas element with the aspect ratio (100vw, 100vh)\n\t\t\tvar aspect = canvas.scrollWidth / canvas.scrollHeight;\n\t\t\tcanvas.width = 1024 * aspect;\n\t\t\tcanvas.height = 1024;\n\n\t\t\t// Scroll amount (0.0 to 1.0)\n\t\t\tscroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight);\n\n\t\t\t// Scroll Velocity\n\t\t\t// Inertia example:\n\t\t\t// velocity = velocity * 0.99 + (scroll - lastScroll);\n\t\t\t// lastScroll = scroll;\n\n\t\t\t// Clear the draw buffer\n\t\t\tregl.clear({ color: [0, 0, 0, 0] });\n\n\t\t\t// Execute a REGL draw command\n\t\t\tdraw({\n\t\t\t\tglobaltime: ctx.time,\n\t\t\t\tresolution: [ctx.viewportWidth, ctx.viewportHeight],\n\t\t\t\taspect: aspect,\n\t\t\t\tscroll: scroll,\n\t\t\t\tvelocity: velocity\n\t\t\t});\n\t\t});\n\t};\n\n}();\n"
  },
  {
    "path": "js/demo4.js",
    "content": "!function() {\n\t'use strict';\n\n\tvar canvas = document.querySelector('#webgl');\n\n\t// Scroll variables\n\tvar scroll = 0.0, velocity = 0.0, lastScroll = 0.0;\n\n\t// Initialize REGL from a canvas element\n\tvar regl = createREGL({\n\t\tcanvas: canvas,\n\t\tonDone: function(error, regl) {\n\t\t\tif (error) { alert(error); }\n\t\t}\n\t});\n\n\t// Loading a texture\n\tvar img = new Image();\n\timg.src = 'img/img3.jpg';\n\timg.onload = function() {\n\t\tsetTimeout(function() { document.body.classList.remove('loading');}, 1000);\n\n\t\t// Create a REGL draw command\n\t\tvar draw = regl({\n\t\t\tfrag: document.querySelector('#fragmentShader').textContent,\n\t\t\tvert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }',\n\t\t\tattributes: { position: [-1, 0, 0, -1, 1, 1] },\n\t\t\tcount: 3,\n\t\t\tuniforms: {\n\t\t\t\tglobaltime: regl.prop('globaltime'),\n\t\t\t\tresolution: regl.prop('resolution'),\n\t\t\t\taspect: regl.prop('aspect'),\n\t\t\t\tscroll: regl.prop('scroll'),\n\t\t\t\tvelocity: regl.prop('velocity'),\n\t\t\t\ttexture: regl.texture(img)\n\t\t\t}\n\t\t});\n\n\t\t// Hook a callback to execute each frame\n\t\tregl.frame(function(ctx) {\n\n\t\t\t// Resize a canvas element with the aspect ratio (100vw, 100vh)\n\t\t\tvar aspect = canvas.scrollWidth / canvas.scrollHeight;\n\t\t\tcanvas.width = 1024 * aspect;\n\t\t\tcanvas.height = 1024;\n\n\t\t\t// Scroll amount (0.0 to 1.0)\n\t\t\tscroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight);\n\n\t\t\t// Scroll Velocity\n\t\t\t// Inertia example:\n\t\t\t// velocity = velocity * 0.99 + (scroll - lastScroll);\n\t\t\t// lastScroll = scroll;\n\n\t\t\t// Clear the draw buffer\n\t\t\tregl.clear({ color: [0, 0, 0, 0] });\n\n\t\t\t// Execute a REGL draw command\n\t\t\tdraw({\n\t\t\t\tglobaltime: ctx.time,\n\t\t\t\tresolution: [ctx.viewportWidth, ctx.viewportHeight],\n\t\t\t\taspect: aspect,\n\t\t\t\tscroll: scroll,\n\t\t\t\tvelocity: velocity\n\t\t\t});\n\t\t});\n\t};\n}();\n"
  },
  {
    "path": "js/demo5.js",
    "content": "!function() {\n\t'use strict';\n\n\tvar canvas = document.querySelector('#webgl');\n\n\t// Scroll variables\n\tvar scroll = 0.0, velocity = 0.0, lastScroll = 0.0;\n\n\t// Initialize REGL from a canvas element\n\tvar regl = createREGL({\n\t\tcanvas: canvas,\n\t\tonDone: function(error, regl) {\n\t\t\tif (error) { alert(error); }\n\t\t}\n\t});\n\n\t// Loading a texture\n\tvar img = new Image();\n\timg.src = 'img/img4.jpg';\n\timg.onload = function() {\n\t\tsetTimeout(function() { document.body.classList.remove('loading');}, 1000);\n\n\t\t// Create a REGL draw command\n\t\tvar draw = regl({\n\t\t\tfrag: document.querySelector('#fragmentShader').textContent,\n\t\t\tvert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }',\n\t\t\tattributes: { position: [-1, 0, 0, -1, 1, 1] },\n\t\t\tcount: 3,\n\t\t\tuniforms: {\n\t\t\t\tglobaltime: regl.prop('globaltime'),\n\t\t\t\tresolution: regl.prop('resolution'),\n\t\t\t\taspect: regl.prop('aspect'),\n\t\t\t\tscroll: regl.prop('scroll'),\n\t\t\t\tvelocity: regl.prop('velocity'),\n\t\t\t\ttexture: regl.texture(img)\n\t\t\t}\n\t\t});\n\n\t\t// Hook a callback to execute each frame\n\t\tregl.frame(function(ctx) {\n\n\t\t\t// Resize a canvas element with the aspect ratio (100vw, 100vh)\n\t\t\tvar aspect = canvas.scrollWidth / canvas.scrollHeight;\n\t\t\tcanvas.width = 1024 * aspect;\n\t\t\tcanvas.height = 1024;\n\n\t\t\t// Scroll amount (0.0 to 1.0)\n\t\t\tscroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight);\n\n\t\t\t// Scroll Velocity\n\t\t\t// Inertia example:\n\t\t\t// velocity = velocity * 0.99 + (scroll - lastScroll);\n\t\t\t// lastScroll = scroll;\n\n\t\t\t// Clear the draw buffer\n\t\t\tregl.clear({ color: [0, 0, 0, 0] });\n\n\t\t\t// Execute a REGL draw command\n\t\t\tdraw({\n\t\t\t\tglobaltime: ctx.time,\n\t\t\t\tresolution: [ctx.viewportWidth, ctx.viewportHeight],\n\t\t\t\taspect: aspect,\n\t\t\t\tscroll: scroll,\n\t\t\t\tvelocity: velocity\n\t\t\t});\n\t\t});\n\t};\n\n}();\n"
  },
  {
    "path": "js/demo6.js",
    "content": "!function() {\n\t'use strict';\n\n\tvar canvas = document.querySelector('#webgl');\n\n\t// Scroll variables\n\tvar scroll = 0.0, velocity = 0.0, lastScroll = 0.0;\n\n\t// initialize REGL from a canvas element\n\tvar regl = createREGL({\n\t\tcanvas: canvas,\n\t\tonDone: function(error, regl) {\n\t\t\tif (error) { alert(error); }\n\t\t}\n\t});\n\n\t// Loading a texture\n\tvar img = new Image();\n\timg.src = 'img/gradient_map1.png';\n\timg.onload = function() {\n\t\tsetTimeout(function() { document.body.classList.remove('loading');}, 1000);\n\n\t\t// Create a REGL draw command\n\t\tvar draw = regl({\n\t\t\tfrag: document.querySelector('#fragmentShader').textContent,\n\t\t\tvert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }',\n\t\t\tattributes: { position: [-1, 0, 0, -1, 1, 1] },\n\t\t\tcount: 3,\n\t\t\tuniforms: {\n\t\t\t\tglobaltime: regl.prop('globaltime'),\n\t\t\t\tresolution: regl.prop('resolution'),\n\t\t\t\taspect: regl.prop('aspect'),\n\t\t\t\tscroll: regl.prop('scroll'),\n\t\t\t\tvelocity: regl.prop('velocity'),\n\t\t\t\tgradient: regl.texture(img)\n\t\t\t}\n\t\t});\n\n\t\t// Hook a callback to execute each frame\n\t\tregl.frame(function(ctx) {\n\n\t\t\t// Resize a canvas element with the aspect ratio (100vw, 100vh)\n\t\t\tvar aspect = canvas.scrollWidth / canvas.scrollHeight;\n\t\t\tcanvas.width = 768 * aspect;\n\t\t\tcanvas.height = 768;\n\n\t\t\t// Scroll amount (0.0 to 1.0)\n\t\t\tscroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight);\n\n\t\t\t// Scroll Velocity\n\t\t\t// Inertia example:\n\t\t\t// velocity = velocity * 0.99 + (scroll - lastScroll);\n\t\t\t// lastScroll = scroll;\n\n\t\t\t// Clear the draw buffer\n\t\t\tregl.clear({ color: [0, 0, 0, 0] });\n\n\t\t\t// Execute a REGL draw command\n\t\t\tdraw({\n\t\t\t\tglobaltime: ctx.time,\n\t\t\t\tresolution: [ctx.viewportWidth, ctx.viewportHeight],\n\t\t\t\taspect: aspect,\n\t\t\t\tscroll: scroll,\n\t\t\t\tvelocity: velocity\n\t\t\t});\n\t\t});\n\n\t};\n\n}();\n"
  },
  {
    "path": "js/demo7.js",
    "content": "!function() {\n\t'use strict';\n\n\tvar canvas = document.querySelector('#webgl');\n\n\t// Scroll variables\n\tvar scroll = 0.0, velocity = 0.0, lastScroll = 0.0;\n\n\t// initialize REGL from a canvas element\n\tvar regl = createREGL({\n\t\tcanvas: canvas,\n\t\tonDone: function(error, regl) {\n\t\t\tif (error) { alert(error); }\n\t\t}\n\t});\n\n\t// Loading a texture\n\tvar img = new Image();\n\timg.src = 'img/gradient_map2.png';\n\timg.onload = function() {\n\t\tsetTimeout(function() { document.body.classList.remove('loading');}, 1000);\n\n\t\t// Create a REGL draw command\n\t\tvar draw = regl({\n\t\t\tfrag: document.querySelector('#fragmentShader').textContent,\n\t\t\tvert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }',\n\t\t\tattributes: { position: [-1, 0, 0, -1, 1, 1] },\n\t\t\tcount: 3,\n\t\t\tuniforms: {\n\t\t\t\tglobaltime: regl.prop('globaltime'),\n\t\t\t\tresolution: regl.prop('resolution'),\n\t\t\t\taspect: regl.prop('aspect'),\n\t\t\t\tscroll: regl.prop('scroll'),\n\t\t\t\tvelocity: regl.prop('velocity'),\n\t\t\t\tgradient: regl.texture(img)\n\t\t\t}\n\t\t});\n\n\t\t// Hook a callback to execute each frame\n\t\tregl.frame(function(ctx) {\n\n\t\t\t// Resize a canvas element with the aspect ratio (100vw, 100vh)\n\t\t\tvar aspect = canvas.scrollWidth / canvas.scrollHeight;\n\t\t\tcanvas.width = 768 * aspect;\n\t\t\tcanvas.height = 768;\n\n\t\t\t// Scroll amount (0.0 to 1.0)\n\t\t\tscroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight);\n\n\t\t\t// Scroll Velocity\n\t\t\t// Inertia example:\n\t\t\t// velocity = velocity * 0.99 + (scroll - lastScroll);\n\t\t\t// lastScroll = scroll;\n\n\t\t\t// Clear the draw buffer\n\t\t\tregl.clear({ color: [0, 0, 0, 0] });\n\n\t\t\t// Execute a REGL draw command\n\t\t\tdraw({\n\t\t\t\tglobaltime: ctx.time,\n\t\t\t\tresolution: [ctx.viewportWidth, ctx.viewportHeight],\n\t\t\t\taspect: aspect,\n\t\t\t\tscroll: scroll,\n\t\t\t\tvelocity: velocity\n\t\t\t});\n\t\t});\n\n\t};\n\n}();\n"
  },
  {
    "path": "js/demo8.js",
    "content": "!function() {\n\t'use strict';\n\n\tvar canvas = document.querySelector('#webgl');\n\n\t// Scroll variables\n\tvar scroll = 0.0, velocity = 0.0, lastScroll = 0.0;\n\n\t// initialize REGL from a canvas element\n\tvar regl = createREGL({\n\t\tcanvas: canvas,\n\t\tonDone: function(error, regl) {\n\t\t\tif (error) { alert(error); }\n\t\t}\n\t});\n\n\t// Loading a texture\n\tvar img = new Image();\n\timg.src = 'img/gradient_map3.png';\n\timg.onload = function() {\n\t\tsetTimeout(function() { document.body.classList.remove('loading');}, 1000);\n\n\t\t// Create a REGL draw command\n\t\tvar draw = regl({\n\t\t\tfrag: document.querySelector('#fragmentShader').textContent,\n\t\t\tvert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }',\n\t\t\tattributes: { position: [-1, 0, 0, -1, 1, 1] },\n\t\t\tcount: 3,\n\t\t\tuniforms: {\n\t\t\t\tglobaltime: regl.prop('globaltime'),\n\t\t\t\tresolution: regl.prop('resolution'),\n\t\t\t\taspect: regl.prop('aspect'),\n\t\t\t\tscroll: regl.prop('scroll'),\n\t\t\t\tvelocity: regl.prop('velocity'),\n\t\t\t\tgradient: regl.texture(img)\n\t\t\t}\n\t\t});\n\n\t\t// Hook a callback to execute each frame\n\t\tregl.frame(function(ctx) {\n\n\t\t\t// Resize a canvas element with the aspect ratio (100vw, 100vh)\n\t\t\tvar aspect = canvas.scrollWidth / canvas.scrollHeight;\n\t\t\tcanvas.width = 768 * aspect;\n\t\t\tcanvas.height = 768;\n\n\t\t\t// Scroll amount (0.0 to 1.0)\n\t\t\tscroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight);\n\n\t\t\t// Scroll Velocity\n\t\t\t// Inertia example:\n\t\t\t// velocity = velocity * 0.99 + (scroll - lastScroll);\n\t\t\t// lastScroll = scroll;\n\n\t\t\t// Clear the draw buffer\n\t\t\tregl.clear({ color: [0, 0, 0, 0] });\n\n\t\t\t// Execute a REGL draw command\n\t\t\tdraw({\n\t\t\t\tglobaltime: ctx.time,\n\t\t\t\tresolution: [ctx.viewportWidth, ctx.viewportHeight],\n\t\t\t\taspect: aspect,\n\t\t\t\tscroll: scroll,\n\t\t\t\tvelocity: velocity\n\t\t\t});\n\t\t});\n\n\t};\n\n}();\n"
  },
  {
    "path": "js/demo9.js",
    "content": "!function() {\n\t'use strict';\n\n\tvar canvas = document.querySelector('#webgl');\n\n\t// Scroll variables\n\tvar scroll = 0.0, velocity = 0.0, lastScroll = 0.0;\n\n\t// initialize REGL from a canvas element\n\tvar regl = createREGL({\n\t\tcanvas: canvas,\n\t\tonDone: function(error, regl) {\n\t\t\tif (error) { alert(error); }\n\t\t}\n\t});\n\n\t// Create a REGL draw command\n\tvar draw = regl({\n\t\tfrag: document.querySelector('#fragmentShader').textContent,\n\t\tvert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }',\n\t\tattributes: { position: [-1, 0, 0, -1, 1, 1] },\n\t\tcount: 3,\n\t\tuniforms: {\n\t\t\tglobaltime: regl.prop('globaltime'),\n\t\t\tresolution: regl.prop('resolution'),\n\t\t\taspect: regl.prop('aspect'),\n\t\t\tscroll: regl.prop('scroll'),\n\t\t\tvelocity: regl.prop('velocity')\n\t\t}\n\t});\n\n\t// Hook a callback to execute each frame\n\tregl.frame(function(ctx) {\n\t\t// Resize a canvas element with the aspect ratio (100vw, 100vh)\n\t\tvar aspect = canvas.scrollWidth / canvas.scrollHeight;\n\t\tcanvas.width = 512 * aspect;\n\t\tcanvas.height = 512;\n\n\t\t// Scroll amount (0.0 to 1.0)\n\t\tscroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight);\n\n\t\t// Scroll Velocity\n\t\t// Inertia example:\n\t\t// velocity = velocity * 0.99 + (scroll - lastScroll);\n\t\t// lastScroll = scroll;\n\n\t\t// Clear the draw buffer\n\t\tregl.clear({ color: [0, 0, 0, 0] });\n\n\t\t// Execute a REGL draw command\n\t\tdraw({\n\t\t\tglobaltime: ctx.time,\n\t\t\tresolution: [ctx.viewportWidth, ctx.viewportHeight],\n\t\t\taspect: aspect,\n\t\t\tscroll: scroll,\n\t\t\tvelocity: velocity\n\t\t});\n\t});\n\n\tsetTimeout(function() { document.body.classList.remove('loading');}, 1000);\n\n}();\n"
  }
]