├── .gitignore
├── src
    ├── .gitignore
    ├── .DS_Store
    ├── img
    │   ├── 1.jpg
    │   └── 2.jpg
    ├── favicon.ico
    ├── fonts
    │   ├── messapia-bold-webfont.woff
    │   └── messapia-bold-webfont.woff2
    ├── js
    │   ├── index.js
    │   ├── index2.js
    │   ├── index3.js
    │   ├── index4.js
    │   ├── utils.js
    │   ├── cursor.js
    │   ├── cursor4.js
    │   ├── cursor3.js
    │   └── cursor2.js
    ├── index3.html
    ├── index.html
    ├── index2.html
    ├── index4.html
    └── css
    │   ├── demo1.css
    │   ├── demo3.css
    │   ├── demo2.css
    │   └── demo4.css
├── .DS_Store
├── .gitattributes
├── dist
    ├── 1.dc197a9a.jpg
    ├── 2.3ca6bb44.jpg
    ├── favicon.26242483.ico
    ├── messapia-bold-webfont.3267b3d0.woff2
    ├── messapia-bold-webfont.6ddf630f.woff
    ├── index3.html
    ├── index.html
    ├── index2.html
    ├── index4.html
    ├── index2.js.map
    ├── index2.html.map
    ├── demo1.ea7e4db3.css
    ├── demo3.f904c581.css
    ├── demo2.06b37b5f.css
    ├── demo1.ea7e4db3.css.map
    ├── demo4.7fb5a017.css
    ├── demo3.f904c581.css.map
    ├── demo2.06b37b5f.css.map
    ├── demo4.7fb5a017.css.map
    ├── index2.js
    ├── demo1.ea7e4db3.js
    ├── demo3.f904c581.js
    ├── demo2.06b37b5f.js
    ├── demo4.7fb5a017.js
    ├── demo1.ea7e4db3.js.map
    └── demo2.06b37b5f.js.map
├── package.json
├── LICENSE
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /.cache
3 | package-lock.json


--------------------------------------------------------------------------------
/src/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /.cache
3 | /dist
4 | package-lock.json


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/AnimatedCustomCursor/HEAD/.DS_Store


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/src/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/AnimatedCustomCursor/HEAD/src/.DS_Store


--------------------------------------------------------------------------------
/src/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/AnimatedCustomCursor/HEAD/src/img/1.jpg


--------------------------------------------------------------------------------
/src/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/AnimatedCustomCursor/HEAD/src/img/2.jpg


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/AnimatedCustomCursor/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/dist/1.dc197a9a.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/AnimatedCustomCursor/HEAD/dist/1.dc197a9a.jpg


--------------------------------------------------------------------------------
/dist/2.3ca6bb44.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/AnimatedCustomCursor/HEAD/dist/2.3ca6bb44.jpg


--------------------------------------------------------------------------------
/dist/favicon.26242483.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/AnimatedCustomCursor/HEAD/dist/favicon.26242483.ico


--------------------------------------------------------------------------------
/src/fonts/messapia-bold-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/AnimatedCustomCursor/HEAD/src/fonts/messapia-bold-webfont.woff


--------------------------------------------------------------------------------
/src/fonts/messapia-bold-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/AnimatedCustomCursor/HEAD/src/fonts/messapia-bold-webfont.woff2


--------------------------------------------------------------------------------
/dist/messapia-bold-webfont.3267b3d0.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/AnimatedCustomCursor/HEAD/dist/messapia-bold-webfont.3267b3d0.woff2


--------------------------------------------------------------------------------
/dist/messapia-bold-webfont.6ddf630f.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/AnimatedCustomCursor/HEAD/dist/messapia-bold-webfont.6ddf630f.woff


--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
1 | import Cursor from './cursor';
2 | 
3 | const cursor = new Cursor(document.querySelector('.cursor'));
4 | 
5 | [...document.querySelectorAll('a')].forEach(el => {
6 |     el.addEventListener('mouseenter', () => cursor.emit('enter'));
7 |     el.addEventListener('mouseleave', () => cursor.emit('leave'));
8 | });


--------------------------------------------------------------------------------
/src/js/index2.js:
--------------------------------------------------------------------------------
1 | import Cursor from './cursor2';
2 | 
3 | const cursor = new Cursor(document.querySelector('.cursor'));
4 | 
5 | [...document.querySelectorAll('a')].forEach(el => {
6 |     el.addEventListener('mouseenter', () => cursor.emit('enter'));
7 |     el.addEventListener('mouseleave', () => cursor.emit('leave'));
8 | });


--------------------------------------------------------------------------------
/src/js/index3.js:
--------------------------------------------------------------------------------
1 | import Cursor from './cursor3';
2 | 
3 | const cursor = new Cursor(document.querySelector('.cursor'));
4 | 
5 | [...document.querySelectorAll('a')].forEach(el => {
6 |     el.addEventListener('mouseenter', () => cursor.emit('enter'));
7 |     el.addEventListener('mouseleave', () => cursor.emit('leave'));
8 | });


--------------------------------------------------------------------------------
/src/js/index4.js:
--------------------------------------------------------------------------------
1 | import Cursor from './cursor4';
2 | 
3 | const cursor = new Cursor(document.querySelector('.cursor'));
4 | 
5 | [...document.querySelectorAll('a')].forEach(el => {
6 |     el.addEventListener('mouseenter', () => cursor.emit('enter'));
7 |     el.addEventListener('mouseleave', () => cursor.emit('leave'));
8 | });


--------------------------------------------------------------------------------
/src/js/utils.js:
--------------------------------------------------------------------------------
 1 | // Map number x from range [a, b] to [c, d]
 2 | const map = (x, a, b, c, d) => (x - a) * (d - c) / (b - a) + c;
 3 | 
 4 | // Linear interpolation
 5 | const lerp = (a, b, n) => (1 - n) * a + n * b;
 6 | 
 7 | const calcWinsize = () => {
 8 |     return {width: window.innerWidth, height: window.innerHeight};
 9 | };
10 | 
11 | // Gets the mouse position
12 | const getMousePos = e => {
13 |     return { 
14 |         x : e.clientX, 
15 |         y : e.clientY 
16 |     };
17 | };
18 | 
19 | export { map, lerp, calcWinsize, getMousePos };
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "AnimatedCustomCursor",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "parcel src/index.html --open",
 8 |     "clean": "rm -rf dist/*",
 9 |     "build:parcel": "parcel build src/index.html --no-minify --no-source-maps --public-url ./",
10 |     "build": "npm run clean && npm run build:parcel"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git://github.com/codrops/AnimatedCustomCursor.git"
15 |   },
16 |   "keywords": [],
17 |   "author": "Codrops",
18 |   "license": "MIT",
19 |   "homepage": "https://tympanus.net/Development/AnimatedCustomCursor/",
20 |   "bugs": {
21 |     "url": "https://github.com/codrops/AnimatedCustomCursor/issues"
22 |   },
23 |   "dependencies": {
24 |     "gsap": "^3.2.4",
25 |     "parcel-bundler": "^1.12.4"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2009 - 2020 [Codrops](https://tympanus.net/codrops)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Animated Custom Cursor Effect
 2 | 
 3 | Some distortion animations for custom cursors using SVG filters.
 4 | 
 5 | ![Animated Custom Cursor Effect](https://tympanus.net/codrops/wp-content/uploads/2020/03/AnimatedCursor_featured-1.jpg)
 6 | 
 7 | [Article on Codrops](https://tympanus.net/codrops/?p=48725)
 8 | 
 9 | [Demo](http://tympanus.net/Development/AnimatedCustomCursor/)
10 | 
11 | 
12 | ## Installation
13 | 
14 | Install dependencies:
15 | 
16 | ```
17 | npm install
18 | ```
19 | 
20 | Compile the code for development and start a local server:
21 | 
22 | ```
23 | npm start
24 | ```
25 | 
26 | Create the build:
27 | 
28 | ```
29 | npm run build
30 | ```
31 | 
32 | ## Credits
33 | 
34 | - Images from [Unsplash](https://unsplash.com/)
35 | - Messapia font by Luca Marsano from [Collletttivo.it](http://collletttivo.it/)
36 | 
37 | ## Misc
38 | 
39 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/)
40 | 
41 | ## License
42 | [MIT](LICENSE)
43 | 
44 | Made with :blue_heart: by [Codrops](http://www.codrops.com)
45 | 
46 | 
47 | 
48 | 
49 | 
50 | 


--------------------------------------------------------------------------------
/src/index3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>Animated Custom Cursor Effect | Demo 3 | Codrops</title>
 7 | 		<meta name="description" content="Some SVG filter effects for custom mouse cursors." />
 8 | 		<meta name="keywords" content="svg filter, custom cursor, distortion, animation, effect, interactive, web, frontend" />
 9 | 		<meta name="author" content="Codrops" />
10 | 		<link rel="shortcut icon" href="favicon.ico">
11 | 		<link rel="stylesheet" href="https://use.typekit.net/gdg8keg.css">
12 | 		<link rel="stylesheet" type="text/css" href="css/demo3.css" />
13 | 		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14 | 	</head>
15 | 	<body>
16 | 		<main>
17 | 			<div class="frame">
18 | 				<h1 class="frame__title">Animated Custom Cursor Effect</h1>
19 | 				<div class="frame__links">
20 | 					<a href="https://tympanus.net/codrops/?p=48725">Article</a>
21 | 					<a href="https://github.com/codrops/AnimatedCustomCursor/">GitHub</a>
22 | 				</div>
23 | 				<h3 class="frame__initials">C</h3>
24 | 				<div class="frame__demos">
25 | 					<a href="index.html">1</a>
26 | 					<a href="index2.html">2</a>
27 | 					<span>3</span>
28 | 					<a href="index4.html">4</a>
29 | 				</div>
30 | 			</div>
31 | 			<div class="content">
32 | 				<p>Hi, my name is Eddie and I am a <a>pragmatic</a> UI designer who has worked with dozens of <a>businesses</a> and some <a>non-profit</a> organizations. If you'd like me to help you with your next UI project, <a>let's talk</a>!</p>
33 | 			</div>
34 | 		</main>
35 | 		<svg class="cursor" width="280" height="280" viewBox="0 0 280 280">
36 | 			<defs>
37 | 				<filter id="filter-1" x="-50%" y="-50%" width="200%" height="200%" 
38 | 				filterUnits="objectBoundingBox">
39 | 					<feTurbulence type="fractalNoise" baseFrequency="0.02 0.15" numOctaves="3" result="warp" />
40 | 					<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="0" in="SourceGraphic" in2="warp" />
41 | 				</filter>
42 | 			</defs>
43 | 			<circle class="cursor__inner" cx="140" cy="140" r="50"/>
44 | 		</svg>
45 | 		<script src="js/index3.js"></script>
46 | 	</body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>Animated Custom Cursor Effect | Demo 1 | Codrops</title>
 7 | 		<meta name="description" content="Some SVG filter effects for custom mouse cursors." />
 8 | 		<meta name="keywords" content="svg filter, custom cursor, distortion, animation, effect, interactive, web, frontend" />
 9 | 		<meta name="author" content="Codrops" />
10 | 		<link rel="shortcut icon" href="favicon.ico">
11 | 		<link rel="stylesheet" href="https://use.typekit.net/gdg8keg.css">
12 | 		<link rel="stylesheet" type="text/css" href="css/demo1.css" />
13 | 		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14 | 	</head>
15 | 	<body>
16 | 		<main>
17 | 			<div class="frame">
18 | 				<h1 class="frame__title">Animated Custom Cursor Effect</h1>
19 | 				<div class="frame__links">
20 | 					<a href="https://tympanus.net/codrops/?p=48725">Article</a>
21 | 					<a href="https://github.com/codrops/AnimatedCustomCursor/">GitHub</a>
22 | 				</div>
23 | 				<h3 class="frame__initials">C</h3>
24 | 				<div class="frame__demos">
25 | 					<span>1</span>
26 | 					<a href="index2.html">2</a>
27 | 					<a href="index3.html">3</a>
28 | 					<a href="index4.html">4</a>
29 | 				</div>
30 | 			</div>
31 | 			<div class="content">
32 | 				<p>Hi, my name is Eddie and I am a <a>pragmatic</a> UI designer who has worked with dozens of <a>businesses</a> and some <a>non-profit</a> organizations. If you'd like me to help you with your next UI project, <a>let's talk</a>!</p>
33 | 			</div>
34 | 		</main>
35 | 		<svg class="cursor" width="220" height="220" viewBox="0 0 220 220">
36 | 			<defs>
37 | 				<filter id="filter-1" x="-50%" y="-50%" width="200%" height="200%" 
38 | 				filterUnits="objectBoundingBox">
39 | 					<feTurbulence type="fractalNoise" baseFrequency="0" numOctaves="1" result="warp" />
40 | 					<feOffset dx="-30" result="warpOffset" />
41 | 					<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset" />
42 | 				</filter>
43 | 			</defs>
44 | 			<circle class="cursor__inner" cx="110" cy="110" r="60"/>
45 | 		</svg>
46 | 		<script src="js/index.js"></script>
47 | 	</body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/src/index2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>Animated Custom Cursor Effect | Demo 2 | Codrops</title>
 7 | 		<meta name="description" content="Some SVG filter effects for custom mouse cursors." />
 8 | 		<meta name="keywords" content="svg filter, custom cursor, distortion, animation, effect, interactive, web, frontend" />
 9 | 		<meta name="author" content="Codrops" />
10 | 		<link rel="shortcut icon" href="favicon.ico">
11 | 		<link rel="stylesheet" href="https://use.typekit.net/gdg8keg.css">
12 | 		<link rel="stylesheet" type="text/css" href="css/demo2.css" />
13 | 		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14 | 		<style>
15 | 			@font-face {
16 | 				font-family: 'messapiabold';
17 | 				src: url('fonts/messapia-bold-webfont.woff2') format('woff2'), url('fonts/messapia-bold-webfont.woff') format('woff');
18 | 				font-weight: normal;
19 | 				font-style: normal;
20 | 			}
21 | 		</style>
22 | 	</head>
23 | 	<body>
24 | 		<main>
25 | 			<div class="frame">
26 | 				<h1 class="frame__title">Animated Custom Cursor Effect</h1>
27 | 				<div class="frame__links">
28 | 					<a href="https://tympanus.net/codrops/?p=48725">Article</a>
29 | 					<a href="https://github.com/codrops/AnimatedCustomCursor/">GitHub</a>
30 | 				</div>
31 | 				<h3 class="frame__initials">C</h3>
32 | 				<div class="frame__demos">
33 | 					<a href="index.html">1</a>
34 | 					<span>2</span>
35 | 					<a href="index3.html">3</a>
36 | 					<a href="index4.html">4</a>
37 | 				</div>
38 | 			</div>
39 | 			<div class="content">
40 | 				<nav class="menu">
41 | 					<a class="menu__item">invisible</a>
42 | 					<a class="menu__item">robotic</a>
43 | 					<a class="menu__item">destiny</a>
44 | 				</nav>
45 | 			</div>
46 | 		</main>
47 | 		<svg class="cursor" width="140" height="140" viewBox="0 0 140 140">
48 | 			<defs>
49 | 				<filter id="filter-1" x="-50%" y="-50%" width="200%" height="200%" 
50 | 				filterUnits="objectBoundingBox">
51 | 					<feTurbulence type="fractalNoise" baseFrequency="0" numOctaves="10" result="warp" />
52 | 					<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="60" in="SourceGraphic" in2="warp" />
53 | 				</filter>
54 | 			</defs>
55 | 			<circle class="cursor__inner" cx="70" cy="70" r="60"/>
56 | 		</svg>
57 | 		<script src="js/index2.js"></script>
58 | 	</body>
59 | </html>
60 | 


--------------------------------------------------------------------------------
/dist/index3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8">
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>Animated Custom Cursor Effect | Demo 3 | Codrops</title>
 7 | 		<meta name="description" content="Some SVG filter effects for custom mouse cursors.">
 8 | 		<meta name="keywords" content="svg filter, custom cursor, distortion, animation, effect, interactive, web, frontend">
 9 | 		<meta name="author" content="Codrops">
10 | 		<link rel="shortcut icon" href="/favicon.26242483.ico">
11 | 		<link rel="stylesheet" href="https://use.typekit.net/gdg8keg.css">
12 | 		<link rel="stylesheet" type="text/css" href="/demo3.f904c581.css">
13 | 		<script>document.documentElement.className = "js";
14 | 
15 | var supportsCssVars = function supportsCssVars() {
16 |   var e,
17 |       t = document.createElement("style");
18 |   return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e;
19 | };
20 | 
21 | supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
22 | 	<script src="/demo3.f904c581.js"></script><script src="/index4.js"></script></head>
23 | 	<body>
24 | 		<main>
25 | 			<div class="frame">
26 | 				<h1 class="frame__title">Animated Custom Cursor Effect</h1>
27 | 				<div class="frame__links">
28 | 					<a href="https://tympanus.net/codrops/?p=48725">Article</a>
29 | 					<a href="https://github.com/codrops/AnimatedCustomCursor/">GitHub</a>
30 | 				</div>
31 | 				<h3 class="frame__initials">C</h3>
32 | 				<div class="frame__demos">
33 | 					<a href="/index.html">1</a>
34 | 					<a href="/index2.html">2</a>
35 | 					<span>3</span>
36 | 					<a href="/index4.html">4</a>
37 | 				</div>
38 | 			</div>
39 | 			<div class="content">
40 | 				<p>Hi, my name is Eddie and I am a <a>pragmatic</a> UI designer who has worked with dozens of <a>businesses</a> and some <a>non-profit</a> organizations. If you'd like me to help you with your next UI project, <a>let's talk</a>!</p>
41 | 			</div>
42 | 		</main>
43 | 		<svg class="cursor" width="280" height="280" viewBox="0 0 280 280">
44 | 			<defs>
45 | 				<filter id="filter-1" x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox">
46 | 					<feTurbulence type="fractalNoise" baseFrequency="0.02 0.15" numOctaves="3" result="warp"></feTurbulence>
47 | 					<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="0" in="SourceGraphic" in2="warp"></feDisplacementMap>
48 | 				</filter>
49 | 			</defs>
50 | 			<circle class="cursor__inner" cx="140" cy="140" r="50"></circle>
51 | 		</svg>
52 | 		<script src="/index3.02479077.js"></script>
53 | 	</body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/src/index4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>Animated Custom Cursor Effect | Demo 4 | Codrops</title>
 7 | 		<meta name="description" content="Some SVG filter effects for custom mouse cursors." />
 8 | 		<meta name="keywords" content="svg filter, custom cursor, distortion, animation, effect, interactive, web, frontend" />
 9 | 		<meta name="author" content="Codrops" />
10 | 		<link rel="shortcut icon" href="favicon.ico">
11 | 		<link rel="stylesheet" href="https://use.typekit.net/gdg8keg.css">
12 | 		<link rel="stylesheet" type="text/css" href="css/demo4.css" />
13 | 		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14 | 		<style>
15 | 			@font-face {
16 | 				font-family: 'messapiabold';
17 | 				src: url('fonts/messapia-bold-webfont.woff2') format('woff2'), url('fonts/messapia-bold-webfont.woff') format('woff');
18 | 				font-weight: normal;
19 | 				font-style: normal;
20 | 			}
21 | 		</style>
22 | 	</head>
23 | 	<body>
24 | 		<main>
25 | 			<div class="frame">
26 | 				<h1 class="frame__title">Animated Custom Cursor Effect</h1>
27 | 				<div class="frame__links">
28 | 					<a href="https://tympanus.net/codrops/?p=48725">Article</a>
29 | 					<a href="https://github.com/codrops/AnimatedCustomCursor/">GitHub</a>
30 | 				</div>
31 | 				<h3 class="frame__initials">C</h3>
32 | 				<div class="frame__demos">
33 | 					<a href="index.html">1</a>
34 | 					<a href="index2.html">2</a>
35 | 					<a href="index3.html">3</a>
36 | 					<span>4</span>
37 | 				</div>
38 | 			</div>
39 | 			<div class="content">
40 | 				<nav class="menu">
41 | 					<a class="menu__item">2017</a>
42 | 					<a class="menu__item">2018</a>
43 | 					<a class="menu__item">2019</a>
44 | 					<a class="menu__item">2020</a>
45 | 				</nav>
46 | 			</div>
47 | 		</main>
48 | 		<svg class="cursor" width="200" height="200" viewBox="0 0 200 200">
49 | 			<defs>
50 | 				<filter id="filter-1" x="-50%" y="-50%" width="200%" height="200%" 
51 | 				filterUnits="objectBoundingBox">
52 | 					<feTurbulence type="fractalNoise" baseFrequency="0" numOctaves="5" result="warp" />
53 | 					<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="90" in="SourceGraphic" in2="warp" />
54 | 				</filter>
55 | 			</defs>
56 | 			<circle class="cursor__inner" cx="100" cy="100" r="60"/>
57 | 		</svg>
58 | 		<script src="js/index4.js"></script>
59 | 	</body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8">
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>Animated Custom Cursor Effect | Demo 1 | Codrops</title>
 7 | 		<meta name="description" content="Some SVG filter effects for custom mouse cursors.">
 8 | 		<meta name="keywords" content="svg filter, custom cursor, distortion, animation, effect, interactive, web, frontend">
 9 | 		<meta name="author" content="Codrops">
10 | 		<link rel="shortcut icon" href="/favicon.26242483.ico">
11 | 		<link rel="stylesheet" href="https://use.typekit.net/gdg8keg.css">
12 | 		<link rel="stylesheet" type="text/css" href="/demo1.ea7e4db3.css">
13 | 		<script>document.documentElement.className = "js";
14 | 
15 | var supportsCssVars = function supportsCssVars() {
16 |   var e,
17 |       t = document.createElement("style");
18 |   return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e;
19 | };
20 | 
21 | supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
22 | 	<script src="/demo1.ea7e4db3.js"></script><script src="/index2.js"></script></head>
23 | 	<body>
24 | 		<main>
25 | 			<div class="frame">
26 | 				<h1 class="frame__title">Animated Custom Cursor Effect</h1>
27 | 				<div class="frame__links">
28 | 					<a href="https://tympanus.net/codrops/?p=48725">Article</a>
29 | 					<a href="https://github.com/codrops/AnimatedCustomCursor/">GitHub</a>
30 | 				</div>
31 | 				<h3 class="frame__initials">C</h3>
32 | 				<div class="frame__demos">
33 | 					<span>1</span>
34 | 					<a href="/index2.html">2</a>
35 | 					<a href="/index3.html">3</a>
36 | 					<a href="/index4.html">4</a>
37 | 				</div>
38 | 			</div>
39 | 			<div class="content">
40 | 				<p>Hi, my name is Eddie and I am a <a>pragmatic</a> UI designer who has worked with dozens of <a>businesses</a> and some <a>non-profit</a> organizations. If you'd like me to help you with your next UI project, <a>let's talk</a>!</p>
41 | 			</div>
42 | 		</main>
43 | 		<svg class="cursor" width="220" height="220" viewBox="0 0 220 220">
44 | 			<defs>
45 | 				<filter id="filter-1" x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox">
46 | 					<feTurbulence type="fractalNoise" baseFrequency="0" numOctaves="1" result="warp"></feTurbulence>
47 | 					<feOffset dx="-30" result="warpOffset"></feOffset>
48 | 					<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset"></feDisplacementMap>
49 | 				</filter>
50 | 			</defs>
51 | 			<circle class="cursor__inner" cx="110" cy="110" r="60"></circle>
52 | 		</svg>
53 | 		<script src="/js.00a46daa.js"></script>
54 | 	</body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/dist/index2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8">
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>Animated Custom Cursor Effect | Demo 2 | Codrops</title>
 7 | 		<meta name="description" content="Some SVG filter effects for custom mouse cursors.">
 8 | 		<meta name="keywords" content="svg filter, custom cursor, distortion, animation, effect, interactive, web, frontend">
 9 | 		<meta name="author" content="Codrops">
10 | 		<link rel="shortcut icon" href="/favicon.26242483.ico">
11 | 		<link rel="stylesheet" href="https://use.typekit.net/gdg8keg.css">
12 | 		<link rel="stylesheet" type="text/css" href="/demo2.06b37b5f.css">
13 | 		<script>document.documentElement.className = "js";
14 | 
15 | var supportsCssVars = function supportsCssVars() {
16 |   var e,
17 |       t = document.createElement("style");
18 |   return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e;
19 | };
20 | 
21 | supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
22 | 		<style>@font-face {
23 | 				font-family: 'messapiabold';
24 | 				src: url('/messapia-bold-webfont.3267b3d0.woff2') format('woff2'), url('/messapia-bold-webfont.6ddf630f.woff') format('woff');
25 | 				font-weight: normal;
26 | 				font-style: normal;
27 | 			}</style>
28 | 	<script src="/demo2.06b37b5f.js"></script></head>
29 | 	<body>
30 | 		<main>
31 | 			<div class="frame">
32 | 				<h1 class="frame__title">Animated Custom Cursor Effect</h1>
33 | 				<div class="frame__links">
34 | 					<a href="https://tympanus.net/codrops/?p=48725">Article</a>
35 | 					<a href="https://github.com/codrops/AnimatedCustomCursor/">GitHub</a>
36 | 				</div>
37 | 				<h3 class="frame__initials">C</h3>
38 | 				<div class="frame__demos">
39 | 					<a href="/index.html">1</a>
40 | 					<span>2</span>
41 | 					<a href="/index3.html">3</a>
42 | 					<a href="/index4.html">4</a>
43 | 				</div>
44 | 			</div>
45 | 			<div class="content">
46 | 				<nav class="menu">
47 | 					<a class="menu__item">invisible</a>
48 | 					<a class="menu__item">robotic</a>
49 | 					<a class="menu__item">destiny</a>
50 | 				</nav>
51 | 			</div>
52 | 		</main>
53 | 		<svg class="cursor" width="140" height="140" viewBox="0 0 140 140">
54 | 			<defs>
55 | 				<filter id="filter-1" x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox">
56 | 					<feTurbulence type="fractalNoise" baseFrequency="0" numOctaves="10" result="warp"></feTurbulence>
57 | 					<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="60" in="SourceGraphic" in2="warp"></feDisplacementMap>
58 | 				</filter>
59 | 			</defs>
60 | 			<circle class="cursor__inner" cx="70" cy="70" r="60"></circle>
61 | 		</svg>
62 | 		<script src="/index2.242c2f2d.js"></script>
63 | 	</body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/dist/index4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8">
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>Animated Custom Cursor Effect | Demo 4 | Codrops</title>
 7 | 		<meta name="description" content="Some SVG filter effects for custom mouse cursors.">
 8 | 		<meta name="keywords" content="svg filter, custom cursor, distortion, animation, effect, interactive, web, frontend">
 9 | 		<meta name="author" content="Codrops">
10 | 		<link rel="shortcut icon" href="/favicon.26242483.ico">
11 | 		<link rel="stylesheet" href="https://use.typekit.net/gdg8keg.css">
12 | 		<link rel="stylesheet" type="text/css" href="/demo4.7fb5a017.css">
13 | 		<script>document.documentElement.className = "js";
14 | 
15 | var supportsCssVars = function supportsCssVars() {
16 |   var e,
17 |       t = document.createElement("style");
18 |   return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e;
19 | };
20 | 
21 | supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
22 | 		<style>@font-face {
23 | 				font-family: 'messapiabold';
24 | 				src: url('/messapia-bold-webfont.3267b3d0.woff2') format('woff2'), url('/messapia-bold-webfont.6ddf630f.woff') format('woff');
25 | 				font-weight: normal;
26 | 				font-style: normal;
27 | 			}</style>
28 | 	<script src="/demo4.7fb5a017.js"></script></head>
29 | 	<body>
30 | 		<main>
31 | 			<div class="frame">
32 | 				<h1 class="frame__title">Animated Custom Cursor Effect</h1>
33 | 				<div class="frame__links">
34 | 					<a href="https://tympanus.net/codrops/?p=48725">Article</a>
35 | 					<a href="https://github.com/codrops/AnimatedCustomCursor/">GitHub</a>
36 | 				</div>
37 | 				<h3 class="frame__initials">C</h3>
38 | 				<div class="frame__demos">
39 | 					<a href="/index.html">1</a>
40 | 					<a href="/index2.html">2</a>
41 | 					<a href="/index3.html">3</a>
42 | 					<span>4</span>
43 | 				</div>
44 | 			</div>
45 | 			<div class="content">
46 | 				<nav class="menu">
47 | 					<a class="menu__item">2017</a>
48 | 					<a class="menu__item">2018</a>
49 | 					<a class="menu__item">2019</a>
50 | 					<a class="menu__item">2020</a>
51 | 				</nav>
52 | 			</div>
53 | 		</main>
54 | 		<svg class="cursor" width="200" height="200" viewBox="0 0 200 200">
55 | 			<defs>
56 | 				<filter id="filter-1" x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox">
57 | 					<feTurbulence type="fractalNoise" baseFrequency="0" numOctaves="5" result="warp"></feTurbulence>
58 | 					<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="90" in="SourceGraphic" in2="warp"></feDisplacementMap>
59 | 				</filter>
60 | 			</defs>
61 | 			<circle class="cursor__inner" cx="100" cy="100" r="60"></circle>
62 | 		</svg>
63 | 		<script src="/index4.c87507a4.js"></script>
64 | 	</body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/dist/index2.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../node_modules/parcel/src/builtins/bundle-url.js","../node_modules/parcel/src/builtins/css-loader.js"],"names":["bundleURL","getBundleURLCached","getBundleURL","Error","err","matches","stack","match","getBaseURL","url","replace","exports","bundle","require","updateLink","link","newLink","cloneNode","onload","remove","href","split","Date","now","parentNode","insertBefore","nextSibling","cssTimeout","reloadCSS","setTimeout","links","document","querySelectorAll","i","length","module"],"mappings":"AAAA,ACAA,IDAIA,ACAAY,MAAM,GDAG,ACAAC,GDAG,IAAhB,ACAoB,CAAC,cAAD,CAApB;;ADCA,ACCA,SDDSZ,ACCAa,UAAT,CAAoBC,IAApB,EAA0B,CDD1B,GAA8B;AAC5B,ACCA,MDDI,ACCAC,CDDChB,MCCM,GDDX,ACCce,EDDE,ECCE,CAACE,SAAL,EAAd;ADAEjB,IAAAA,SAAS,GAAGE,YAAY,EAAxB;AACD,ACADc,EAAAA,OAAO,CAACE,MAAR,GAAiB,YAAY;AAC3BH,IAAAA,IAAI,CAACI,MAAL;ADCF,ACAC,GAFD,MDEOnB,SAAP;AACD;ACACgB,EAAAA,OAAO,CAACI,IAAR,GAAeL,IAAI,CAACK,IAAL,CAAUC,KAAV,CAAgB,GAAhB,EAAqB,CAArB,IAA0B,GAA1B,GAAgCC,IAAI,CAACC,GAAL,EAA/C;ADEF,ACDER,EAAAA,IAAI,CAACS,EDCEtB,QCDP,CAAgBuB,GDClB,GAAwB,MCDtB,CAA6BT,OAA7B,EAAsCD,IAAI,CAACW,WAA3C;ADEA,ACDD;ADEC,MAAI;AACF,ACDJ,IAAIC,MDCM,IAAIxB,ACDA,GAAG,EDCP,EAAN,ACDJ;ADEG,GAFD,CAEE,OAAOC,GAAP,EAAY;AACZ,ACFJ,QDEQC,CCFCuB,MDEM,GAAG,ACFlB,CDEmB,ECFE,GDEGxB,GAAG,CAACE,KAAV,EAAiBC,KAAjB,CAAuB,+DAAvB,CAAd;ACDF,MAAIoB,UAAJ,EAAgB;ADEd,ACDA,QDCItB,OAAJ,EAAa;AACX,ACDH,aDCUG,UAAU,CAACH,OAAO,CAAC,CAAD,CAAR,CAAjB;AACD;AACF,ACDDsB,EAAAA,UAAU,GAAGE,UAAU,CAAC,YAAY;AAClC,QAAIC,KAAK,GAAGC,QAAQ,CAACC,gBAAT,CAA0B,wBAA1B,CAAZ;ADEF,SAAO,GAAP;AACD,ACFG,SAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGH,KAAK,CAACI,MAA1B,EAAkCD,CAAC,EAAnC,EAAuC;AACrC,UAAIrB,MAAM,CAACJ,UAAP,CAAkBsB,KAAK,CAACG,CAAD,CAAL,CAASb,IAA3B,MAAqCR,MAAM,CAACV,YAAP,EAAzC,EAAgE;ADGtE,ACFQY,QAAAA,CDECN,SCFS,CDElB,ACFmBsB,CDECrB,GAApB,CCFwB,CDEC,ACFAwB,CAAD,CAAN,CAAV;ADGN,ACFK,SDEE,CAAC,KAAKxB,GAAN,EAAWC,OAAX,CAAmB,sEAAnB,EAA2F,IAA3F,IAAmG,GAA1G;AACD,ACFI;;ADILC,ACFIgB,IAAAA,GDEG,CAACzB,MCFM,GAAG,GDEjB,CCFI,EDEmBD,kBAAvB;AACAU,ACFG,GATsB,EASpB,EDEE,ACXkB,CDWjBH,ACXN,UDWF,GAAqBA,UAArB;ACDC;;AAED2B,MAAM,CAACxB,OAAP,GAAiBiB,SAAjB","file":"index2.js","sourceRoot":"../src","sourcesContent":["var bundleURL = null;\nfunction getBundleURLCached() {\n  if (!bundleURL) {\n    bundleURL = getBundleURL();\n  }\n\n  return bundleURL;\n}\n\nfunction getBundleURL() {\n  // Attempt to find the URL of the current script and use that as the base URL\n  try {\n    throw new Error;\n  } catch (err) {\n    var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\\/\\/[^)\\n]+/g);\n    if (matches) {\n      return getBaseURL(matches[0]);\n    }\n  }\n\n  return '/';\n}\n\nfunction getBaseURL(url) {\n  return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\\/\\/.+)\\/[^/]+$/, '$1') + '/';\n}\n\nexports.getBundleURL = getBundleURLCached;\nexports.getBaseURL = getBaseURL;\n","var bundle = require('./bundle-url');\n\nfunction updateLink(link) {\n  var newLink = link.cloneNode();\n  newLink.onload = function () {\n    link.remove();\n  };\n  newLink.href = link.href.split('?')[0] + '?' + Date.now();\n  link.parentNode.insertBefore(newLink, link.nextSibling);\n}\n\nvar cssTimeout = null;\nfunction reloadCSS() {\n  if (cssTimeout) {\n    return;\n  }\n\n  cssTimeout = setTimeout(function () {\n    var links = document.querySelectorAll('link[rel=\"stylesheet\"]');\n    for (var i = 0; i < links.length; i++) {\n      if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {\n        updateLink(links[i]);\n      }\n    }\n\n    cssTimeout = null;\n  }, 50);\n}\n\nmodule.exports = reloadCSS;\n"]}


--------------------------------------------------------------------------------
/dist/index2.html.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../node_modules/parcel/src/builtins/bundle-url.js","../node_modules/parcel/src/builtins/css-loader.js"],"names":["bundleURL","getBundleURLCached","getBundleURL","Error","err","matches","stack","match","getBaseURL","url","replace","exports","bundle","require","updateLink","link","newLink","cloneNode","onload","remove","href","split","Date","now","parentNode","insertBefore","nextSibling","cssTimeout","reloadCSS","setTimeout","links","document","querySelectorAll","i","length","module"],"mappings":"AAAA,ACAA,IDAIA,ACAAY,MAAM,GDAG,ACAAC,GDAG,IAAhB,ACAoB,CAAC,cAAD,CAApB;;ADCA,ACCA,SDDSZ,ACCAa,UAAT,CAAoBC,IAApB,EAA0B,CDD1B,GAA8B;AAC5B,ACCA,MDDI,ACCAC,CDDChB,MCCM,GDDX,ACCce,EDDE,ECCE,CAACE,SAAL,EAAd;ADAEjB,IAAAA,SAAS,GAAGE,YAAY,EAAxB;AACD,ACADc,EAAAA,OAAO,CAACE,MAAR,GAAiB,YAAY;AAC3BH,IAAAA,IAAI,CAACI,MAAL;ADCF,ACAC,GAFD,MDEOnB,SAAP;AACD;ACACgB,EAAAA,OAAO,CAACI,IAAR,GAAeL,IAAI,CAACK,IAAL,CAAUC,KAAV,CAAgB,GAAhB,EAAqB,CAArB,IAA0B,GAA1B,GAAgCC,IAAI,CAACC,GAAL,EAA/C;ADEF,ACDER,EAAAA,IAAI,CAACS,EDCEtB,QCDP,CAAgBuB,GDClB,GAAwB,MCDtB,CAA6BT,OAA7B,EAAsCD,IAAI,CAACW,WAA3C;ADEA,ACDD;ADEC,MAAI;AACF,ACDJ,IAAIC,MDCM,IAAIxB,ACDA,GAAG,EDCP,EAAN,ACDJ;ADEG,GAFD,CAEE,OAAOC,GAAP,EAAY;AACZ,ACFJ,QDEQC,CCFCuB,MDEM,GAAG,ACFlB,CDEmB,ECFE,GDEGxB,GAAG,CAACE,KAAV,EAAiBC,KAAjB,CAAuB,+DAAvB,CAAd;ACDF,MAAIoB,UAAJ,EAAgB;ADEd,ACDA,QDCItB,OAAJ,EAAa;AACX,ACDH,aDCUG,UAAU,CAACH,OAAO,CAAC,CAAD,CAAR,CAAjB;AACD;AACF,ACDDsB,EAAAA,UAAU,GAAGE,UAAU,CAAC,YAAY;AAClC,QAAIC,KAAK,GAAGC,QAAQ,CAACC,gBAAT,CAA0B,wBAA1B,CAAZ;ADEF,SAAO,GAAP;AACD,ACFG,SAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGH,KAAK,CAACI,MAA1B,EAAkCD,CAAC,EAAnC,EAAuC;AACrC,UAAIrB,MAAM,CAACJ,UAAP,CAAkBsB,KAAK,CAACG,CAAD,CAAL,CAASb,IAA3B,MAAqCR,MAAM,CAACV,YAAP,EAAzC,EAAgE;ADGtE,ACFQY,QAAAA,CDECN,SCFS,CDElB,ACFmBsB,CDECrB,GAApB,CCFwB,CDEC,ACFAwB,CAAD,CAAN,CAAV;ADGN,ACFK,SDEE,CAAC,KAAKxB,GAAN,EAAWC,OAAX,CAAmB,sEAAnB,EAA2F,IAA3F,IAAmG,GAA1G;AACD,ACFI;;ADILC,ACFIgB,IAAAA,GDEG,CAACzB,MCFM,GAAG,GDEjB,CCFI,EDEmBD,kBAAvB;AACAU,ACFG,GATsB,EASpB,EDEE,ACXkB,CDWjBH,ACXN,UDWF,GAAqBA,UAArB;ACDC;;AAED2B,MAAM,CAACxB,OAAP,GAAiBiB,SAAjB","file":"index2.html","sourceRoot":"../src","sourcesContent":["var bundleURL = null;\nfunction getBundleURLCached() {\n  if (!bundleURL) {\n    bundleURL = getBundleURL();\n  }\n\n  return bundleURL;\n}\n\nfunction getBundleURL() {\n  // Attempt to find the URL of the current script and use that as the base URL\n  try {\n    throw new Error;\n  } catch (err) {\n    var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\\/\\/[^)\\n]+/g);\n    if (matches) {\n      return getBaseURL(matches[0]);\n    }\n  }\n\n  return '/';\n}\n\nfunction getBaseURL(url) {\n  return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\\/\\/.+)\\/[^/]+$/, '$1') + '/';\n}\n\nexports.getBundleURL = getBundleURLCached;\nexports.getBaseURL = getBaseURL;\n","var bundle = require('./bundle-url');\n\nfunction updateLink(link) {\n  var newLink = link.cloneNode();\n  newLink.onload = function () {\n    link.remove();\n  };\n  newLink.href = link.href.split('?')[0] + '?' + Date.now();\n  link.parentNode.insertBefore(newLink, link.nextSibling);\n}\n\nvar cssTimeout = null;\nfunction reloadCSS() {\n  if (cssTimeout) {\n    return;\n  }\n\n  cssTimeout = setTimeout(function () {\n    var links = document.querySelectorAll('link[rel=\"stylesheet\"]');\n    for (var i = 0; i < links.length; i++) {\n      if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {\n        updateLink(links[i]);\n      }\n    }\n\n    cssTimeout = null;\n  }, 50);\n}\n\nmodule.exports = reloadCSS;\n"]}


--------------------------------------------------------------------------------
/src/js/cursor.js:
--------------------------------------------------------------------------------
 1 | import { gsap } from 'gsap';
 2 | import { map, lerp, calcWinsize, getMousePos } from './utils';
 3 | import { EventEmitter } from 'events';
 4 | 
 5 | // Calculate the viewport size
 6 | let winsize = calcWinsize();
 7 | window.addEventListener('resize', () => {
 8 |     winsize = calcWinsize();
 9 | });
10 | 
11 | // Track the mouse position
12 | let mouse = {x: 0, y: 0};
13 | window.addEventListener('mousemove', ev => mouse = getMousePos(ev));
14 | 
15 | export default class Cursor extends EventEmitter {
16 |     constructor(el) {
17 |         super();
18 |         this.DOM = {el: el};
19 |         this.DOM.el.style.opacity = 0;
20 |         this.DOM.circleInner = this.DOM.el.querySelector('.cursor__inner');
21 |         
22 |         this.filterId = '#filter-1';
23 |         this.DOM.feTurbulence = document.querySelector(`${this.filterId} > feTurbulence`);
24 |         
25 |         this.primitiveValues = {turbulence: 0};
26 | 
27 |         this.createTimeline();
28 | 
29 |         this.bounds = this.DOM.el.getBoundingClientRect();
30 |         
31 |         this.renderedStyles = {
32 |             tx: {previous: 0, current: 0, amt: 0.2},
33 |             ty: {previous: 0, current: 0, amt: 0.2},
34 |             radius: {previous: 60, current: 60, amt: 0.2}
35 |         };
36 | 
37 |         this.listen();
38 | 
39 |         this.onMouseMoveEv = () => {
40 |             this.renderedStyles.tx.previous = this.renderedStyles.tx.current = mouse.x - this.bounds.width/2;
41 |             this.renderedStyles.ty.previous = this.renderedStyles.ty.current = mouse.y - this.bounds.height/2;
42 |             gsap.to(this.DOM.el, {duration: 0.9, ease: 'Power3.easeOut', opacity: 1});
43 |             requestAnimationFrame(() => this.render());
44 |             window.removeEventListener('mousemove', this.onMouseMoveEv);
45 |         };
46 |         window.addEventListener('mousemove', this.onMouseMoveEv);
47 |     }
48 |     render() {
49 |         this.renderedStyles['tx'].current = mouse.x - this.bounds.width/2;
50 |         this.renderedStyles['ty'].current = mouse.y - this.bounds.height/2;
51 | 
52 |         for (const key in this.renderedStyles ) {
53 |             this.renderedStyles[key].previous = lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, this.renderedStyles[key].amt);
54 |         }
55 |                     
56 |         this.DOM.el.style.transform = `translateX(${(this.renderedStyles['tx'].previous)}px) translateY(${this.renderedStyles['ty'].previous}px)`;
57 |         this.DOM.circleInner.setAttribute('r', this.renderedStyles['radius'].previous);
58 | 
59 |         requestAnimationFrame(() => this.render());
60 |     }
61 |     createTimeline() {
62 |         // init timeline
63 |         this.tl = gsap.timeline({
64 |             paused: true,
65 |             onStart: () => {
66 |                 this.DOM.circleInner.style.filter = `url(${this.filterId}`;
67 |             },
68 |             onUpdate: () => {
69 |                 this.DOM.feTurbulence.setAttribute('baseFrequency', this.primitiveValues.turbulence);
70 |             },
71 |             onComplete: () => {
72 |                 this.DOM.circleInner.style.filter = 'none';
73 |             }
74 |         })
75 |         .to(this.primitiveValues, { 
76 |             duration: 0.4,
77 |             startAt: {turbulence: 0.09},
78 |             turbulence: 0
79 |         });
80 |     }
81 |     enter() {
82 |         this.renderedStyles['radius'].current = 100;
83 |         this.tl.restart();
84 |     }
85 |     leave() {
86 |         this.renderedStyles['radius'].current = 60;
87 |         this.tl.progress(1).kill();
88 |     }
89 |     listen() {
90 |         this.on('enter', () => this.enter());
91 |         this.on('leave', () => this.leave());
92 |     }
93 | }


--------------------------------------------------------------------------------
/src/js/cursor4.js:
--------------------------------------------------------------------------------
 1 | import { gsap } from 'gsap';
 2 | import { map, lerp, calcWinsize, getMousePos } from './utils';
 3 | import { EventEmitter } from 'events';
 4 | 
 5 | // Calculate the viewport size
 6 | let winsize = calcWinsize();
 7 | window.addEventListener('resize', () => {
 8 |     winsize = calcWinsize();
 9 | });
10 | 
11 | // Track the mouse position
12 | let mouse = {x: 0, y: 0};
13 | window.addEventListener('mousemove', ev => mouse = getMousePos(ev));
14 | 
15 | export default class Cursor extends EventEmitter {
16 |     constructor(el) {
17 |         super();
18 |         this.DOM = {el: el};
19 |         this.DOM.el.style.opacity = 0;
20 |         this.DOM.circleInner = this.DOM.el.querySelector('.cursor__inner');
21 |         
22 |         this.filterId = '#filter-1';
23 |         this.DOM.feTurbulence = document.querySelector(`${this.filterId} > feTurbulence`);
24 |         
25 |         this.primitiveValues = {turbulence: 0};
26 | 
27 |         this.createTimeline();
28 | 
29 |         this.bounds = this.DOM.el.getBoundingClientRect();
30 |         
31 |         this.renderedStyles = {
32 |             tx: {previous: 0, current: 0, amt: 0.16},
33 |             ty: {previous: 0, current: 0, amt: 0.16},
34 |             radius: {previous: 60, current: 60, amt: 0.16}
35 |         };
36 | 
37 |         this.listen();
38 |         
39 |         this.onMouseMoveEv = () => {
40 |             this.renderedStyles.tx.previous = this.renderedStyles.tx.current = mouse.x - this.bounds.width/2;
41 |             this.renderedStyles.ty.previous = this.renderedStyles.ty.current = mouse.y - this.bounds.height/2;
42 |             gsap.to(this.DOM.el, {duration: 0.9, ease: 'Power3.easeOut', opacity: 1});
43 |             requestAnimationFrame(() => this.render());
44 |             window.removeEventListener('mousemove', this.onMouseMoveEv);
45 |         };
46 |         window.addEventListener('mousemove', this.onMouseMoveEv);
47 |     }
48 |     render() {
49 |         this.renderedStyles['tx'].current = mouse.x - this.bounds.width/2;
50 |         this.renderedStyles['ty'].current = mouse.y - this.bounds.height/2;
51 | 
52 |         for (const key in this.renderedStyles ) {
53 |             this.renderedStyles[key].previous = lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, this.renderedStyles[key].amt);
54 |         }
55 |                     
56 |         this.DOM.el.style.transform = `translateX(${(this.renderedStyles['tx'].previous)}px) translateY(${this.renderedStyles['ty'].previous}px)`;
57 |         this.DOM.circleInner.setAttribute('r', this.renderedStyles['radius'].previous);
58 | 
59 |         requestAnimationFrame(() => this.render());
60 |     }
61 |     createTimeline() {
62 |         // init timeline
63 |         this.tl = gsap.timeline({
64 |             paused: true,
65 |             onStart: () => {
66 |                 this.DOM.circleInner.style.filter = `url(${this.filterId}`;
67 |             },
68 |             onUpdate: () => {
69 |                 this.DOM.feTurbulence.setAttribute('baseFrequency', this.primitiveValues.turbulence);
70 |             },
71 |             onComplete: () => {
72 |                 this.DOM.circleInner.style.filter = 'none';
73 |             }
74 |         })
75 |         .to(this.primitiveValues, { 
76 |             duration: 0.4,
77 |             ease: 'Expo.easeOut',
78 |             startAt: {turbulence: 0},
79 |             turbulence: 0.5
80 |         });
81 |     }
82 |     enter() {
83 |         this.renderedStyles['radius'].current = 80;
84 |         this.tl.restart();
85 |     }
86 |     leave() {
87 |         this.renderedStyles['radius'].current = 60;
88 |         this.tl.progress(1).kill();
89 |     }
90 |     listen() {
91 |         this.on('enter', () => this.enter());
92 |         this.on('leave', () => this.leave());
93 |     }
94 | }


--------------------------------------------------------------------------------
/src/js/cursor3.js:
--------------------------------------------------------------------------------
 1 | import { gsap } from 'gsap';
 2 | import { map, lerp, calcWinsize, getMousePos } from './utils';
 3 | import { EventEmitter } from 'events';
 4 | 
 5 | // Calculate the viewport size
 6 | let winsize = calcWinsize();
 7 | window.addEventListener('resize', () => {
 8 |     winsize = calcWinsize();
 9 | });
10 | 
11 | // Track the mouse position
12 | let mouse = {x: 0, y: 0};
13 | window.addEventListener('mousemove', ev => mouse = getMousePos(ev));
14 | 
15 | export default class Cursor extends EventEmitter {
16 |     constructor(el) {
17 |         super();
18 |         this.DOM = {el: el};
19 |         this.DOM.el.style.opacity = 0;
20 |         this.DOM.circleInner = this.DOM.el.querySelector('.cursor__inner');
21 |         
22 |         this.filterId = '#filter-1';
23 |         this.DOM.feDisplacementMap = document.querySelector(`${this.filterId} > feDisplacementMap`);
24 |         
25 |         this.primitiveValues = {scale: 0};
26 | 
27 |         this.createTimeline();
28 | 
29 |         this.bounds = this.DOM.el.getBoundingClientRect();
30 |         
31 |         this.renderedStyles = {
32 |             tx: {previous: 0, current: 0, amt: 0.14},
33 |             ty: {previous: 0, current: 0, amt: 0.14},
34 |             radius: {previous: 50, current: 50, amt: 0.14}
35 |         };
36 | 
37 |         this.listen();
38 | 
39 |         this.onMouseMoveEv = () => {
40 |             this.renderedStyles.tx.previous = this.renderedStyles.tx.current = mouse.x - this.bounds.width/2;
41 |             this.renderedStyles.ty.previous = this.renderedStyles.ty.current = mouse.y - this.bounds.height/2;
42 |             gsap.to(this.DOM.el, {duration: 0.9, ease: 'Power3.easeOut', opacity: 1});
43 |             requestAnimationFrame(() => this.render());
44 |             window.removeEventListener('mousemove', this.onMouseMoveEv);
45 |         };
46 |         window.addEventListener('mousemove', this.onMouseMoveEv);
47 |     }
48 |     render() {
49 |         this.renderedStyles['tx'].current = mouse.x - this.bounds.width/2;
50 |         this.renderedStyles['ty'].current = mouse.y - this.bounds.height/2;
51 | 
52 |         for (const key in this.renderedStyles ) {
53 |             this.renderedStyles[key].previous = lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, this.renderedStyles[key].amt);
54 |         }
55 |                     
56 |         this.DOM.el.style.transform = `translateX(${(this.renderedStyles['tx'].previous)}px) translateY(${this.renderedStyles['ty'].previous}px)`;
57 |         this.DOM.circleInner.setAttribute('r', this.renderedStyles['radius'].previous);
58 | 
59 |         requestAnimationFrame(() => this.render());
60 |     }
61 |     createTimeline() {
62 |         // init timeline
63 |         this.tl = gsap.timeline({
64 |             paused: true,
65 |             onStart: () => {
66 |                 this.DOM.circleInner.style.filter = `url(${this.filterId}`;
67 |             },
68 |             onUpdate: () => {
69 |                 this.DOM.feDisplacementMap.scale.baseVal = this.primitiveValues.scale;
70 |             },
71 |             onComplete: () => {
72 |                 this.DOM.circleInner.style.filter = 'none';
73 |             }
74 |         })
75 |         .to(this.primitiveValues, { 
76 |             duration: 0.1,
77 |             ease: 'Expo.easeOut',
78 |             startAt: {scale: 0},
79 |             scale: 60
80 |         })
81 |         .to(this.primitiveValues, { 
82 |             duration: 0.6,
83 |             ease: 'Power3.easeOut',
84 |             scale: 0
85 |         });
86 |     }
87 |     enter() {
88 |         this.renderedStyles['radius'].current = 120;
89 |         this.tl.restart();
90 |     }
91 |     leave() {
92 |         this.renderedStyles['radius'].current = 50;
93 |         this.tl.progress(1).kill();
94 |     }
95 |     listen() {
96 |         this.on('enter', () => this.enter());
97 |         this.on('leave', () => this.leave());
98 |     }
99 | }


--------------------------------------------------------------------------------
/src/js/cursor2.js:
--------------------------------------------------------------------------------
 1 | import { gsap } from 'gsap';
 2 | import { map, lerp, calcWinsize, getMousePos } from './utils';
 3 | import { EventEmitter } from 'events';
 4 | 
 5 | // Calculate the viewport size
 6 | let winsize = calcWinsize();
 7 | window.addEventListener('resize', () => {
 8 |     winsize = calcWinsize();
 9 | });
10 | 
11 | // Track the mouse position
12 | let mouse = {x: 0, y: 0};
13 | window.addEventListener('mousemove', ev => mouse = getMousePos(ev));
14 | 
15 | export default class Cursor extends EventEmitter {
16 |     constructor(el) {
17 |         super();
18 |         this.DOM = {el: el};
19 |         this.DOM.el.style.opacity = 0;
20 |         this.DOM.circleInner = this.DOM.el.querySelector('.cursor__inner');
21 |         
22 |         this.filterId = '#filter-1';
23 |         this.DOM.feTurbulence = document.querySelector(`${this.filterId} > feTurbulence`);
24 |         
25 |         this.primitiveValues = {turbulence: 0};
26 | 
27 |         this.createTimeline();
28 | 
29 |         this.bounds = this.DOM.el.getBoundingClientRect();
30 |         
31 |         this.renderedStyles = {
32 |             tx: {previous: 0, current: 0, amt: 0.2},
33 |             ty: {previous: 0, current: 0, amt: 0.2},
34 |             radius: {previous: 60, current: 60, amt: 0.2},
35 |             stroke: {previous: 1, current: 1, amt: 0.2}
36 |         };
37 | 
38 |         this.listen();
39 | 
40 |         this.onMouseMoveEv = () => {
41 |             this.renderedStyles.tx.previous = this.renderedStyles.tx.current = mouse.x - this.bounds.width/2;
42 |             this.renderedStyles.ty.previous = this.renderedStyles.ty.current = mouse.y - this.bounds.height/2;
43 |             gsap.to(this.DOM.el, {duration: 0.9, ease: 'Power3.easeOut', opacity: 1});
44 |             requestAnimationFrame(() => this.render());
45 |             window.removeEventListener('mousemove', this.onMouseMoveEv);
46 |         };
47 |         window.addEventListener('mousemove', this.onMouseMoveEv);
48 |     }
49 |     render() {
50 |         this.renderedStyles['tx'].current = mouse.x - this.bounds.width/2;
51 |         this.renderedStyles['ty'].current = mouse.y - this.bounds.height/2;
52 | 
53 |         for (const key in this.renderedStyles ) {
54 |             this.renderedStyles[key].previous = lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, this.renderedStyles[key].amt);
55 |         }
56 |                     
57 |         this.DOM.el.style.transform = `translateX(${(this.renderedStyles['tx'].previous)}px) translateY(${this.renderedStyles['ty'].previous}px)`;
58 |         this.DOM.circleInner.setAttribute('r', this.renderedStyles['radius'].previous);
59 |         this.DOM.circleInner.style.strokeWidth = `${this.renderedStyles['stroke'].previous}px`;
60 | 
61 |         requestAnimationFrame(() => this.render());
62 |     }
63 |     createTimeline() {
64 |         // init timeline
65 |         this.tl = gsap.timeline({
66 |             paused: true,
67 |             onStart: () => {
68 |                 this.DOM.circleInner.style.filter = `url(${this.filterId}`;
69 |             },
70 |             onUpdate: () => {
71 |                 this.DOM.feTurbulence.setAttribute('baseFrequency', this.primitiveValues.turbulence);
72 |             },
73 |             onComplete: () => {
74 |                 this.DOM.circleInner.style.filter = 'none';
75 |             }
76 |         })
77 |         .to(this.primitiveValues, { 
78 |             duration: 0.4,
79 |             ease: "rough({ template: none.out, strength: 2, points: 120, taper: 'none', randomize: true, clamp: false})",
80 |             startAt: {turbulence: 0.07},
81 |             turbulence: 0
82 |         });
83 |     }
84 |     enter() {
85 |         this.renderedStyles['radius'].current = 40;
86 |         this.renderedStyles['stroke'].current = 3;
87 |         this.tl.restart();
88 |     }
89 |     leave() {
90 |         this.renderedStyles['radius'].current = 60;
91 |         this.renderedStyles['stroke'].current = 1;
92 |         this.tl.progress(1).kill();
93 |     }
94 |     listen() {
95 |         this.on('enter', () => this.enter());
96 |         this.on('leave', () => this.leave());
97 |     }
98 | }


--------------------------------------------------------------------------------
/src/css/demo1.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::after,
  3 | *::before {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | :root {
  8 | 	font-size: 15px;
  9 | }
 10 | 
 11 | body {
 12 | 	margin: 0;
 13 | 	--color-text: #c3654e;
 14 | 	--color-bg: #f2e9e0;
 15 | 	--color-link: #000;
 16 | 	--color-link-hover: #040203;
 17 | 	--color-content: #040203;
 18 | 	--font-alt: freight-display-pro, serif;
 19 | 	color: var(--color-text);
 20 | 	background-color: var(--color-bg);
 21 | 	font-family: soleil, sans-serif;
 22 | 	-webkit-font-smoothing: antialiased;
 23 | 	-moz-osx-font-smoothing: grayscale;
 24 | 	/* Cursor styles */
 25 | 	--cursor-stroke: #c3654e;
 26 | 	--cursor-fill: none;
 27 | 	--cursor-stroke-width: 1px;
 28 | }
 29 | 
 30 | a {
 31 | 	text-decoration: none;
 32 | 	color: var(--color-link);
 33 | 	outline: none;
 34 | 	cursor: pointer;
 35 | }
 36 | 
 37 | a:hover,
 38 | a:focus {
 39 | 	color: var(--color-link-hover);
 40 | 	outline: none;
 41 | }
 42 | 
 43 | .frame {
 44 | 	padding: 3rem 5vw;
 45 | 	text-align: center;
 46 | 	position: relative;
 47 | 	z-index: 1000;
 48 | }
 49 | 
 50 | .frame__title {
 51 | 	font-size: 1rem;
 52 | 	margin: 0 0 1rem;
 53 | 	font-weight: inherit;
 54 | }
 55 | 
 56 | .frame__links {
 57 | 	display: block;
 58 | }
 59 | 
 60 | .frame__links > *:not(:last-child),
 61 | .frame__demos > *:not(:last-child) {
 62 |     margin-right: 1rem;
 63 | }
 64 | 
 65 | .frame__demos {
 66 | 	margin: 1rem 0;
 67 | }
 68 | 
 69 | .frame__demos span {
 70 | 	font-weight: bold;
 71 | 	color: var(--color-link);
 72 | }
 73 | 
 74 | .frame__initials {
 75 | 	font-family: var(--font-alt);
 76 | 	font-size: 1.5rem;
 77 | 	pointer-events: none;
 78 | 	line-height: 18px;
 79 | }
 80 | 
 81 | .content {
 82 | 	display: flex;
 83 | 	position: relative;
 84 | 	flex-direction: column;
 85 | 	width: 100vw;
 86 | 	height: calc(100vh - 13rem);
 87 | 	position: relative;
 88 | 	justify-content: flex-start;
 89 | 	align-items: center;
 90 | }
 91 | 
 92 | .content p {
 93 | 	max-width: 80vw;
 94 | 	font-size: 4vw;
 95 | 	text-transform: uppercase;
 96 | 	color: var(--color-content);
 97 | 	font-family: var(--font-alt);
 98 | 	font-weight: 300;
 99 | 	line-height: 1.4;
100 | }
101 | 
102 | .content p a {
103 | 	font-weight: 600;
104 | 	font-style: italic;
105 | 	position: relative;
106 | }
107 | 
108 | .content p a::after { 
109 | 	content: ''; 
110 | 	position: absolute; 
111 | 	width: 100%; 
112 | 	height: 1px; 
113 | 	background: currentColor; 
114 | 	bottom: 0.5vw; 
115 | 	left: 0; 
116 | 	opacity: 0; 
117 | 	transform-origin: 0% 50%; 
118 | 	transform: scaleX(0); 
119 | 	transition: all 0.25s ease-out; 
120 | } 
121 |  
122 | .content p a:hover::after, 
123 | .content p a:focus::after { 
124 | 	opacity: 1; 
125 | 	transform: scaleX(1); 
126 | }
127 | 
128 | .menu {
129 | 	display: flex;
130 | 	overflow: hidden;
131 | 	position: relative;
132 | 	width: 100vw;
133 | 	justify-content: center;
134 | }
135 | 
136 | .menu__item {
137 | 	font-size: 6.5vw;
138 | 	margin: 0 2vw;
139 | 	cursor: default;
140 | 	font-family: var(--font-alt);
141 | 	color: var(--color-menu-link);
142 | 	cursor: pointer;
143 | }
144 | 
145 | .menu__item:hover,
146 | .menu__item:focus {
147 | 	color: var(--color-menu-link-hover);
148 | }
149 | 
150 | .cursor {
151 | 	display: none;
152 | }
153 | 
154 | @media screen and (min-width: 53em) {
155 | 	.frame {
156 | 		position: fixed;
157 | 		text-align: left;
158 | 		z-index: 10000;
159 | 		top: 0;
160 | 		left: 0;
161 | 		display: grid;
162 | 		align-content: space-between;
163 | 		width: 100%;
164 | 		max-width: none;
165 | 		height: 100vh;
166 | 		padding: 2.5rem 3rem;
167 | 		pointer-events: none;
168 | 		grid-template-columns: 40% 20% 40%;
169 | 		grid-template-rows: auto auto auto;
170 | 		grid-template-areas: 'title initials links'
171 | 							'... ... ...'
172 | 							'... demos ...';
173 | 	}
174 | 	.frame__title {
175 | 		grid-area: title;
176 | 		margin: 0;
177 | 	}
178 | 	.frame__initials {
179 | 		grid-area: initials;
180 | 		margin: 0;
181 | 		justify-self: center;
182 | 	    align-self: center;
183 | 	}
184 | 	.frame__demos {
185 | 		margin: 0;
186 | 		grid-area: demos;
187 | 		justify-self: center;
188 | 	}
189 | 	.frame__links {
190 | 		grid-area: links;
191 | 		padding: 0;
192 | 		justify-self: end;
193 | 	}
194 | 	.frame__info {
195 | 		grid-area: info;
196 | 		margin: 0;
197 | 		justify-self: end;
198 | 	}
199 | 	.frame a {
200 | 		pointer-events: auto;
201 | 	}
202 | 	.content {
203 | 		height: 100vh;
204 | 		justify-content: center;
205 | 	}
206 | }
207 | 
208 | @media (any-pointer: fine) {
209 | 	.cursor {
210 | 		position: fixed;
211 | 		top: 0;
212 | 		left: 0;
213 | 		display: block;
214 | 		pointer-events: none;
215 | 		opacity: 0;
216 | 	}
217 | 	.cursor__inner {
218 | 		fill: var(--cursor-fill);
219 | 		stroke: var(--cursor-stroke);
220 | 		stroke-width: var(--cursor-stroke-width);
221 | 	}
222 | }
223 | 


--------------------------------------------------------------------------------
/dist/demo1.ea7e4db3.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::after,
  3 | *::before {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | :root {
  8 | 	font-size: 15px;
  9 | }
 10 | 
 11 | body {
 12 | 	margin: 0;
 13 | 	--color-text: #c3654e;
 14 | 	--color-bg: #f2e9e0;
 15 | 	--color-link: #000;
 16 | 	--color-link-hover: #040203;
 17 | 	--color-content: #040203;
 18 | 	--font-alt: freight-display-pro, serif;
 19 | 	color: var(--color-text);
 20 | 	background-color: var(--color-bg);
 21 | 	font-family: soleil, sans-serif;
 22 | 	-webkit-font-smoothing: antialiased;
 23 | 	-moz-osx-font-smoothing: grayscale;
 24 | 	/* Cursor styles */
 25 | 	--cursor-stroke: #c3654e;
 26 | 	--cursor-fill: none;
 27 | 	--cursor-stroke-width: 1px;
 28 | }
 29 | 
 30 | a {
 31 | 	text-decoration: none;
 32 | 	color: var(--color-link);
 33 | 	outline: none;
 34 | 	cursor: pointer;
 35 | }
 36 | 
 37 | a:hover,
 38 | a:focus {
 39 | 	color: var(--color-link-hover);
 40 | 	outline: none;
 41 | }
 42 | 
 43 | .frame {
 44 | 	padding: 3rem 5vw;
 45 | 	text-align: center;
 46 | 	position: relative;
 47 | 	z-index: 1000;
 48 | }
 49 | 
 50 | .frame__title {
 51 | 	font-size: 1rem;
 52 | 	margin: 0 0 1rem;
 53 | 	font-weight: inherit;
 54 | }
 55 | 
 56 | .frame__links {
 57 | 	display: block;
 58 | }
 59 | 
 60 | .frame__links > *:not(:last-child),
 61 | .frame__demos > *:not(:last-child) {
 62 |     margin-right: 1rem;
 63 | }
 64 | 
 65 | .frame__demos {
 66 | 	margin: 1rem 0;
 67 | }
 68 | 
 69 | .frame__demos span {
 70 | 	font-weight: bold;
 71 | 	color: var(--color-link);
 72 | }
 73 | 
 74 | .frame__initials {
 75 | 	font-family: var(--font-alt);
 76 | 	font-size: 1.5rem;
 77 | 	pointer-events: none;
 78 | 	line-height: 18px;
 79 | }
 80 | 
 81 | .content {
 82 | 	display: flex;
 83 | 	position: relative;
 84 | 	flex-direction: column;
 85 | 	width: 100vw;
 86 | 	height: calc(100vh - 13rem);
 87 | 	position: relative;
 88 | 	justify-content: flex-start;
 89 | 	align-items: center;
 90 | }
 91 | 
 92 | .content p {
 93 | 	max-width: 80vw;
 94 | 	font-size: 4vw;
 95 | 	text-transform: uppercase;
 96 | 	color: var(--color-content);
 97 | 	font-family: var(--font-alt);
 98 | 	font-weight: 300;
 99 | 	line-height: 1.4;
100 | }
101 | 
102 | .content p a {
103 | 	font-weight: 600;
104 | 	font-style: italic;
105 | 	position: relative;
106 | }
107 | 
108 | .content p a::after { 
109 | 	content: ''; 
110 | 	position: absolute; 
111 | 	width: 100%; 
112 | 	height: 1px; 
113 | 	background: currentColor; 
114 | 	bottom: 0.5vw; 
115 | 	left: 0; 
116 | 	opacity: 0; 
117 | 	transform-origin: 0% 50%; 
118 | 	transform: scaleX(0); 
119 | 	transition: all 0.25s ease-out; 
120 | } 
121 |  
122 | .content p a:hover::after, 
123 | .content p a:focus::after { 
124 | 	opacity: 1; 
125 | 	transform: scaleX(1); 
126 | }
127 | 
128 | .menu {
129 | 	display: flex;
130 | 	overflow: hidden;
131 | 	position: relative;
132 | 	width: 100vw;
133 | 	justify-content: center;
134 | }
135 | 
136 | .menu__item {
137 | 	font-size: 6.5vw;
138 | 	margin: 0 2vw;
139 | 	cursor: default;
140 | 	font-family: var(--font-alt);
141 | 	color: var(--color-menu-link);
142 | 	cursor: pointer;
143 | }
144 | 
145 | .menu__item:hover,
146 | .menu__item:focus {
147 | 	color: var(--color-menu-link-hover);
148 | }
149 | 
150 | .cursor {
151 | 	display: none;
152 | }
153 | 
154 | @media screen and (min-width: 53em) {
155 | 	.frame {
156 | 		position: fixed;
157 | 		text-align: left;
158 | 		z-index: 10000;
159 | 		top: 0;
160 | 		left: 0;
161 | 		display: grid;
162 | 		align-content: space-between;
163 | 		width: 100%;
164 | 		max-width: none;
165 | 		height: 100vh;
166 | 		padding: 2.5rem 3rem;
167 | 		pointer-events: none;
168 | 		grid-template-columns: 40% 20% 40%;
169 | 		grid-template-rows: auto auto auto;
170 | 		grid-template-areas: 'title initials links'
171 | 							'... ... ...'
172 | 							'... demos ...';
173 | 	}
174 | 	.frame__title {
175 | 		grid-area: title;
176 | 		margin: 0;
177 | 	}
178 | 	.frame__initials {
179 | 		grid-area: initials;
180 | 		margin: 0;
181 | 		justify-self: center;
182 | 	    align-self: center;
183 | 	}
184 | 	.frame__demos {
185 | 		margin: 0;
186 | 		grid-area: demos;
187 | 		justify-self: center;
188 | 	}
189 | 	.frame__links {
190 | 		grid-area: links;
191 | 		padding: 0;
192 | 		justify-self: end;
193 | 	}
194 | 	.frame__info {
195 | 		grid-area: info;
196 | 		margin: 0;
197 | 		justify-self: end;
198 | 	}
199 | 	.frame a {
200 | 		pointer-events: auto;
201 | 	}
202 | 	.content {
203 | 		height: 100vh;
204 | 		justify-content: center;
205 | 	}
206 | }
207 | 
208 | @media (any-pointer: fine) {
209 | 	.cursor {
210 | 		position: fixed;
211 | 		top: 0;
212 | 		left: 0;
213 | 		display: block;
214 | 		pointer-events: none;
215 | 		opacity: 0;
216 | 	}
217 | 	.cursor__inner {
218 | 		fill: var(--cursor-fill);
219 | 		stroke: var(--cursor-stroke);
220 | 		stroke-width: var(--cursor-stroke-width);
221 | 	}
222 | }
223 | 
224 | 
225 | /*# sourceMappingURL=/demo1.ea7e4db3.css.map */


--------------------------------------------------------------------------------
/src/css/demo3.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::after,
  3 | *::before {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | :root {
  8 | 	font-size: 15px;
  9 | }
 10 | 
 11 | body {
 12 | 	margin: 0;
 13 | 	--color-text: #ffffff;
 14 |     --color-bg: #0e0e0e;
 15 |     --color-link: #d20d4c;
 16 |     --color-link-hover: #ffffff;
 17 |     --color-content: #4e4e4e;
 18 | 	--font-alt: freight-display-pro, serif;
 19 | 	color: var(--color-text);
 20 | 	background-color: var(--color-bg);
 21 | 	font-family: soleil, sans-serif;
 22 | 	-webkit-font-smoothing: antialiased;
 23 | 	-moz-osx-font-smoothing: grayscale;
 24 | 	/* Cursor styles */
 25 |     --cursor-stroke: #ffffff;
 26 |     --cursor-fill: none;
 27 |     --cursor-stroke-width: 1px;
 28 | }
 29 | 
 30 | a {
 31 | 	text-decoration: none;
 32 | 	color: var(--color-link);
 33 | 	outline: none;
 34 | 	cursor: pointer;
 35 | }
 36 | 
 37 | a:hover,
 38 | a:focus {
 39 | 	color: var(--color-link-hover);
 40 | 	outline: none;
 41 | }
 42 | 
 43 | .message {
 44 | 	background: var(--color-text);
 45 | 	color: var(--color-bg);
 46 | 	padding: 1rem;
 47 | 	text-align: center;
 48 | }
 49 | 
 50 | .frame {
 51 | 	padding: 3rem 5vw;
 52 | 	text-align: center;
 53 | 	position: relative;
 54 | 	z-index: 1000;
 55 | }
 56 | 
 57 | .frame__title {
 58 | 	font-size: 1rem;
 59 | 	margin: 0 0 1rem;
 60 | 	font-weight: inherit;
 61 | }
 62 | 
 63 | .frame__links {
 64 | 	display: block;
 65 | }
 66 | 
 67 | .frame__links > *:not(:last-child),
 68 | .frame__demos > *:not(:last-child) {
 69 |     margin-right: 1rem;
 70 | }
 71 | 
 72 | .frame__demos {
 73 | 	margin: 1rem 0;
 74 | }
 75 | 
 76 | .frame__demos span {
 77 | 	font-weight: bold;
 78 | 	color: var(--color-link);
 79 | }
 80 | 
 81 | .frame__initials {
 82 | 	font-family: var(--font-alt);
 83 | 	font-size: 1.5rem;
 84 | 	pointer-events: none;
 85 | 	line-height: 18px;
 86 | }
 87 | 
 88 | .content {
 89 | 	display: flex;
 90 | 	position: relative;
 91 | 	flex-direction: column;
 92 | 	width: 100vw;
 93 | 	height: calc(100vh - 13rem);
 94 | 	position: relative;
 95 | 	justify-content: flex-start;
 96 | 	align-items: center;
 97 | }
 98 | 
 99 | .content p {
100 | 	max-width: 80vw;
101 | 	font-size: 4.5vw;
102 | 	text-transform: none;
103 | 	color: var(--color-content);
104 | 	font-family: var(--font-alt);
105 | 	font-weight: 300;
106 | 	line-height: 1.4;
107 | }
108 | 
109 | .content p a {
110 | 	font-style: italic;
111 | 	position: relative;
112 | }
113 | 
114 | .content p a::after { 
115 | 	content: ''; 
116 | 	position: absolute; 
117 | 	width: 100%; 
118 | 	height: 1px; 
119 | 	background: currentColor; 
120 | 	bottom: 0.5vw; 
121 | 	left: 0; 
122 | 	opacity: 0; 
123 | 	transform-origin: 0% 50%; 
124 | 	transform: scaleX(0); 
125 | 	transition: all 0.25s ease-out; 
126 | } 
127 |  
128 | .content p a:hover::after, 
129 | .content p a:focus::after { 
130 | 	opacity: 1; 
131 | 	transform: scaleX(1); 
132 | }
133 | 
134 | .menu {
135 | 	display: flex;
136 | 	overflow: hidden;
137 | 	position: relative;
138 | 	width: 100vw;
139 | 	justify-content: center;
140 | }
141 | 
142 | .menu__item {
143 | 	font-size: 6.5vw;
144 | 	margin: 0 2vw;
145 | 	cursor: default;
146 | 	font-family: var(--font-alt);
147 | 	color: var(--color-menu-link);
148 | 	cursor: pointer;
149 | }
150 | 
151 | .menu__item:hover,
152 | .menu__item:focus {
153 | 	color: var(--color-menu-link-hover);
154 | }
155 | 
156 | .cursor {
157 | 	display: none;
158 | }
159 | 
160 | @media screen and (min-width: 53em) {
161 | 	.frame {
162 | 		position: fixed;
163 | 		text-align: left;
164 | 		z-index: 10000;
165 | 		top: 0;
166 | 		left: 0;
167 | 		display: grid;
168 | 		align-content: space-between;
169 | 		width: 100%;
170 | 		max-width: none;
171 | 		height: 100vh;
172 | 		padding: 2.5rem 3rem;
173 | 		pointer-events: none;
174 | 		grid-template-columns: 40% 20% 40%;
175 | 		grid-template-rows: auto auto auto;
176 | 		grid-template-areas: 'title initials links'
177 | 							'... ... ...'
178 | 							'... demos ...';
179 | 	}
180 | 	.frame__title {
181 | 		grid-area: title;
182 | 		margin: 0;
183 | 	}
184 | 	.frame__initials {
185 | 		grid-area: initials;
186 | 		margin: 0;
187 | 		justify-self: center;
188 | 	    align-self: center;
189 | 	}
190 | 	.frame__demos {
191 | 		margin: 0;
192 | 		grid-area: demos;
193 | 		justify-self: center;
194 | 	}
195 | 	.frame__links {
196 | 		grid-area: links;
197 | 		padding: 0;
198 | 		justify-self: end;
199 | 	}
200 | 	.frame__info {
201 | 		grid-area: info;
202 | 		margin: 0;
203 | 		justify-self: end;
204 | 	}
205 | 	.frame a {
206 | 		pointer-events: auto;
207 | 	}
208 | 	.content {
209 | 		height: 100vh;
210 | 		justify-content: center;
211 | 	}
212 | }
213 | 
214 | @media (any-pointer: fine) {
215 | 	.cursor {
216 | 		position: fixed;
217 | 		top: 0;
218 | 		left: 0;
219 | 		display: block;
220 | 		pointer-events: none;
221 | 		opacity: 0;
222 | 	}
223 | 	.cursor__inner {
224 | 		fill: var(--cursor-fill);
225 | 		stroke: var(--cursor-stroke);
226 | 		stroke-width: var(--cursor-stroke-width);
227 | 	}
228 | }
229 | 


--------------------------------------------------------------------------------
/dist/demo3.f904c581.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::after,
  3 | *::before {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | :root {
  8 | 	font-size: 15px;
  9 | }
 10 | 
 11 | body {
 12 | 	margin: 0;
 13 | 	--color-text: #ffffff;
 14 |     --color-bg: #0e0e0e;
 15 |     --color-link: #d20d4c;
 16 |     --color-link-hover: #ffffff;
 17 |     --color-content: #4e4e4e;
 18 | 	--font-alt: freight-display-pro, serif;
 19 | 	color: var(--color-text);
 20 | 	background-color: var(--color-bg);
 21 | 	font-family: soleil, sans-serif;
 22 | 	-webkit-font-smoothing: antialiased;
 23 | 	-moz-osx-font-smoothing: grayscale;
 24 | 	/* Cursor styles */
 25 |     --cursor-stroke: #ffffff;
 26 |     --cursor-fill: none;
 27 |     --cursor-stroke-width: 1px;
 28 | }
 29 | 
 30 | a {
 31 | 	text-decoration: none;
 32 | 	color: var(--color-link);
 33 | 	outline: none;
 34 | 	cursor: pointer;
 35 | }
 36 | 
 37 | a:hover,
 38 | a:focus {
 39 | 	color: var(--color-link-hover);
 40 | 	outline: none;
 41 | }
 42 | 
 43 | .message {
 44 | 	background: var(--color-text);
 45 | 	color: var(--color-bg);
 46 | 	padding: 1rem;
 47 | 	text-align: center;
 48 | }
 49 | 
 50 | .frame {
 51 | 	padding: 3rem 5vw;
 52 | 	text-align: center;
 53 | 	position: relative;
 54 | 	z-index: 1000;
 55 | }
 56 | 
 57 | .frame__title {
 58 | 	font-size: 1rem;
 59 | 	margin: 0 0 1rem;
 60 | 	font-weight: inherit;
 61 | }
 62 | 
 63 | .frame__links {
 64 | 	display: block;
 65 | }
 66 | 
 67 | .frame__links > *:not(:last-child),
 68 | .frame__demos > *:not(:last-child) {
 69 |     margin-right: 1rem;
 70 | }
 71 | 
 72 | .frame__demos {
 73 | 	margin: 1rem 0;
 74 | }
 75 | 
 76 | .frame__demos span {
 77 | 	font-weight: bold;
 78 | 	color: var(--color-link);
 79 | }
 80 | 
 81 | .frame__initials {
 82 | 	font-family: var(--font-alt);
 83 | 	font-size: 1.5rem;
 84 | 	pointer-events: none;
 85 | 	line-height: 18px;
 86 | }
 87 | 
 88 | .content {
 89 | 	display: flex;
 90 | 	position: relative;
 91 | 	flex-direction: column;
 92 | 	width: 100vw;
 93 | 	height: calc(100vh - 13rem);
 94 | 	position: relative;
 95 | 	justify-content: flex-start;
 96 | 	align-items: center;
 97 | }
 98 | 
 99 | .content p {
100 | 	max-width: 80vw;
101 | 	font-size: 4.5vw;
102 | 	text-transform: none;
103 | 	color: var(--color-content);
104 | 	font-family: var(--font-alt);
105 | 	font-weight: 300;
106 | 	line-height: 1.4;
107 | }
108 | 
109 | .content p a {
110 | 	font-style: italic;
111 | 	position: relative;
112 | }
113 | 
114 | .content p a::after { 
115 | 	content: ''; 
116 | 	position: absolute; 
117 | 	width: 100%; 
118 | 	height: 1px; 
119 | 	background: currentColor; 
120 | 	bottom: 0.5vw; 
121 | 	left: 0; 
122 | 	opacity: 0; 
123 | 	transform-origin: 0% 50%; 
124 | 	transform: scaleX(0); 
125 | 	transition: all 0.25s ease-out; 
126 | } 
127 |  
128 | .content p a:hover::after, 
129 | .content p a:focus::after { 
130 | 	opacity: 1; 
131 | 	transform: scaleX(1); 
132 | }
133 | 
134 | .menu {
135 | 	display: flex;
136 | 	overflow: hidden;
137 | 	position: relative;
138 | 	width: 100vw;
139 | 	justify-content: center;
140 | }
141 | 
142 | .menu__item {
143 | 	font-size: 6.5vw;
144 | 	margin: 0 2vw;
145 | 	cursor: default;
146 | 	font-family: var(--font-alt);
147 | 	color: var(--color-menu-link);
148 | 	cursor: pointer;
149 | }
150 | 
151 | .menu__item:hover,
152 | .menu__item:focus {
153 | 	color: var(--color-menu-link-hover);
154 | }
155 | 
156 | .cursor {
157 | 	display: none;
158 | }
159 | 
160 | @media screen and (min-width: 53em) {
161 | 	.frame {
162 | 		position: fixed;
163 | 		text-align: left;
164 | 		z-index: 10000;
165 | 		top: 0;
166 | 		left: 0;
167 | 		display: grid;
168 | 		align-content: space-between;
169 | 		width: 100%;
170 | 		max-width: none;
171 | 		height: 100vh;
172 | 		padding: 2.5rem 3rem;
173 | 		pointer-events: none;
174 | 		grid-template-columns: 40% 20% 40%;
175 | 		grid-template-rows: auto auto auto;
176 | 		grid-template-areas: 'title initials links'
177 | 							'... ... ...'
178 | 							'... demos ...';
179 | 	}
180 | 	.frame__title {
181 | 		grid-area: title;
182 | 		margin: 0;
183 | 	}
184 | 	.frame__initials {
185 | 		grid-area: initials;
186 | 		margin: 0;
187 | 		justify-self: center;
188 | 	    align-self: center;
189 | 	}
190 | 	.frame__demos {
191 | 		margin: 0;
192 | 		grid-area: demos;
193 | 		justify-self: center;
194 | 	}
195 | 	.frame__links {
196 | 		grid-area: links;
197 | 		padding: 0;
198 | 		justify-self: end;
199 | 	}
200 | 	.frame__info {
201 | 		grid-area: info;
202 | 		margin: 0;
203 | 		justify-self: end;
204 | 	}
205 | 	.frame a {
206 | 		pointer-events: auto;
207 | 	}
208 | 	.content {
209 | 		height: 100vh;
210 | 		justify-content: center;
211 | 	}
212 | }
213 | 
214 | @media (any-pointer: fine) {
215 | 	.cursor {
216 | 		position: fixed;
217 | 		top: 0;
218 | 		left: 0;
219 | 		display: block;
220 | 		pointer-events: none;
221 | 		opacity: 0;
222 | 	}
223 | 	.cursor__inner {
224 | 		fill: var(--cursor-fill);
225 | 		stroke: var(--cursor-stroke);
226 | 		stroke-width: var(--cursor-stroke-width);
227 | 	}
228 | }
229 | 
230 | 
231 | /*# sourceMappingURL=/demo3.f904c581.css.map */


--------------------------------------------------------------------------------
/src/css/demo2.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::after,
  3 | *::before {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | :root {
  8 | 	font-size: 15px;
  9 | }
 10 | 
 11 | body {
 12 | 	margin: 0;
 13 | 	--color-link: #000;
 14 | 	--color-link-hover: #040203;
 15 | 	--color-content: #040203;
 16 | 	--color-text: #040100;
 17 | 	--color-bg: #8e806b;
 18 | 	--font-alt: messapiabold, sans-serif;
 19 | 	--color-menu-link: #e4d6b6;
 20 | 	--color-menu-link-hover: #382d11;
 21 | 	background-image: url(../img/1.jpg);
 22 | 	background-repeat: no-repeat;
 23 | 	background-position: 50% 50%;
 24 | 	background-size: auto 60vh;
 25 | 	color: var(--color-text);
 26 | 	background-color: var(--color-bg);
 27 | 	font-family: soleil, sans-serif;
 28 | 	-webkit-font-smoothing: antialiased;
 29 | 	-moz-osx-font-smoothing: grayscale;
 30 | 	/* Cursor styles */
 31 | 	--cursor-fill: none;
 32 | 	--cursor-stroke: #60381e;
 33 | 	--cursor-stroke-width: 1px;
 34 | }
 35 | 
 36 | a {
 37 | 	text-decoration: none;
 38 | 	color: var(--color-link);
 39 | 	outline: none;
 40 | 	cursor: pointer;
 41 | }
 42 | 
 43 | a:hover,
 44 | a:focus {
 45 | 	color: var(--color-link-hover);
 46 | 	outline: none;
 47 | }
 48 | 
 49 | .frame {
 50 | 	padding: 3rem 5vw;
 51 | 	text-align: center;
 52 | 	position: relative;
 53 | 	z-index: 1000;
 54 | }
 55 | 
 56 | .frame__title {
 57 | 	font-size: 1rem;
 58 | 	margin: 0 0 1rem;
 59 | 	font-weight: inherit;
 60 | }
 61 | 
 62 | .frame__links {
 63 | 	display: block;
 64 | }
 65 | 
 66 | .frame__links > *:not(:last-child),
 67 | .frame__demos > *:not(:last-child) {
 68 |     margin-right: 1rem;
 69 | }
 70 | 
 71 | .frame__demos {
 72 | 	margin: 1rem 0;
 73 | }
 74 | 
 75 | .frame__demos span {
 76 | 	font-weight: bold;
 77 | 	color: var(--color-link);
 78 | }
 79 | 
 80 | .frame__initials {
 81 | 	font-family: var(--font-alt);
 82 | 	font-size: 1.5rem;
 83 | 	pointer-events: none;
 84 | 	line-height: 18px;
 85 | }
 86 | 
 87 | .content {
 88 | 	display: flex;
 89 | 	position: relative;
 90 | 	flex-direction: column;
 91 | 	width: 100vw;
 92 | 	height: calc(100vh - 13rem);
 93 | 	position: relative;
 94 | 	justify-content: flex-start;
 95 | 	align-items: center;
 96 | }
 97 | 
 98 | .content p {
 99 | 	max-width: 80vw;
100 | 	font-size: 4vw;
101 | 	text-transform: uppercase;
102 | 	color: var(--color-content);
103 | 	font-family: var(--font-alt);
104 | 	font-weight: 300;
105 | 	line-height: 1.4;
106 | }
107 | 
108 | .content p a {
109 | 	font-weight: 600;
110 | 	font-style: italic;
111 | 	position: relative;
112 | }
113 | 
114 | .content p a::after { 
115 | 	content: ''; 
116 | 	position: absolute; 
117 | 	width: 100%; 
118 | 	height: 1px; 
119 | 	background: currentColor; 
120 | 	bottom: 0.5vw; 
121 | 	left: 0; 
122 | 	opacity: 0; 
123 | 	transform-origin: 0% 50%; 
124 | 	transform: scaleX(0); 
125 | 	transition: all 0.25s ease-out; 
126 | } 
127 |  
128 | .content p a:hover::after, 
129 | .content p a:focus::after { 
130 | 	opacity: 1; 
131 | 	transform: scaleX(1); 
132 | }
133 | 
134 | .menu {
135 | 	display: flex;
136 | 	overflow: hidden;
137 | 	position: relative;
138 | 	width: 100vw;
139 | 	justify-content: center;
140 | }
141 | 
142 | .menu__item {
143 | 	font-size: 6.5vw;
144 | 	margin: 0 2vw;
145 | 	cursor: default;
146 | 	font-family: var(--font-alt);
147 | 	color: var(--color-menu-link);
148 | 	cursor: pointer;
149 | }
150 | 
151 | .menu__item:hover,
152 | .menu__item:focus {
153 | 	color: var(--color-menu-link-hover);
154 | }
155 | 
156 | .cursor {
157 | 	display: none;
158 | }
159 | 
160 | @media screen and (min-width: 53em) {
161 | 	.frame {
162 | 		position: fixed;
163 | 		text-align: left;
164 | 		z-index: 10000;
165 | 		top: 0;
166 | 		left: 0;
167 | 		display: grid;
168 | 		align-content: space-between;
169 | 		width: 100%;
170 | 		max-width: none;
171 | 		height: 100vh;
172 | 		padding: 2.5rem 3rem;
173 | 		pointer-events: none;
174 | 		grid-template-columns: 40% 20% 40%;
175 | 		grid-template-rows: auto auto auto;
176 | 		grid-template-areas: 'title initials links'
177 | 							'... ... ...'
178 | 							'... demos ...';
179 | 	}
180 | 	.frame__title {
181 | 		grid-area: title;
182 | 		margin: 0;
183 | 	}
184 | 	.frame__initials {
185 | 		grid-area: initials;
186 | 		margin: 0;
187 | 		justify-self: center;
188 | 	    align-self: center;
189 | 	}
190 | 	.frame__demos {
191 | 		margin: 0;
192 | 		grid-area: demos;
193 | 		justify-self: center;
194 | 	}
195 | 	.frame__links {
196 | 		grid-area: links;
197 | 		padding: 0;
198 | 		justify-self: end;
199 | 	}
200 | 	.frame__info {
201 | 		grid-area: info;
202 | 		margin: 0;
203 | 		justify-self: end;
204 | 	}
205 | 	.frame a {
206 | 		pointer-events: auto;
207 | 	}
208 | 	.content {
209 | 		height: 100vh;
210 | 		justify-content: center;
211 | 	}
212 | }
213 | 
214 | @media (any-pointer: fine) {
215 | 	.cursor {
216 | 		position: fixed;
217 | 		top: 0;
218 | 		left: 0;
219 | 		display: block;
220 | 		pointer-events: none;
221 | 		opacity: 0;
222 | 	}
223 | 	.cursor__inner {
224 | 		fill: var(--cursor-fill);
225 | 		stroke: var(--cursor-stroke);
226 | 		stroke-width: var(--cursor-stroke-width);
227 | 	}
228 | }
229 | 


--------------------------------------------------------------------------------
/dist/demo2.06b37b5f.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::after,
  3 | *::before {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | :root {
  8 | 	font-size: 15px;
  9 | }
 10 | 
 11 | body {
 12 | 	margin: 0;
 13 | 	--color-link: #000;
 14 | 	--color-link-hover: #040203;
 15 | 	--color-content: #040203;
 16 | 	--color-text: #040100;
 17 | 	--color-bg: #8e806b;
 18 | 	--font-alt: messapiabold, sans-serif;
 19 | 	--color-menu-link: #e4d6b6;
 20 | 	--color-menu-link-hover: #382d11;
 21 | 	background-image: url(/1.dc197a9a.jpg);
 22 | 	background-repeat: no-repeat;
 23 | 	background-position: 50% 50%;
 24 | 	background-size: auto 60vh;
 25 | 	color: var(--color-text);
 26 | 	background-color: var(--color-bg);
 27 | 	font-family: soleil, sans-serif;
 28 | 	-webkit-font-smoothing: antialiased;
 29 | 	-moz-osx-font-smoothing: grayscale;
 30 | 	/* Cursor styles */
 31 | 	--cursor-fill: none;
 32 | 	--cursor-stroke: #60381e;
 33 | 	--cursor-stroke-width: 1px;
 34 | }
 35 | 
 36 | a {
 37 | 	text-decoration: none;
 38 | 	color: var(--color-link);
 39 | 	outline: none;
 40 | 	cursor: pointer;
 41 | }
 42 | 
 43 | a:hover,
 44 | a:focus {
 45 | 	color: var(--color-link-hover);
 46 | 	outline: none;
 47 | }
 48 | 
 49 | .frame {
 50 | 	padding: 3rem 5vw;
 51 | 	text-align: center;
 52 | 	position: relative;
 53 | 	z-index: 1000;
 54 | }
 55 | 
 56 | .frame__title {
 57 | 	font-size: 1rem;
 58 | 	margin: 0 0 1rem;
 59 | 	font-weight: inherit;
 60 | }
 61 | 
 62 | .frame__links {
 63 | 	display: block;
 64 | }
 65 | 
 66 | .frame__links > *:not(:last-child),
 67 | .frame__demos > *:not(:last-child) {
 68 |     margin-right: 1rem;
 69 | }
 70 | 
 71 | .frame__demos {
 72 | 	margin: 1rem 0;
 73 | }
 74 | 
 75 | .frame__demos span {
 76 | 	font-weight: bold;
 77 | 	color: var(--color-link);
 78 | }
 79 | 
 80 | .frame__initials {
 81 | 	font-family: var(--font-alt);
 82 | 	font-size: 1.5rem;
 83 | 	pointer-events: none;
 84 | 	line-height: 18px;
 85 | }
 86 | 
 87 | .content {
 88 | 	display: flex;
 89 | 	position: relative;
 90 | 	flex-direction: column;
 91 | 	width: 100vw;
 92 | 	height: calc(100vh - 13rem);
 93 | 	position: relative;
 94 | 	justify-content: flex-start;
 95 | 	align-items: center;
 96 | }
 97 | 
 98 | .content p {
 99 | 	max-width: 80vw;
100 | 	font-size: 4vw;
101 | 	text-transform: uppercase;
102 | 	color: var(--color-content);
103 | 	font-family: var(--font-alt);
104 | 	font-weight: 300;
105 | 	line-height: 1.4;
106 | }
107 | 
108 | .content p a {
109 | 	font-weight: 600;
110 | 	font-style: italic;
111 | 	position: relative;
112 | }
113 | 
114 | .content p a::after { 
115 | 	content: ''; 
116 | 	position: absolute; 
117 | 	width: 100%; 
118 | 	height: 1px; 
119 | 	background: currentColor; 
120 | 	bottom: 0.5vw; 
121 | 	left: 0; 
122 | 	opacity: 0; 
123 | 	transform-origin: 0% 50%; 
124 | 	transform: scaleX(0); 
125 | 	transition: all 0.25s ease-out; 
126 | } 
127 |  
128 | .content p a:hover::after, 
129 | .content p a:focus::after { 
130 | 	opacity: 1; 
131 | 	transform: scaleX(1); 
132 | }
133 | 
134 | .menu {
135 | 	display: flex;
136 | 	overflow: hidden;
137 | 	position: relative;
138 | 	width: 100vw;
139 | 	justify-content: center;
140 | }
141 | 
142 | .menu__item {
143 | 	font-size: 6.5vw;
144 | 	margin: 0 2vw;
145 | 	cursor: default;
146 | 	font-family: var(--font-alt);
147 | 	color: var(--color-menu-link);
148 | 	cursor: pointer;
149 | }
150 | 
151 | .menu__item:hover,
152 | .menu__item:focus {
153 | 	color: var(--color-menu-link-hover);
154 | }
155 | 
156 | .cursor {
157 | 	display: none;
158 | }
159 | 
160 | @media screen and (min-width: 53em) {
161 | 	.frame {
162 | 		position: fixed;
163 | 		text-align: left;
164 | 		z-index: 10000;
165 | 		top: 0;
166 | 		left: 0;
167 | 		display: grid;
168 | 		align-content: space-between;
169 | 		width: 100%;
170 | 		max-width: none;
171 | 		height: 100vh;
172 | 		padding: 2.5rem 3rem;
173 | 		pointer-events: none;
174 | 		grid-template-columns: 40% 20% 40%;
175 | 		grid-template-rows: auto auto auto;
176 | 		grid-template-areas: 'title initials links'
177 | 							'... ... ...'
178 | 							'... demos ...';
179 | 	}
180 | 	.frame__title {
181 | 		grid-area: title;
182 | 		margin: 0;
183 | 	}
184 | 	.frame__initials {
185 | 		grid-area: initials;
186 | 		margin: 0;
187 | 		justify-self: center;
188 | 	    align-self: center;
189 | 	}
190 | 	.frame__demos {
191 | 		margin: 0;
192 | 		grid-area: demos;
193 | 		justify-self: center;
194 | 	}
195 | 	.frame__links {
196 | 		grid-area: links;
197 | 		padding: 0;
198 | 		justify-self: end;
199 | 	}
200 | 	.frame__info {
201 | 		grid-area: info;
202 | 		margin: 0;
203 | 		justify-self: end;
204 | 	}
205 | 	.frame a {
206 | 		pointer-events: auto;
207 | 	}
208 | 	.content {
209 | 		height: 100vh;
210 | 		justify-content: center;
211 | 	}
212 | }
213 | 
214 | @media (any-pointer: fine) {
215 | 	.cursor {
216 | 		position: fixed;
217 | 		top: 0;
218 | 		left: 0;
219 | 		display: block;
220 | 		pointer-events: none;
221 | 		opacity: 0;
222 | 	}
223 | 	.cursor__inner {
224 | 		fill: var(--cursor-fill);
225 | 		stroke: var(--cursor-stroke);
226 | 		stroke-width: var(--cursor-stroke-width);
227 | 	}
228 | }
229 | 
230 | 
231 | /*# sourceMappingURL=/demo2.06b37b5f.css.map */


--------------------------------------------------------------------------------
/dist/demo1.ea7e4db3.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["css/demo1.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"demo1.ea7e4db3.css","sourceRoot":"../src","sourcesContent":["*,\n*::after,\n*::before {\n\tbox-sizing: border-box;\n}\n\n:root {\n\tfont-size: 15px;\n}\n\nbody {\n\tmargin: 0;\n\t--color-text: #c3654e;\n\t--color-bg: #f2e9e0;\n\t--color-link: #000;\n\t--color-link-hover: #040203;\n\t--color-content: #040203;\n\t--font-alt: freight-display-pro, serif;\n\tcolor: var(--color-text);\n\tbackground-color: var(--color-bg);\n\tfont-family: soleil, sans-serif;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\t/* Cursor styles */\n\t--cursor-stroke: #c3654e;\n\t--cursor-fill: none;\n\t--cursor-stroke-width: 1px;\n}\n\na {\n\ttext-decoration: none;\n\tcolor: var(--color-link);\n\toutline: none;\n\tcursor: pointer;\n}\n\na:hover,\na:focus {\n\tcolor: var(--color-link-hover);\n\toutline: none;\n}\n\n.frame {\n\tpadding: 3rem 5vw;\n\ttext-align: center;\n\tposition: relative;\n\tz-index: 1000;\n}\n\n.frame__title {\n\tfont-size: 1rem;\n\tmargin: 0 0 1rem;\n\tfont-weight: inherit;\n}\n\n.frame__links {\n\tdisplay: block;\n}\n\n.frame__links > *:not(:last-child),\n.frame__demos > *:not(:last-child) {\n    margin-right: 1rem;\n}\n\n.frame__demos {\n\tmargin: 1rem 0;\n}\n\n.frame__demos span {\n\tfont-weight: bold;\n\tcolor: var(--color-link);\n}\n\n.frame__initials {\n\tfont-family: var(--font-alt);\n\tfont-size: 1.5rem;\n\tpointer-events: none;\n\tline-height: 18px;\n}\n\n.content {\n\tdisplay: flex;\n\tposition: relative;\n\tflex-direction: column;\n\twidth: 100vw;\n\theight: calc(100vh - 13rem);\n\tposition: relative;\n\tjustify-content: flex-start;\n\talign-items: center;\n}\n\n.content p {\n\tmax-width: 80vw;\n\tfont-size: 4vw;\n\ttext-transform: uppercase;\n\tcolor: var(--color-content);\n\tfont-family: var(--font-alt);\n\tfont-weight: 300;\n\tline-height: 1.4;\n}\n\n.content p a {\n\tfont-weight: 600;\n\tfont-style: italic;\n\tposition: relative;\n}\n\n.content p a::after { \n\tcontent: ''; \n\tposition: absolute; \n\twidth: 100%; \n\theight: 1px; \n\tbackground: currentColor; \n\tbottom: 0.5vw; \n\tleft: 0; \n\topacity: 0; \n\ttransform-origin: 0% 50%; \n\ttransform: scaleX(0); \n\ttransition: all 0.25s ease-out; \n} \n \n.content p a:hover::after, \n.content p a:focus::after { \n\topacity: 1; \n\ttransform: scaleX(1); \n}\n\n.menu {\n\tdisplay: flex;\n\toverflow: hidden;\n\tposition: relative;\n\twidth: 100vw;\n\tjustify-content: center;\n}\n\n.menu__item {\n\tfont-size: 6.5vw;\n\tmargin: 0 2vw;\n\tcursor: default;\n\tfont-family: var(--font-alt);\n\tcolor: var(--color-menu-link);\n\tcursor: pointer;\n}\n\n.menu__item:hover,\n.menu__item:focus {\n\tcolor: var(--color-menu-link-hover);\n}\n\n.cursor {\n\tdisplay: none;\n}\n\n@media screen and (min-width: 53em) {\n\t.frame {\n\t\tposition: fixed;\n\t\ttext-align: left;\n\t\tz-index: 10000;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: grid;\n\t\talign-content: space-between;\n\t\twidth: 100%;\n\t\tmax-width: none;\n\t\theight: 100vh;\n\t\tpadding: 2.5rem 3rem;\n\t\tpointer-events: none;\n\t\tgrid-template-columns: 40% 20% 40%;\n\t\tgrid-template-rows: auto auto auto;\n\t\tgrid-template-areas: 'title initials links'\n\t\t\t\t\t\t\t'... ... ...'\n\t\t\t\t\t\t\t'... demos ...';\n\t}\n\t.frame__title {\n\t\tgrid-area: title;\n\t\tmargin: 0;\n\t}\n\t.frame__initials {\n\t\tgrid-area: initials;\n\t\tmargin: 0;\n\t\tjustify-self: center;\n\t    align-self: center;\n\t}\n\t.frame__demos {\n\t\tmargin: 0;\n\t\tgrid-area: demos;\n\t\tjustify-self: center;\n\t}\n\t.frame__links {\n\t\tgrid-area: links;\n\t\tpadding: 0;\n\t\tjustify-self: end;\n\t}\n\t.frame__info {\n\t\tgrid-area: info;\n\t\tmargin: 0;\n\t\tjustify-self: end;\n\t}\n\t.frame a {\n\t\tpointer-events: auto;\n\t}\n\t.content {\n\t\theight: 100vh;\n\t\tjustify-content: center;\n\t}\n}\n\n@media (any-pointer: fine) {\n\t.cursor {\n\t\tposition: fixed;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: block;\n\t\tpointer-events: none;\n\t\topacity: 0;\n\t}\n\t.cursor__inner {\n\t\tfill: var(--cursor-fill);\n\t\tstroke: var(--cursor-stroke);\n\t\tstroke-width: var(--cursor-stroke-width);\n\t}\n}\n"]}


--------------------------------------------------------------------------------
/src/css/demo4.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::after,
  3 | *::before {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | :root {
  8 | 	font-size: 15px;
  9 | }
 10 | 
 11 | body {
 12 | 	margin: 0;
 13 | 	--color-text: #d03428;
 14 |     --color-bg: #000;
 15 |     --font-alt: messapiabold, sans-serif;
 16 |     --color-link: #e4d6b6;
 17 |     --color-link-hover: #d03428;
 18 |     --color-menu-link: #e4d6b6;
 19 |     --color-menu-link-hover: #d03428;
 20 | 	--color-content: #040203;
 21 | 	color: var(--color-text);
 22 | 	background-color: var(--color-bg);
 23 | 	font-family: soleil, sans-serif;
 24 | 	-webkit-font-smoothing: antialiased;
 25 | 	-moz-osx-font-smoothing: grayscale;
 26 | 	background-image: url(../img/2.jpg);
 27 |     background-repeat: no-repeat;
 28 |     background-position: 50% 50%;
 29 |     background-size: auto 60vh;
 30 | 	/* Cursor styles */
 31 |     --cursor-stroke: #e4d6b6;
 32 |     --cursor-fill: none;
 33 |     --cursor-stroke-width: 1px;  
 34 | }
 35 | 
 36 | a {
 37 | 	text-decoration: none;
 38 | 	color: var(--color-link);
 39 | 	outline: none;
 40 | 	cursor: pointer;
 41 | }
 42 | 
 43 | a:hover,
 44 | a:focus {
 45 | 	color: var(--color-link-hover);
 46 | 	outline: none;
 47 | }
 48 | 
 49 | .message {
 50 | 	background: var(--color-text);
 51 | 	color: var(--color-bg);
 52 | 	padding: 1rem;
 53 | 	text-align: center;
 54 | }
 55 | 
 56 | .frame {
 57 | 	padding: 3rem 5vw;
 58 | 	text-align: center;
 59 | 	position: relative;
 60 | 	z-index: 1000;
 61 | }
 62 | 
 63 | .frame__title {
 64 | 	font-size: 1rem;
 65 | 	margin: 0 0 1rem;
 66 | 	font-weight: inherit;
 67 | }
 68 | 
 69 | .frame__links {
 70 | 	display: block;
 71 | }
 72 | 
 73 | .frame__links > *:not(:last-child),
 74 | .frame__demos > *:not(:last-child) {
 75 |     margin-right: 1rem;
 76 | }
 77 | 
 78 | .frame__demos {
 79 | 	margin: 1rem 0;
 80 | }
 81 | 
 82 | .frame__demos span {
 83 | 	font-weight: bold;
 84 | 	color: var(--color-link);
 85 | }
 86 | 
 87 | .frame__initials {
 88 | 	font-family: var(--font-alt);
 89 | 	font-size: 1.5rem;
 90 | 	pointer-events: none;
 91 | 	line-height: 18px;
 92 | }
 93 | 
 94 | .content {
 95 | 	display: flex;
 96 | 	position: relative;
 97 | 	flex-direction: column;
 98 | 	width: 100vw;
 99 | 	height: calc(100vh - 13rem);
100 | 	position: relative;
101 | 	justify-content: flex-start;
102 | 	align-items: center;
103 | }
104 | 
105 | .content p {
106 | 	max-width: 80vw;
107 | 	font-size: 4vw;
108 | 	text-transform: uppercase;
109 | 	color: var(--color-content);
110 | 	font-family: var(--font-alt);
111 | 	font-weight: 300;
112 | 	line-height: 1.4;
113 | }
114 | 
115 | .content p a {
116 | 	font-weight: 600;
117 | 	font-style: italic;
118 | 	position: relative;
119 | }
120 | 
121 | .content p a::after { 
122 | 	content: ''; 
123 | 	position: absolute; 
124 | 	width: 100%; 
125 | 	height: 1px; 
126 | 	background: currentColor; 
127 | 	bottom: 0.5vw; 
128 | 	left: 0; 
129 | 	opacity: 0; 
130 | 	transform-origin: 0% 50%; 
131 | 	transform: scaleX(0); 
132 | 	transition: all 0.25s ease-out; 
133 | } 
134 |  
135 | .content p a:hover::after, 
136 | .content p a:focus::after { 
137 | 	opacity: 1; 
138 | 	transform: scaleX(1); 
139 | }
140 | 
141 | .menu {
142 | 	display: flex;
143 | 	overflow: hidden;
144 | 	position: relative;
145 | 	width: 100vw;
146 | 	justify-content: center;
147 | }
148 | 
149 | .menu__item {
150 | 	font-size: 6.5vw;
151 | 	margin: 0 2vw;
152 | 	cursor: default;
153 | 	font-family: var(--font-alt);
154 | 	color: var(--color-menu-link);
155 | 	cursor: pointer;
156 | }
157 | 
158 | .menu__item:hover,
159 | .menu__item:focus {
160 | 	color: var(--color-menu-link-hover);
161 | }
162 | 
163 | .cursor {
164 | 	display: none;
165 | }
166 | 
167 | @media screen and (min-width: 53em) {
168 | 	.frame {
169 | 		position: fixed;
170 | 		text-align: left;
171 | 		z-index: 10000;
172 | 		top: 0;
173 | 		left: 0;
174 | 		display: grid;
175 | 		align-content: space-between;
176 | 		width: 100%;
177 | 		max-width: none;
178 | 		height: 100vh;
179 | 		padding: 2.5rem 3rem;
180 | 		pointer-events: none;
181 | 		grid-template-columns: 40% 20% 40%;
182 | 		grid-template-rows: auto auto auto;
183 | 		grid-template-areas: 'title initials links'
184 | 							'... ... ...'
185 | 							'... demos ...';
186 | 	}
187 | 	.frame__title {
188 | 		grid-area: title;
189 | 		margin: 0;
190 | 	}
191 | 	.frame__initials {
192 | 		grid-area: initials;
193 | 		margin: 0;
194 | 		justify-self: center;
195 | 	    align-self: center;
196 | 	}
197 | 	.frame__demos {
198 | 		margin: 0;
199 | 		grid-area: demos;
200 | 		justify-self: center;
201 | 	}
202 | 	.frame__links {
203 | 		grid-area: links;
204 | 		padding: 0;
205 | 		justify-self: end;
206 | 	}
207 | 	.frame__info {
208 | 		grid-area: info;
209 | 		margin: 0;
210 | 		justify-self: end;
211 | 	}
212 | 	.frame a {
213 | 		pointer-events: auto;
214 | 	}
215 | 	.content {
216 | 		height: 100vh;
217 | 		justify-content: center;
218 | 	}
219 | }
220 | 
221 | @media (any-pointer: fine) {
222 | 	.cursor {
223 | 		position: fixed;
224 | 		top: 0;
225 | 		left: 0;
226 | 		display: block;
227 | 		pointer-events: none;
228 | 		opacity: 0;
229 | 	}
230 | 	.cursor__inner {
231 | 		fill: var(--cursor-fill);
232 | 		stroke: var(--cursor-stroke);
233 | 		stroke-width: var(--cursor-stroke-width);
234 | 	}
235 | }
236 | 


--------------------------------------------------------------------------------
/dist/demo4.7fb5a017.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::after,
  3 | *::before {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | :root {
  8 | 	font-size: 15px;
  9 | }
 10 | 
 11 | body {
 12 | 	margin: 0;
 13 | 	--color-text: #d03428;
 14 |     --color-bg: #000;
 15 |     --font-alt: messapiabold, sans-serif;
 16 |     --color-link: #e4d6b6;
 17 |     --color-link-hover: #d03428;
 18 |     --color-menu-link: #e4d6b6;
 19 |     --color-menu-link-hover: #d03428;
 20 | 	--color-content: #040203;
 21 | 	color: var(--color-text);
 22 | 	background-color: var(--color-bg);
 23 | 	font-family: soleil, sans-serif;
 24 | 	-webkit-font-smoothing: antialiased;
 25 | 	-moz-osx-font-smoothing: grayscale;
 26 | 	background-image: url(/2.3ca6bb44.jpg);
 27 |     background-repeat: no-repeat;
 28 |     background-position: 50% 50%;
 29 |     background-size: auto 60vh;
 30 | 	/* Cursor styles */
 31 |     --cursor-stroke: #e4d6b6;
 32 |     --cursor-fill: none;
 33 |     --cursor-stroke-width: 1px;  
 34 | }
 35 | 
 36 | a {
 37 | 	text-decoration: none;
 38 | 	color: var(--color-link);
 39 | 	outline: none;
 40 | 	cursor: pointer;
 41 | }
 42 | 
 43 | a:hover,
 44 | a:focus {
 45 | 	color: var(--color-link-hover);
 46 | 	outline: none;
 47 | }
 48 | 
 49 | .message {
 50 | 	background: var(--color-text);
 51 | 	color: var(--color-bg);
 52 | 	padding: 1rem;
 53 | 	text-align: center;
 54 | }
 55 | 
 56 | .frame {
 57 | 	padding: 3rem 5vw;
 58 | 	text-align: center;
 59 | 	position: relative;
 60 | 	z-index: 1000;
 61 | }
 62 | 
 63 | .frame__title {
 64 | 	font-size: 1rem;
 65 | 	margin: 0 0 1rem;
 66 | 	font-weight: inherit;
 67 | }
 68 | 
 69 | .frame__links {
 70 | 	display: block;
 71 | }
 72 | 
 73 | .frame__links > *:not(:last-child),
 74 | .frame__demos > *:not(:last-child) {
 75 |     margin-right: 1rem;
 76 | }
 77 | 
 78 | .frame__demos {
 79 | 	margin: 1rem 0;
 80 | }
 81 | 
 82 | .frame__demos span {
 83 | 	font-weight: bold;
 84 | 	color: var(--color-link);
 85 | }
 86 | 
 87 | .frame__initials {
 88 | 	font-family: var(--font-alt);
 89 | 	font-size: 1.5rem;
 90 | 	pointer-events: none;
 91 | 	line-height: 18px;
 92 | }
 93 | 
 94 | .content {
 95 | 	display: flex;
 96 | 	position: relative;
 97 | 	flex-direction: column;
 98 | 	width: 100vw;
 99 | 	height: calc(100vh - 13rem);
100 | 	position: relative;
101 | 	justify-content: flex-start;
102 | 	align-items: center;
103 | }
104 | 
105 | .content p {
106 | 	max-width: 80vw;
107 | 	font-size: 4vw;
108 | 	text-transform: uppercase;
109 | 	color: var(--color-content);
110 | 	font-family: var(--font-alt);
111 | 	font-weight: 300;
112 | 	line-height: 1.4;
113 | }
114 | 
115 | .content p a {
116 | 	font-weight: 600;
117 | 	font-style: italic;
118 | 	position: relative;
119 | }
120 | 
121 | .content p a::after { 
122 | 	content: ''; 
123 | 	position: absolute; 
124 | 	width: 100%; 
125 | 	height: 1px; 
126 | 	background: currentColor; 
127 | 	bottom: 0.5vw; 
128 | 	left: 0; 
129 | 	opacity: 0; 
130 | 	transform-origin: 0% 50%; 
131 | 	transform: scaleX(0); 
132 | 	transition: all 0.25s ease-out; 
133 | } 
134 |  
135 | .content p a:hover::after, 
136 | .content p a:focus::after { 
137 | 	opacity: 1; 
138 | 	transform: scaleX(1); 
139 | }
140 | 
141 | .menu {
142 | 	display: flex;
143 | 	overflow: hidden;
144 | 	position: relative;
145 | 	width: 100vw;
146 | 	justify-content: center;
147 | }
148 | 
149 | .menu__item {
150 | 	font-size: 6.5vw;
151 | 	margin: 0 2vw;
152 | 	cursor: default;
153 | 	font-family: var(--font-alt);
154 | 	color: var(--color-menu-link);
155 | 	cursor: pointer;
156 | }
157 | 
158 | .menu__item:hover,
159 | .menu__item:focus {
160 | 	color: var(--color-menu-link-hover);
161 | }
162 | 
163 | .cursor {
164 | 	display: none;
165 | }
166 | 
167 | @media screen and (min-width: 53em) {
168 | 	.frame {
169 | 		position: fixed;
170 | 		text-align: left;
171 | 		z-index: 10000;
172 | 		top: 0;
173 | 		left: 0;
174 | 		display: grid;
175 | 		align-content: space-between;
176 | 		width: 100%;
177 | 		max-width: none;
178 | 		height: 100vh;
179 | 		padding: 2.5rem 3rem;
180 | 		pointer-events: none;
181 | 		grid-template-columns: 40% 20% 40%;
182 | 		grid-template-rows: auto auto auto;
183 | 		grid-template-areas: 'title initials links'
184 | 							'... ... ...'
185 | 							'... demos ...';
186 | 	}
187 | 	.frame__title {
188 | 		grid-area: title;
189 | 		margin: 0;
190 | 	}
191 | 	.frame__initials {
192 | 		grid-area: initials;
193 | 		margin: 0;
194 | 		justify-self: center;
195 | 	    align-self: center;
196 | 	}
197 | 	.frame__demos {
198 | 		margin: 0;
199 | 		grid-area: demos;
200 | 		justify-self: center;
201 | 	}
202 | 	.frame__links {
203 | 		grid-area: links;
204 | 		padding: 0;
205 | 		justify-self: end;
206 | 	}
207 | 	.frame__info {
208 | 		grid-area: info;
209 | 		margin: 0;
210 | 		justify-self: end;
211 | 	}
212 | 	.frame a {
213 | 		pointer-events: auto;
214 | 	}
215 | 	.content {
216 | 		height: 100vh;
217 | 		justify-content: center;
218 | 	}
219 | }
220 | 
221 | @media (any-pointer: fine) {
222 | 	.cursor {
223 | 		position: fixed;
224 | 		top: 0;
225 | 		left: 0;
226 | 		display: block;
227 | 		pointer-events: none;
228 | 		opacity: 0;
229 | 	}
230 | 	.cursor__inner {
231 | 		fill: var(--cursor-fill);
232 | 		stroke: var(--cursor-stroke);
233 | 		stroke-width: var(--cursor-stroke-width);
234 | 	}
235 | }
236 | 
237 | 
238 | /*# sourceMappingURL=/demo4.7fb5a017.css.map */


--------------------------------------------------------------------------------
/dist/demo3.f904c581.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["css/demo3.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"demo3.f904c581.css","sourceRoot":"../src","sourcesContent":["*,\n*::after,\n*::before {\n\tbox-sizing: border-box;\n}\n\n:root {\n\tfont-size: 15px;\n}\n\nbody {\n\tmargin: 0;\n\t--color-text: #ffffff;\n    --color-bg: #0e0e0e;\n    --color-link: #d20d4c;\n    --color-link-hover: #ffffff;\n    --color-content: #4e4e4e;\n\t--font-alt: freight-display-pro, serif;\n\tcolor: var(--color-text);\n\tbackground-color: var(--color-bg);\n\tfont-family: soleil, sans-serif;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\t/* Cursor styles */\n    --cursor-stroke: #ffffff;\n    --cursor-fill: none;\n    --cursor-stroke-width: 1px;\n}\n\na {\n\ttext-decoration: none;\n\tcolor: var(--color-link);\n\toutline: none;\n\tcursor: pointer;\n}\n\na:hover,\na:focus {\n\tcolor: var(--color-link-hover);\n\toutline: none;\n}\n\n.message {\n\tbackground: var(--color-text);\n\tcolor: var(--color-bg);\n\tpadding: 1rem;\n\ttext-align: center;\n}\n\n.frame {\n\tpadding: 3rem 5vw;\n\ttext-align: center;\n\tposition: relative;\n\tz-index: 1000;\n}\n\n.frame__title {\n\tfont-size: 1rem;\n\tmargin: 0 0 1rem;\n\tfont-weight: inherit;\n}\n\n.frame__links {\n\tdisplay: block;\n}\n\n.frame__links > *:not(:last-child),\n.frame__demos > *:not(:last-child) {\n    margin-right: 1rem;\n}\n\n.frame__demos {\n\tmargin: 1rem 0;\n}\n\n.frame__demos span {\n\tfont-weight: bold;\n\tcolor: var(--color-link);\n}\n\n.frame__initials {\n\tfont-family: var(--font-alt);\n\tfont-size: 1.5rem;\n\tpointer-events: none;\n\tline-height: 18px;\n}\n\n.content {\n\tdisplay: flex;\n\tposition: relative;\n\tflex-direction: column;\n\twidth: 100vw;\n\theight: calc(100vh - 13rem);\n\tposition: relative;\n\tjustify-content: flex-start;\n\talign-items: center;\n}\n\n.content p {\n\tmax-width: 80vw;\n\tfont-size: 4.5vw;\n\ttext-transform: none;\n\tcolor: var(--color-content);\n\tfont-family: var(--font-alt);\n\tfont-weight: 300;\n\tline-height: 1.4;\n}\n\n.content p a {\n\tfont-style: italic;\n\tposition: relative;\n}\n\n.content p a::after { \n\tcontent: ''; \n\tposition: absolute; \n\twidth: 100%; \n\theight: 1px; \n\tbackground: currentColor; \n\tbottom: 0.5vw; \n\tleft: 0; \n\topacity: 0; \n\ttransform-origin: 0% 50%; \n\ttransform: scaleX(0); \n\ttransition: all 0.25s ease-out; \n} \n \n.content p a:hover::after, \n.content p a:focus::after { \n\topacity: 1; \n\ttransform: scaleX(1); \n}\n\n.menu {\n\tdisplay: flex;\n\toverflow: hidden;\n\tposition: relative;\n\twidth: 100vw;\n\tjustify-content: center;\n}\n\n.menu__item {\n\tfont-size: 6.5vw;\n\tmargin: 0 2vw;\n\tcursor: default;\n\tfont-family: var(--font-alt);\n\tcolor: var(--color-menu-link);\n\tcursor: pointer;\n}\n\n.menu__item:hover,\n.menu__item:focus {\n\tcolor: var(--color-menu-link-hover);\n}\n\n.cursor {\n\tdisplay: none;\n}\n\n@media screen and (min-width: 53em) {\n\t.frame {\n\t\tposition: fixed;\n\t\ttext-align: left;\n\t\tz-index: 10000;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: grid;\n\t\talign-content: space-between;\n\t\twidth: 100%;\n\t\tmax-width: none;\n\t\theight: 100vh;\n\t\tpadding: 2.5rem 3rem;\n\t\tpointer-events: none;\n\t\tgrid-template-columns: 40% 20% 40%;\n\t\tgrid-template-rows: auto auto auto;\n\t\tgrid-template-areas: 'title initials links'\n\t\t\t\t\t\t\t'... ... ...'\n\t\t\t\t\t\t\t'... demos ...';\n\t}\n\t.frame__title {\n\t\tgrid-area: title;\n\t\tmargin: 0;\n\t}\n\t.frame__initials {\n\t\tgrid-area: initials;\n\t\tmargin: 0;\n\t\tjustify-self: center;\n\t    align-self: center;\n\t}\n\t.frame__demos {\n\t\tmargin: 0;\n\t\tgrid-area: demos;\n\t\tjustify-self: center;\n\t}\n\t.frame__links {\n\t\tgrid-area: links;\n\t\tpadding: 0;\n\t\tjustify-self: end;\n\t}\n\t.frame__info {\n\t\tgrid-area: info;\n\t\tmargin: 0;\n\t\tjustify-self: end;\n\t}\n\t.frame a {\n\t\tpointer-events: auto;\n\t}\n\t.content {\n\t\theight: 100vh;\n\t\tjustify-content: center;\n\t}\n}\n\n@media (any-pointer: fine) {\n\t.cursor {\n\t\tposition: fixed;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: block;\n\t\tpointer-events: none;\n\t\topacity: 0;\n\t}\n\t.cursor__inner {\n\t\tfill: var(--cursor-fill);\n\t\tstroke: var(--cursor-stroke);\n\t\tstroke-width: var(--cursor-stroke-width);\n\t}\n}\n"]}


--------------------------------------------------------------------------------
/dist/demo2.06b37b5f.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["demo2.css"],"names":[],"mappings":"AAAA;;;CAGC,sBAAsB;AACvB;;AAEA;CACC,eAAe;AAChB;;AAEA;CACC,SAAS;CACT,kBAAkB;CAClB,2BAA2B;CAC3B,wBAAwB;CACxB,qBAAqB;CACrB,mBAAmB;CACnB,oCAAoC;CACpC,0BAA0B;CAC1B,gCAAgC;CAChC,4DAAmC;CACnC,4BAA4B;CAC5B,4BAA4B;CAC5B,0BAA0B;CAC1B,wBAAwB;CACxB,iCAAiC;CACjC,+BAA+B;CAC/B,mCAAmC;CACnC,kCAAkC;CAClC,kBAAkB;CAClB,mBAAmB;CACnB,wBAAwB;CACxB,0BAA0B;AAC3B;;AAEA;CACC,qBAAqB;CACrB,wBAAwB;CACxB,aAAa;CACb,eAAe;AAChB;;AAEA;;CAEC,8BAA8B;CAC9B,aAAa;AACd;;AAEA;CACC,iBAAiB;CACjB,kBAAkB;CAClB,kBAAkB;CAClB,aAAa;AACd;;AAEA;CACC,eAAe;CACf,gBAAgB;CAChB,oBAAoB;AACrB;;AAEA;CACC,cAAc;AACf;;AAEA;;IAEI,kBAAkB;AACtB;;AAEA;CACC,cAAc;AACf;;AAEA;CACC,iBAAiB;CACjB,wBAAwB;AACzB;;AAEA;CACC,4BAA4B;CAC5B,iBAAiB;CACjB,oBAAoB;CACpB,iBAAiB;AAClB;;AAEA;CACC,aAAa;CACb,kBAAkB;CAClB,sBAAsB;CACtB,YAAY;CACZ,2BAA2B;CAC3B,kBAAkB;CAClB,2BAA2B;CAC3B,mBAAmB;AACpB;;AAEA;CACC,eAAe;CACf,cAAc;CACd,yBAAyB;CACzB,2BAA2B;CAC3B,4BAA4B;CAC5B,gBAAgB;CAChB,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;CAChB,kBAAkB;CAClB,kBAAkB;AACnB;;AAEA;CACC,WAAW;CACX,kBAAkB;CAClB,WAAW;CACX,WAAW;CACX,wBAAwB;CACxB,aAAa;CACb,OAAO;CACP,UAAU;CACV,wBAAwB;CACxB,oBAAoB;CACpB,8BAA8B;AAC/B;;AAEA;;CAEC,UAAU;CACV,oBAAoB;AACrB;;AAEA;CACC,aAAa;CACb,gBAAgB;CAChB,kBAAkB;CAClB,YAAY;CACZ,uBAAuB;AACxB;;AAEA;CACC,gBAAgB;CAChB,aAAa;CACb,eAAe;CACf,4BAA4B;CAC5B,6BAA6B;CAC7B,eAAe;AAChB;;AAEA;;CAEC,mCAAmC;AACpC;;AAEA;CACC,aAAa;AACd;;AAEA;CACC;EACC,eAAe;EACf,gBAAgB;EAChB,cAAc;EACd,MAAM;EACN,OAAO;EACP,aAAa;EACb,4BAA4B;EAC5B,WAAW;EACX,eAAe;EACf,aAAa;EACb,oBAAoB;EACpB,oBAAoB;EACpB,kCAAkC;EAClC,kCAAkC;EAClC;;sBAEoB;CACrB;CACA;EACC,gBAAgB;EAChB,SAAS;CACV;CACA;EACC,mBAAmB;EACnB,SAAS;EACT,oBAAoB;KACjB,kBAAkB;CACtB;CACA;EACC,SAAS;EACT,gBAAgB;EAChB,oBAAoB;CACrB;CACA;EACC,gBAAgB;EAChB,UAAU;EACV,iBAAiB;CAClB;CACA;EACC,eAAe;EACf,SAAS;EACT,iBAAiB;CAClB;CACA;EACC,oBAAoB;CACrB;CACA;EACC,aAAa;EACb,uBAAuB;CACxB;AACD;;AAEA;CACC;EACC,eAAe;EACf,MAAM;EACN,OAAO;EACP,cAAc;EACd,oBAAoB;EACpB,UAAU;CACX;CACA;EACC,wBAAwB;EACxB,4BAA4B;EAC5B,wCAAwC;CACzC;AACD","file":"demo2.06b37b5f.css","sourceRoot":"../src","sourcesContent":["*,\n*::after,\n*::before {\n\tbox-sizing: border-box;\n}\n\n:root {\n\tfont-size: 15px;\n}\n\nbody {\n\tmargin: 0;\n\t--color-link: #000;\n\t--color-link-hover: #040203;\n\t--color-content: #040203;\n\t--color-text: #040100;\n\t--color-bg: #8e806b;\n\t--font-alt: messapiabold, sans-serif;\n\t--color-menu-link: #e4d6b6;\n\t--color-menu-link-hover: #382d11;\n\tbackground-image: url(../img/1.jpg);\n\tbackground-repeat: no-repeat;\n\tbackground-position: 50% 50%;\n\tbackground-size: auto 60vh;\n\tcolor: var(--color-text);\n\tbackground-color: var(--color-bg);\n\tfont-family: soleil, sans-serif;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\t/* Cursor styles */\n\t--cursor-fill: none;\n\t--cursor-stroke: #60381e;\n\t--cursor-stroke-width: 1px;\n}\n\na {\n\ttext-decoration: none;\n\tcolor: var(--color-link);\n\toutline: none;\n\tcursor: pointer;\n}\n\na:hover,\na:focus {\n\tcolor: var(--color-link-hover);\n\toutline: none;\n}\n\n.frame {\n\tpadding: 3rem 5vw;\n\ttext-align: center;\n\tposition: relative;\n\tz-index: 1000;\n}\n\n.frame__title {\n\tfont-size: 1rem;\n\tmargin: 0 0 1rem;\n\tfont-weight: inherit;\n}\n\n.frame__links {\n\tdisplay: block;\n}\n\n.frame__links > *:not(:last-child),\n.frame__demos > *:not(:last-child) {\n    margin-right: 1rem;\n}\n\n.frame__demos {\n\tmargin: 1rem 0;\n}\n\n.frame__demos span {\n\tfont-weight: bold;\n\tcolor: var(--color-link);\n}\n\n.frame__initials {\n\tfont-family: var(--font-alt);\n\tfont-size: 1.5rem;\n\tpointer-events: none;\n\tline-height: 18px;\n}\n\n.content {\n\tdisplay: flex;\n\tposition: relative;\n\tflex-direction: column;\n\twidth: 100vw;\n\theight: calc(100vh - 13rem);\n\tposition: relative;\n\tjustify-content: flex-start;\n\talign-items: center;\n}\n\n.content p {\n\tmax-width: 80vw;\n\tfont-size: 4vw;\n\ttext-transform: uppercase;\n\tcolor: var(--color-content);\n\tfont-family: var(--font-alt);\n\tfont-weight: 300;\n\tline-height: 1.4;\n}\n\n.content p a {\n\tfont-weight: 600;\n\tfont-style: italic;\n\tposition: relative;\n}\n\n.content p a::after { \n\tcontent: ''; \n\tposition: absolute; \n\twidth: 100%; \n\theight: 1px; \n\tbackground: currentColor; \n\tbottom: 0.5vw; \n\tleft: 0; \n\topacity: 0; \n\ttransform-origin: 0% 50%; \n\ttransform: scaleX(0); \n\ttransition: all 0.25s ease-out; \n} \n \n.content p a:hover::after, \n.content p a:focus::after { \n\topacity: 1; \n\ttransform: scaleX(1); \n}\n\n.menu {\n\tdisplay: flex;\n\toverflow: hidden;\n\tposition: relative;\n\twidth: 100vw;\n\tjustify-content: center;\n}\n\n.menu__item {\n\tfont-size: 6.5vw;\n\tmargin: 0 2vw;\n\tcursor: default;\n\tfont-family: var(--font-alt);\n\tcolor: var(--color-menu-link);\n\tcursor: pointer;\n}\n\n.menu__item:hover,\n.menu__item:focus {\n\tcolor: var(--color-menu-link-hover);\n}\n\n.cursor {\n\tdisplay: none;\n}\n\n@media screen and (min-width: 53em) {\n\t.frame {\n\t\tposition: fixed;\n\t\ttext-align: left;\n\t\tz-index: 10000;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: grid;\n\t\talign-content: space-between;\n\t\twidth: 100%;\n\t\tmax-width: none;\n\t\theight: 100vh;\n\t\tpadding: 2.5rem 3rem;\n\t\tpointer-events: none;\n\t\tgrid-template-columns: 40% 20% 40%;\n\t\tgrid-template-rows: auto auto auto;\n\t\tgrid-template-areas: 'title initials links'\n\t\t\t\t\t\t\t'... ... ...'\n\t\t\t\t\t\t\t'... demos ...';\n\t}\n\t.frame__title {\n\t\tgrid-area: title;\n\t\tmargin: 0;\n\t}\n\t.frame__initials {\n\t\tgrid-area: initials;\n\t\tmargin: 0;\n\t\tjustify-self: center;\n\t    align-self: center;\n\t}\n\t.frame__demos {\n\t\tmargin: 0;\n\t\tgrid-area: demos;\n\t\tjustify-self: center;\n\t}\n\t.frame__links {\n\t\tgrid-area: links;\n\t\tpadding: 0;\n\t\tjustify-self: end;\n\t}\n\t.frame__info {\n\t\tgrid-area: info;\n\t\tmargin: 0;\n\t\tjustify-self: end;\n\t}\n\t.frame a {\n\t\tpointer-events: auto;\n\t}\n\t.content {\n\t\theight: 100vh;\n\t\tjustify-content: center;\n\t}\n}\n\n@media (any-pointer: fine) {\n\t.cursor {\n\t\tposition: fixed;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: block;\n\t\tpointer-events: none;\n\t\topacity: 0;\n\t}\n\t.cursor__inner {\n\t\tfill: var(--cursor-fill);\n\t\tstroke: var(--cursor-stroke);\n\t\tstroke-width: var(--cursor-stroke-width);\n\t}\n}\n"]}


--------------------------------------------------------------------------------
/dist/demo4.7fb5a017.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["demo4.css"],"names":[],"mappings":"AAAA;;;CAGC,sBAAsB;AACvB;;AAEA;CACC,eAAe;AAChB;;AAEA;CACC,SAAS;CACT,qBAAqB;IAClB,gBAAgB;IAChB,oCAAoC;IACpC,qBAAqB;IACrB,2BAA2B;IAC3B,0BAA0B;IAC1B,gCAAgC;CACnC,wBAAwB;CACxB,wBAAwB;CACxB,iCAAiC;CACjC,+BAA+B;CAC/B,mCAAmC;CACnC,kCAAkC;CAClC,4DAAmC;IAChC,4BAA4B;IAC5B,4BAA4B;IAC5B,0BAA0B;CAC7B,kBAAkB;IACf,wBAAwB;IACxB,mBAAmB;IACnB,0BAA0B;AAC9B;;AAEA;CACC,qBAAqB;CACrB,wBAAwB;CACxB,aAAa;CACb,eAAe;AAChB;;AAEA;;CAEC,8BAA8B;CAC9B,aAAa;AACd;;AAEA;CACC,6BAA6B;CAC7B,sBAAsB;CACtB,aAAa;CACb,kBAAkB;AACnB;;AAEA;CACC,iBAAiB;CACjB,kBAAkB;CAClB,kBAAkB;CAClB,aAAa;AACd;;AAEA;CACC,eAAe;CACf,gBAAgB;CAChB,oBAAoB;AACrB;;AAEA;CACC,cAAc;AACf;;AAEA;;IAEI,kBAAkB;AACtB;;AAEA;CACC,cAAc;AACf;;AAEA;CACC,iBAAiB;CACjB,wBAAwB;AACzB;;AAEA;CACC,4BAA4B;CAC5B,iBAAiB;CACjB,oBAAoB;CACpB,iBAAiB;AAClB;;AAEA;CACC,aAAa;CACb,kBAAkB;CAClB,sBAAsB;CACtB,YAAY;CACZ,2BAA2B;CAC3B,kBAAkB;CAClB,2BAA2B;CAC3B,mBAAmB;AACpB;;AAEA;CACC,eAAe;CACf,cAAc;CACd,yBAAyB;CACzB,2BAA2B;CAC3B,4BAA4B;CAC5B,gBAAgB;CAChB,gBAAgB;AACjB;;AAEA;CACC,gBAAgB;CAChB,kBAAkB;CAClB,kBAAkB;AACnB;;AAEA;CACC,WAAW;CACX,kBAAkB;CAClB,WAAW;CACX,WAAW;CACX,wBAAwB;CACxB,aAAa;CACb,OAAO;CACP,UAAU;CACV,wBAAwB;CACxB,oBAAoB;CACpB,8BAA8B;AAC/B;;AAEA;;CAEC,UAAU;CACV,oBAAoB;AACrB;;AAEA;CACC,aAAa;CACb,gBAAgB;CAChB,kBAAkB;CAClB,YAAY;CACZ,uBAAuB;AACxB;;AAEA;CACC,gBAAgB;CAChB,aAAa;CACb,eAAe;CACf,4BAA4B;CAC5B,6BAA6B;CAC7B,eAAe;AAChB;;AAEA;;CAEC,mCAAmC;AACpC;;AAEA;CACC,aAAa;AACd;;AAEA;CACC;EACC,eAAe;EACf,gBAAgB;EAChB,cAAc;EACd,MAAM;EACN,OAAO;EACP,aAAa;EACb,4BAA4B;EAC5B,WAAW;EACX,eAAe;EACf,aAAa;EACb,oBAAoB;EACpB,oBAAoB;EACpB,kCAAkC;EAClC,kCAAkC;EAClC;;sBAEoB;CACrB;CACA;EACC,gBAAgB;EAChB,SAAS;CACV;CACA;EACC,mBAAmB;EACnB,SAAS;EACT,oBAAoB;KACjB,kBAAkB;CACtB;CACA;EACC,SAAS;EACT,gBAAgB;EAChB,oBAAoB;CACrB;CACA;EACC,gBAAgB;EAChB,UAAU;EACV,iBAAiB;CAClB;CACA;EACC,eAAe;EACf,SAAS;EACT,iBAAiB;CAClB;CACA;EACC,oBAAoB;CACrB;CACA;EACC,aAAa;EACb,uBAAuB;CACxB;AACD;;AAEA;CACC;EACC,eAAe;EACf,MAAM;EACN,OAAO;EACP,cAAc;EACd,oBAAoB;EACpB,UAAU;CACX;CACA;EACC,wBAAwB;EACxB,4BAA4B;EAC5B,wCAAwC;CACzC;AACD","file":"demo4.7fb5a017.css","sourceRoot":"../src","sourcesContent":["*,\n*::after,\n*::before {\n\tbox-sizing: border-box;\n}\n\n:root {\n\tfont-size: 15px;\n}\n\nbody {\n\tmargin: 0;\n\t--color-text: #d03428;\n    --color-bg: #000;\n    --font-alt: messapiabold, sans-serif;\n    --color-link: #e4d6b6;\n    --color-link-hover: #d03428;\n    --color-menu-link: #e4d6b6;\n    --color-menu-link-hover: #d03428;\n\t--color-content: #040203;\n\tcolor: var(--color-text);\n\tbackground-color: var(--color-bg);\n\tfont-family: soleil, sans-serif;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\tbackground-image: url(../img/2.jpg);\n    background-repeat: no-repeat;\n    background-position: 50% 50%;\n    background-size: auto 60vh;\n\t/* Cursor styles */\n    --cursor-stroke: #e4d6b6;\n    --cursor-fill: none;\n    --cursor-stroke-width: 1px;  \n}\n\na {\n\ttext-decoration: none;\n\tcolor: var(--color-link);\n\toutline: none;\n\tcursor: pointer;\n}\n\na:hover,\na:focus {\n\tcolor: var(--color-link-hover);\n\toutline: none;\n}\n\n.message {\n\tbackground: var(--color-text);\n\tcolor: var(--color-bg);\n\tpadding: 1rem;\n\ttext-align: center;\n}\n\n.frame {\n\tpadding: 3rem 5vw;\n\ttext-align: center;\n\tposition: relative;\n\tz-index: 1000;\n}\n\n.frame__title {\n\tfont-size: 1rem;\n\tmargin: 0 0 1rem;\n\tfont-weight: inherit;\n}\n\n.frame__links {\n\tdisplay: block;\n}\n\n.frame__links > *:not(:last-child),\n.frame__demos > *:not(:last-child) {\n    margin-right: 1rem;\n}\n\n.frame__demos {\n\tmargin: 1rem 0;\n}\n\n.frame__demos span {\n\tfont-weight: bold;\n\tcolor: var(--color-link);\n}\n\n.frame__initials {\n\tfont-family: var(--font-alt);\n\tfont-size: 1.5rem;\n\tpointer-events: none;\n\tline-height: 18px;\n}\n\n.content {\n\tdisplay: flex;\n\tposition: relative;\n\tflex-direction: column;\n\twidth: 100vw;\n\theight: calc(100vh - 13rem);\n\tposition: relative;\n\tjustify-content: flex-start;\n\talign-items: center;\n}\n\n.content p {\n\tmax-width: 80vw;\n\tfont-size: 4vw;\n\ttext-transform: uppercase;\n\tcolor: var(--color-content);\n\tfont-family: var(--font-alt);\n\tfont-weight: 300;\n\tline-height: 1.4;\n}\n\n.content p a {\n\tfont-weight: 600;\n\tfont-style: italic;\n\tposition: relative;\n}\n\n.content p a::after { \n\tcontent: ''; \n\tposition: absolute; \n\twidth: 100%; \n\theight: 1px; \n\tbackground: currentColor; \n\tbottom: 0.5vw; \n\tleft: 0; \n\topacity: 0; \n\ttransform-origin: 0% 50%; \n\ttransform: scaleX(0); \n\ttransition: all 0.25s ease-out; \n} \n \n.content p a:hover::after, \n.content p a:focus::after { \n\topacity: 1; \n\ttransform: scaleX(1); \n}\n\n.menu {\n\tdisplay: flex;\n\toverflow: hidden;\n\tposition: relative;\n\twidth: 100vw;\n\tjustify-content: center;\n}\n\n.menu__item {\n\tfont-size: 6.5vw;\n\tmargin: 0 2vw;\n\tcursor: default;\n\tfont-family: var(--font-alt);\n\tcolor: var(--color-menu-link);\n\tcursor: pointer;\n}\n\n.menu__item:hover,\n.menu__item:focus {\n\tcolor: var(--color-menu-link-hover);\n}\n\n.cursor {\n\tdisplay: none;\n}\n\n@media screen and (min-width: 53em) {\n\t.frame {\n\t\tposition: fixed;\n\t\ttext-align: left;\n\t\tz-index: 10000;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: grid;\n\t\talign-content: space-between;\n\t\twidth: 100%;\n\t\tmax-width: none;\n\t\theight: 100vh;\n\t\tpadding: 2.5rem 3rem;\n\t\tpointer-events: none;\n\t\tgrid-template-columns: 40% 20% 40%;\n\t\tgrid-template-rows: auto auto auto;\n\t\tgrid-template-areas: 'title initials links'\n\t\t\t\t\t\t\t'... ... ...'\n\t\t\t\t\t\t\t'... demos ...';\n\t}\n\t.frame__title {\n\t\tgrid-area: title;\n\t\tmargin: 0;\n\t}\n\t.frame__initials {\n\t\tgrid-area: initials;\n\t\tmargin: 0;\n\t\tjustify-self: center;\n\t    align-self: center;\n\t}\n\t.frame__demos {\n\t\tmargin: 0;\n\t\tgrid-area: demos;\n\t\tjustify-self: center;\n\t}\n\t.frame__links {\n\t\tgrid-area: links;\n\t\tpadding: 0;\n\t\tjustify-self: end;\n\t}\n\t.frame__info {\n\t\tgrid-area: info;\n\t\tmargin: 0;\n\t\tjustify-self: end;\n\t}\n\t.frame a {\n\t\tpointer-events: auto;\n\t}\n\t.content {\n\t\theight: 100vh;\n\t\tjustify-content: center;\n\t}\n}\n\n@media (any-pointer: fine) {\n\t.cursor {\n\t\tposition: fixed;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: block;\n\t\tpointer-events: none;\n\t\topacity: 0;\n\t}\n\t.cursor__inner {\n\t\tfill: var(--cursor-fill);\n\t\tstroke: var(--cursor-stroke);\n\t\tstroke-width: var(--cursor-stroke-width);\n\t}\n}\n"]}


--------------------------------------------------------------------------------
/dist/index2.js:
--------------------------------------------------------------------------------
  1 | // modules are defined as an array
  2 | // [ module function, map of requires ]
  3 | //
  4 | // map of requires is short require name -> numeric require
  5 | //
  6 | // anything defined in a previous bundle is accessed via the
  7 | // orig method which is the require for previous bundles
  8 | parcelRequire = (function (modules, cache, entry, globalName) {
  9 |   // Save the require from previous bundle to this closure if any
 10 |   var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
 11 |   var nodeRequire = typeof require === 'function' && require;
 12 | 
 13 |   function newRequire(name, jumped) {
 14 |     if (!cache[name]) {
 15 |       if (!modules[name]) {
 16 |         // if we cannot find the module within our internal map or
 17 |         // cache jump to the current global require ie. the last bundle
 18 |         // that was added to the page.
 19 |         var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
 20 |         if (!jumped && currentRequire) {
 21 |           return currentRequire(name, true);
 22 |         }
 23 | 
 24 |         // If there are other bundles on this page the require from the
 25 |         // previous one is saved to 'previousRequire'. Repeat this as
 26 |         // many times as there are bundles until the module is found or
 27 |         // we exhaust the require chain.
 28 |         if (previousRequire) {
 29 |           return previousRequire(name, true);
 30 |         }
 31 | 
 32 |         // Try the node require function if it exists.
 33 |         if (nodeRequire && typeof name === 'string') {
 34 |           return nodeRequire(name);
 35 |         }
 36 | 
 37 |         var err = new Error('Cannot find module \'' + name + '\'');
 38 |         err.code = 'MODULE_NOT_FOUND';
 39 |         throw err;
 40 |       }
 41 | 
 42 |       localRequire.resolve = resolve;
 43 |       localRequire.cache = {};
 44 | 
 45 |       var module = cache[name] = new newRequire.Module(name);
 46 | 
 47 |       modules[name][0].call(module.exports, localRequire, module, module.exports, this);
 48 |     }
 49 | 
 50 |     return cache[name].exports;
 51 | 
 52 |     function localRequire(x){
 53 |       return newRequire(localRequire.resolve(x));
 54 |     }
 55 | 
 56 |     function resolve(x){
 57 |       return modules[name][1][x] || x;
 58 |     }
 59 |   }
 60 | 
 61 |   function Module(moduleName) {
 62 |     this.id = moduleName;
 63 |     this.bundle = newRequire;
 64 |     this.exports = {};
 65 |   }
 66 | 
 67 |   newRequire.isParcelRequire = true;
 68 |   newRequire.Module = Module;
 69 |   newRequire.modules = modules;
 70 |   newRequire.cache = cache;
 71 |   newRequire.parent = previousRequire;
 72 |   newRequire.register = function (id, exports) {
 73 |     modules[id] = [function (require, module) {
 74 |       module.exports = exports;
 75 |     }, {}];
 76 |   };
 77 | 
 78 |   var error;
 79 |   for (var i = 0; i < entry.length; i++) {
 80 |     try {
 81 |       newRequire(entry[i]);
 82 |     } catch (e) {
 83 |       // Save first error but execute all entries
 84 |       if (!error) {
 85 |         error = e;
 86 |       }
 87 |     }
 88 |   }
 89 | 
 90 |   if (entry.length) {
 91 |     // Expose entry point to Node, AMD or browser globals
 92 |     // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
 93 |     var mainExports = newRequire(entry[entry.length - 1]);
 94 | 
 95 |     // CommonJS
 96 |     if (typeof exports === "object" && typeof module !== "undefined") {
 97 |       module.exports = mainExports;
 98 | 
 99 |     // RequireJS
100 |     } else if (typeof define === "function" && define.amd) {
101 |      define(function () {
102 |        return mainExports;
103 |      });
104 | 
105 |     // <script>
106 |     } else if (globalName) {
107 |       this[globalName] = mainExports;
108 |     }
109 |   }
110 | 
111 |   // Override the current require with this new one
112 |   parcelRequire = newRequire;
113 | 
114 |   if (error) {
115 |     // throw error from earlier, _after updating parcelRequire_
116 |     throw error;
117 |   }
118 | 
119 |   return newRequire;
120 | })({"../node_modules/parcel/src/builtins/bundle-url.js":[function(require,module,exports) {
121 | var bundleURL = null;
122 | 
123 | function getBundleURLCached() {
124 |   if (!bundleURL) {
125 |     bundleURL = getBundleURL();
126 |   }
127 | 
128 |   return bundleURL;
129 | }
130 | 
131 | function getBundleURL() {
132 |   // Attempt to find the URL of the current script and use that as the base URL
133 |   try {
134 |     throw new Error();
135 |   } catch (err) {
136 |     var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\/\/[^)\n]+/g);
137 | 
138 |     if (matches) {
139 |       return getBaseURL(matches[0]);
140 |     }
141 |   }
142 | 
143 |   return '/';
144 | }
145 | 
146 | function getBaseURL(url) {
147 |   return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\/\/.+)\/[^/]+$/, '$1') + '/';
148 | }
149 | 
150 | exports.getBundleURL = getBundleURLCached;
151 | exports.getBaseURL = getBaseURL;
152 | },{}],"../node_modules/parcel/src/builtins/css-loader.js":[function(require,module,exports) {
153 | var bundle = require('./bundle-url');
154 | 
155 | function updateLink(link) {
156 |   var newLink = link.cloneNode();
157 | 
158 |   newLink.onload = function () {
159 |     link.remove();
160 |   };
161 | 
162 |   newLink.href = link.href.split('?')[0] + '?' + Date.now();
163 |   link.parentNode.insertBefore(newLink, link.nextSibling);
164 | }
165 | 
166 | var cssTimeout = null;
167 | 
168 | function reloadCSS() {
169 |   if (cssTimeout) {
170 |     return;
171 |   }
172 | 
173 |   cssTimeout = setTimeout(function () {
174 |     var links = document.querySelectorAll('link[rel="stylesheet"]');
175 | 
176 |     for (var i = 0; i < links.length; i++) {
177 |       if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {
178 |         updateLink(links[i]);
179 |       }
180 |     }
181 | 
182 |     cssTimeout = null;
183 |   }, 50);
184 | }
185 | 
186 | module.exports = reloadCSS;
187 | },{"./bundle-url":"../node_modules/parcel/src/builtins/bundle-url.js"}],"../node_modules/parcel/src/builtins/hmr-runtime.js":[function(require,module,exports) {
188 | var global = arguments[3];
189 | var OVERLAY_ID = '__parcel__error__overlay__';
190 | var OldModule = module.bundle.Module;
191 | 
192 | function Module(moduleName) {
193 |   OldModule.call(this, moduleName);
194 |   this.hot = {
195 |     data: module.bundle.hotData,
196 |     _acceptCallbacks: [],
197 |     _disposeCallbacks: [],
198 |     accept: function (fn) {
199 |       this._acceptCallbacks.push(fn || function () {});
200 |     },
201 |     dispose: function (fn) {
202 |       this._disposeCallbacks.push(fn);
203 |     }
204 |   };
205 |   module.bundle.hotData = null;
206 | }
207 | 
208 | module.bundle.Module = Module;
209 | var checkedAssets, assetsToAccept;
210 | var parent = module.bundle.parent;
211 | 
212 | if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
213 |   var hostname = "" || location.hostname;
214 |   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
215 |   var ws = new WebSocket(protocol + '://' + hostname + ':' + "54058" + '/');
216 | 
217 |   ws.onmessage = function (event) {
218 |     checkedAssets = {};
219 |     assetsToAccept = [];
220 |     var data = JSON.parse(event.data);
221 | 
222 |     if (data.type === 'update') {
223 |       var handled = false;
224 |       data.assets.forEach(function (asset) {
225 |         if (!asset.isNew) {
226 |           var didAccept = hmrAcceptCheck(global.parcelRequire, asset.id);
227 | 
228 |           if (didAccept) {
229 |             handled = true;
230 |           }
231 |         }
232 |       }); // Enable HMR for CSS by default.
233 | 
234 |       handled = handled || data.assets.every(function (asset) {
235 |         return asset.type === 'css' && asset.generated.js;
236 |       });
237 | 
238 |       if (handled) {
239 |         console.clear();
240 |         data.assets.forEach(function (asset) {
241 |           hmrApply(global.parcelRequire, asset);
242 |         });
243 |         assetsToAccept.forEach(function (v) {
244 |           hmrAcceptRun(v[0], v[1]);
245 |         });
246 |       } else {
247 |         window.location.reload();
248 |       }
249 |     }
250 | 
251 |     if (data.type === 'reload') {
252 |       ws.close();
253 | 
254 |       ws.onclose = function () {
255 |         location.reload();
256 |       };
257 |     }
258 | 
259 |     if (data.type === 'error-resolved') {
260 |       console.log('[parcel] ✨ Error resolved');
261 |       removeErrorOverlay();
262 |     }
263 | 
264 |     if (data.type === 'error') {
265 |       console.error('[parcel] 🚨  ' + data.error.message + '\n' + data.error.stack);
266 |       removeErrorOverlay();
267 |       var overlay = createErrorOverlay(data);
268 |       document.body.appendChild(overlay);
269 |     }
270 |   };
271 | }
272 | 
273 | function removeErrorOverlay() {
274 |   var overlay = document.getElementById(OVERLAY_ID);
275 | 
276 |   if (overlay) {
277 |     overlay.remove();
278 |   }
279 | }
280 | 
281 | function createErrorOverlay(data) {
282 |   var overlay = document.createElement('div');
283 |   overlay.id = OVERLAY_ID; // html encode message and stack trace
284 | 
285 |   var message = document.createElement('div');
286 |   var stackTrace = document.createElement('pre');
287 |   message.innerText = data.error.message;
288 |   stackTrace.innerText = data.error.stack;
289 |   overlay.innerHTML = '<div style="background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;">' + '<span style="background: red; padding: 2px 4px; border-radius: 2px;">ERROR</span>' + '<span style="top: 2px; margin-left: 5px; position: relative;">🚨</span>' + '<div style="font-size: 18px; font-weight: bold; margin-top: 20px;">' + message.innerHTML + '</div>' + '<pre>' + stackTrace.innerHTML + '</pre>' + '</div>';
290 |   return overlay;
291 | }
292 | 
293 | function getParents(bundle, id) {
294 |   var modules = bundle.modules;
295 | 
296 |   if (!modules) {
297 |     return [];
298 |   }
299 | 
300 |   var parents = [];
301 |   var k, d, dep;
302 | 
303 |   for (k in modules) {
304 |     for (d in modules[k][1]) {
305 |       dep = modules[k][1][d];
306 | 
307 |       if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) {
308 |         parents.push(k);
309 |       }
310 |     }
311 |   }
312 | 
313 |   if (bundle.parent) {
314 |     parents = parents.concat(getParents(bundle.parent, id));
315 |   }
316 | 
317 |   return parents;
318 | }
319 | 
320 | function hmrApply(bundle, asset) {
321 |   var modules = bundle.modules;
322 | 
323 |   if (!modules) {
324 |     return;
325 |   }
326 | 
327 |   if (modules[asset.id] || !bundle.parent) {
328 |     var fn = new Function('require', 'module', 'exports', asset.generated.js);
329 |     asset.isNew = !modules[asset.id];
330 |     modules[asset.id] = [fn, asset.deps];
331 |   } else if (bundle.parent) {
332 |     hmrApply(bundle.parent, asset);
333 |   }
334 | }
335 | 
336 | function hmrAcceptCheck(bundle, id) {
337 |   var modules = bundle.modules;
338 | 
339 |   if (!modules) {
340 |     return;
341 |   }
342 | 
343 |   if (!modules[id] && bundle.parent) {
344 |     return hmrAcceptCheck(bundle.parent, id);
345 |   }
346 | 
347 |   if (checkedAssets[id]) {
348 |     return;
349 |   }
350 | 
351 |   checkedAssets[id] = true;
352 |   var cached = bundle.cache[id];
353 |   assetsToAccept.push([bundle, id]);
354 | 
355 |   if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
356 |     return true;
357 |   }
358 | 
359 |   return getParents(global.parcelRequire, id).some(function (id) {
360 |     return hmrAcceptCheck(global.parcelRequire, id);
361 |   });
362 | }
363 | 
364 | function hmrAcceptRun(bundle, id) {
365 |   var cached = bundle.cache[id];
366 |   bundle.hotData = {};
367 | 
368 |   if (cached) {
369 |     cached.hot.data = bundle.hotData;
370 |   }
371 | 
372 |   if (cached && cached.hot && cached.hot._disposeCallbacks.length) {
373 |     cached.hot._disposeCallbacks.forEach(function (cb) {
374 |       cb(bundle.hotData);
375 |     });
376 |   }
377 | 
378 |   delete bundle.cache[id];
379 |   bundle(id);
380 |   cached = bundle.cache[id];
381 | 
382 |   if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
383 |     cached.hot._acceptCallbacks.forEach(function (cb) {
384 |       cb();
385 |     });
386 | 
387 |     return true;
388 |   }
389 | }
390 | },{}]},{},["../node_modules/parcel/src/builtins/hmr-runtime.js"], null)
391 | //# sourceMappingURL=/index2.js.map


--------------------------------------------------------------------------------
/dist/demo1.ea7e4db3.js:
--------------------------------------------------------------------------------
  1 | // modules are defined as an array
  2 | // [ module function, map of requires ]
  3 | //
  4 | // map of requires is short require name -> numeric require
  5 | //
  6 | // anything defined in a previous bundle is accessed via the
  7 | // orig method which is the require for previous bundles
  8 | parcelRequire = (function (modules, cache, entry, globalName) {
  9 |   // Save the require from previous bundle to this closure if any
 10 |   var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
 11 |   var nodeRequire = typeof require === 'function' && require;
 12 | 
 13 |   function newRequire(name, jumped) {
 14 |     if (!cache[name]) {
 15 |       if (!modules[name]) {
 16 |         // if we cannot find the module within our internal map or
 17 |         // cache jump to the current global require ie. the last bundle
 18 |         // that was added to the page.
 19 |         var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
 20 |         if (!jumped && currentRequire) {
 21 |           return currentRequire(name, true);
 22 |         }
 23 | 
 24 |         // If there are other bundles on this page the require from the
 25 |         // previous one is saved to 'previousRequire'. Repeat this as
 26 |         // many times as there are bundles until the module is found or
 27 |         // we exhaust the require chain.
 28 |         if (previousRequire) {
 29 |           return previousRequire(name, true);
 30 |         }
 31 | 
 32 |         // Try the node require function if it exists.
 33 |         if (nodeRequire && typeof name === 'string') {
 34 |           return nodeRequire(name);
 35 |         }
 36 | 
 37 |         var err = new Error('Cannot find module \'' + name + '\'');
 38 |         err.code = 'MODULE_NOT_FOUND';
 39 |         throw err;
 40 |       }
 41 | 
 42 |       localRequire.resolve = resolve;
 43 |       localRequire.cache = {};
 44 | 
 45 |       var module = cache[name] = new newRequire.Module(name);
 46 | 
 47 |       modules[name][0].call(module.exports, localRequire, module, module.exports, this);
 48 |     }
 49 | 
 50 |     return cache[name].exports;
 51 | 
 52 |     function localRequire(x){
 53 |       return newRequire(localRequire.resolve(x));
 54 |     }
 55 | 
 56 |     function resolve(x){
 57 |       return modules[name][1][x] || x;
 58 |     }
 59 |   }
 60 | 
 61 |   function Module(moduleName) {
 62 |     this.id = moduleName;
 63 |     this.bundle = newRequire;
 64 |     this.exports = {};
 65 |   }
 66 | 
 67 |   newRequire.isParcelRequire = true;
 68 |   newRequire.Module = Module;
 69 |   newRequire.modules = modules;
 70 |   newRequire.cache = cache;
 71 |   newRequire.parent = previousRequire;
 72 |   newRequire.register = function (id, exports) {
 73 |     modules[id] = [function (require, module) {
 74 |       module.exports = exports;
 75 |     }, {}];
 76 |   };
 77 | 
 78 |   var error;
 79 |   for (var i = 0; i < entry.length; i++) {
 80 |     try {
 81 |       newRequire(entry[i]);
 82 |     } catch (e) {
 83 |       // Save first error but execute all entries
 84 |       if (!error) {
 85 |         error = e;
 86 |       }
 87 |     }
 88 |   }
 89 | 
 90 |   if (entry.length) {
 91 |     // Expose entry point to Node, AMD or browser globals
 92 |     // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
 93 |     var mainExports = newRequire(entry[entry.length - 1]);
 94 | 
 95 |     // CommonJS
 96 |     if (typeof exports === "object" && typeof module !== "undefined") {
 97 |       module.exports = mainExports;
 98 | 
 99 |     // RequireJS
100 |     } else if (typeof define === "function" && define.amd) {
101 |      define(function () {
102 |        return mainExports;
103 |      });
104 | 
105 |     // <script>
106 |     } else if (globalName) {
107 |       this[globalName] = mainExports;
108 |     }
109 |   }
110 | 
111 |   // Override the current require with this new one
112 |   parcelRequire = newRequire;
113 | 
114 |   if (error) {
115 |     // throw error from earlier, _after updating parcelRequire_
116 |     throw error;
117 |   }
118 | 
119 |   return newRequire;
120 | })({"css/demo1.css":[function(require,module,exports) {
121 | var reloadCSS = require('_css_loader');
122 | 
123 | module.hot.dispose(reloadCSS);
124 | module.hot.accept(reloadCSS);
125 | },{"_css_loader":"../node_modules/parcel/src/builtins/css-loader.js"}],"../node_modules/parcel/src/builtins/hmr-runtime.js":[function(require,module,exports) {
126 | var global = arguments[3];
127 | var OVERLAY_ID = '__parcel__error__overlay__';
128 | var OldModule = module.bundle.Module;
129 | 
130 | function Module(moduleName) {
131 |   OldModule.call(this, moduleName);
132 |   this.hot = {
133 |     data: module.bundle.hotData,
134 |     _acceptCallbacks: [],
135 |     _disposeCallbacks: [],
136 |     accept: function (fn) {
137 |       this._acceptCallbacks.push(fn || function () {});
138 |     },
139 |     dispose: function (fn) {
140 |       this._disposeCallbacks.push(fn);
141 |     }
142 |   };
143 |   module.bundle.hotData = null;
144 | }
145 | 
146 | module.bundle.Module = Module;
147 | var checkedAssets, assetsToAccept;
148 | var parent = module.bundle.parent;
149 | 
150 | if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
151 |   var hostname = "" || location.hostname;
152 |   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
153 |   var ws = new WebSocket(protocol + '://' + hostname + ':' + "54058" + '/');
154 | 
155 |   ws.onmessage = function (event) {
156 |     checkedAssets = {};
157 |     assetsToAccept = [];
158 |     var data = JSON.parse(event.data);
159 | 
160 |     if (data.type === 'update') {
161 |       var handled = false;
162 |       data.assets.forEach(function (asset) {
163 |         if (!asset.isNew) {
164 |           var didAccept = hmrAcceptCheck(global.parcelRequire, asset.id);
165 | 
166 |           if (didAccept) {
167 |             handled = true;
168 |           }
169 |         }
170 |       }); // Enable HMR for CSS by default.
171 | 
172 |       handled = handled || data.assets.every(function (asset) {
173 |         return asset.type === 'css' && asset.generated.js;
174 |       });
175 | 
176 |       if (handled) {
177 |         console.clear();
178 |         data.assets.forEach(function (asset) {
179 |           hmrApply(global.parcelRequire, asset);
180 |         });
181 |         assetsToAccept.forEach(function (v) {
182 |           hmrAcceptRun(v[0], v[1]);
183 |         });
184 |       } else {
185 |         window.location.reload();
186 |       }
187 |     }
188 | 
189 |     if (data.type === 'reload') {
190 |       ws.close();
191 | 
192 |       ws.onclose = function () {
193 |         location.reload();
194 |       };
195 |     }
196 | 
197 |     if (data.type === 'error-resolved') {
198 |       console.log('[parcel] ✨ Error resolved');
199 |       removeErrorOverlay();
200 |     }
201 | 
202 |     if (data.type === 'error') {
203 |       console.error('[parcel] 🚨  ' + data.error.message + '\n' + data.error.stack);
204 |       removeErrorOverlay();
205 |       var overlay = createErrorOverlay(data);
206 |       document.body.appendChild(overlay);
207 |     }
208 |   };
209 | }
210 | 
211 | function removeErrorOverlay() {
212 |   var overlay = document.getElementById(OVERLAY_ID);
213 | 
214 |   if (overlay) {
215 |     overlay.remove();
216 |   }
217 | }
218 | 
219 | function createErrorOverlay(data) {
220 |   var overlay = document.createElement('div');
221 |   overlay.id = OVERLAY_ID; // html encode message and stack trace
222 | 
223 |   var message = document.createElement('div');
224 |   var stackTrace = document.createElement('pre');
225 |   message.innerText = data.error.message;
226 |   stackTrace.innerText = data.error.stack;
227 |   overlay.innerHTML = '<div style="background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;">' + '<span style="background: red; padding: 2px 4px; border-radius: 2px;">ERROR</span>' + '<span style="top: 2px; margin-left: 5px; position: relative;">🚨</span>' + '<div style="font-size: 18px; font-weight: bold; margin-top: 20px;">' + message.innerHTML + '</div>' + '<pre>' + stackTrace.innerHTML + '</pre>' + '</div>';
228 |   return overlay;
229 | }
230 | 
231 | function getParents(bundle, id) {
232 |   var modules = bundle.modules;
233 | 
234 |   if (!modules) {
235 |     return [];
236 |   }
237 | 
238 |   var parents = [];
239 |   var k, d, dep;
240 | 
241 |   for (k in modules) {
242 |     for (d in modules[k][1]) {
243 |       dep = modules[k][1][d];
244 | 
245 |       if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) {
246 |         parents.push(k);
247 |       }
248 |     }
249 |   }
250 | 
251 |   if (bundle.parent) {
252 |     parents = parents.concat(getParents(bundle.parent, id));
253 |   }
254 | 
255 |   return parents;
256 | }
257 | 
258 | function hmrApply(bundle, asset) {
259 |   var modules = bundle.modules;
260 | 
261 |   if (!modules) {
262 |     return;
263 |   }
264 | 
265 |   if (modules[asset.id] || !bundle.parent) {
266 |     var fn = new Function('require', 'module', 'exports', asset.generated.js);
267 |     asset.isNew = !modules[asset.id];
268 |     modules[asset.id] = [fn, asset.deps];
269 |   } else if (bundle.parent) {
270 |     hmrApply(bundle.parent, asset);
271 |   }
272 | }
273 | 
274 | function hmrAcceptCheck(bundle, id) {
275 |   var modules = bundle.modules;
276 | 
277 |   if (!modules) {
278 |     return;
279 |   }
280 | 
281 |   if (!modules[id] && bundle.parent) {
282 |     return hmrAcceptCheck(bundle.parent, id);
283 |   }
284 | 
285 |   if (checkedAssets[id]) {
286 |     return;
287 |   }
288 | 
289 |   checkedAssets[id] = true;
290 |   var cached = bundle.cache[id];
291 |   assetsToAccept.push([bundle, id]);
292 | 
293 |   if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
294 |     return true;
295 |   }
296 | 
297 |   return getParents(global.parcelRequire, id).some(function (id) {
298 |     return hmrAcceptCheck(global.parcelRequire, id);
299 |   });
300 | }
301 | 
302 | function hmrAcceptRun(bundle, id) {
303 |   var cached = bundle.cache[id];
304 |   bundle.hotData = {};
305 | 
306 |   if (cached) {
307 |     cached.hot.data = bundle.hotData;
308 |   }
309 | 
310 |   if (cached && cached.hot && cached.hot._disposeCallbacks.length) {
311 |     cached.hot._disposeCallbacks.forEach(function (cb) {
312 |       cb(bundle.hotData);
313 |     });
314 |   }
315 | 
316 |   delete bundle.cache[id];
317 |   bundle(id);
318 |   cached = bundle.cache[id];
319 | 
320 |   if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
321 |     cached.hot._acceptCallbacks.forEach(function (cb) {
322 |       cb();
323 |     });
324 | 
325 |     return true;
326 |   }
327 | }
328 | },{}],"../node_modules/parcel/src/builtins/bundle-url.js":[function(require,module,exports) {
329 | var bundleURL = null;
330 | 
331 | function getBundleURLCached() {
332 |   if (!bundleURL) {
333 |     bundleURL = getBundleURL();
334 |   }
335 | 
336 |   return bundleURL;
337 | }
338 | 
339 | function getBundleURL() {
340 |   // Attempt to find the URL of the current script and use that as the base URL
341 |   try {
342 |     throw new Error();
343 |   } catch (err) {
344 |     var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\/\/[^)\n]+/g);
345 | 
346 |     if (matches) {
347 |       return getBaseURL(matches[0]);
348 |     }
349 |   }
350 | 
351 |   return '/';
352 | }
353 | 
354 | function getBaseURL(url) {
355 |   return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\/\/.+)\/[^/]+$/, '$1') + '/';
356 | }
357 | 
358 | exports.getBundleURL = getBundleURLCached;
359 | exports.getBaseURL = getBaseURL;
360 | },{}],"../node_modules/parcel/src/builtins/bundle-loader.js":[function(require,module,exports) {
361 | var getBundleURL = require('./bundle-url').getBundleURL;
362 | 
363 | function loadBundlesLazy(bundles) {
364 |   if (!Array.isArray(bundles)) {
365 |     bundles = [bundles];
366 |   }
367 | 
368 |   var id = bundles[bundles.length - 1];
369 | 
370 |   try {
371 |     return Promise.resolve(require(id));
372 |   } catch (err) {
373 |     if (err.code === 'MODULE_NOT_FOUND') {
374 |       return new LazyPromise(function (resolve, reject) {
375 |         loadBundles(bundles.slice(0, -1)).then(function () {
376 |           return require(id);
377 |         }).then(resolve, reject);
378 |       });
379 |     }
380 | 
381 |     throw err;
382 |   }
383 | }
384 | 
385 | function loadBundles(bundles) {
386 |   return Promise.all(bundles.map(loadBundle));
387 | }
388 | 
389 | var bundleLoaders = {};
390 | 
391 | function registerBundleLoader(type, loader) {
392 |   bundleLoaders[type] = loader;
393 | }
394 | 
395 | module.exports = exports = loadBundlesLazy;
396 | exports.load = loadBundles;
397 | exports.register = registerBundleLoader;
398 | var bundles = {};
399 | 
400 | function loadBundle(bundle) {
401 |   var id;
402 | 
403 |   if (Array.isArray(bundle)) {
404 |     id = bundle[1];
405 |     bundle = bundle[0];
406 |   }
407 | 
408 |   if (bundles[bundle]) {
409 |     return bundles[bundle];
410 |   }
411 | 
412 |   var type = (bundle.substring(bundle.lastIndexOf('.') + 1, bundle.length) || bundle).toLowerCase();
413 |   var bundleLoader = bundleLoaders[type];
414 | 
415 |   if (bundleLoader) {
416 |     return bundles[bundle] = bundleLoader(getBundleURL() + bundle).then(function (resolved) {
417 |       if (resolved) {
418 |         module.bundle.register(id, resolved);
419 |       }
420 | 
421 |       return resolved;
422 |     }).catch(function (e) {
423 |       delete bundles[bundle];
424 |       throw e;
425 |     });
426 |   }
427 | }
428 | 
429 | function LazyPromise(executor) {
430 |   this.executor = executor;
431 |   this.promise = null;
432 | }
433 | 
434 | LazyPromise.prototype.then = function (onSuccess, onError) {
435 |   if (this.promise === null) this.promise = new Promise(this.executor);
436 |   return this.promise.then(onSuccess, onError);
437 | };
438 | 
439 | LazyPromise.prototype.catch = function (onError) {
440 |   if (this.promise === null) this.promise = new Promise(this.executor);
441 |   return this.promise.catch(onError);
442 | };
443 | },{"./bundle-url":"../node_modules/parcel/src/builtins/bundle-url.js"}],"../node_modules/parcel/src/builtins/loaders/browser/js-loader.js":[function(require,module,exports) {
444 | module.exports = function loadJSBundle(bundle) {
445 |   return new Promise(function (resolve, reject) {
446 |     var script = document.createElement('script');
447 |     script.async = true;
448 |     script.type = 'text/javascript';
449 |     script.charset = 'utf-8';
450 |     script.src = bundle;
451 | 
452 |     script.onerror = function (e) {
453 |       script.onerror = script.onload = null;
454 |       reject(e);
455 |     };
456 | 
457 |     script.onload = function () {
458 |       script.onerror = script.onload = null;
459 |       resolve();
460 |     };
461 | 
462 |     document.getElementsByTagName('head')[0].appendChild(script);
463 |   });
464 | };
465 | },{}],0:[function(require,module,exports) {
466 | var b=require("../node_modules/parcel/src/builtins/bundle-loader.js");b.register("js",require("../node_modules/parcel/src/builtins/loaders/browser/js-loader.js"));b.load([]);
467 | },{}]},{},["../node_modules/parcel/src/builtins/hmr-runtime.js",0], null)
468 | //# sourceMappingURL=/demo1.ea7e4db3.js.map


--------------------------------------------------------------------------------
/dist/demo3.f904c581.js:
--------------------------------------------------------------------------------
  1 | // modules are defined as an array
  2 | // [ module function, map of requires ]
  3 | //
  4 | // map of requires is short require name -> numeric require
  5 | //
  6 | // anything defined in a previous bundle is accessed via the
  7 | // orig method which is the require for previous bundles
  8 | parcelRequire = (function (modules, cache, entry, globalName) {
  9 |   // Save the require from previous bundle to this closure if any
 10 |   var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
 11 |   var nodeRequire = typeof require === 'function' && require;
 12 | 
 13 |   function newRequire(name, jumped) {
 14 |     if (!cache[name]) {
 15 |       if (!modules[name]) {
 16 |         // if we cannot find the module within our internal map or
 17 |         // cache jump to the current global require ie. the last bundle
 18 |         // that was added to the page.
 19 |         var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
 20 |         if (!jumped && currentRequire) {
 21 |           return currentRequire(name, true);
 22 |         }
 23 | 
 24 |         // If there are other bundles on this page the require from the
 25 |         // previous one is saved to 'previousRequire'. Repeat this as
 26 |         // many times as there are bundles until the module is found or
 27 |         // we exhaust the require chain.
 28 |         if (previousRequire) {
 29 |           return previousRequire(name, true);
 30 |         }
 31 | 
 32 |         // Try the node require function if it exists.
 33 |         if (nodeRequire && typeof name === 'string') {
 34 |           return nodeRequire(name);
 35 |         }
 36 | 
 37 |         var err = new Error('Cannot find module \'' + name + '\'');
 38 |         err.code = 'MODULE_NOT_FOUND';
 39 |         throw err;
 40 |       }
 41 | 
 42 |       localRequire.resolve = resolve;
 43 |       localRequire.cache = {};
 44 | 
 45 |       var module = cache[name] = new newRequire.Module(name);
 46 | 
 47 |       modules[name][0].call(module.exports, localRequire, module, module.exports, this);
 48 |     }
 49 | 
 50 |     return cache[name].exports;
 51 | 
 52 |     function localRequire(x){
 53 |       return newRequire(localRequire.resolve(x));
 54 |     }
 55 | 
 56 |     function resolve(x){
 57 |       return modules[name][1][x] || x;
 58 |     }
 59 |   }
 60 | 
 61 |   function Module(moduleName) {
 62 |     this.id = moduleName;
 63 |     this.bundle = newRequire;
 64 |     this.exports = {};
 65 |   }
 66 | 
 67 |   newRequire.isParcelRequire = true;
 68 |   newRequire.Module = Module;
 69 |   newRequire.modules = modules;
 70 |   newRequire.cache = cache;
 71 |   newRequire.parent = previousRequire;
 72 |   newRequire.register = function (id, exports) {
 73 |     modules[id] = [function (require, module) {
 74 |       module.exports = exports;
 75 |     }, {}];
 76 |   };
 77 | 
 78 |   var error;
 79 |   for (var i = 0; i < entry.length; i++) {
 80 |     try {
 81 |       newRequire(entry[i]);
 82 |     } catch (e) {
 83 |       // Save first error but execute all entries
 84 |       if (!error) {
 85 |         error = e;
 86 |       }
 87 |     }
 88 |   }
 89 | 
 90 |   if (entry.length) {
 91 |     // Expose entry point to Node, AMD or browser globals
 92 |     // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
 93 |     var mainExports = newRequire(entry[entry.length - 1]);
 94 | 
 95 |     // CommonJS
 96 |     if (typeof exports === "object" && typeof module !== "undefined") {
 97 |       module.exports = mainExports;
 98 | 
 99 |     // RequireJS
100 |     } else if (typeof define === "function" && define.amd) {
101 |      define(function () {
102 |        return mainExports;
103 |      });
104 | 
105 |     // <script>
106 |     } else if (globalName) {
107 |       this[globalName] = mainExports;
108 |     }
109 |   }
110 | 
111 |   // Override the current require with this new one
112 |   parcelRequire = newRequire;
113 | 
114 |   if (error) {
115 |     // throw error from earlier, _after updating parcelRequire_
116 |     throw error;
117 |   }
118 | 
119 |   return newRequire;
120 | })({"css/demo3.css":[function(require,module,exports) {
121 | var reloadCSS = require('_css_loader');
122 | 
123 | module.hot.dispose(reloadCSS);
124 | module.hot.accept(reloadCSS);
125 | },{"_css_loader":"../node_modules/parcel/src/builtins/css-loader.js"}],"../node_modules/parcel/src/builtins/hmr-runtime.js":[function(require,module,exports) {
126 | var global = arguments[3];
127 | var OVERLAY_ID = '__parcel__error__overlay__';
128 | var OldModule = module.bundle.Module;
129 | 
130 | function Module(moduleName) {
131 |   OldModule.call(this, moduleName);
132 |   this.hot = {
133 |     data: module.bundle.hotData,
134 |     _acceptCallbacks: [],
135 |     _disposeCallbacks: [],
136 |     accept: function (fn) {
137 |       this._acceptCallbacks.push(fn || function () {});
138 |     },
139 |     dispose: function (fn) {
140 |       this._disposeCallbacks.push(fn);
141 |     }
142 |   };
143 |   module.bundle.hotData = null;
144 | }
145 | 
146 | module.bundle.Module = Module;
147 | var checkedAssets, assetsToAccept;
148 | var parent = module.bundle.parent;
149 | 
150 | if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
151 |   var hostname = "" || location.hostname;
152 |   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
153 |   var ws = new WebSocket(protocol + '://' + hostname + ':' + "54058" + '/');
154 | 
155 |   ws.onmessage = function (event) {
156 |     checkedAssets = {};
157 |     assetsToAccept = [];
158 |     var data = JSON.parse(event.data);
159 | 
160 |     if (data.type === 'update') {
161 |       var handled = false;
162 |       data.assets.forEach(function (asset) {
163 |         if (!asset.isNew) {
164 |           var didAccept = hmrAcceptCheck(global.parcelRequire, asset.id);
165 | 
166 |           if (didAccept) {
167 |             handled = true;
168 |           }
169 |         }
170 |       }); // Enable HMR for CSS by default.
171 | 
172 |       handled = handled || data.assets.every(function (asset) {
173 |         return asset.type === 'css' && asset.generated.js;
174 |       });
175 | 
176 |       if (handled) {
177 |         console.clear();
178 |         data.assets.forEach(function (asset) {
179 |           hmrApply(global.parcelRequire, asset);
180 |         });
181 |         assetsToAccept.forEach(function (v) {
182 |           hmrAcceptRun(v[0], v[1]);
183 |         });
184 |       } else {
185 |         window.location.reload();
186 |       }
187 |     }
188 | 
189 |     if (data.type === 'reload') {
190 |       ws.close();
191 | 
192 |       ws.onclose = function () {
193 |         location.reload();
194 |       };
195 |     }
196 | 
197 |     if (data.type === 'error-resolved') {
198 |       console.log('[parcel] ✨ Error resolved');
199 |       removeErrorOverlay();
200 |     }
201 | 
202 |     if (data.type === 'error') {
203 |       console.error('[parcel] 🚨  ' + data.error.message + '\n' + data.error.stack);
204 |       removeErrorOverlay();
205 |       var overlay = createErrorOverlay(data);
206 |       document.body.appendChild(overlay);
207 |     }
208 |   };
209 | }
210 | 
211 | function removeErrorOverlay() {
212 |   var overlay = document.getElementById(OVERLAY_ID);
213 | 
214 |   if (overlay) {
215 |     overlay.remove();
216 |   }
217 | }
218 | 
219 | function createErrorOverlay(data) {
220 |   var overlay = document.createElement('div');
221 |   overlay.id = OVERLAY_ID; // html encode message and stack trace
222 | 
223 |   var message = document.createElement('div');
224 |   var stackTrace = document.createElement('pre');
225 |   message.innerText = data.error.message;
226 |   stackTrace.innerText = data.error.stack;
227 |   overlay.innerHTML = '<div style="background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;">' + '<span style="background: red; padding: 2px 4px; border-radius: 2px;">ERROR</span>' + '<span style="top: 2px; margin-left: 5px; position: relative;">🚨</span>' + '<div style="font-size: 18px; font-weight: bold; margin-top: 20px;">' + message.innerHTML + '</div>' + '<pre>' + stackTrace.innerHTML + '</pre>' + '</div>';
228 |   return overlay;
229 | }
230 | 
231 | function getParents(bundle, id) {
232 |   var modules = bundle.modules;
233 | 
234 |   if (!modules) {
235 |     return [];
236 |   }
237 | 
238 |   var parents = [];
239 |   var k, d, dep;
240 | 
241 |   for (k in modules) {
242 |     for (d in modules[k][1]) {
243 |       dep = modules[k][1][d];
244 | 
245 |       if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) {
246 |         parents.push(k);
247 |       }
248 |     }
249 |   }
250 | 
251 |   if (bundle.parent) {
252 |     parents = parents.concat(getParents(bundle.parent, id));
253 |   }
254 | 
255 |   return parents;
256 | }
257 | 
258 | function hmrApply(bundle, asset) {
259 |   var modules = bundle.modules;
260 | 
261 |   if (!modules) {
262 |     return;
263 |   }
264 | 
265 |   if (modules[asset.id] || !bundle.parent) {
266 |     var fn = new Function('require', 'module', 'exports', asset.generated.js);
267 |     asset.isNew = !modules[asset.id];
268 |     modules[asset.id] = [fn, asset.deps];
269 |   } else if (bundle.parent) {
270 |     hmrApply(bundle.parent, asset);
271 |   }
272 | }
273 | 
274 | function hmrAcceptCheck(bundle, id) {
275 |   var modules = bundle.modules;
276 | 
277 |   if (!modules) {
278 |     return;
279 |   }
280 | 
281 |   if (!modules[id] && bundle.parent) {
282 |     return hmrAcceptCheck(bundle.parent, id);
283 |   }
284 | 
285 |   if (checkedAssets[id]) {
286 |     return;
287 |   }
288 | 
289 |   checkedAssets[id] = true;
290 |   var cached = bundle.cache[id];
291 |   assetsToAccept.push([bundle, id]);
292 | 
293 |   if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
294 |     return true;
295 |   }
296 | 
297 |   return getParents(global.parcelRequire, id).some(function (id) {
298 |     return hmrAcceptCheck(global.parcelRequire, id);
299 |   });
300 | }
301 | 
302 | function hmrAcceptRun(bundle, id) {
303 |   var cached = bundle.cache[id];
304 |   bundle.hotData = {};
305 | 
306 |   if (cached) {
307 |     cached.hot.data = bundle.hotData;
308 |   }
309 | 
310 |   if (cached && cached.hot && cached.hot._disposeCallbacks.length) {
311 |     cached.hot._disposeCallbacks.forEach(function (cb) {
312 |       cb(bundle.hotData);
313 |     });
314 |   }
315 | 
316 |   delete bundle.cache[id];
317 |   bundle(id);
318 |   cached = bundle.cache[id];
319 | 
320 |   if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
321 |     cached.hot._acceptCallbacks.forEach(function (cb) {
322 |       cb();
323 |     });
324 | 
325 |     return true;
326 |   }
327 | }
328 | },{}],"../node_modules/parcel/src/builtins/bundle-url.js":[function(require,module,exports) {
329 | var bundleURL = null;
330 | 
331 | function getBundleURLCached() {
332 |   if (!bundleURL) {
333 |     bundleURL = getBundleURL();
334 |   }
335 | 
336 |   return bundleURL;
337 | }
338 | 
339 | function getBundleURL() {
340 |   // Attempt to find the URL of the current script and use that as the base URL
341 |   try {
342 |     throw new Error();
343 |   } catch (err) {
344 |     var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\/\/[^)\n]+/g);
345 | 
346 |     if (matches) {
347 |       return getBaseURL(matches[0]);
348 |     }
349 |   }
350 | 
351 |   return '/';
352 | }
353 | 
354 | function getBaseURL(url) {
355 |   return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\/\/.+)\/[^/]+$/, '$1') + '/';
356 | }
357 | 
358 | exports.getBundleURL = getBundleURLCached;
359 | exports.getBaseURL = getBaseURL;
360 | },{}],"../node_modules/parcel/src/builtins/bundle-loader.js":[function(require,module,exports) {
361 | var getBundleURL = require('./bundle-url').getBundleURL;
362 | 
363 | function loadBundlesLazy(bundles) {
364 |   if (!Array.isArray(bundles)) {
365 |     bundles = [bundles];
366 |   }
367 | 
368 |   var id = bundles[bundles.length - 1];
369 | 
370 |   try {
371 |     return Promise.resolve(require(id));
372 |   } catch (err) {
373 |     if (err.code === 'MODULE_NOT_FOUND') {
374 |       return new LazyPromise(function (resolve, reject) {
375 |         loadBundles(bundles.slice(0, -1)).then(function () {
376 |           return require(id);
377 |         }).then(resolve, reject);
378 |       });
379 |     }
380 | 
381 |     throw err;
382 |   }
383 | }
384 | 
385 | function loadBundles(bundles) {
386 |   return Promise.all(bundles.map(loadBundle));
387 | }
388 | 
389 | var bundleLoaders = {};
390 | 
391 | function registerBundleLoader(type, loader) {
392 |   bundleLoaders[type] = loader;
393 | }
394 | 
395 | module.exports = exports = loadBundlesLazy;
396 | exports.load = loadBundles;
397 | exports.register = registerBundleLoader;
398 | var bundles = {};
399 | 
400 | function loadBundle(bundle) {
401 |   var id;
402 | 
403 |   if (Array.isArray(bundle)) {
404 |     id = bundle[1];
405 |     bundle = bundle[0];
406 |   }
407 | 
408 |   if (bundles[bundle]) {
409 |     return bundles[bundle];
410 |   }
411 | 
412 |   var type = (bundle.substring(bundle.lastIndexOf('.') + 1, bundle.length) || bundle).toLowerCase();
413 |   var bundleLoader = bundleLoaders[type];
414 | 
415 |   if (bundleLoader) {
416 |     return bundles[bundle] = bundleLoader(getBundleURL() + bundle).then(function (resolved) {
417 |       if (resolved) {
418 |         module.bundle.register(id, resolved);
419 |       }
420 | 
421 |       return resolved;
422 |     }).catch(function (e) {
423 |       delete bundles[bundle];
424 |       throw e;
425 |     });
426 |   }
427 | }
428 | 
429 | function LazyPromise(executor) {
430 |   this.executor = executor;
431 |   this.promise = null;
432 | }
433 | 
434 | LazyPromise.prototype.then = function (onSuccess, onError) {
435 |   if (this.promise === null) this.promise = new Promise(this.executor);
436 |   return this.promise.then(onSuccess, onError);
437 | };
438 | 
439 | LazyPromise.prototype.catch = function (onError) {
440 |   if (this.promise === null) this.promise = new Promise(this.executor);
441 |   return this.promise.catch(onError);
442 | };
443 | },{"./bundle-url":"../node_modules/parcel/src/builtins/bundle-url.js"}],"../node_modules/parcel/src/builtins/loaders/browser/js-loader.js":[function(require,module,exports) {
444 | module.exports = function loadJSBundle(bundle) {
445 |   return new Promise(function (resolve, reject) {
446 |     var script = document.createElement('script');
447 |     script.async = true;
448 |     script.type = 'text/javascript';
449 |     script.charset = 'utf-8';
450 |     script.src = bundle;
451 | 
452 |     script.onerror = function (e) {
453 |       script.onerror = script.onload = null;
454 |       reject(e);
455 |     };
456 | 
457 |     script.onload = function () {
458 |       script.onerror = script.onload = null;
459 |       resolve();
460 |     };
461 | 
462 |     document.getElementsByTagName('head')[0].appendChild(script);
463 |   });
464 | };
465 | },{}],0:[function(require,module,exports) {
466 | var b=require("../node_modules/parcel/src/builtins/bundle-loader.js");b.register("js",require("../node_modules/parcel/src/builtins/loaders/browser/js-loader.js"));b.load([]);
467 | },{}]},{},["../node_modules/parcel/src/builtins/hmr-runtime.js",0], null)
468 | //# sourceMappingURL=/demo3.f904c581.js.map


--------------------------------------------------------------------------------
/dist/demo2.06b37b5f.js:
--------------------------------------------------------------------------------
  1 | // modules are defined as an array
  2 | // [ module function, map of requires ]
  3 | //
  4 | // map of requires is short require name -> numeric require
  5 | //
  6 | // anything defined in a previous bundle is accessed via the
  7 | // orig method which is the require for previous bundles
  8 | parcelRequire = (function (modules, cache, entry, globalName) {
  9 |   // Save the require from previous bundle to this closure if any
 10 |   var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
 11 |   var nodeRequire = typeof require === 'function' && require;
 12 | 
 13 |   function newRequire(name, jumped) {
 14 |     if (!cache[name]) {
 15 |       if (!modules[name]) {
 16 |         // if we cannot find the module within our internal map or
 17 |         // cache jump to the current global require ie. the last bundle
 18 |         // that was added to the page.
 19 |         var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
 20 |         if (!jumped && currentRequire) {
 21 |           return currentRequire(name, true);
 22 |         }
 23 | 
 24 |         // If there are other bundles on this page the require from the
 25 |         // previous one is saved to 'previousRequire'. Repeat this as
 26 |         // many times as there are bundles until the module is found or
 27 |         // we exhaust the require chain.
 28 |         if (previousRequire) {
 29 |           return previousRequire(name, true);
 30 |         }
 31 | 
 32 |         // Try the node require function if it exists.
 33 |         if (nodeRequire && typeof name === 'string') {
 34 |           return nodeRequire(name);
 35 |         }
 36 | 
 37 |         var err = new Error('Cannot find module \'' + name + '\'');
 38 |         err.code = 'MODULE_NOT_FOUND';
 39 |         throw err;
 40 |       }
 41 | 
 42 |       localRequire.resolve = resolve;
 43 |       localRequire.cache = {};
 44 | 
 45 |       var module = cache[name] = new newRequire.Module(name);
 46 | 
 47 |       modules[name][0].call(module.exports, localRequire, module, module.exports, this);
 48 |     }
 49 | 
 50 |     return cache[name].exports;
 51 | 
 52 |     function localRequire(x){
 53 |       return newRequire(localRequire.resolve(x));
 54 |     }
 55 | 
 56 |     function resolve(x){
 57 |       return modules[name][1][x] || x;
 58 |     }
 59 |   }
 60 | 
 61 |   function Module(moduleName) {
 62 |     this.id = moduleName;
 63 |     this.bundle = newRequire;
 64 |     this.exports = {};
 65 |   }
 66 | 
 67 |   newRequire.isParcelRequire = true;
 68 |   newRequire.Module = Module;
 69 |   newRequire.modules = modules;
 70 |   newRequire.cache = cache;
 71 |   newRequire.parent = previousRequire;
 72 |   newRequire.register = function (id, exports) {
 73 |     modules[id] = [function (require, module) {
 74 |       module.exports = exports;
 75 |     }, {}];
 76 |   };
 77 | 
 78 |   var error;
 79 |   for (var i = 0; i < entry.length; i++) {
 80 |     try {
 81 |       newRequire(entry[i]);
 82 |     } catch (e) {
 83 |       // Save first error but execute all entries
 84 |       if (!error) {
 85 |         error = e;
 86 |       }
 87 |     }
 88 |   }
 89 | 
 90 |   if (entry.length) {
 91 |     // Expose entry point to Node, AMD or browser globals
 92 |     // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
 93 |     var mainExports = newRequire(entry[entry.length - 1]);
 94 | 
 95 |     // CommonJS
 96 |     if (typeof exports === "object" && typeof module !== "undefined") {
 97 |       module.exports = mainExports;
 98 | 
 99 |     // RequireJS
100 |     } else if (typeof define === "function" && define.amd) {
101 |      define(function () {
102 |        return mainExports;
103 |      });
104 | 
105 |     // <script>
106 |     } else if (globalName) {
107 |       this[globalName] = mainExports;
108 |     }
109 |   }
110 | 
111 |   // Override the current require with this new one
112 |   parcelRequire = newRequire;
113 | 
114 |   if (error) {
115 |     // throw error from earlier, _after updating parcelRequire_
116 |     throw error;
117 |   }
118 | 
119 |   return newRequire;
120 | })({"css/demo2.css":[function(require,module,exports) {
121 | var reloadCSS = require('_css_loader');
122 | 
123 | module.hot.dispose(reloadCSS);
124 | module.hot.accept(reloadCSS);
125 | },{"./../img/1.jpg":[["1.dc197a9a.jpg","img/1.jpg"],"img/1.jpg"],"_css_loader":"../node_modules/parcel/src/builtins/css-loader.js"}],"../node_modules/parcel/src/builtins/hmr-runtime.js":[function(require,module,exports) {
126 | var global = arguments[3];
127 | var OVERLAY_ID = '__parcel__error__overlay__';
128 | var OldModule = module.bundle.Module;
129 | 
130 | function Module(moduleName) {
131 |   OldModule.call(this, moduleName);
132 |   this.hot = {
133 |     data: module.bundle.hotData,
134 |     _acceptCallbacks: [],
135 |     _disposeCallbacks: [],
136 |     accept: function (fn) {
137 |       this._acceptCallbacks.push(fn || function () {});
138 |     },
139 |     dispose: function (fn) {
140 |       this._disposeCallbacks.push(fn);
141 |     }
142 |   };
143 |   module.bundle.hotData = null;
144 | }
145 | 
146 | module.bundle.Module = Module;
147 | var checkedAssets, assetsToAccept;
148 | var parent = module.bundle.parent;
149 | 
150 | if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
151 |   var hostname = "" || location.hostname;
152 |   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
153 |   var ws = new WebSocket(protocol + '://' + hostname + ':' + "54058" + '/');
154 | 
155 |   ws.onmessage = function (event) {
156 |     checkedAssets = {};
157 |     assetsToAccept = [];
158 |     var data = JSON.parse(event.data);
159 | 
160 |     if (data.type === 'update') {
161 |       var handled = false;
162 |       data.assets.forEach(function (asset) {
163 |         if (!asset.isNew) {
164 |           var didAccept = hmrAcceptCheck(global.parcelRequire, asset.id);
165 | 
166 |           if (didAccept) {
167 |             handled = true;
168 |           }
169 |         }
170 |       }); // Enable HMR for CSS by default.
171 | 
172 |       handled = handled || data.assets.every(function (asset) {
173 |         return asset.type === 'css' && asset.generated.js;
174 |       });
175 | 
176 |       if (handled) {
177 |         console.clear();
178 |         data.assets.forEach(function (asset) {
179 |           hmrApply(global.parcelRequire, asset);
180 |         });
181 |         assetsToAccept.forEach(function (v) {
182 |           hmrAcceptRun(v[0], v[1]);
183 |         });
184 |       } else {
185 |         window.location.reload();
186 |       }
187 |     }
188 | 
189 |     if (data.type === 'reload') {
190 |       ws.close();
191 | 
192 |       ws.onclose = function () {
193 |         location.reload();
194 |       };
195 |     }
196 | 
197 |     if (data.type === 'error-resolved') {
198 |       console.log('[parcel] ✨ Error resolved');
199 |       removeErrorOverlay();
200 |     }
201 | 
202 |     if (data.type === 'error') {
203 |       console.error('[parcel] 🚨  ' + data.error.message + '\n' + data.error.stack);
204 |       removeErrorOverlay();
205 |       var overlay = createErrorOverlay(data);
206 |       document.body.appendChild(overlay);
207 |     }
208 |   };
209 | }
210 | 
211 | function removeErrorOverlay() {
212 |   var overlay = document.getElementById(OVERLAY_ID);
213 | 
214 |   if (overlay) {
215 |     overlay.remove();
216 |   }
217 | }
218 | 
219 | function createErrorOverlay(data) {
220 |   var overlay = document.createElement('div');
221 |   overlay.id = OVERLAY_ID; // html encode message and stack trace
222 | 
223 |   var message = document.createElement('div');
224 |   var stackTrace = document.createElement('pre');
225 |   message.innerText = data.error.message;
226 |   stackTrace.innerText = data.error.stack;
227 |   overlay.innerHTML = '<div style="background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;">' + '<span style="background: red; padding: 2px 4px; border-radius: 2px;">ERROR</span>' + '<span style="top: 2px; margin-left: 5px; position: relative;">🚨</span>' + '<div style="font-size: 18px; font-weight: bold; margin-top: 20px;">' + message.innerHTML + '</div>' + '<pre>' + stackTrace.innerHTML + '</pre>' + '</div>';
228 |   return overlay;
229 | }
230 | 
231 | function getParents(bundle, id) {
232 |   var modules = bundle.modules;
233 | 
234 |   if (!modules) {
235 |     return [];
236 |   }
237 | 
238 |   var parents = [];
239 |   var k, d, dep;
240 | 
241 |   for (k in modules) {
242 |     for (d in modules[k][1]) {
243 |       dep = modules[k][1][d];
244 | 
245 |       if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) {
246 |         parents.push(k);
247 |       }
248 |     }
249 |   }
250 | 
251 |   if (bundle.parent) {
252 |     parents = parents.concat(getParents(bundle.parent, id));
253 |   }
254 | 
255 |   return parents;
256 | }
257 | 
258 | function hmrApply(bundle, asset) {
259 |   var modules = bundle.modules;
260 | 
261 |   if (!modules) {
262 |     return;
263 |   }
264 | 
265 |   if (modules[asset.id] || !bundle.parent) {
266 |     var fn = new Function('require', 'module', 'exports', asset.generated.js);
267 |     asset.isNew = !modules[asset.id];
268 |     modules[asset.id] = [fn, asset.deps];
269 |   } else if (bundle.parent) {
270 |     hmrApply(bundle.parent, asset);
271 |   }
272 | }
273 | 
274 | function hmrAcceptCheck(bundle, id) {
275 |   var modules = bundle.modules;
276 | 
277 |   if (!modules) {
278 |     return;
279 |   }
280 | 
281 |   if (!modules[id] && bundle.parent) {
282 |     return hmrAcceptCheck(bundle.parent, id);
283 |   }
284 | 
285 |   if (checkedAssets[id]) {
286 |     return;
287 |   }
288 | 
289 |   checkedAssets[id] = true;
290 |   var cached = bundle.cache[id];
291 |   assetsToAccept.push([bundle, id]);
292 | 
293 |   if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
294 |     return true;
295 |   }
296 | 
297 |   return getParents(global.parcelRequire, id).some(function (id) {
298 |     return hmrAcceptCheck(global.parcelRequire, id);
299 |   });
300 | }
301 | 
302 | function hmrAcceptRun(bundle, id) {
303 |   var cached = bundle.cache[id];
304 |   bundle.hotData = {};
305 | 
306 |   if (cached) {
307 |     cached.hot.data = bundle.hotData;
308 |   }
309 | 
310 |   if (cached && cached.hot && cached.hot._disposeCallbacks.length) {
311 |     cached.hot._disposeCallbacks.forEach(function (cb) {
312 |       cb(bundle.hotData);
313 |     });
314 |   }
315 | 
316 |   delete bundle.cache[id];
317 |   bundle(id);
318 |   cached = bundle.cache[id];
319 | 
320 |   if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
321 |     cached.hot._acceptCallbacks.forEach(function (cb) {
322 |       cb();
323 |     });
324 | 
325 |     return true;
326 |   }
327 | }
328 | },{}],"../node_modules/parcel/src/builtins/bundle-url.js":[function(require,module,exports) {
329 | var bundleURL = null;
330 | 
331 | function getBundleURLCached() {
332 |   if (!bundleURL) {
333 |     bundleURL = getBundleURL();
334 |   }
335 | 
336 |   return bundleURL;
337 | }
338 | 
339 | function getBundleURL() {
340 |   // Attempt to find the URL of the current script and use that as the base URL
341 |   try {
342 |     throw new Error();
343 |   } catch (err) {
344 |     var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\/\/[^)\n]+/g);
345 | 
346 |     if (matches) {
347 |       return getBaseURL(matches[0]);
348 |     }
349 |   }
350 | 
351 |   return '/';
352 | }
353 | 
354 | function getBaseURL(url) {
355 |   return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\/\/.+)\/[^/]+$/, '$1') + '/';
356 | }
357 | 
358 | exports.getBundleURL = getBundleURLCached;
359 | exports.getBaseURL = getBaseURL;
360 | },{}],"../node_modules/parcel/src/builtins/bundle-loader.js":[function(require,module,exports) {
361 | var getBundleURL = require('./bundle-url').getBundleURL;
362 | 
363 | function loadBundlesLazy(bundles) {
364 |   if (!Array.isArray(bundles)) {
365 |     bundles = [bundles];
366 |   }
367 | 
368 |   var id = bundles[bundles.length - 1];
369 | 
370 |   try {
371 |     return Promise.resolve(require(id));
372 |   } catch (err) {
373 |     if (err.code === 'MODULE_NOT_FOUND') {
374 |       return new LazyPromise(function (resolve, reject) {
375 |         loadBundles(bundles.slice(0, -1)).then(function () {
376 |           return require(id);
377 |         }).then(resolve, reject);
378 |       });
379 |     }
380 | 
381 |     throw err;
382 |   }
383 | }
384 | 
385 | function loadBundles(bundles) {
386 |   return Promise.all(bundles.map(loadBundle));
387 | }
388 | 
389 | var bundleLoaders = {};
390 | 
391 | function registerBundleLoader(type, loader) {
392 |   bundleLoaders[type] = loader;
393 | }
394 | 
395 | module.exports = exports = loadBundlesLazy;
396 | exports.load = loadBundles;
397 | exports.register = registerBundleLoader;
398 | var bundles = {};
399 | 
400 | function loadBundle(bundle) {
401 |   var id;
402 | 
403 |   if (Array.isArray(bundle)) {
404 |     id = bundle[1];
405 |     bundle = bundle[0];
406 |   }
407 | 
408 |   if (bundles[bundle]) {
409 |     return bundles[bundle];
410 |   }
411 | 
412 |   var type = (bundle.substring(bundle.lastIndexOf('.') + 1, bundle.length) || bundle).toLowerCase();
413 |   var bundleLoader = bundleLoaders[type];
414 | 
415 |   if (bundleLoader) {
416 |     return bundles[bundle] = bundleLoader(getBundleURL() + bundle).then(function (resolved) {
417 |       if (resolved) {
418 |         module.bundle.register(id, resolved);
419 |       }
420 | 
421 |       return resolved;
422 |     }).catch(function (e) {
423 |       delete bundles[bundle];
424 |       throw e;
425 |     });
426 |   }
427 | }
428 | 
429 | function LazyPromise(executor) {
430 |   this.executor = executor;
431 |   this.promise = null;
432 | }
433 | 
434 | LazyPromise.prototype.then = function (onSuccess, onError) {
435 |   if (this.promise === null) this.promise = new Promise(this.executor);
436 |   return this.promise.then(onSuccess, onError);
437 | };
438 | 
439 | LazyPromise.prototype.catch = function (onError) {
440 |   if (this.promise === null) this.promise = new Promise(this.executor);
441 |   return this.promise.catch(onError);
442 | };
443 | },{"./bundle-url":"../node_modules/parcel/src/builtins/bundle-url.js"}],"../node_modules/parcel/src/builtins/loaders/browser/js-loader.js":[function(require,module,exports) {
444 | module.exports = function loadJSBundle(bundle) {
445 |   return new Promise(function (resolve, reject) {
446 |     var script = document.createElement('script');
447 |     script.async = true;
448 |     script.type = 'text/javascript';
449 |     script.charset = 'utf-8';
450 |     script.src = bundle;
451 | 
452 |     script.onerror = function (e) {
453 |       script.onerror = script.onload = null;
454 |       reject(e);
455 |     };
456 | 
457 |     script.onload = function () {
458 |       script.onerror = script.onload = null;
459 |       resolve();
460 |     };
461 | 
462 |     document.getElementsByTagName('head')[0].appendChild(script);
463 |   });
464 | };
465 | },{}],0:[function(require,module,exports) {
466 | var b=require("../node_modules/parcel/src/builtins/bundle-loader.js");b.register("js",require("../node_modules/parcel/src/builtins/loaders/browser/js-loader.js"));b.load([]);
467 | },{}]},{},["../node_modules/parcel/src/builtins/hmr-runtime.js",0], null)
468 | //# sourceMappingURL=/demo2.06b37b5f.js.map


--------------------------------------------------------------------------------
/dist/demo4.7fb5a017.js:
--------------------------------------------------------------------------------
  1 | // modules are defined as an array
  2 | // [ module function, map of requires ]
  3 | //
  4 | // map of requires is short require name -> numeric require
  5 | //
  6 | // anything defined in a previous bundle is accessed via the
  7 | // orig method which is the require for previous bundles
  8 | parcelRequire = (function (modules, cache, entry, globalName) {
  9 |   // Save the require from previous bundle to this closure if any
 10 |   var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
 11 |   var nodeRequire = typeof require === 'function' && require;
 12 | 
 13 |   function newRequire(name, jumped) {
 14 |     if (!cache[name]) {
 15 |       if (!modules[name]) {
 16 |         // if we cannot find the module within our internal map or
 17 |         // cache jump to the current global require ie. the last bundle
 18 |         // that was added to the page.
 19 |         var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
 20 |         if (!jumped && currentRequire) {
 21 |           return currentRequire(name, true);
 22 |         }
 23 | 
 24 |         // If there are other bundles on this page the require from the
 25 |         // previous one is saved to 'previousRequire'. Repeat this as
 26 |         // many times as there are bundles until the module is found or
 27 |         // we exhaust the require chain.
 28 |         if (previousRequire) {
 29 |           return previousRequire(name, true);
 30 |         }
 31 | 
 32 |         // Try the node require function if it exists.
 33 |         if (nodeRequire && typeof name === 'string') {
 34 |           return nodeRequire(name);
 35 |         }
 36 | 
 37 |         var err = new Error('Cannot find module \'' + name + '\'');
 38 |         err.code = 'MODULE_NOT_FOUND';
 39 |         throw err;
 40 |       }
 41 | 
 42 |       localRequire.resolve = resolve;
 43 |       localRequire.cache = {};
 44 | 
 45 |       var module = cache[name] = new newRequire.Module(name);
 46 | 
 47 |       modules[name][0].call(module.exports, localRequire, module, module.exports, this);
 48 |     }
 49 | 
 50 |     return cache[name].exports;
 51 | 
 52 |     function localRequire(x){
 53 |       return newRequire(localRequire.resolve(x));
 54 |     }
 55 | 
 56 |     function resolve(x){
 57 |       return modules[name][1][x] || x;
 58 |     }
 59 |   }
 60 | 
 61 |   function Module(moduleName) {
 62 |     this.id = moduleName;
 63 |     this.bundle = newRequire;
 64 |     this.exports = {};
 65 |   }
 66 | 
 67 |   newRequire.isParcelRequire = true;
 68 |   newRequire.Module = Module;
 69 |   newRequire.modules = modules;
 70 |   newRequire.cache = cache;
 71 |   newRequire.parent = previousRequire;
 72 |   newRequire.register = function (id, exports) {
 73 |     modules[id] = [function (require, module) {
 74 |       module.exports = exports;
 75 |     }, {}];
 76 |   };
 77 | 
 78 |   var error;
 79 |   for (var i = 0; i < entry.length; i++) {
 80 |     try {
 81 |       newRequire(entry[i]);
 82 |     } catch (e) {
 83 |       // Save first error but execute all entries
 84 |       if (!error) {
 85 |         error = e;
 86 |       }
 87 |     }
 88 |   }
 89 | 
 90 |   if (entry.length) {
 91 |     // Expose entry point to Node, AMD or browser globals
 92 |     // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
 93 |     var mainExports = newRequire(entry[entry.length - 1]);
 94 | 
 95 |     // CommonJS
 96 |     if (typeof exports === "object" && typeof module !== "undefined") {
 97 |       module.exports = mainExports;
 98 | 
 99 |     // RequireJS
100 |     } else if (typeof define === "function" && define.amd) {
101 |      define(function () {
102 |        return mainExports;
103 |      });
104 | 
105 |     // <script>
106 |     } else if (globalName) {
107 |       this[globalName] = mainExports;
108 |     }
109 |   }
110 | 
111 |   // Override the current require with this new one
112 |   parcelRequire = newRequire;
113 | 
114 |   if (error) {
115 |     // throw error from earlier, _after updating parcelRequire_
116 |     throw error;
117 |   }
118 | 
119 |   return newRequire;
120 | })({"css/demo4.css":[function(require,module,exports) {
121 | var reloadCSS = require('_css_loader');
122 | 
123 | module.hot.dispose(reloadCSS);
124 | module.hot.accept(reloadCSS);
125 | },{"./../img/2.jpg":[["2.3ca6bb44.jpg","img/2.jpg"],"img/2.jpg"],"_css_loader":"../node_modules/parcel/src/builtins/css-loader.js"}],"../node_modules/parcel/src/builtins/hmr-runtime.js":[function(require,module,exports) {
126 | var global = arguments[3];
127 | var OVERLAY_ID = '__parcel__error__overlay__';
128 | var OldModule = module.bundle.Module;
129 | 
130 | function Module(moduleName) {
131 |   OldModule.call(this, moduleName);
132 |   this.hot = {
133 |     data: module.bundle.hotData,
134 |     _acceptCallbacks: [],
135 |     _disposeCallbacks: [],
136 |     accept: function (fn) {
137 |       this._acceptCallbacks.push(fn || function () {});
138 |     },
139 |     dispose: function (fn) {
140 |       this._disposeCallbacks.push(fn);
141 |     }
142 |   };
143 |   module.bundle.hotData = null;
144 | }
145 | 
146 | module.bundle.Module = Module;
147 | var checkedAssets, assetsToAccept;
148 | var parent = module.bundle.parent;
149 | 
150 | if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
151 |   var hostname = "" || location.hostname;
152 |   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
153 |   var ws = new WebSocket(protocol + '://' + hostname + ':' + "54058" + '/');
154 | 
155 |   ws.onmessage = function (event) {
156 |     checkedAssets = {};
157 |     assetsToAccept = [];
158 |     var data = JSON.parse(event.data);
159 | 
160 |     if (data.type === 'update') {
161 |       var handled = false;
162 |       data.assets.forEach(function (asset) {
163 |         if (!asset.isNew) {
164 |           var didAccept = hmrAcceptCheck(global.parcelRequire, asset.id);
165 | 
166 |           if (didAccept) {
167 |             handled = true;
168 |           }
169 |         }
170 |       }); // Enable HMR for CSS by default.
171 | 
172 |       handled = handled || data.assets.every(function (asset) {
173 |         return asset.type === 'css' && asset.generated.js;
174 |       });
175 | 
176 |       if (handled) {
177 |         console.clear();
178 |         data.assets.forEach(function (asset) {
179 |           hmrApply(global.parcelRequire, asset);
180 |         });
181 |         assetsToAccept.forEach(function (v) {
182 |           hmrAcceptRun(v[0], v[1]);
183 |         });
184 |       } else {
185 |         window.location.reload();
186 |       }
187 |     }
188 | 
189 |     if (data.type === 'reload') {
190 |       ws.close();
191 | 
192 |       ws.onclose = function () {
193 |         location.reload();
194 |       };
195 |     }
196 | 
197 |     if (data.type === 'error-resolved') {
198 |       console.log('[parcel] ✨ Error resolved');
199 |       removeErrorOverlay();
200 |     }
201 | 
202 |     if (data.type === 'error') {
203 |       console.error('[parcel] 🚨  ' + data.error.message + '\n' + data.error.stack);
204 |       removeErrorOverlay();
205 |       var overlay = createErrorOverlay(data);
206 |       document.body.appendChild(overlay);
207 |     }
208 |   };
209 | }
210 | 
211 | function removeErrorOverlay() {
212 |   var overlay = document.getElementById(OVERLAY_ID);
213 | 
214 |   if (overlay) {
215 |     overlay.remove();
216 |   }
217 | }
218 | 
219 | function createErrorOverlay(data) {
220 |   var overlay = document.createElement('div');
221 |   overlay.id = OVERLAY_ID; // html encode message and stack trace
222 | 
223 |   var message = document.createElement('div');
224 |   var stackTrace = document.createElement('pre');
225 |   message.innerText = data.error.message;
226 |   stackTrace.innerText = data.error.stack;
227 |   overlay.innerHTML = '<div style="background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;">' + '<span style="background: red; padding: 2px 4px; border-radius: 2px;">ERROR</span>' + '<span style="top: 2px; margin-left: 5px; position: relative;">🚨</span>' + '<div style="font-size: 18px; font-weight: bold; margin-top: 20px;">' + message.innerHTML + '</div>' + '<pre>' + stackTrace.innerHTML + '</pre>' + '</div>';
228 |   return overlay;
229 | }
230 | 
231 | function getParents(bundle, id) {
232 |   var modules = bundle.modules;
233 | 
234 |   if (!modules) {
235 |     return [];
236 |   }
237 | 
238 |   var parents = [];
239 |   var k, d, dep;
240 | 
241 |   for (k in modules) {
242 |     for (d in modules[k][1]) {
243 |       dep = modules[k][1][d];
244 | 
245 |       if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) {
246 |         parents.push(k);
247 |       }
248 |     }
249 |   }
250 | 
251 |   if (bundle.parent) {
252 |     parents = parents.concat(getParents(bundle.parent, id));
253 |   }
254 | 
255 |   return parents;
256 | }
257 | 
258 | function hmrApply(bundle, asset) {
259 |   var modules = bundle.modules;
260 | 
261 |   if (!modules) {
262 |     return;
263 |   }
264 | 
265 |   if (modules[asset.id] || !bundle.parent) {
266 |     var fn = new Function('require', 'module', 'exports', asset.generated.js);
267 |     asset.isNew = !modules[asset.id];
268 |     modules[asset.id] = [fn, asset.deps];
269 |   } else if (bundle.parent) {
270 |     hmrApply(bundle.parent, asset);
271 |   }
272 | }
273 | 
274 | function hmrAcceptCheck(bundle, id) {
275 |   var modules = bundle.modules;
276 | 
277 |   if (!modules) {
278 |     return;
279 |   }
280 | 
281 |   if (!modules[id] && bundle.parent) {
282 |     return hmrAcceptCheck(bundle.parent, id);
283 |   }
284 | 
285 |   if (checkedAssets[id]) {
286 |     return;
287 |   }
288 | 
289 |   checkedAssets[id] = true;
290 |   var cached = bundle.cache[id];
291 |   assetsToAccept.push([bundle, id]);
292 | 
293 |   if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
294 |     return true;
295 |   }
296 | 
297 |   return getParents(global.parcelRequire, id).some(function (id) {
298 |     return hmrAcceptCheck(global.parcelRequire, id);
299 |   });
300 | }
301 | 
302 | function hmrAcceptRun(bundle, id) {
303 |   var cached = bundle.cache[id];
304 |   bundle.hotData = {};
305 | 
306 |   if (cached) {
307 |     cached.hot.data = bundle.hotData;
308 |   }
309 | 
310 |   if (cached && cached.hot && cached.hot._disposeCallbacks.length) {
311 |     cached.hot._disposeCallbacks.forEach(function (cb) {
312 |       cb(bundle.hotData);
313 |     });
314 |   }
315 | 
316 |   delete bundle.cache[id];
317 |   bundle(id);
318 |   cached = bundle.cache[id];
319 | 
320 |   if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
321 |     cached.hot._acceptCallbacks.forEach(function (cb) {
322 |       cb();
323 |     });
324 | 
325 |     return true;
326 |   }
327 | }
328 | },{}],"../node_modules/parcel/src/builtins/bundle-url.js":[function(require,module,exports) {
329 | var bundleURL = null;
330 | 
331 | function getBundleURLCached() {
332 |   if (!bundleURL) {
333 |     bundleURL = getBundleURL();
334 |   }
335 | 
336 |   return bundleURL;
337 | }
338 | 
339 | function getBundleURL() {
340 |   // Attempt to find the URL of the current script and use that as the base URL
341 |   try {
342 |     throw new Error();
343 |   } catch (err) {
344 |     var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\/\/[^)\n]+/g);
345 | 
346 |     if (matches) {
347 |       return getBaseURL(matches[0]);
348 |     }
349 |   }
350 | 
351 |   return '/';
352 | }
353 | 
354 | function getBaseURL(url) {
355 |   return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\/\/.+)\/[^/]+$/, '$1') + '/';
356 | }
357 | 
358 | exports.getBundleURL = getBundleURLCached;
359 | exports.getBaseURL = getBaseURL;
360 | },{}],"../node_modules/parcel/src/builtins/bundle-loader.js":[function(require,module,exports) {
361 | var getBundleURL = require('./bundle-url').getBundleURL;
362 | 
363 | function loadBundlesLazy(bundles) {
364 |   if (!Array.isArray(bundles)) {
365 |     bundles = [bundles];
366 |   }
367 | 
368 |   var id = bundles[bundles.length - 1];
369 | 
370 |   try {
371 |     return Promise.resolve(require(id));
372 |   } catch (err) {
373 |     if (err.code === 'MODULE_NOT_FOUND') {
374 |       return new LazyPromise(function (resolve, reject) {
375 |         loadBundles(bundles.slice(0, -1)).then(function () {
376 |           return require(id);
377 |         }).then(resolve, reject);
378 |       });
379 |     }
380 | 
381 |     throw err;
382 |   }
383 | }
384 | 
385 | function loadBundles(bundles) {
386 |   return Promise.all(bundles.map(loadBundle));
387 | }
388 | 
389 | var bundleLoaders = {};
390 | 
391 | function registerBundleLoader(type, loader) {
392 |   bundleLoaders[type] = loader;
393 | }
394 | 
395 | module.exports = exports = loadBundlesLazy;
396 | exports.load = loadBundles;
397 | exports.register = registerBundleLoader;
398 | var bundles = {};
399 | 
400 | function loadBundle(bundle) {
401 |   var id;
402 | 
403 |   if (Array.isArray(bundle)) {
404 |     id = bundle[1];
405 |     bundle = bundle[0];
406 |   }
407 | 
408 |   if (bundles[bundle]) {
409 |     return bundles[bundle];
410 |   }
411 | 
412 |   var type = (bundle.substring(bundle.lastIndexOf('.') + 1, bundle.length) || bundle).toLowerCase();
413 |   var bundleLoader = bundleLoaders[type];
414 | 
415 |   if (bundleLoader) {
416 |     return bundles[bundle] = bundleLoader(getBundleURL() + bundle).then(function (resolved) {
417 |       if (resolved) {
418 |         module.bundle.register(id, resolved);
419 |       }
420 | 
421 |       return resolved;
422 |     }).catch(function (e) {
423 |       delete bundles[bundle];
424 |       throw e;
425 |     });
426 |   }
427 | }
428 | 
429 | function LazyPromise(executor) {
430 |   this.executor = executor;
431 |   this.promise = null;
432 | }
433 | 
434 | LazyPromise.prototype.then = function (onSuccess, onError) {
435 |   if (this.promise === null) this.promise = new Promise(this.executor);
436 |   return this.promise.then(onSuccess, onError);
437 | };
438 | 
439 | LazyPromise.prototype.catch = function (onError) {
440 |   if (this.promise === null) this.promise = new Promise(this.executor);
441 |   return this.promise.catch(onError);
442 | };
443 | },{"./bundle-url":"../node_modules/parcel/src/builtins/bundle-url.js"}],"../node_modules/parcel/src/builtins/loaders/browser/js-loader.js":[function(require,module,exports) {
444 | module.exports = function loadJSBundle(bundle) {
445 |   return new Promise(function (resolve, reject) {
446 |     var script = document.createElement('script');
447 |     script.async = true;
448 |     script.type = 'text/javascript';
449 |     script.charset = 'utf-8';
450 |     script.src = bundle;
451 | 
452 |     script.onerror = function (e) {
453 |       script.onerror = script.onload = null;
454 |       reject(e);
455 |     };
456 | 
457 |     script.onload = function () {
458 |       script.onerror = script.onload = null;
459 |       resolve();
460 |     };
461 | 
462 |     document.getElementsByTagName('head')[0].appendChild(script);
463 |   });
464 | };
465 | },{}],0:[function(require,module,exports) {
466 | var b=require("../node_modules/parcel/src/builtins/bundle-loader.js");b.register("js",require("../node_modules/parcel/src/builtins/loaders/browser/js-loader.js"));b.load([]);
467 | },{}]},{},["../node_modules/parcel/src/builtins/hmr-runtime.js",0], null)
468 | //# sourceMappingURL=/demo4.7fb5a017.js.map


--------------------------------------------------------------------------------
/dist/demo1.ea7e4db3.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../node_modules/parcel/src/builtins/hmr-runtime.js","../node_modules/parcel/src/builtins/bundle-url.js","../node_modules/parcel/src/builtins/bundle-loader.js","../node_modules/parcel/src/builtins/loaders/browser/js-loader.js"],"names":["OVERLAY_ID","OldModule","module","bundle","Module","moduleName","call","hot","data","hotData","_acceptCallbacks","_disposeCallbacks","accept","fn","push","dispose","checkedAssets","assetsToAccept","parent","isParcelRequire","WebSocket","hostname","location","protocol","ws","onmessage","event","JSON","parse","type","handled","assets","forEach","asset","isNew","didAccept","hmrAcceptCheck","global","parcelRequire","id","every","generated","js","console","clear","hmrApply","v","hmrAcceptRun","window","reload","close","onclose","log","removeErrorOverlay","error","message","stack","overlay","createErrorOverlay","document","body","appendChild","getElementById","remove","createElement","stackTrace","innerText","innerHTML","getParents","modules","parents","k","d","dep","Array","isArray","length","concat","Function","deps","cached","cache","some","cb","bundleURL","getBundleURLCached","getBundleURL","Error","err","matches","match","getBaseURL","url","replace","exports","require","loadBundlesLazy","bundles","Promise","resolve","code","LazyPromise","reject","loadBundles","slice","then","all","map","loadBundle","bundleLoaders","registerBundleLoader","loader","load","register","substring","lastIndexOf","toLowerCase","bundleLoader","resolved","catch","e","executor","promise","prototype","onSuccess","onError","loadJSBundle","script","async","charset","src","onerror","onload","getElementsByTagName"],"mappings":"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","file":"demo1.ea7e4db3.js","sourceRoot":"../src","sourcesContent":["var OVERLAY_ID = '__parcel__error__overlay__';\n\nvar OldModule = module.bundle.Module;\n\nfunction Module(moduleName) {\n  OldModule.call(this, moduleName);\n  this.hot = {\n    data: module.bundle.hotData,\n    _acceptCallbacks: [],\n    _disposeCallbacks: [],\n    accept: function (fn) {\n      this._acceptCallbacks.push(fn || function () {});\n    },\n    dispose: function (fn) {\n      this._disposeCallbacks.push(fn);\n    }\n  };\n\n  module.bundle.hotData = null;\n}\n\nmodule.bundle.Module = Module;\nvar checkedAssets, assetsToAccept;\n\nvar parent = module.bundle.parent;\nif ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {\n  var hostname = process.env.HMR_HOSTNAME || location.hostname;\n  var protocol = location.protocol === 'https:' ? 'wss' : 'ws';\n  var ws = new WebSocket(protocol + '://' + hostname + ':' + process.env.HMR_PORT + '/');\n  ws.onmessage = function(event) {\n    checkedAssets = {};\n    assetsToAccept = [];\n\n    var data = JSON.parse(event.data);\n\n    if (data.type === 'update') {\n      var handled = false;\n      data.assets.forEach(function(asset) {\n        if (!asset.isNew) {\n          var didAccept = hmrAcceptCheck(global.parcelRequire, asset.id);\n          if (didAccept) {\n            handled = true;\n          }\n        }\n      });\n\n      // Enable HMR for CSS by default.\n      handled = handled || data.assets.every(function(asset) {\n        return asset.type === 'css' && asset.generated.js;\n      });\n\n      if (handled) {\n        console.clear();\n\n        data.assets.forEach(function (asset) {\n          hmrApply(global.parcelRequire, asset);\n        });\n\n        assetsToAccept.forEach(function (v) {\n          hmrAcceptRun(v[0], v[1]);\n        });\n      } else {\n        window.location.reload();\n      }\n    }\n\n    if (data.type === 'reload') {\n      ws.close();\n      ws.onclose = function () {\n        location.reload();\n      }\n    }\n\n    if (data.type === 'error-resolved') {\n      console.log('[parcel] ✨ Error resolved');\n\n      removeErrorOverlay();\n    }\n\n    if (data.type === 'error') {\n      console.error('[parcel] 🚨  ' + data.error.message + '\\n' + data.error.stack);\n\n      removeErrorOverlay();\n\n      var overlay = createErrorOverlay(data);\n      document.body.appendChild(overlay);\n    }\n  };\n}\n\nfunction removeErrorOverlay() {\n  var overlay = document.getElementById(OVERLAY_ID);\n  if (overlay) {\n    overlay.remove();\n  }\n}\n\nfunction createErrorOverlay(data) {\n  var overlay = document.createElement('div');\n  overlay.id = OVERLAY_ID;\n\n  // html encode message and stack trace\n  var message = document.createElement('div');\n  var stackTrace = document.createElement('pre');\n  message.innerText = data.error.message;\n  stackTrace.innerText = data.error.stack;\n\n  overlay.innerHTML = (\n    '<div style=\"background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;\">' +\n      '<span style=\"background: red; padding: 2px 4px; border-radius: 2px;\">ERROR</span>' +\n      '<span style=\"top: 2px; margin-left: 5px; position: relative;\">🚨</span>' +\n      '<div style=\"font-size: 18px; font-weight: bold; margin-top: 20px;\">' + message.innerHTML + '</div>' +\n      '<pre>' + stackTrace.innerHTML + '</pre>' +\n    '</div>'\n  );\n\n  return overlay;\n\n}\n\nfunction getParents(bundle, id) {\n  var modules = bundle.modules;\n  if (!modules) {\n    return [];\n  }\n\n  var parents = [];\n  var k, d, dep;\n\n  for (k in modules) {\n    for (d in modules[k][1]) {\n      dep = modules[k][1][d];\n      if (dep === id || (Array.isArray(dep) && dep[dep.length - 1] === id)) {\n        parents.push(k);\n      }\n    }\n  }\n\n  if (bundle.parent) {\n    parents = parents.concat(getParents(bundle.parent, id));\n  }\n\n  return parents;\n}\n\nfunction hmrApply(bundle, asset) {\n  var modules = bundle.modules;\n  if (!modules) {\n    return;\n  }\n\n  if (modules[asset.id] || !bundle.parent) {\n    var fn = new Function('require', 'module', 'exports', asset.generated.js);\n    asset.isNew = !modules[asset.id];\n    modules[asset.id] = [fn, asset.deps];\n  } else if (bundle.parent) {\n    hmrApply(bundle.parent, asset);\n  }\n}\n\nfunction hmrAcceptCheck(bundle, id) {\n  var modules = bundle.modules;\n  if (!modules) {\n    return;\n  }\n\n  if (!modules[id] && bundle.parent) {\n    return hmrAcceptCheck(bundle.parent, id);\n  }\n\n  if (checkedAssets[id]) {\n    return;\n  }\n  checkedAssets[id] = true;\n\n  var cached = bundle.cache[id];\n\n  assetsToAccept.push([bundle, id]);\n\n  if (cached && cached.hot && cached.hot._acceptCallbacks.length) {\n    return true;\n  }\n\n  return getParents(global.parcelRequire, id).some(function (id) {\n    return hmrAcceptCheck(global.parcelRequire, id)\n  });\n}\n\nfunction hmrAcceptRun(bundle, id) {\n  var cached = bundle.cache[id];\n  bundle.hotData = {};\n  if (cached) {\n    cached.hot.data = bundle.hotData;\n  }\n\n  if (cached && cached.hot && cached.hot._disposeCallbacks.length) {\n    cached.hot._disposeCallbacks.forEach(function (cb) {\n      cb(bundle.hotData);\n    });\n  }\n\n  delete bundle.cache[id];\n  bundle(id);\n\n  cached = bundle.cache[id];\n  if (cached && cached.hot && cached.hot._acceptCallbacks.length) {\n    cached.hot._acceptCallbacks.forEach(function (cb) {\n      cb();\n    });\n    return true;\n  }\n}\n","var bundleURL = null;\nfunction getBundleURLCached() {\n  if (!bundleURL) {\n    bundleURL = getBundleURL();\n  }\n\n  return bundleURL;\n}\n\nfunction getBundleURL() {\n  // Attempt to find the URL of the current script and use that as the base URL\n  try {\n    throw new Error;\n  } catch (err) {\n    var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\\/\\/[^)\\n]+/g);\n    if (matches) {\n      return getBaseURL(matches[0]);\n    }\n  }\n\n  return '/';\n}\n\nfunction getBaseURL(url) {\n  return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\\/\\/.+)\\/[^/]+$/, '$1') + '/';\n}\n\nexports.getBundleURL = getBundleURLCached;\nexports.getBaseURL = getBaseURL;\n","var getBundleURL = require('./bundle-url').getBundleURL;\n\nfunction loadBundlesLazy(bundles) {\n  if (!Array.isArray(bundles)) {\n    bundles = [bundles]\n  }\n\n  var id = bundles[bundles.length - 1];\n\n  try {\n    return Promise.resolve(require(id));\n  } catch (err) {\n    if (err.code === 'MODULE_NOT_FOUND') {\n      return new LazyPromise(function (resolve, reject) {\n        loadBundles(bundles.slice(0, -1))\n          .then(function () {\n            return require(id);\n          })\n          .then(resolve, reject);\n      });\n    }\n\n    throw err;\n  }\n}\n\nfunction loadBundles(bundles) {\n  return Promise.all(bundles.map(loadBundle));\n}\n\nvar bundleLoaders = {};\nfunction registerBundleLoader(type, loader) {\n  bundleLoaders[type] = loader;\n}\n\nmodule.exports = exports = loadBundlesLazy;\nexports.load = loadBundles;\nexports.register = registerBundleLoader;\n\nvar bundles = {};\nfunction loadBundle(bundle) {\n  var id;\n  if (Array.isArray(bundle)) {\n    id = bundle[1];\n    bundle = bundle[0];\n  }\n\n  if (bundles[bundle]) {\n    return bundles[bundle];\n  }\n\n  var type = (bundle.substring(bundle.lastIndexOf('.') + 1, bundle.length) || bundle).toLowerCase();\n  var bundleLoader = bundleLoaders[type];\n  if (bundleLoader) {\n    return bundles[bundle] = bundleLoader(getBundleURL() + bundle)\n      .then(function (resolved) {\n        if (resolved) {\n          module.bundle.register(id, resolved);\n        }\n\n        return resolved;\n      }).catch(function(e) {\n        delete bundles[bundle];\n        \n        throw e;\n      });\n  }\n}\n\nfunction LazyPromise(executor) {\n  this.executor = executor;\n  this.promise = null;\n}\n\nLazyPromise.prototype.then = function (onSuccess, onError) {\n  if (this.promise === null) this.promise = new Promise(this.executor)\n  return this.promise.then(onSuccess, onError)\n};\n\nLazyPromise.prototype.catch = function (onError) {\n  if (this.promise === null) this.promise = new Promise(this.executor)\n  return this.promise.catch(onError)\n};\n","module.exports = function loadJSBundle(bundle) {\n  return new Promise(function (resolve, reject) {\n    var script = document.createElement('script');\n    script.async = true;\n    script.type = 'text/javascript';\n    script.charset = 'utf-8';\n    script.src = bundle;\n    script.onerror = function (e) {\n      script.onerror = script.onload = null;\n      reject(e);\n    };\n\n    script.onload = function () {\n      script.onerror = script.onload = null;\n      resolve();\n    };\n\n    document.getElementsByTagName('head')[0].appendChild(script);\n  });\n};\n"]}


--------------------------------------------------------------------------------
/dist/demo2.06b37b5f.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../node_modules/parcel/src/builtins/hmr-runtime.js","../node_modules/parcel/src/builtins/bundle-url.js","../node_modules/parcel/src/builtins/bundle-loader.js","../node_modules/parcel/src/builtins/loaders/browser/js-loader.js"],"names":["OVERLAY_ID","OldModule","module","bundle","Module","moduleName","call","hot","data","hotData","_acceptCallbacks","_disposeCallbacks","accept","fn","push","dispose","checkedAssets","assetsToAccept","parent","isParcelRequire","WebSocket","hostname","location","protocol","ws","onmessage","event","JSON","parse","type","handled","assets","forEach","asset","isNew","didAccept","hmrAcceptCheck","global","parcelRequire","id","every","generated","js","console","clear","hmrApply","v","hmrAcceptRun","window","reload","close","onclose","log","removeErrorOverlay","error","message","stack","overlay","createErrorOverlay","document","body","appendChild","getElementById","remove","createElement","stackTrace","innerText","innerHTML","getParents","modules","parents","k","d","dep","Array","isArray","length","concat","Function","deps","cached","cache","some","cb","bundleURL","getBundleURLCached","getBundleURL","Error","err","matches","match","getBaseURL","url","replace","exports","require","loadBundlesLazy","bundles","Promise","resolve","code","LazyPromise","reject","loadBundles","slice","then","all","map","loadBundle","bundleLoaders","registerBundleLoader","loader","load","register","substring","lastIndexOf","toLowerCase","bundleLoader","resolved","catch","e","executor","promise","prototype","onSuccess","onError","loadJSBundle","script","async","charset","src","onerror","onload","getElementsByTagName"],"mappings":"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","file":"demo2.06b37b5f.js","sourceRoot":"../src","sourcesContent":["var OVERLAY_ID = '__parcel__error__overlay__';\n\nvar OldModule = module.bundle.Module;\n\nfunction Module(moduleName) {\n  OldModule.call(this, moduleName);\n  this.hot = {\n    data: module.bundle.hotData,\n    _acceptCallbacks: [],\n    _disposeCallbacks: [],\n    accept: function (fn) {\n      this._acceptCallbacks.push(fn || function () {});\n    },\n    dispose: function (fn) {\n      this._disposeCallbacks.push(fn);\n    }\n  };\n\n  module.bundle.hotData = null;\n}\n\nmodule.bundle.Module = Module;\nvar checkedAssets, assetsToAccept;\n\nvar parent = module.bundle.parent;\nif ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {\n  var hostname = process.env.HMR_HOSTNAME || location.hostname;\n  var protocol = location.protocol === 'https:' ? 'wss' : 'ws';\n  var ws = new WebSocket(protocol + '://' + hostname + ':' + process.env.HMR_PORT + '/');\n  ws.onmessage = function(event) {\n    checkedAssets = {};\n    assetsToAccept = [];\n\n    var data = JSON.parse(event.data);\n\n    if (data.type === 'update') {\n      var handled = false;\n      data.assets.forEach(function(asset) {\n        if (!asset.isNew) {\n          var didAccept = hmrAcceptCheck(global.parcelRequire, asset.id);\n          if (didAccept) {\n            handled = true;\n          }\n        }\n      });\n\n      // Enable HMR for CSS by default.\n      handled = handled || data.assets.every(function(asset) {\n        return asset.type === 'css' && asset.generated.js;\n      });\n\n      if (handled) {\n        console.clear();\n\n        data.assets.forEach(function (asset) {\n          hmrApply(global.parcelRequire, asset);\n        });\n\n        assetsToAccept.forEach(function (v) {\n          hmrAcceptRun(v[0], v[1]);\n        });\n      } else {\n        window.location.reload();\n      }\n    }\n\n    if (data.type === 'reload') {\n      ws.close();\n      ws.onclose = function () {\n        location.reload();\n      }\n    }\n\n    if (data.type === 'error-resolved') {\n      console.log('[parcel] ✨ Error resolved');\n\n      removeErrorOverlay();\n    }\n\n    if (data.type === 'error') {\n      console.error('[parcel] 🚨  ' + data.error.message + '\\n' + data.error.stack);\n\n      removeErrorOverlay();\n\n      var overlay = createErrorOverlay(data);\n      document.body.appendChild(overlay);\n    }\n  };\n}\n\nfunction removeErrorOverlay() {\n  var overlay = document.getElementById(OVERLAY_ID);\n  if (overlay) {\n    overlay.remove();\n  }\n}\n\nfunction createErrorOverlay(data) {\n  var overlay = document.createElement('div');\n  overlay.id = OVERLAY_ID;\n\n  // html encode message and stack trace\n  var message = document.createElement('div');\n  var stackTrace = document.createElement('pre');\n  message.innerText = data.error.message;\n  stackTrace.innerText = data.error.stack;\n\n  overlay.innerHTML = (\n    '<div style=\"background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;\">' +\n      '<span style=\"background: red; padding: 2px 4px; border-radius: 2px;\">ERROR</span>' +\n      '<span style=\"top: 2px; margin-left: 5px; position: relative;\">🚨</span>' +\n      '<div style=\"font-size: 18px; font-weight: bold; margin-top: 20px;\">' + message.innerHTML + '</div>' +\n      '<pre>' + stackTrace.innerHTML + '</pre>' +\n    '</div>'\n  );\n\n  return overlay;\n\n}\n\nfunction getParents(bundle, id) {\n  var modules = bundle.modules;\n  if (!modules) {\n    return [];\n  }\n\n  var parents = [];\n  var k, d, dep;\n\n  for (k in modules) {\n    for (d in modules[k][1]) {\n      dep = modules[k][1][d];\n      if (dep === id || (Array.isArray(dep) && dep[dep.length - 1] === id)) {\n        parents.push(k);\n      }\n    }\n  }\n\n  if (bundle.parent) {\n    parents = parents.concat(getParents(bundle.parent, id));\n  }\n\n  return parents;\n}\n\nfunction hmrApply(bundle, asset) {\n  var modules = bundle.modules;\n  if (!modules) {\n    return;\n  }\n\n  if (modules[asset.id] || !bundle.parent) {\n    var fn = new Function('require', 'module', 'exports', asset.generated.js);\n    asset.isNew = !modules[asset.id];\n    modules[asset.id] = [fn, asset.deps];\n  } else if (bundle.parent) {\n    hmrApply(bundle.parent, asset);\n  }\n}\n\nfunction hmrAcceptCheck(bundle, id) {\n  var modules = bundle.modules;\n  if (!modules) {\n    return;\n  }\n\n  if (!modules[id] && bundle.parent) {\n    return hmrAcceptCheck(bundle.parent, id);\n  }\n\n  if (checkedAssets[id]) {\n    return;\n  }\n  checkedAssets[id] = true;\n\n  var cached = bundle.cache[id];\n\n  assetsToAccept.push([bundle, id]);\n\n  if (cached && cached.hot && cached.hot._acceptCallbacks.length) {\n    return true;\n  }\n\n  return getParents(global.parcelRequire, id).some(function (id) {\n    return hmrAcceptCheck(global.parcelRequire, id)\n  });\n}\n\nfunction hmrAcceptRun(bundle, id) {\n  var cached = bundle.cache[id];\n  bundle.hotData = {};\n  if (cached) {\n    cached.hot.data = bundle.hotData;\n  }\n\n  if (cached && cached.hot && cached.hot._disposeCallbacks.length) {\n    cached.hot._disposeCallbacks.forEach(function (cb) {\n      cb(bundle.hotData);\n    });\n  }\n\n  delete bundle.cache[id];\n  bundle(id);\n\n  cached = bundle.cache[id];\n  if (cached && cached.hot && cached.hot._acceptCallbacks.length) {\n    cached.hot._acceptCallbacks.forEach(function (cb) {\n      cb();\n    });\n    return true;\n  }\n}\n","var bundleURL = null;\nfunction getBundleURLCached() {\n  if (!bundleURL) {\n    bundleURL = getBundleURL();\n  }\n\n  return bundleURL;\n}\n\nfunction getBundleURL() {\n  // Attempt to find the URL of the current script and use that as the base URL\n  try {\n    throw new Error;\n  } catch (err) {\n    var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\\/\\/[^)\\n]+/g);\n    if (matches) {\n      return getBaseURL(matches[0]);\n    }\n  }\n\n  return '/';\n}\n\nfunction getBaseURL(url) {\n  return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\\/\\/.+)\\/[^/]+$/, '$1') + '/';\n}\n\nexports.getBundleURL = getBundleURLCached;\nexports.getBaseURL = getBaseURL;\n","var getBundleURL = require('./bundle-url').getBundleURL;\n\nfunction loadBundlesLazy(bundles) {\n  if (!Array.isArray(bundles)) {\n    bundles = [bundles]\n  }\n\n  var id = bundles[bundles.length - 1];\n\n  try {\n    return Promise.resolve(require(id));\n  } catch (err) {\n    if (err.code === 'MODULE_NOT_FOUND') {\n      return new LazyPromise(function (resolve, reject) {\n        loadBundles(bundles.slice(0, -1))\n          .then(function () {\n            return require(id);\n          })\n          .then(resolve, reject);\n      });\n    }\n\n    throw err;\n  }\n}\n\nfunction loadBundles(bundles) {\n  return Promise.all(bundles.map(loadBundle));\n}\n\nvar bundleLoaders = {};\nfunction registerBundleLoader(type, loader) {\n  bundleLoaders[type] = loader;\n}\n\nmodule.exports = exports = loadBundlesLazy;\nexports.load = loadBundles;\nexports.register = registerBundleLoader;\n\nvar bundles = {};\nfunction loadBundle(bundle) {\n  var id;\n  if (Array.isArray(bundle)) {\n    id = bundle[1];\n    bundle = bundle[0];\n  }\n\n  if (bundles[bundle]) {\n    return bundles[bundle];\n  }\n\n  var type = (bundle.substring(bundle.lastIndexOf('.') + 1, bundle.length) || bundle).toLowerCase();\n  var bundleLoader = bundleLoaders[type];\n  if (bundleLoader) {\n    return bundles[bundle] = bundleLoader(getBundleURL() + bundle)\n      .then(function (resolved) {\n        if (resolved) {\n          module.bundle.register(id, resolved);\n        }\n\n        return resolved;\n      }).catch(function(e) {\n        delete bundles[bundle];\n        \n        throw e;\n      });\n  }\n}\n\nfunction LazyPromise(executor) {\n  this.executor = executor;\n  this.promise = null;\n}\n\nLazyPromise.prototype.then = function (onSuccess, onError) {\n  if (this.promise === null) this.promise = new Promise(this.executor)\n  return this.promise.then(onSuccess, onError)\n};\n\nLazyPromise.prototype.catch = function (onError) {\n  if (this.promise === null) this.promise = new Promise(this.executor)\n  return this.promise.catch(onError)\n};\n","module.exports = function loadJSBundle(bundle) {\n  return new Promise(function (resolve, reject) {\n    var script = document.createElement('script');\n    script.async = true;\n    script.type = 'text/javascript';\n    script.charset = 'utf-8';\n    script.src = bundle;\n    script.onerror = function (e) {\n      script.onerror = script.onload = null;\n      reject(e);\n    };\n\n    script.onload = function () {\n      script.onerror = script.onload = null;\n      resolve();\n    };\n\n    document.getElementsByTagName('head')[0].appendChild(script);\n  });\n};\n"]}


--------------------------------------------------------------------------------