pavone cristallo site

author: lens <lens@neural.garden> 2019-04-11 15:05:35 +0000
committer: lens <lens@neural.garden> 2019-04-11 15:05:35 +0000
commit: 878d81ec29ec092fca67c4c4a89b944f9fe24b5a (patch)
tree: ecc6557556ad251e66d6d57e80598703446f0f90 /docs/pavone/index.html
parent: 47e85adc234317b985966ba8e00a186356a742d4 (diff)
1 files changed, 182 insertions, 0 deletions
diff --git a/docs/pavone/index.html b/docs/pavone/index.html
new file mode 100644
index 0000000..ca7a5cb
--- /dev/null
+++ b/docs/pavone/index.html
@@ -0,0 +1,182 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+<title>Pavone Cristallo</title>
+<style type="text/css">
+* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+html,body{width:100%;height:100%;margin:0;padding:0;}
+body { text-align: center; background: linear-gradient(#000, #102); background-attachment: fixed; }
+#pavone { background-image:url('pavone.jpg'); background-size: 400px; background-position: center center; text-align: center; }
+#misc { position: fixed; z-index: -1; width: 100%; height: 100%; pointer-events: none; transform-origin: 50% 50%; }
+#misc canvas { width: 100%; height: 100%; }
+#content { z-index: 1; }
+#content section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 20px; margin: 50px 0 }
+#content div { display: inline-block; padding: 10px; margin: 10px; background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,80,0.8)); color: #fff; border: 10px solid rgba(128,255,255,0.05); box-shadow: 10px 10px 10px rgba(0,0,0,0.6); }
+audio { box-shadow: 12px 12px 12px rgba(0,0,0,0.3); border-radius: 20px; }
+h1 { color: yellow; padding: 0; margin: 0; transform: skewX(-10deg); font-size: 48px; letter-spacing: 6px; }
+h2 { color: yellow; }
+i { color: #0ff; }
+b { color: #ffb; }
+a { color: #3bf; }
+#demos a { color: #ff8; display: inline-block; margin: 20px; padding: 20px; background: black; background: #008; box-shadow: 0 4px 5px #000; transition: all 0.4s; text-decoration: none; }
+#demos a.playing { background: #00f; color: #ff0; }
+span { color: #fbb; }
+audio { -webkit-filter: invert(100%); }
+#gifz {position:absolute;top:0;left:0;z-index:-2; }
+#gifz img { position: absolute; animation: faderz; }
+#demos i { color: #f88; }
+@keyframes faderz { 0% { opacity: 0 } 50% { opacity: 1} 100%{ opacity: 0}}
+#horizon { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: linear-gradient(rgba(0,0,255,0.01), rgba(255,128,128,0.3), #008, #00f); opacity: 0.2; }
+#horizona { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: linear-gradient(rgba(0,0,255,0.01), #00f); opacity: 0.3; z-index: -2; }
+#horizon2 { width: 100%; height: 200px; background: linear-gradient(rgba(255,128,0,0.01), rgba(255,128,0, 0.2), rgba(128,192,255,0.8)); opacity: 0.2; }
+</style>
+<body>
+	<div id='misc'><canvas id='c'></canvas><div id='gifz'></div><div id='horizon'></div><div id='horizona'></div></div>
+	<div id='content'>
+	<br>
+	<br><br>
+<section>
+<div>
+<h1>PAVONE CRISTALLO</h1>
+</div>
+</section>
+
+<section id='demos'>
+	<div>
+		33<b>36</b>32<b>1153</b>13<b>31</b>33<b>5831</b>31<b>08</b>33<br>
+		<b>vxvxvxvxvxvxvxvxvxvxvxvxv</b><br>
+		<b>vv</b> <i>demos ~ demos</i> <b>vvv</b><br>
+		| | | | | | | | | | | | | <br>
+		| | | | | | | | | | | | | <br>
+		| | | | | | | | | | | | | <br>
+		| | | | | | | | | | | | | <br>
+	<a href="pavone cristallo - approaching dawn.mp3">▶ Approaching Dawn</a><br>
+	<a href="pavone cristallo - bog zombie.mp3">▶ Bog Zombie</a><br>
+		| | | | | | | | | | | | | <br>
+		| | | | | | | | | | | | | <br>
+		| | | | | | | | | | | | | <br>
+		| | | | | | | | | | | | | <br>
+		| | | | | | | | | | | | | <br>
+		| | | | | | | | | | | | | <br>
+		| | | | | | | | | | | | | <br>
+		| | | | | | | | | | | | | <br>
+		<b>vxvxvxvxvxvxvxvxvxvxv</b><br>
+		<b>vxvxvxvxvxvxvxvxvxvxvxvxv</b><br>
+		31<b>63</b>32<b>3511</b>31<b>31</b>33<b>1385</b>13<b>80</b>33<br>
+	</div>
+</section>
+
+<section><table></table></section>
+
+<section>
+<div><i><b>Pavone Cristallo</b></i> <span>is a live hardware/acoustic horror disco trio</span></div>
+</section>
+<section>
+<div><i>Beth</i> leads &amp; pads<br><i>Jules</i> pads &amp; arps<br><i>Liam</i> drums</div>
+	<div>
+		For more music check out<br>
+		<a href="https://lfolobster.bandcamp.com/">LFO Lobster</a>
+		<br>
+		or follow us on
+		<a href="https://twitter.com/lfolobster">Twitter</a>
+	</div>
+</section>
+	</div>
+	<div id='horizon2'></div>
+</body>
+<script src="/assets/js/stars.js"></script>
+<script src="/assets/js/audio-player.js"></script>
+	<script>
+		var w = c.width = window.innerWidth * devicePixelRatio
+		var h = c.height = window.innerHeight * devicePixelRatio
+	var ctx = c.getContext('2d');
+
+var zzz = Math.max(w, h) * 0.05
+var zzzA = Math.max(w, h) * 0.02
+function r(n) { return n + Math.random() * zzzA }
+ctx.beginPath()
+ctx.moveTo(r(w/2), r(zzz))
+ctx.lineTo(r(w - zzz), r(h/2))
+ctx.lineTo(r(zzz), r(h - zzz))
+ctx.lineTo(r(w/2), r(zzz))
+
+var lingrad = ctx.createLinearGradient(0,0,w,h);
+lingrad.addColorStop(0, 'rgba(128,0,128,0.3)');
+lingrad.addColorStop(1, 'rgba(10,0,128,0.3)');
+ctx.fillStyle = lingrad;
+ctx.fill()
+
+ctx.beginPath()
+ctx.moveTo(r(w/2), r(zzz))
+ctx.lineTo(r(w - zzz), r(h/2))
+ctx.lineTo(r(zzz), r(h - zzz))
+ctx.lineTo(r(w/2), r(zzz))
+
+var lingrad = ctx.createLinearGradient(w/2,0,w,h);
+lingrad.addColorStop(0, 'rgba(0,0,255,0.2)');
+lingrad.addColorStop(1, 'rgba(255,0,0,0.2)');
+ctx.fillStyle = lingrad;
+ctx.fill()
+
+var gifs = [
+  'animated-star-image-0142.gif',
+  'animated-star-image-0142.gif',
+  'animated-star-image-0142.gif',
+  'animated-star-image-0142.gif',
+  'animated-star-image-0142.gif',
+  'animated-star-image-0142.gif',
+  'animated-star-image-0142.gif',
+  'animated-star-image-0142.gif',
+  'animated-star-image-0142.gif',
+  'animated-star-image-0142.gif',
+  'animated-star-image-0142.gif',
+  'animated-star-image-0142.gif',
+  'animated-star-image-0142.gif',
+  'animated-star-image-0142.gif',
+  'animated-star-image-0142.gif',
+  'animated-star-image-0005.gif',
+  'animated-star-image-0147.gif',
+]
+function choice(a) { return a[Math.floor(Math.random()*a.length)] }
+function a() {
+	var img = new Image()
+	img.src=choice(gifs) + '?' + Math.random()
+	img.style.top = Math.round(Math.random() * window.innerHeight) + "px"
+	img.style.left = Math.round(Math.random() * window.innerWidth) + "px"
+	img.style.opacity = (Math.random() / 2) + 0.5
+	img.style.animationDelay = (10 + Math.random() * 10) + 's'
+	img.style.animationDuration = (10 + Math.random() * 10) + 's'
+	gifz.appendChild(img)
+}
+a();a();a()
+for (var i = 0; i < 23; i++) { setTimeout(a, Math.random() * 10000) }
+document.body.classList.add('done')
+function u(t){
+	var p = t / document.body.scrollHeight
+	var s = [
+		'rotateX(' + (p*1.2 ) + 'rad)',
+		'rotateY(' + (p*2) + 'rad)',
+		'rotateZ(' + (-p*3) + 'rad)'
+	].join(' ')
+	console.log(s)
+	c.style.transform = s
+}
+let last_known_scroll_position = 0;
+let ticking = false;
+
+window.addEventListener('scroll', function(e) {
+  last_known_scroll_position = window.scrollY;
+
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      u(window.scrollY/ 10)
+      ticking = false;
+    });
+
+    ticking = true;
+  }
+});
+u(window.scrollY)
+	</script>
+</html>
author	lens <lens@neural.garden>	2019-04-11 15:05:35 +0000
committer	lens <lens@neural.garden>	2019-04-11 15:05:35 +0000
commit	878d81ec29ec092fca67c4c4a89b944f9fe24b5a (patch)
tree	ecc6557556ad251e66d6d57e80598703446f0f90 /docs/pavone/index.html
parent	47e85adc234317b985966ba8e00a186356a742d4 (diff)