napplet.soy
Create a napplet
Back to Drone Zone — deep field
SOURCE / PINNED RELEASE

Made of little things.

Drone Zone — deep field

Release
578f277a8be1…
Author-recorded commit
a96742b428de…
License
LICENSE
Author’s source reference
nostr://npub1n8ga89w8h6tvwamxusfyzexw8gjy84yxu9rxgnmk955cxtml4ujswzxydd/wss%3A%2F%2Fgit.napplet.soy%2F/n-9753e6cf3ec

Archive hash verified: f7f3bf8ff3482551…. The source-to-build association is the author’s claim; it has not been independently rebuilt.

index.html
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="theme-color" content="#05090d"/><title>Drone Zone — deep field</title></head>
<body>
<svg class="tape-defs" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><defs>
  <filter id="tape-glitch" x="-3%" y="-3%" width="106%" height="106%" color-interpolation-filters="sRGB">
    <feFlood flood-color="rgb(50%,50%,50%)" result="neutral"/>
    <feFlood id="tape-band-a" x="0" y="0" width="1" height="1" flood-color="rgb(100%,50%,50%)" result="band-a"/>
    <feFlood id="tape-band-b" x="0" y="0" width="1" height="1" flood-color="rgb(0%,50%,50%)" result="band-b"/>
    <feMerge result="tracking"><feMergeNode in="neutral"/><feMergeNode in="band-a"/><feMergeNode in="band-b"/></feMerge>
    <feDisplacementMap id="tape-displacement" in="SourceGraphic" in2="tracking" scale="0" xChannelSelector="R" yChannelSelector="G" result="warped"/>
  </filter>
  <filter id="tape-chroma" x="-3%" y="-3%" width="106%" height="106%" color-interpolation-filters="sRGB">
    <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" result="red"/>
    <feOffset id="tape-red" in="red" dx="0" dy="0" result="red-shift"/>
    <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" result="cyan"/>
    <feOffset id="tape-cyan" in="cyan" dx="0" dy="0" result="cyan-shift"/>
    <feBlend in="red-shift" in2="cyan-shift" mode="screen"/>
  </filter>
</defs></svg>
<main id="app">
  <div id="universe" tabindex="0" role="region" aria-label="Interactive galaxy. Drag or scroll to pan, pinch or use plus and minus to zoom. Arrow keys pan. Select a beacon to inspect it."><canvas id="galaxy" aria-hidden="true"></canvas><canvas id="signals" aria-hidden="true"></canvas></div>
  <div class="grain" aria-hidden="true"></div><div class="frame-corners" aria-hidden="true"></div>
  <div class="readout upper-left" aria-hidden="true"><div class="readout-heading"><i></i> DEEP FIELD <span>/ 001</span></div><div>OBSERVER <b id="position">+0000.0 / +0000.0</b></div><div>LOCAL TIME <b id="utc">00:00:00 UTC</b></div><div class="faint" id="navigation-mode">AUTO / LONGITUDE HIGHWAY</div></div>
  <nav class="tools" aria-label="Scene controls"><button id="tour" class="tour-button" title="Pause tour" aria-label="Pause tour" aria-pressed="true"><span class="tour-symbol" aria-hidden="true">↝</span><span id="tour-label">TOUR / H01</span></button><button id="motion" class="icon-button" title="Freeze motion" aria-label="Freeze motion" aria-pressed="false">Ⅱ</button><button id="home" class="icon-button" title="Return to origin" aria-label="Return to origin">⌖</button><button id="layers" class="icon-button" title="Show scene options" aria-label="Show scene options" aria-expanded="false">≋</button><button id="help" class="icon-button" title="Navigation guide" aria-label="Navigation guide" aria-expanded="false">?</button></nav>
  <section id="options" class="floating-panel options-panel" aria-label="Scene options" hidden><div class="panel-heading">FIELD / SIGNAL <span>01—05</span></div><label><input id="routes" type="checkbox" checked/>Signal trajectories</label><label><input id="annotations" type="checkbox" checked/>Observation data</label><label><input id="fog" type="checkbox" checked/>Interstellar haze</label><label><input id="distortion" type="checkbox" checked/>Optical distortion</label><div class="tape-controls"><label for="tape-wear">VHS / tape wear <output id="tape-amount" for="tape-wear">45%</output></label><input id="tape-wear" type="range" min="0" max="100" step="5" value="45" aria-label="VHS tape wear"/><button id="tape-pulse" class="text-button" title="Trigger a brief tracking slip">Glitch pulse ↝</button></div><button id="settings" class="text-button" hidden>More settings ↗</button></section>
  <section id="guide" class="floating-panel guide-panel" aria-label="Navigation guide" hidden><div class="panel-heading">NAVIGATION <span>↗</span></div><dl><dt>Move</dt><dd>Drag · scroll · arrow keys</dd><dt>Zoom</dt><dd>Pinch · + / − · Ctrl + scroll</dd><dt>Observe</dt><dd>Select a marked beacon</dd><dt>Tour</dt><dd>Follow highway H01 with ↝</dd><dt>Be still</dt><dd>Freeze the field with Ⅱ</dd></dl><p>An imagined atlas. Routes and coordinates are simulated; the annotated physical constants are real. The galaxy is a photograph. Drag or zoom to leave the tour. Use ↝ to return. Take your time.</p></section>
  <section id="observation" class="floating-panel observation" aria-label="Selected observation" hidden><div class="panel-heading"><span id="observation-id">OBSERVATION 01</span><button id="close-observation" class="small-button" aria-label="Close observation">×</button></div><div id="observation-name" class="observation-name"></div><div id="observation-value" class="observation-value"></div><p id="observation-copy"></p><div class="observation-controls"><button id="previous" class="text-button" aria-label="Previous observation">← PREV</button><span id="observation-count"></span><button id="next" class="text-button" aria-label="Next observation">NEXT →</button></div></section>
  <div class="lower-left readout" aria-hidden="true"><span class="tiny-cross">+</span> <span>c = 299 792.458 km/s</span><div class="faint">EVERY POINT OF LIGHT IS A DISTANCE</div></div>
  <div class="scale-control" aria-label="Magnification controls"><button id="zoom-out" class="icon-button" title="Zoom out" aria-label="Zoom out">−</button><output id="zoom" aria-label="Magnification">1.00×</output><button id="zoom-in" class="icon-button" title="Zoom in" aria-label="Zoom in">+</button></div>
  <div class="player" role="group" aria-label="Drone Zone radio"><button id="play" class="play-button" title="Play Drone Zone" aria-label="Play Drone Zone"><svg viewBox="0 0 24 24" aria-hidden="true"><path id="play-symbol" d="M8 5L19 12L8 19Z"/></svg></button><div class="station-copy"><div class="station-name" id="station-name">DRONE ZONE</div><output id="radio-status" role="status">Resolving station…</output></div><div class="signal-meter" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><label class="volume-control" title="Volume"><span aria-hidden="true">◖</span><input id="volume" type="range" min="0" max="1" step="0.01" value="0.65" aria-label="Radio volume" disabled/></label><button id="retry" class="icon-button" title="Refresh station" aria-label="Refresh station">↻</button><button id="station-link" class="icon-button" title="Open station in Wavefunc" aria-label="Open station in Wavefunc" hidden>↗</button></div>
  <button id="inspect" class="inspect-button" title="Explore observation beacons" aria-label="Explore observation beacons">◇ <span>OBSERVE <output id="discovery-count">00 / 20</output></span></button>
  <div id="hint" class="navigation-hint">FOLLOWING H01 <span>·</span> DRAG TO TAKE THE HELM <span>·</span> ZOOM TO LOOK CLOSER</div>
  <div id="tape-overlay" aria-hidden="true"><div class="tape-scanlines"></div><div id="tape-noise"></div><div id="tape-roll"></div><div id="tape-dropout"></div></div>
</main>
<script type="module" src="/src/main.ts"></script>
</body></html>