UI Improvement v3

assets/javascripts/community_landing/landing.js

@@ -1,7 +1,3 @@
-// ═══════════════════════════════════════════════════════════════════
-// Community Landing v2.1 — JS
-// Theme, scroll animations, stat counters, smooth horizontal drag
-// ═══════════════════════════════════════════════════════════════════
 (function () {
   "use strict";
 
@@ -9,64 +5,39 @@
   function $$(s, c) { return Array.from((c || document).querySelectorAll(s)); }
 
   // ═══════════════════════════════════════════════════════════════════
-  // 1. THEME DETECTION + TOGGLE
+  // 1. THEME & PROGRESS BAR
   // ═══════════════════════════════════════════════════════════════════
   (function initTheme() {
     var stored = localStorage.getItem("cl-theme");
-    if (stored) {
-      document.documentElement.setAttribute("data-theme", stored);
-    }
+    if (stored) document.documentElement.setAttribute("data-theme", stored);
   })();
 
   $$(".cl-theme-toggle").forEach(function (btn) {
     btn.addEventListener("click", function () {
       var current = document.documentElement.getAttribute("data-theme");
-      var isDark;
-
-      if (current) {
-        isDark = current === "dark";
-      } else {
-        isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      }
-
+      var isDark = current ? (current === "dark") : window.matchMedia("(prefers-color-scheme: dark)").matches;
       var next = isDark ? "light" : "dark";
       document.documentElement.setAttribute("data-theme", next);
       localStorage.setItem("cl-theme", next);
     });
   });
 
-  // ═══════════════════════════════════════════════════════════════════
-  // 2. RANDOM HERO IMAGE
-  // ═══════════════════════════════════════════════════════════════════
-  (function initHeroImage() {
-    var container = $(".cl-hero__image[data-hero-images]");
-    if (!container) return;
-    try {
-      var images = JSON.parse(container.getAttribute("data-hero-images"));
-      if (!images || images.length < 2) return;
-      var img = $(".cl-hero__image-img", container);
-      if (!img) return;
-      var pick = images[Math.floor(Math.random() * images.length)];
-      img.style.opacity = "0";
-      img.src = pick;
-      img.onload = function () { img.style.opacity = ""; img.classList.add("loaded"); };
-      img.onerror = function () { img.src = images[0]; img.style.opacity = ""; img.classList.add("loaded"); };
-    } catch (e) { /* invalid JSON */ }
-  })();
+  var progressBar = $(".cl-progress-bar");
 
   // ═══════════════════════════════════════════════════════════════════
-  // 3. NAVBAR SCROLL
+  // 2. NAVBAR & SCROLL
   // ═══════════════════════════════════════════════════════════════════
   var navbar = $("#cl-navbar");
   if (navbar) {
-    // Apply custom navbar bg/border from data attributes
-    var navBg = navbar.getAttribute("data-nav-bg");
-    var navBorder = navbar.getAttribute("data-nav-border");
-    if (navBg) navbar.style.setProperty("--cl-nav-bg", navBg);
-    if (navBorder) navbar.style.setProperty("--cl-nav-border", "1px " + navBorder + " var(--cl-border)");
-
     var onScroll = function () {
-      navbar.classList.toggle("scrolled", window.scrollY > 50);
+      var scrolled = window.scrollY;
+      navbar.classList.toggle("scrolled", scrolled > 50);
+
+      if (progressBar) {
+        var winHeight = document.documentElement.scrollHeight - window.innerHeight;
+        var progress = (scrolled / winHeight) * 100;
+        progressBar.style.width = progress + "%";
+      }
     };
     window.addEventListener("scroll", onScroll, { passive: true });
     onScroll();
@@ -79,62 +50,71 @@
       hamburger.classList.toggle("active");
       navLinks.classList.toggle("open");
     });
-    $$("a, button", navLinks).forEach(function (el) {
-      el.addEventListener("click", function () {
-        hamburger.classList.remove("active");
-        navLinks.classList.remove("open");
-      });
-    });
   }
 
   // ═══════════════════════════════════════════════════════════════════
-  // 4. SCROLL REVEAL ANIMATIONS (supports configurable anim types)
+  // 3. ENHANCED REVEAL (Staggered)
   // ═══════════════════════════════════════════════════════════════════
-  var animType = document.documentElement.getAttribute("data-scroll-anim") || "fade_up";
-
-  if (animType !== "none" && "IntersectionObserver" in window) {
-    var revealObserver = new IntersectionObserver(
-      function (entries) {
-        entries.forEach(function (entry) {
-          if (entry.isIntersecting) {
-            entry.target.classList.add("visible");
-            revealObserver.unobserve(entry.target);
+  if ("IntersectionObserver" in window) {
+    var revealObserver = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("visible");
+          if (entry.target.classList.contains("cl-stagger")) {
+            $$("> *", entry.target).forEach(function (child, i) {
+              child.style.transitionDelay = (i * 0.1) + "s";
+            });
           }
-        });
-      },
-      { threshold: 0.08, rootMargin: "0px 0px -30px 0px" }
-    );
+          revealObserver.unobserve(entry.target);
+        }
+      });
+    }, { threshold: 0.1, rootMargin: "0px 0px -50px 0px" });
 
-    $$(".cl-anim").forEach(function (el) {
-      revealObserver.observe(el);
-    });
-  } else {
-    // No animation — make everything visible immediately
-    $$(".cl-anim").forEach(function (el) {
-      el.classList.add("visible");
-    });
+    $$(".cl-anim, .cl-stagger").forEach(function (el) { revealObserver.observe(el); });
   }
 
   // ═══════════════════════════════════════════════════════════════════
-  // 5. STAT COUNTER ANIMATION
+  // 4. MOUSE PARALLAX
   // ═══════════════════════════════════════════════════════════════════
-  function formatNumber(n) { return n.toLocaleString("en-US"); }
+  var heroImage = $(".cl-hero__image-img");
+  var orbs = $$(".cl-orb");
+  var parallaxEnabled = document.documentElement.getAttribute("data-parallax") === "true";
 
+  if (parallaxEnabled && window.innerWidth > 1024) {
+    window.addEventListener("mousemove", function (e) {
+      var x = (e.clientX / window.innerWidth - 0.5) * 2;
+      var y = (e.clientY / window.innerHeight - 0.5) * 2;
+
+      if (heroImage) {
+        heroImage.style.transform = "rotateY(" + (x * 10) + "deg) rotateX(" + (-y * 10) + "deg) translate(" + (x * 20) + "px, " + (y * 20) + "px)";
+      }
+
+      orbs.forEach(function (orb, i) {
+        var factor = (i + 1) * 15;
+        orb.style.transform = "translate(" + (x * factor) + "px, " + (y * factor) + "px)";
+      });
+    }, { passive: true });
+  }
+
+  // ═══════════════════════════════════════════════════════════════════
+  // 5. STAT COUNTER
+  // ═══════════════════════════════════════════════════════════════════
   function animateCount(el) {
     if (el.classList.contains("counted")) return;
     el.classList.add("counted");
     var target = parseInt(el.getAttribute("data-count"), 10);
-    if (isNaN(target) || target === 0) { el.textContent = "0"; return; }
+    if (isNaN(target) || target === 0) return;
 
-    var duration = 1800;
+    var duration = 2000;
     var start = null;
-    function ease(t) { return 1 - Math.pow(1 - t, 4); }
+    var ease = function (t) { return 1 - Math.pow(1 - t, 4); };
+
     function step(ts) {
       if (!start) start = ts;
       var p = Math.min((ts - start) / duration, 1);
-      el.textContent = formatNumber(Math.floor(target * ease(p)));
+      el.textContent = Math.floor(target * ease(p)).toLocaleString();
       if (p < 1) requestAnimationFrame(step);
-      else el.textContent = formatNumber(target);
+      else el.textContent = target.toLocaleString();
     }
     requestAnimationFrame(step);
   }
@@ -144,19 +124,10 @@
       entries.forEach(function (e) {
         if (e.isIntersecting) {
           $$("[data-count]", e.target).forEach(animateCount);
-          if (e.target.hasAttribute("data-count")) animateCount(e.target);
         }
       });
     }, { threshold: 0.2 });
-
     var sr = $("#cl-stats-row"); if (sr) statsObs.observe(sr);
   }
 
-  // ═══════════════════════════════════════════════════════════════════
-  // 6. APP BADGE DETECTION
-  // ═══════════════════════════════════════════════════════════════════
-  var ua = navigator.userAgent || "";
-  if (/iPhone|iPad|iPod/.test(ua)) $$(".cl-app-badge--ios").forEach(function (e) { e.classList.add("highlighted"); });
-  else if (/Android/.test(ua)) $$(".cl-app-badge--android").forEach(function (e) { e.classList.add("highlighted"); });
-
 })();

config/settings.yml

@@ -41,7 +41,7 @@ plugins:
     type: color
 
   # ══════════════════════════════════════════
-  # Scroll Animations
+  # Scroll Animations & Effects
   # ══════════════════════════════════════════
   scroll_animation:
     default: "fade_up"
@@ -55,6 +55,22 @@ plugins:
       - flip_up
       - none
   
+  staggered_reveal_enabled:
+    default: true
+    type: bool
+  
+  dynamic_background_enabled:
+    default: true
+    type: bool
+
+  mouse_parallax_enabled:
+    default: true
+    type: bool
+
+  scroll_progress_enabled:
+    default: true
+    type: bool
+
   # ══════════════════════════════════════════
   # 1. Navbar
   # ══════════════════════════════════════════

lib/community_landing/page_builder.rb

@@ -16,6 +16,9 @@ module CommunityLanding
       html = +""
       html << render_head
       html << "<body class=\"cl-body\">\n"
+      if @s.dynamic_background_enabled
+        html << "<div class=\"cl-orb-container\"><div class=\"cl-orb cl-orb--1\"></div><div class=\"cl-orb cl-orb--2\"></div></div>\n"
+      end
       html << render_navbar
       html << render_hero
       html << render_stats
@@ -42,8 +45,14 @@ module CommunityLanding
       og_logo    = logo_dark_url || logo_light_url
 
       html = +""
-      html << "<!DOCTYPE html>\n<html lang=\"en\" data-scroll-anim=\"#{e(anim_class)}\">\n<head>\n"
+      html << "<!DOCTYPE html>\n<html lang=\"en\""
+      html << " data-scroll-anim=\"#{e(anim_class)}\""
+      html << " data-parallax=\"#{@s.mouse_parallax_enabled}\""
+      html << ">\n<head>\n"
       html << "<meta charset=\"UTF-8\">\n"
+      html << "<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n"
+      html << "<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n"
+      html << "<link href=\"https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n"
       html << "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\">\n"
       html << "<meta name=\"color-scheme\" content=\"dark light\">\n"
       html << "<title>#{e(@s.hero_title)} | #{e(site_name)}</title>\n"
@@ -76,7 +85,11 @@ module CommunityLanding
       navbar_data << " data-nav-border=\"#{e(navbar_border)}\"" if navbar_border && navbar_border != "none"
 
       html = +""
-      html << "<nav class=\"cl-navbar\" id=\"cl-navbar\"#{navbar_data}><div class=\"cl-navbar__inner\">\n"
+      html << "<nav class=\"cl-navbar\" id=\"cl-navbar\"#{navbar_data}>\n"
+      if @s.scroll_progress_enabled
+        html << "<div class=\"cl-progress-bar\"></div>\n"
+      end
+      html << "<div class=\"cl-navbar__inner\">\n"
       html << "<div class=\"cl-navbar__left\">"
       html << "<a href=\"/\" class=\"cl-navbar__brand\">"
       if has_logo?
@@ -234,7 +247,8 @@ module CommunityLanding
       html = +""
       html << "<section class=\"cl-topics cl-anim\" id=\"cl-topics\"#{section_style(border, min_h)}><div class=\"cl-container\">\n"
       html << "<h2 class=\"cl-section-title\">#{e(@s.topics_title)}</h2>\n"
-      html << "<div class=\"cl-topics__grid\">\n"
+      stagger_class = @s.staggered_reveal_enabled ? " cl-stagger" : ""
+      html << "<div class=\"cl-topics__grid#{stagger_class}\">\n"
 
       topics.each do |topic|
         topic_likes   = topic.like_count rescue 0
@@ -296,7 +310,8 @@ module CommunityLanding
       html = +""
       html << "<section class=\"cl-spaces cl-anim\" id=\"cl-groups\"#{section_style(border, min_h)}><div class=\"cl-container\">\n"
       html << "<h2 class=\"cl-section-title\">#{e(@s.groups_title)}</h2>\n"
-      html << "<div class=\"cl-spaces__grid\">\n"
+      stagger_class = @s.staggered_reveal_enabled ? " cl-stagger" : ""
+      html << "<div class=\"cl-spaces__grid#{stagger_class}\">\n"
 
       groups.each do |group|
         display_name = group.full_name.presence || group.name.tr("_-", " ").gsub(/\b\w/, &:upcase)