Deploy from Lumerel

2026-02-20 20:43:55 +00:00
commit d4f63dfc5e
5 changed files with 803 additions and 0 deletions
--- a/main.js
+++ b/main.js
@@ -0,0 +1,106 @@
+/**
+ * Lumerel — 3D Homepage
+ * main.js
+ *
+ * Handles:
+ *  - Spline 3D scene loading & pointer-events toggle
+ *  - Navbar scroll backdrop blur
+ *  - Background video autoplay fallback
+ *  - Waitlist button hooks
+ */
+
+/* ── Spline / 3D Integration ──────────────────────────────────
+ *
+ *  When your Spline scene is ready:
+ *
+ *  1. Open index.html and find .hero__3d-placeholder
+ *  2. Replace the entire div with:
+ *
+ *     <spline-viewer
+ *       url="https://prod.spline.design/YOUR_SCENE_ID/scene.splinecode"
+ *       events-target="global"
+ *     ></spline-viewer>
+ *
+ *  3. If the scene needs mouse/touch interaction, call:
+ *     window.Lumerel.enableSpline()
+ *
+ *  The <spline-viewer> web component is already loaded via CDN
+ *  in the <head> of index.html.
+ *
+ ──────────────────────────────────────────────────────────── */
+
+const splineLayer = document.getElementById('spline-layer');
+
+/** Enable pointer events on the 3D layer for interactive Spline scenes. */
+function enableSpline() {
+  if (splineLayer) splineLayer.style.pointerEvents = 'auto';
+}
+
+/** Disable pointer events on the 3D layer (default — keeps UI clickable). */
+function disableSpline() {
+  if (splineLayer) splineLayer.style.pointerEvents = 'none';
+}
+
+// Auto-log when a spline-viewer scene finishes loading
+if (splineLayer) {
+  const viewer = splineLayer.querySelector('spline-viewer');
+  if (viewer) {
+    viewer.addEventListener('load', () => {
+      console.log('[Lumerel] Spline scene loaded successfully.');
+      // Uncomment to enable 3D mouse interaction:
+      // enableSpline();
+    });
+  }
+}
+
+/* ── Navbar Scroll Backdrop ───────────────────────────────── */
+const navbar = document.querySelector('.navbar');
+
+function updateNavbar() {
+  if (!navbar) return;
+  if (window.scrollY > 24) {
+    navbar.style.background    = 'rgba(0, 0, 0, 0.40)';
+    navbar.style.backdropFilter = 'blur(14px)';
+    navbar.style.webkitBackdropFilter = 'blur(14px)';
+    navbar.style.transition    = 'background 0.3s ease, backdrop-filter 0.3s ease';
+  } else {
+    navbar.style.background    = 'transparent';
+    navbar.style.backdropFilter = 'none';
+    navbar.style.webkitBackdropFilter = 'none';
+  }
+}
+
+window.addEventListener('scroll', updateNavbar, { passive: true });
+updateNavbar(); // run immediately on load
+
+/* ── Background Video Fallback ────────────────────────────── */
+const heroVideo = document.querySelector('.hero__video');
+
+if (heroVideo) {
+  heroVideo.addEventListener('error', () => {
+    console.warn('[Lumerel] Background video failed. Falling back to gradient.');
+    const wrap = document.querySelector('.hero__video-wrap');
+    if (wrap) wrap.style.background = 'linear-gradient(135deg, #0a0a0a 0%, #111 100%)';
+  });
+
+  // iOS Safari sometimes needs a touch event to trigger autoplay
+  document.addEventListener('touchstart', () => {
+    if (heroVideo.paused) heroVideo.play().catch(() => {});
+  }, { once: true });
+}
+
+/* ── Waitlist Button Hooks ────────────────────────────────── */
+document.querySelectorAll('.btn-pill').forEach(btn => {
+  btn.addEventListener('click', () => {
+    // TODO: Replace with your waitlist modal / form / redirect
+    console.log('[Lumerel] Join Waitlist clicked.');
+    // Example: openWaitlistModal();
+    // Example: window.location.href = '/waitlist';
+  });
+});
+
+/* ── Global API ───────────────────────────────────────────── */
+window.Lumerel = {
+  enableSpline,
+  disableSpline,
+};