watchfloor-tizenbrew 1.0.0 → 1.1.0

package/app/index.html

@@ -12,9 +12,9 @@
     --glass: #0d0905;
     --p100: #ffb648;
     --p70: #d08a2a;
-    --p45: #8a5a1c;
+    --p45: #a8702a;
     --p25: #4a3112;
-    --glow: 0 0 6px rgba(255, 170, 60, 0.45);
+    --glow: 0 0 8px rgba(255, 170, 60, 0.55);
   }
   html, body {
     margin: 0; height: 100%; overflow: hidden;
@@ -28,9 +28,19 @@
     transform: translate(-50%, -50%);
     box-sizing: border-box; padding: 54px 72px 40px;
     display: flex; flex-direction: column;
-    text-shadow: var(--glow);
   }
 
+  /* Misconvergence and chroma bleed: the red and blue guns land a little
+     off the amber, worse toward the screen edges, and colour smears right.
+     text-shadow inherits as a computed value, so each region restates it. */
+  #stage, .col, .top > div {
+    text-shadow: var(--cvl) 0 0 rgba(255, 40, 30, 0.55), var(--cvr) 0 0 rgba(40, 170, 255, 0.42),
+      3px 0 5px rgba(255, 140, 40, 0.35), var(--glow);
+  }
+  #stage { --cvl: -1.5px; --cvr: 1.5px; }
+  .col-a, .station { --cvl: -3px; --cvr: 1px; }
+  .col-c, .when { --cvl: -1px; --cvr: 3px; }
+
   /* header */
   .top { display: flex; align-items: flex-end; border-bottom: 2px solid var(--p25); padding-bottom: 14px; }
   .station { flex: 1; font-size: 34px; color: var(--p70); line-height: 1.15; }
@@ -96,25 +106,153 @@
 
   .log { border-top: 2px solid var(--p25); padding-top: 10px; margin-top: 18px; font-size: 26px; color: var(--p45); height: 64px; overflow: hidden; text-shadow: none; line-height: 1.2; }
 
-  /* CRT overlays */
+  /* ---------- the tube ----------
+     Every effect is a separate layer that only animates transform or
+     opacity, so the 2018 TV's compositor does the work instead of
+     repainting the page. */
+  #tube {
+    position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden;
+    background: var(--glass);
+    /* Tired high-voltage supply: the picture breathes and sits slightly
+       rotated from the Earth's field, drifting over time. */
+    animation: breathe 9s ease-in-out infinite alternate;
+  }
+  @keyframes breathe {
+    0% { transform: scale(1.000, 1.000) rotate(0.10deg) translateX(0); }
+    40% { transform: scale(1.004, 1.007) rotate(0.16deg) translateX(1px); }
+    100% { transform: scale(0.998, 1.002) rotate(0.06deg) translateX(-1px); }
+  }
+
   .fx { position: fixed; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; }
-  .scan { background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.28) 3px); }
-  .vig { background: radial-gradient(ellipse at center, rgba(0,0,0,0) 58%, rgba(0,0,0,0.55) 100%); }
-  .roll { overflow: hidden; }
-  .roll::after {
-    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%;
-    background: linear-gradient(to bottom, rgba(255,180,80,0), rgba(255,180,80,0.035), rgba(255,180,80,0));
-    animation: roll 11s linear infinite;
+
+  /* Static glass: heavy scanlines plus the aperture-grille phosphor stripes. */
+  .scan {
+    background:
+      repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.55) 2px, rgba(0,0,0,0.55) 4px),
+      repeating-linear-gradient(to right, rgba(255,0,0,0.07) 0, rgba(255,0,0,0.07) 1px, rgba(0,255,0,0.05) 1px, rgba(0,255,0,0.05) 2px, rgba(0,80,255,0.07) 2px, rgba(0,80,255,0.07) 3px);
+  }
+
+  /* Interlace: odd and even fields alternate 1px apart, so fine lines twitter. */
+  .interlace {
+    top: -2px;
+    background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.16) 0, rgba(0,0,0,0.16) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 2px);
+    animation: field 0.0334s steps(1) infinite;
+  }
+  @keyframes field { 50% { transform: translateY(1px); } }
+
+  /* Colour purity: a magnetised shadow mask stains the corners, and the
+     stain wanders as the field shifts. Oversized so drifting shows no edge. */
+  .purity {
+    left: -6%; top: -6%; right: -6%; bottom: -6%;
+    background:
+      radial-gradient(circle at 86% 14%, rgba(210,60,230,0.20), rgba(210,60,230,0) 30%),
+      radial-gradient(circle at 12% 88%, rgba(60,230,130,0.13), rgba(60,230,130,0) 28%),
+      radial-gradient(circle at 60% 95%, rgba(80,120,255,0.08), rgba(80,120,255,0) 25%);
+    animation: magnet 53s ease-in-out infinite alternate;
+  }
+  @keyframes magnet {
+    0% { transform: translate(0, 0) rotate(0deg); }
+    35% { transform: translate(-2.5%, 1.2%) rotate(-1deg); }
+    70% { transform: translate(1.5%, -1%) rotate(0.6deg); }
+    100% { transform: translate(-1%, 2%) rotate(0deg); }
+  }
+
+  /* Snow: a random tile generated at boot, jumped around at ~12 fps. */
+  .noise {
+    left: -256px; top: -256px; right: -256px; bottom: -256px;
+    opacity: 0.045; animation: snow 0.5s infinite;
+  }
+  @keyframes snow {
+    0% { transform: translate(0, 0); animation-timing-function: steps(1); }
+    17% { transform: translate(-91px, 37px); animation-timing-function: steps(1); }
+    33% { transform: translate(53px, -120px); animation-timing-function: steps(1); }
+    50% { transform: translate(-170px, -44px); animation-timing-function: steps(1); }
+    67% { transform: translate(122px, 88px); animation-timing-function: steps(1); }
+    83% { transform: translate(-33px, 171px); animation-timing-function: steps(1); }
+  }
+
+  /* Hum bar: a 60 Hz ground loop rolling slowly up the picture. */
+  .hum { overflow: hidden; }
+  .hum::after {
+    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34%;
+    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.22) 45%, rgba(255,190,110,0.05) 58%, rgba(0,0,0,0));
+    animation: hum 13s linear infinite;
+  }
+  @keyframes hum { from { transform: translateY(330%); } to { transform: translateY(-120%); } }
+
+  /* Flicker from a tired supply, plus slow brightness drift as it warms. */
+  .flick { background: rgba(255,170,60,0.035); animation: flick 3.7s steps(1) infinite; }
+  @keyframes flick {
+    0% { opacity: 1; } 9% { opacity: 0.3; } 10% { opacity: 1; } 41% { opacity: 0.5; } 42% { opacity: 1; }
+    63% { opacity: 0.2; } 64% { opacity: 0.8; } 65% { opacity: 1; } 88% { opacity: 0.6; } 89% { opacity: 1; }
+  }
+  .drift { background: #000; opacity: 0; animation: drift 29s ease-in-out infinite alternate; }
+  @keyframes drift { 0% { opacity: 0; } 45% { opacity: 0.1; } 70% { opacity: 0.03; } 100% { opacity: 0.07; } }
+
+  /* Tube shape: rounded corners, darker curved edges, glare on the glass. */
+  .glass {
+    border-radius: 5% / 8%;
+    box-shadow: 0 0 0 80px #000, inset 0 0 140px 40px rgba(0,0,0,0.85), inset 0 0 22px 6px rgba(0,0,0,0.9);
+    background:
+      radial-gradient(ellipse at 28% 16%, rgba(255,255,255,0.06), rgba(255,255,255,0) 38%),
+      radial-gradient(ellipse at center, rgba(0,0,0,0) 52%, rgba(0,0,0,0.6) 100%);
   }
-  .flick { background: rgba(255,170,60,0.02); animation: flick 7s steps(1) infinite; }
-  @keyframes roll { from { transform: translateY(-120%); } to { transform: translateY(560%); } }
-  @keyframes flick { 0% {opacity:1} 41% {opacity:.4} 42% {opacity:1} 77% {opacity:.6} 78% {opacity:1} }
+
+  /* Degauss: the rainbow wobble a CRT makes when it powers on. */
+  .degauss {
+    left: -10%; top: -10%; right: -10%; bottom: -10%; opacity: 0;
+    background: linear-gradient(115deg, rgba(255,0,140,0.32), rgba(0,255,170,0.26) 25%, rgba(90,120,255,0.32) 50%, rgba(255,210,0,0.26) 75%, rgba(255,0,140,0.32));
+  }
+
+  /* ---------- glitches, triggered from script ---------- */
+  .power #tube { animation: poweron 1.1s ease-out; }
+  @keyframes poweron {
+    0% { transform: scale(0.4, 0.003); opacity: 1; }
+    30% { transform: scale(1, 0.003); }
+    65% { transform: scale(1, 1.05); }
+    100% { transform: scale(1, 1); }
+  }
+  .degaussing #tube { animation: wobble 1.7s ease-out; }
+  .degaussing .degauss { animation: degauss 1.7s ease-out; }
+  @keyframes wobble {
+    0% { transform: rotate(0deg) skewX(0deg); } 12% { transform: rotate(1.4deg) skewX(2deg); }
+    25% { transform: rotate(-1.1deg) skewX(-1.6deg); } 40% { transform: rotate(0.8deg) skewX(1deg); }
+    60% { transform: rotate(-0.4deg) skewX(-0.5deg); } 100% { transform: rotate(0deg) skewX(0deg); }
+  }
+  @keyframes degauss {
+    0% { opacity: 0.9; transform: rotate(0deg) scale(1); } 30% { opacity: 0.7; transform: rotate(8deg) scale(1.1); }
+    60% { opacity: 0.35; transform: rotate(-5deg) scale(1.05); } 100% { opacity: 0; transform: rotate(0deg) scale(1); }
+  }
+  /* Horizontal sync loses lock for a moment and the picture tears sideways. */
+  .hsync #tube { animation: hsync 0.42s; }
+  @keyframes hsync {
+    0% { transform: translateX(0) skewX(0deg); animation-timing-function: steps(1); }
+    15% { transform: translateX(-14px) skewX(-3deg); animation-timing-function: steps(1); }
+    35% { transform: translateX(9px) skewX(2.2deg); animation-timing-function: steps(1); }
+    55% { transform: translateX(-5px) skewX(-1deg); animation-timing-function: steps(1); }
+    75% { transform: translateX(2px) skewX(0.4deg); animation-timing-function: steps(1); }
+    100% { transform: translateX(0) skewX(0deg); }
+  }
+  /* Vertical hold slips and the picture rolls once before catching. */
+  .vroll #tube { animation: vroll 0.9s ease-in-out; }
+  @keyframes vroll {
+    0% { transform: translateY(0); } 45% { transform: translateY(55%); }
+    46% { transform: translateY(-45%); } 100% { transform: translateY(0); }
+  }
+  /* Brownout: the supply sags, the picture shrinks and dims, then recovers. */
+  .brown #tube { animation: brown 1.4s ease-in-out; }
+  @keyframes brown {
+    0% { transform: scale(1, 1); opacity: 1; } 35% { transform: scale(0.965, 0.975); opacity: 0.72; }
+    55% { transform: scale(0.975, 0.985); opacity: 0.8; } 100% { transform: scale(1, 1); opacity: 1; }
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    .roll::after, .flick, #p-alerts.hot h2 { animation: none; }
+    #tube, .interlace, .purity, .noise, .hum::after, .flick, .drift, #p-alerts.hot h2 { animation: none !important; }
   }
 </style>
 </head>
-<body>
+<body class="power">
+<div id="tube">
 <div id="stage">
   <header class="top">
     <div class="station"><b id="st-name">WATCHFLOOR</b><span id="st-coords"></span></div>
@@ -163,10 +301,16 @@
 
   <footer class="log" id="log"></footer>
 </div>
-<div class="fx flick"></div>
-<div class="fx roll"></div>
+<div class="fx purity"></div>
+</div>
+<div class="fx noise" id="noise"></div>
 <div class="fx scan"></div>
-<div class="fx vig"></div>
+<div class="fx interlace"></div>
+<div class="fx hum"></div>
+<div class="fx flick"></div>
+<div class="fx drift"></div>
+<div class="fx degauss"></div>
+<div class="fx glass"></div>
 
 <script>
 /* ---------- config: edit these ---------- */
@@ -392,6 +536,36 @@ function hn() {
   });
 }
 
+/* ---------- tube faults ---------- */
+function makeNoise() {
+  var c = document.createElement("canvas");
+  c.width = c.height = 256;
+  var g = c.getContext("2d"), img = g.createImageData(256, 256), px = img.data;
+  for (var i = 0; i < px.length; i += 4) {
+    var v = Math.random() * 255;
+    px[i] = v; px[i + 1] = v * 0.8; px[i + 2] = v * 0.6; px[i + 3] = Math.random() < 0.5 ? 255 : 0;
+  }
+  g.putImageData(img, 0, 0);
+  $("noise").style.backgroundImage = "url(" + c.toDataURL() + ")";
+}
+
+// Play one glitch by putting its class on <body> for the length of its animation.
+function fault(cls, ms, done) {
+  document.body.className = cls;
+  setTimeout(function () { document.body.className = ""; if (done) done(); }, ms);
+}
+
+// Every 20-70 s something in the old set misbehaves.
+function scheduleFault() {
+  setTimeout(function () {
+    var r = Math.random();
+    if (r < 0.5) fault("hsync", 450, scheduleFault);
+    else if (r < 0.75) fault("brown", 1450, scheduleFault);
+    else if (r < 0.92) fault("vroll", 950, scheduleFault);
+    else fault("degaussing", 1750, scheduleFault);
+  }, 20000 + Math.random() * 50000);
+}
+
 /* ---------- boot ---------- */
 function fit() {
   var s = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
@@ -404,6 +578,9 @@ $("st-name").textContent = CFG.name;
 $("st-coords").textContent = Math.abs(CFG.lat).toFixed(2) + "°" + (CFG.lat >= 0 ? "N " : "S ") +
   Math.abs(CFG.lon).toFixed(2) + "°" + (CFG.lon >= 0 ? "E" : "W");
 tick(); setInterval(tick, 1000);
+makeNoise();
+// Power on, then degauss, then settle into random faults.
+fault("power", 1150, function () { fault("degaussing", 1750, scheduleFault); });
 setInterval(ages, 15000);
 log("Terminal online");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watchfloor-tizenbrew",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "CRT-style live status wall for Samsung TVs via TizenBrew: weather, NWS alerts, air quality, service status, earthquakes, geomagnetic activity, Hacker News.",
   "packageType": "app",
   "appName": "Watchfloor",