let5see/clawdbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(ios): animate idle background

Browse Source
This commit is contained in:
Peter Steinberger
2025-12-14 05:15:20 +00:00
parent f3f8aa5397
commit 0d10aa4098
1 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/ios/Sources/Screen/ScreenController.swift
View File

@@ -109,6 +109,9 @@ final class ScreenController {
<title>Canvas</title> <title>Canvas</title>
<style> <style>
:root { color-scheme: dark; } :root { color-scheme: dark; }
@media (prefers-reduced-motion: reduce) {
body::before, body::after { animation: none !important; }
}
html,body { height:100%; margin:0; } html,body { height:100%; margin:0; }
body { body {
background: radial-gradient(1200px 900px at 15% 20%, rgba(42, 113, 255, 0.18), rgba(0,0,0,0) 55%), 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); transform: rotate(-7deg);
opacity: 0.55; opacity: 0.55;
pointer-events: none; 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 { canvas {
display:block; display:block;