openvibers/openvibe.network Commits

Motion: Calm reduces, only Off removes (Shared 4.183.0) (#750)

OP OpenVibers committed 3 days ago · c7809564e6 · 8 files, +3 −20

* Motion: Calm reduces, only Off removes (Shared 4.183.0)

Pin openvibe-shared 4.183.0 and drop the rules that stopped an effect under
prefers-reduced-motion or html[data-ov-motion=reduced]: Calm now plays every
effect, smaller and slower. What a rule did to leave a thing finished moves to
html[data-ov-motion=off], the only choice that stops motion.

* Network: js size budget carries Shared 4.183.0's loader

419.5 KB raw / 101.8 KB brotli measured in the first CI run; the motion model
grew the loader about 2.9 KB. HTML stays inside its own budget.

* ci: re-trigger checks

* Merge remote-tracking branch 'origin/main' into motion/calm-network

# Conflicts:
#	README.md
#	STATUS.json
#	package-lock.json
#	package.json
#	test/perf-budget.test.js

Changes

ddiff --git a/public/css/admin.css b/public/css/admin.css
iindex c3ef8579..d656ffb4 100644
---- a/public/css/admin.css
++++ b/public/css/admin.css
@@@ -159,7 +159,6 @@ a.btn{text-decoration:none}
  #sec-ssh .staff-pill{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px;vertical-align:middle;margin-left:8px;color:var(--warning-text, var(--warning,#f0b74a));background:color-mix(in srgb,var(--warning,#f0b74a) 18%,transparent);border:1px solid color-mix(in srgb,var(--warning,#f0b74a) 40%,transparent)}
  #sec-ssh .staff-pill.user-pill{color:var(--accent,#6ea8ff);background:color-mix(in srgb,var(--accent,#6ea8ff) 18%,transparent);border-color:color-mix(in srgb,var(--accent,#6ea8ff) 40%,transparent)}
  
--@media (prefers-reduced-motion: reduce) { .section, .toast { animation: none; } }
  
  /* ── Platform AI (AI Exchange D11 S3, owner only): one long page, sticky index, no inner tabs ───────────────────── */
  .platform-ai{max-width:1100px;min-width:0;overflow-wrap:anywhere}
ddiff --git a/public/css/login.css b/public/css/login.css
iindex 0b1e0974..192b1dcb 100644
---- a/public/css/login.css
++++ b/public/css/login.css
@@@ -261,4 +261,3 @@ body{min-height:100dvh;background:var(--bg);color:var(--text);font-family:'Inter
      .tab-bar button{font-size:12px;padding:8px 6px}
  }
  
--@media (prefers-reduced-motion: reduce) { .bg-canvas .orb, .particles .p, .grid-overlay, .login-card, .login-card::before, .form-panel, .submit-btn .ripple, .message { animation: none; } }
ddiff --git a/public/css/my.css b/public/css/my.css
iindex eb6498af..4d0742c3 100644
---- a/public/css/my.css
++++ b/public/css/my.css
@@@ -360,10 +360,6 @@ button.td-stat:hover span { color: var(--accent-light); }
      .td-settings-btn { padding: 8px 10px; font-size: 0; gap: 0; }
      .td-settings-btn i { font-size: 16px; }
  }
--@media (prefers-reduced-motion: reduce) {
--    .td-pulse { animation: none; }
--    .td-thumb img { transition: none; }
--}
  .recent-tools { margin-top: 14px; }
  .recent-tools h3 { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin: 0 0 8px; display: flex; gap: 6px; align-items: center; }
  .recent-tools-list { display: flex; flex-wrap: wrap; gap: 6px; }
@@@ -423,7 +419,6 @@ button.td-stat:hover span { color: var(--accent-light); }
  .mc-pool > div.mc-role { grid-template-columns: auto minmax(0, 1fr); cursor: default; }
  .mc-empty { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 14px; border: 1px dashed var(--border); color: var(--text-secondary); }
  .mc-empty > i { font-size: 26px; color: var(--accent-light); }
--@media (prefers-reduced-motion: reduce) { .mc-wait-dot { animation: none; } }
  
  /* Your data choices (L24): kit fold rows, one per purpose. Phone first: one column of equal-weight buttons, never
     sideways. The kit's own /shared/kit.css draws the fold; these rules only lay out the choice inside it. */
@@@ -551,7 +546,6 @@ button.td-stat:hover span { color: var(--accent-light); }
      80% { transform: translateX(5px); }
  }
  .qr-shake { animation: qr-shake .36s ease-in-out 1; }
--@media (prefers-reduced-motion: reduce) { .qr-shake { animation: none; } }
  @media (max-width: 419px) {
      .qr-actions { grid-template-columns: minmax(0, 1fr); }
      .qr-actions .btn { width: 100%; }
@@@ -653,7 +647,7 @@ button.td-stat:hover span { color: var(--accent-light); }
    .me-act-ic { width: 40px; height: 40px; font-size: 16px; }
    .me-act-t { font-size: 11.5px; }
  }
--@media (prefers-reduced-motion: reduce) { .me-act { transition: none; } .me-act:hover { transform: none; } }
++html[data-ov-motion=off] .me-act:hover{transform: none}
  
  /* Your status beside your name: the same dot as the bar's, one tap to change it. */
  .me-status { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin-top: 10px; padding: 0 12px 0 10px; border-radius: 999px; cursor: pointer;
ddiff --git a/public/css/wallet.css b/public/css/wallet.css
iindex 211f0047..9f5df523 100644
---- a/public/css/wallet.css
++++ b/public/css/wallet.css
@@@ -243,7 +243,5 @@ a { color: var(--accent, #3b82f6); }
      .w-pay-page { padding-left: 12px; padding-right: 12px; }
  }
  
--/* Reduced motion: nothing here moves, and a person who asks for calm gets no transitions either. */
--@media (prefers-reduced-motion: reduce) {
--    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
--}
++/* Motion off: the page does not glide. Calm keeps it. */
++html[data-ov-motion=off] *,html[data-ov-motion=off] *::before,html[data-ov-motion=off] *::after{scroll-behavior: auto !important}
ddiff --git a/public/index.html b/public/index.html
iindex dcef6e86..a29cc149 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -128,7 +128,6 @@ a{color:inherit}
  .constellation .cs-node:hover text,.constellation .cs-node:focus text{fill:var(--text-primary)}
  .constellation .cs-soon .cs-star{fill:var(--text-muted)}.constellation .cs-soon text{fill:var(--text-muted);font-size:10.5px;font-weight:500}
  @keyframes cs-twinkle{0%,100%{transform:scale(1);opacity:.16}50%{transform:scale(1.35);opacity:.3}}
--@media (prefers-reduced-motion:reduce){.constellation .cs-halo{animation:none}.intent{transition:none}}
  @media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr);text-align:center}.hero-grid p.sub{margin:14px auto 0}.hero-sky{position:static;padding-top:0}.intent{text-align:left}}
  /* The orbit (server/home/render.js orbit()): rings turning in opposite directions, every icon upright. */
  .orbit{position:relative;width:min(100%,460px);aspect-ratio:1;margin:0 auto;container-type:inline-size}
@@@ -149,8 +148,6 @@ a{color:inherit}
  .orb-core b{font-size:15px;font-weight:800;margin-top:6px}.orb-core small{font-size:12px;color:var(--text-muted)}
  @keyframes orb-dash{to{opacity:.3}}
  @keyframes orb-breathe{0%,100%{opacity:.7;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
--@media (prefers-reduced-motion:reduce){.orb-ring,.orb-face,.orb-glow{animation:none}}
--html[data-ov-motion=reduced] .orb-ring,html[data-ov-motion=reduced] .orb-face,html[data-ov-motion=reduced] .orb-glow{animation:none}
  /* Phones: the rings far enough apart that a label under an inner site never crosses the core or an outer site at any
     turn (inner reach R1 + 42 px < R2 - 13 px; top label above the core's 45 px half height). The turning ring boxes reach past the screen's
     edge at their corners, so the hero clips sideways overflow (nothing visible is there). */
ddiff --git a/public/sso-fanout.html b/public/sso-fanout.html
iindex 25497e6a..c810f776 100644
---- a/public/sso-fanout.html
++++ b/public/sso-fanout.html
@@@ -56,7 +56,6 @@ li.now .dot i{animation:breathe 1.2s var(--ov-ease-in-out, ease-in-out) infinite
  .foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:12px;color:var(--text-muted);position:relative}
  .foot a{color:var(--accent-light);text-decoration:none;font-weight:600}
  .ov-mark{width:38px;height:38px;flex:none}
--@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  </style>
  <!-- The OpenVibe glyphs draw every fa- icon here (no Font Awesome since 2026-11-01). -->
  <script src="/shared/ov-glyphs.js" defer></script>
ddiff --git a/public/verify-email.html b/public/verify-email.html
iindex dd55e128..471afb1f 100644
---- a/public/verify-email.html
++++ b/public/verify-email.html
@@@ -67,7 +67,6 @@ p{color:var(--text-secondary);font-size:14px;line-height:1.6}
  .next{margin-top:22px;text-align:left;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:14px 16px;font-size:13px;color:var(--text-secondary);animation:rise var(--ov-dur-4, .5s) .25s both}
  .next b{color:var(--text-primary)}
  .next ul{margin:8px 0 0 18px;line-height:1.7}
--@media (prefers-reduced-motion:reduce){.card,.ring,.ico,.burst i,.next{animation:none!important;transition:none!important}}
  </style>
  </head>
  <body>
ddiff --git a/server/home/render.js b/server/home/render.js
iindex bb0f07ec..b8d74050 100644
---- a/server/home/render.js
++++ b/server/home/render.js
@@@ -312,7 +312,6 @@ const CSS = `
  .more-pick-h{display:block;margin:40px 0 0;padding:0 16px;font-size:clamp(1.25rem,5vw,1.5rem);font-weight:800;letter-spacing:-.02em}.more-pick{margin:10px 0 0;padding:2px 16px 4px}
  [data-now-part],[data-more-part]{scroll-margin-top:72px}
  }
--@media (prefers-reduced-motion:reduce){.vc-thumb img,.vc-play,.vc-play i,.vc-about{transition:none}}
  .now-code{display:inline-block;margin:0 0 3px;padding:1px 7px;border-radius:6px;border:1px dashed var(--accent,#3b82f6);color:var(--accent-light,#60a5fa);font:700 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.3px}
  .now-list b{overflow-wrap:anywhere}
  .net-num{margin-top:18px;padding:16px 18px;border-radius:16px;border:1px solid var(--border,rgba(255,255,255,.08));background:color-mix(in srgb,var(--bg-secondary,#101828) 85%,transparent)}
@@@ -326,7 +325,6 @@ const CSS = `
  .faq-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));margin-top:4px}
  .faq-item{padding:16px 18px;border-radius:16px;border:1px solid var(--border,rgba(255,255,255,.08));background:var(--bg-secondary,#101828)}
  .faq-item h3{font-size:15.5px;margin:0 0 6px;line-height:1.35}.faq-item p{margin:0;color:var(--text-secondary,#a8b3c4);font-size:14px;line-height:1.55}
--@media (prefers-reduced-motion:reduce){.now-dot{animation:none}}
  ${icons.CSS}
  /* Touch targets on phones (fleet audit, 2026-10-29): touch pointers only. */
  @media (pointer: coarse) {