openvibers/openvibe.live Commits

Mobile: freeze the home page's own heavy effects (CTA conic border, ambient blur, embers, hero aurora blur/blend, 3D collage, ken burns, backdrop blur) — they flicker on low-end Android GPUs

OP OpenVibers committed 11 Sept 2026 · 21086cd61e · 2 files, +24 −1

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01CMxJm1dB8rdsaMSgNjVa82

Changes

ddiff --git a/public/css/home-fx.css b/public/css/home-fx.css
iindex 19279ecd..6f00ffce 100644
---- a/public/css/home-fx.css
++++ b/public/css/home-fx.css
@@@ -41,3 +41,26 @@
.rs-lite .hfx-sparks, .rs-lite .hfx-spot { display: none; }
.rs-lite .hfx-shimmer, .rs-lite .hfx-glow, .rs-lite #page-home .hero-cta .btn-primary, .rs-lite #page-home .section-header h2 .live-dot { animation: none !important; text-shadow: none; }
.rs-lite #page-home .stream-card { transition: none; }
++
++/* ── Mobile / lite: the home page's own heavy effects (pre-existing) ──────────────
++ The CTA banner's conic border animates a registered custom property through a masked
++ conic-gradient (re-rasterised every frame), the ambient blobs and hero aurora run large
++ blur filters with blend modes, the collage is a 3D-tilted stack of floating thumbnails.
++ All of it flickers on low-end Android GPUs, so on phones they become static. */
++@media (max-width: 820px), (pointer: coarse) {
++ .home-cta-banner::before { animation: none !important; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 15%, transparent) 50%, color-mix(in srgb, var(--accent) 55%, transparent)); opacity: 0.6; }
++ .cta-ambient { animation: none !important; filter: none !important; transform: none !important; opacity: 0.7; }
++ .cta-embers, .cta-robot-glow, .cta-owner-shine { display: none !important; }
++ .cta-btn-glow { animation: none !important; box-shadow: none !important; }
++ .cta-hero-grad { animation: none !important; }
++ .hero-aurora, .hero-aurora::before, .hero-aurora::after { filter: none !important; mix-blend-mode: normal !important; animation: none !important; transform: none !important; opacity: 0.22; }
++ .hero-collage { display: none !important; }
++ .hero-bg-layer, .hero-bg-layer.active { animation: none !important; transform: none !important; transition: opacity 0.4s ease; }
++ .hero-scrim { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
++ .navbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--glass-strong); }
++ .stream-card, .stream-card:hover { transform: none !important; }
++}
++.rs-lite .home-cta-banner::before { animation: none !important; }
++.rs-lite .cta-ambient { animation: none !important; filter: none !important; }
++.rs-lite .cta-embers, .rs-lite .cta-robot-glow, .rs-lite .cta-owner-shine, .rs-lite .hero-collage { display: none !important; }
++.rs-lite .hero-aurora, .rs-lite .hero-aurora::before, .rs-lite .hero-aurora::after { filter: none !important; mix-blend-mode: normal !important; animation: none !important; }
ddiff --git a/public/index.html b/public/index.html
iindex 3c290bd4..ae0dbed2 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -68,7 +68,7 @@
<link rel="stylesheet" href="/css/cosmetics.css?v=2">
<link rel="stylesheet" href="/css/messenger.css?v=1">
<link rel="stylesheet" href="/css/rs-promo.css?v=9">
-- <link rel="stylesheet" href="/css/home-fx.css?v=3">
++ <link rel="stylesheet" href="/css/home-fx.css?v=4">
<link rel="stylesheet" href="/css/i18n-star.css?v=3">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">