From 0d10aa40982b436630918870c64b98aa894d1ec1 Mon Sep 17 00:00:00 2001
From: Peter Steinberger <steipete@gmail.com>
Date: Sun, 14 Dec 2025 05:15:20 +0000
Subject: [PATCH] ui(ios): animate idle background

---
 .../ios/Sources/Screen/ScreenController.swift | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/apps/ios/Sources/Screen/ScreenController.swift b/apps/ios/Sources/Screen/ScreenController.swift
index 509a9e37f..3c46737db 100644
--- a/apps/ios/Sources/Screen/ScreenController.swift
+++ b/apps/ios/Sources/Screen/ScreenController.swift
@@ -109,6 +109,9 @@ final class ScreenController {
         <title>Canvas</title>
         <style>
           :root { color-scheme: dark; }
+          @media (prefers-reduced-motion: reduce) {
+            body::before, body::after { animation: none !important; }
+          }
           html,body { height:100%; margin:0; }
           body {
             background: radial-gradient(1200px 900px at 15% 20%, rgba(42, 113, 255, 0.18), rgba(0,0,0,0) 55%),
@@ -129,6 +132,31 @@ final class ScreenController {
             transform: rotate(-7deg);
             opacity: 0.55;
             pointer-events: none;
+            animation: clawdis-grid-drift 22s linear infinite;
+          }
+          body::after {
+            content:"";
+            position: fixed;
+            inset: -35%;
+            background:
+              radial-gradient(900px 700px at 30% 30%, rgba(42,113,255,0.16), rgba(0,0,0,0) 60%),
+              radial-gradient(800px 650px at 70% 35%, rgba(255,0,138,0.12), rgba(0,0,0,0) 62%),
+              radial-gradient(900px 800px at 55% 75%, rgba(0,209,255,0.10), rgba(0,0,0,0) 62%);
+            filter: blur(28px);
+            opacity: 0.55;
+            mix-blend-mode: screen;
+            pointer-events: none;
+            animation: clawdis-glow-drift 18s ease-in-out infinite alternate;
+          }
+          @keyframes clawdis-grid-drift {
+            0%   { transform: translate3d(-18px, 12px, 0) rotate(-7deg); opacity: 0.50; }
+            50%  { transform: translate3d( 14px,-10px, 0) rotate(-6.2deg); opacity: 0.62; }
+            100% { transform: translate3d(-10px,  8px, 0) rotate(-7.4deg); opacity: 0.52; }
+          }
+          @keyframes clawdis-glow-drift {
+            0%   { transform: translate3d(-26px, 18px, 0) scale(1.02); opacity: 0.42; }
+            50%  { transform: translate3d( 20px,-14px, 0) scale(1.05); opacity: 0.55; }
+            100% { transform: translate3d(-12px, 10px, 0) scale(1.03); opacity: 0.46; }
           }
           canvas {
             display:block;