synecdocheNORTH

Dashboard UI

A journey between the clouds.

	// Asked by @jrf0110
	// https://github.com/jonobr1/two.js/issues/120

	var two = new Two({
	type: Two.Types.canvas,
	fullscreen: true,
	autostart: true
	}).appendTo(document.body);

	/**

	<div id="wrap">
	<a href="#" class="hb">
	<div class="c">
	<img src="https://source.unsplash.com/user/web_tiki/2000x1300" alt=""/>
	<div class="txt">
	<h1>Title here</h1>
	<p>Some longer text here thats wide enough to span on several lines.</p>
	</div>
	</div>
	</a>

	<h2>Click on the red door to open it</h2>
	<div class="door-frame">
	<div class="door"></div>
	<div class="star"></div>
	</div>

	let cam, scene, renderer,
	clock, smokeMaterial,
	h, w,
	smokeParticles = [];

	const animate = () => {
	let delta = clock.getDelta();

	requestAnimationFrame(animate);

	(function() {
	'use strict';
	// 'To actually be able to display anything with Three.js, we need three things:
	// A scene, a camera, and a renderer so we can render the scene with the camera.'
	// - https://threejs.org/docs/#Manual/Introduction/Creating_a_scene

	var scene, camera, renderer;

	// I guess we need this stuff too
	var container, HEIGHT,


	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<div class="js-spiral">
	<div class="js-section">
	<div class="message">
	Scroll, Use Arrow Keys or Click<br><br>