Nocturne - Samin Sami

by Samin Sami

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NOCTURNE — Red-eye flights for the sleepless</title>
<meta name="description" content="NOCTURNE is a night-flight airline for insomniacs. An infinite procedural city passes beneath the wing. Steer with your mouse. Built by Samin Sami.">
<meta property="og:title" content="NOCTURNE — Red-eye flights for the sleepless">
<meta property="og:description" content="An endless night-flight over a procedural city. Mouse steers, scroll changes speed, click for a barrel roll. Built by Samin Sami.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230a0e22'/%3E%3Ccircle cx='23' cy='9' r='5' fill='%23f4e7c3'/%3E%3Ccircle cx='25' cy='8' r='4' fill='%230a0e22'/%3E%3Cg fill='%23ffb347'%3E%3Crect x='4' y='20' width='3' height='8'/%3E%3Crect x='9' y='15' width='3' height='13'/%3E%3Crect x='14' y='22' width='3' height='6'/%3E%3Crect x='19' y='17' width='3' height='11'/%3E%3Crect x='24' y='23' width='3' height='5'/%3E%3C/g%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --night:#070a1a; --night-2:#0a0f24; --haze:#141a3a;
  --ink:#eef1fb; --ink-2:#b9c1e0; --ink-3:#7883b0; --ink-4:#4a537d;
  --sodium:#ffb347; --sodium-deep:#ff8a2b;
  --neon:#4fe0e6; --neon-deep:#2ab0c4;
  --magenta:#ff5fa8; --violet:#9a86ff;
  --moon:#f4e7c3;
  --hair:rgba(180,200,255,0.10); --hair-2:rgba(180,200,255,0.18);
  --panel:rgba(10,15,36,0.62);
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --sans:'Space...