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
Changes
@@@ -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; }@@@ -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">
@@ -41,3 +41,26 @@
@@ -41,3 +41,26 @@
.rs-lite .hfx-sparks, .rs-lite .hfx-spot { display: none; }
.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 .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; }
.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; }
@@ -68,7 +68,7 @@
@@ -68,7 +68,7 @@
<link rel="stylesheet" href="/css/cosmetics.css?v=2">
<link rel="stylesheet" href="/css/cosmetics.css?v=2">
<link rel="stylesheet" href="/css/messenger.css?v=1">
<link rel="stylesheet" href="/css/messenger.css?v=1">
<link rel="stylesheet" href="/css/rs-promo.css?v=9">
<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="/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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">