Optimize Liquid Glass performance

Author: Bikram Gole

script.js

@@ -19,13 +19,28 @@ revealElements.forEach((el) => revealObserver.observe(el));
 const canvas = document.getElementById("starfield");
 const ctx = canvas?.getContext("2d");
 let stars = [];
+let lastStarFrame = 0;
+
+function getStarFieldProfile() {
+  const isLiquidGlass = document.body.dataset.theme === "liquidglass";
+  const isConstrained = window.matchMedia?.("(max-width: 820px)")?.matches
+    || window.matchMedia?.("(pointer: coarse)")?.matches
+    || false;
+
+  if (isLiquidGlass && isConstrained) return { density: 0.42, frameBudget: 56 };
+  if (isLiquidGlass) return { density: 0.55, frameBudget: 46 };
+  if (isConstrained) return { density: 0.72, frameBudget: 28 };
+  return { density: 1, frameBudget: 18 };
+}
 
 function resizeCanvas() {
   if (!canvas || !ctx) return;
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
 
-  const count = Math.min(140, Math.floor((canvas.width * canvas.height) / 17500));
+  const profile = getStarFieldProfile();
+  const baseCount = Math.min(140, Math.floor((canvas.width * canvas.height) / 17500));
+  const count = Math.max(24, Math.floor(baseCount * profile.density));
   stars = Array.from({ length: count }, () => ({
     x: Math.random() * canvas.width,
     y: Math.random() * canvas.height,
@@ -35,12 +50,27 @@ function resizeCanvas() {
   }));
 }
 
-function drawStars() {
+function drawStars(timestamp = 0) {
   if (!canvas || !ctx) return;
+  const profile = getStarFieldProfile();
+  const elapsed = timestamp - lastStarFrame;
+
+  if (document.hidden) {
+    requestAnimationFrame(drawStars);
+    return;
+  }
+
+  if (elapsed < profile.frameBudget) {
+    requestAnimationFrame(drawStars);
+    return;
+  }
+
+  const frameFactor = Math.min(3, Math.max(0.9, elapsed / 16.67));
+  lastStarFrame = timestamp;
   ctx.clearRect(0, 0, canvas.width, canvas.height);
 
   stars.forEach((star) => {
-    star.y += star.speed;
+    star.y += star.speed * frameFactor;
     if (star.y > canvas.height + 4) {
       star.y = -4;
       star.x = Math.random() * canvas.width;
@@ -68,6 +98,10 @@ tiltElements.forEach((card) => {
   };
 
   card.addEventListener("mousemove", (event) => {
+    if (document.body.dataset.theme === "liquidglass") {
+      reset();
+      return;
+    }
     const rect = card.getBoundingClientRect();
     const dx = (event.clientX - rect.left) / rect.width - 0.5;
     const dy = (event.clientY - rect.top) / rect.height - 0.5;
@@ -700,6 +734,7 @@ function applyTheme(theme, notify = false) {
 
   setThemeInUrl(selected);
   updateInternalLinks();
+  resizeCanvas();
   if (notify) showToast(`Theme changed: ${selected}`);
 }
 
@@ -1707,6 +1742,10 @@ async function loadRepos() {
         card.style.removeProperty("--my");
       };
       card.addEventListener("mousemove", (event) => {
+        if (document.body.dataset.theme === "liquidglass") {
+          reset();
+          return;
+        }
         const rect = card.getBoundingClientRect();
         const dx = (event.clientX - rect.left) / rect.width - 0.5;
         const dy = (event.clientY - rect.top) / rect.height - 0.5;

styles.css

@@ -2405,6 +2405,89 @@ body[data-theme="liquidglass"] .site-footer {
   padding: 0.52rem 0.8rem;
 }
 
+/* Performance pass: keep Liquid Glass style, reduce GPU-heavy compositing. */
+body[data-theme="liquidglass"] .hero::before,
+body[data-theme="liquidglass"] .panel::before,
+body[data-theme="liquidglass"] .chaos-card::before,
+body[data-theme="liquidglass"] .favorite-card::before,
+body[data-theme="liquidglass"] .fact-card::before,
+body[data-theme="liquidglass"] .glass-card::before,
+body[data-theme="liquidglass"] .repo-card::before,
+body[data-theme="liquidglass"] .contact-item::before,
+body[data-theme="liquidglass"] .mini-terminal::before,
+body[data-theme="liquidglass"] .quiz-board::before,
+body[data-theme="liquidglass"] .command-shell::before,
+body[data-theme="liquidglass"] .hero::after,
+body[data-theme="liquidglass"] .panel::after {
+  content: none;
+}
+
+body[data-theme="liquidglass"] .site-header,
+body[data-theme="liquidglass"] .hero,
+body[data-theme="liquidglass"] .panel,
+body[data-theme="liquidglass"] .command-shell,
+body[data-theme="liquidglass"] .mini-terminal,
+body[data-theme="liquidglass"] .mini-terminal-screen,
+body[data-theme="liquidglass"] .quiz-board,
+body[data-theme="liquidglass"] .terminal,
+body[data-theme="liquidglass"] .chaos-card,
+body[data-theme="liquidglass"] .favorite-card,
+body[data-theme="liquidglass"] .fact-card,
+body[data-theme="liquidglass"] .glass-card,
+body[data-theme="liquidglass"] .repo-card,
+body[data-theme="liquidglass"] .contact-item,
+body[data-theme="liquidglass"] .btn,
+body[data-theme="liquidglass"] .egg-btn,
+body[data-theme="liquidglass"] .theme-top-select,
+body[data-theme="liquidglass"] .theme-cycle-btn,
+body[data-theme="liquidglass"] .easter-toast {
+  backdrop-filter: none;
+}
+
+body[data-theme="liquidglass"] .site-header {
+  box-shadow: 0 10px 24px rgba(2, 10, 28, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
+}
+
+body[data-theme="liquidglass"] .hero,
+body[data-theme="liquidglass"] .panel,
+body[data-theme="liquidglass"] .command-shell,
+body[data-theme="liquidglass"] .mini-terminal,
+body[data-theme="liquidglass"] .quiz-board,
+body[data-theme="liquidglass"] .chaos-card,
+body[data-theme="liquidglass"] .favorite-card,
+body[data-theme="liquidglass"] .fact-card,
+body[data-theme="liquidglass"] .glass-card,
+body[data-theme="liquidglass"] .repo-card,
+body[data-theme="liquidglass"] .contact-item {
+  box-shadow: 0 8px 20px rgba(2, 10, 28, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+body[data-theme="liquidglass"] .hero:hover,
+body[data-theme="liquidglass"] .panel:hover,
+body[data-theme="liquidglass"] .favorite-card:hover,
+body[data-theme="liquidglass"] .fact-card:hover,
+body[data-theme="liquidglass"] .glass-card:hover,
+body[data-theme="liquidglass"] .repo-card:hover,
+body[data-theme="liquidglass"] .contact-item:hover,
+body[data-theme="liquidglass"] .chaos-card:hover {
+  box-shadow: 0 10px 22px rgba(5, 18, 41, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
+}
+
+body[data-theme="liquidglass"] .favorite-card:hover,
+body[data-theme="liquidglass"] .fact-card:hover,
+body[data-theme="liquidglass"] .glass-card:hover,
+body[data-theme="liquidglass"] .repo-card:hover,
+body[data-theme="liquidglass"] .contact-item:hover,
+body[data-theme="liquidglass"] .chaos-card:hover {
+  transform: translateY(-1px);
+}
+
+body[data-theme="liquidglass"] .chips span,
+body[data-theme="liquidglass"] .theme-top-select,
+body[data-theme="liquidglass"] .theme-cycle-btn {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
 .easter-toast.show {
   opacity: 1;
   transform: translateX(-50%) translateY(0);