openvibers/openvibe.network Commits

Nothing spins: the home's orbit holds still and breathes; sign-in and email checks pulse (#467)

OP OpenVibers committed 13 days ago · dd5c6b474a · 3 files, +9 −10

Changes

ddiff --git a/public/index.html b/public/index.html
iindex 99c46024..a8390cec 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -135,14 +135,13 @@ a{color:inherit}
/* 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}
.orb-glow{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%,transparent),transparent);filter:blur(6px);animation:orb-breathe 6s ease-in-out infinite}
--.orb-ring{position:absolute;inset:0;border-radius:50%;animation:orb-spin 90s linear infinite}
--.orb-ring::before{content:"";position:absolute;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent-light) 30%,transparent)}
++.orb-ring{position:absolute;inset:0;border-radius:50%}
++.orb-ring::before{content:"";position:absolute;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent-light) 30%,transparent);animation:orb-dash 7s ease-in-out infinite alternate}
.orb-ring.r1{--R:31cqw}.orb-ring.r1::before{inset:19%}
--.orb-ring.r2{--R:45cqw;animation-duration:140s;animation-direction:reverse}.orb-ring.r2::before{inset:5%;opacity:.55}
++.orb-ring.r2{--R:45cqw}.orb-ring.r2::before{inset:5%;opacity:.55;animation-delay:-3.5s}
.orb-node{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(-1 * var(--R))) rotate(calc(-360deg / var(--n) * var(--i)));text-decoration:none;color:var(--text-primary)}
.orb-node.is-big{width:58px;height:58px;margin:-29px}
--.orb-face{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;height:100%;animation:orb-spin 90s linear infinite reverse}
--.r2 .orb-face{animation-duration:140s;animation-direction:normal}
++.orb-face{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;height:100%}
.orb-face .ov-icon{display:grid;place-items:center;width:100%;height:100%;flex:none;border-radius:50%;background:color-mix(in srgb,var(--bg-secondary) 88%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-light) 30%,transparent),0 8px 22px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.2,1.4,.3,1),box-shadow .3s}
.orb-name{font-size:11.5px;font-weight:700;color:var(--text-secondary);white-space:nowrap;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--bg-primary) 78%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.orb-ring.r1{z-index:2}.orb-core{z-index:3}
@@@ -150,7 +149,7 @@ a{color:inherit}
.orb-node:hover .orb-name,.orb-node:focus-visible .orb-name{color:var(--text-primary)}
.orb-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--text-primary);text-align:center}
.orb-core b{font-size:15px;font-weight:800;margin-top:6px}.orb-core small{font-size:12px;color:var(--text-muted)}
--@keyframes orb-spin{to{transform:rotate(360deg)}}
++@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}
ddiff --git a/public/sso-fanout.html b/public/sso-fanout.html
iindex 2927ccfb..3591b377 100644
---- a/public/sso-fanout.html
++++ b/public/sso-fanout.html
@@@ -51,8 +51,8 @@ li.done .dot{background:var(--success);border-color:var(--success);color:#fff;an
li.skip .dot{color:var(--text-muted)}
li.now{background:rgba(var(--accent-rgb),.08);color:var(--text-primary)}
li.now .dot{border-color:var(--accent);color:var(--accent-light)}
--li.now .dot i{animation:spin 1s linear infinite}
--@keyframes spin{to{transform:rotate(360deg)}}
++li.now .dot i{animation:breathe 1.2s ease-in-out infinite}
++@keyframes breathe{50%{opacity:.35;transform:scale(.8)}}
@keyframes pop{0%{transform:scale(.5)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.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}
ddiff --git a/public/verify-email.html b/public/verify-email.html
iindex f6eb2f56..9f99480d 100644
---- a/public/verify-email.html
++++ b/public/verify-email.html
@@@ -43,8 +43,8 @@ body{background:var(--bg-primary);color:var(--text-primary);font-family:'Inter',
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.glyph{position:relative;width:96px;height:96px;margin:0 auto 22px}
.ring{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(var(--accent-rgb),.18)}
--.ring.spin{border-top-color:var(--accent);animation:spin 1s linear infinite}
--@keyframes spin{to{transform:rotate(360deg)}}
++.ring.spin{border-color:var(--accent);animation:ring-pulse 1.4s ease-out infinite}
++@keyframes ring-pulse{from{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45)}to{box-shadow:0 0 0 14px transparent}}
.glyph .ico{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;color:var(--accent-light);transition:transform .35s cubic-bezier(.2,1.4,.3,1),color .3s}
.card[data-state="ok"] .ico{color:var(--success-text, var(--success));transform:scale(1.12)}
.card[data-state="bad"] .ico{color:var(--danger-text, var(--danger))}