From 1ddf02dd946755544df91f56baf28e503274e940 Mon Sep 17 00:00:00 2001
From: Demetri Pirpiris <demetriospirpiris@gmail.com>
Date: Wed, 12 Mar 2025 02:53:19 -0600
Subject: [PATCH] pointing to video

---
 .gitignore |   1 +
 index.html | 160 ++++++++++++++++++++++++++++++-----------------------
 2 files changed, 93 insertions(+), 68 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5968350
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+teaser.mp4
diff --git a/index.html b/index.html
index 77ec722..a17507f 100644
--- a/index.html
+++ b/index.html
@@ -4,68 +4,28 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Raw Reel Social</title>
-  <!-- Explicitly load your favicon -->
   <link rel="icon" type="image/x-icon" href="favicon.ico" />
-
   <style>
-    /* Reset & Box-sizing */
+    /* RESET & BOX-SIZING */
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
-
-    /* Basic Body Setup */
+    
+    /* BASIC BODY SETUP: BLACK BACKDROP */
     html, body {
       width: 100%;
       height: 100%;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       color: #fff;
-      overflow: hidden; /* Hide overflow to maintain a “single-screen” look if it fits */
-      background: #000; /* fallback for older browsers */
+      background: #000;    /* Plain black base */
+      overflow: hidden;    /* Keep “single screen” if it fits */
     }
 
     /*
-      1) Big, Dramatic Synthwave Background:
-         We'll use body::before to layer a bright animated gradient over black.
-         Combined with the starfield canvas (transparent) for a spacey effect.
-    */
-    body::before {
-      content: "";
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      /* 
-        Layer two backgrounds:
-        1) A bright, swirling radial gradient
-        2) A diagonal swirl to overlay color & motion 
-      */
-      background: 
-        radial-gradient(circle at 20% 50%, 
-                        rgba(255,0,212,0.4), 
-                        rgba(0,240,255,0.2), 
-                        rgba(98,0,255,0.4)), 
-        linear-gradient(-45deg, #ff00d4, #6200ff, #00f0ff, #ff8800);
-      background-size: cover, 400% 400%;
-      background-blend-mode: screen; /* merges them for vibrant glow */
-      z-index: -2;
-      animation: backgroundShift 10s ease-in-out infinite alternate;
-    }
-
-    @keyframes backgroundShift {
-      0% {
-        background-position: center, 0% 50%;
-      }
-      100% {
-        background-position: center, 100% 50%;
-      }
-    }
-
-    /*
-      2) Starfield Canvas
-         Make sure it's transparent so the gradient behind it shows.
+      STARFIELD: behind everything (z-index: -2),
+      so we can layer a pink grid in front of it.
     */
     #starfield {
       position: fixed;
@@ -73,14 +33,73 @@
       left: 0;
       width: 100%;
       height: 100%;
-      z-index: -1; 
-      background: transparent;
+      z-index: -2;
+      background: transparent; /* so black or the overlay is visible */
     }
 
     /*
-      Main Container
-      Takes the full viewport height 
-      and spaces out each element so they fit.
+      PINK GRID: body::before 
+      - 2 repeating-linear-gradients for horizontal & vertical lines
+      - 2px bright pink lines, each cell 40px tall/wide
+      - Slight angle: -15deg
+      - Slowly scroll upward
+    */
+    body::before {
+      content: "";
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 200%;
+      height: 200%;
+      z-index: -1;          /* in front of starfield, behind content */
+      pointer-events: none; /* ignore clicks */
+      
+      /* 
+         We'll do each set of lines in bright pink:
+         - (A) horizontal lines repeating every 40px, with a 2px thick line 
+         - (B) vertical lines similarly
+      */
+      background:
+        /* Horizontal lines */
+        repeating-linear-gradient(
+          0deg,
+          rgba(255,0,212,1) 0px,      /* line color start */
+          rgba(255,0,212,1) 2px,      /* line color end (2px thick) */
+          transparent 2px,            /* transparent gap */
+          transparent 40px            /* next line after 40px total */
+        ),
+        /* Vertical lines */
+        repeating-linear-gradient(
+          90deg,
+          rgba(255,0,212,1) 0px,
+          rgba(255,0,212,1) 2px,
+          transparent 2px,
+          transparent 40px
+        );
+
+      background-size: 100% 100%, 100% 100%;
+      
+      /* Slight angle + small shift so grid definitely covers the screen */
+      transform: rotate(-15deg) translate(-10%, -10%);
+      transform-origin: center;
+
+      animation: scrollGrid 30s linear infinite;
+    }
+
+    /*
+      Animate background-position to scroll upward:
+      We'll shift it from top (0) to -1200px over 30s, then repeat. 
+      Increase or decrease 1200 if you want slower/faster or more noticeable movement.
+    */
+    @keyframes scrollGrid {
+      0%   { background-position: 0 0, 0 0; }
+      100% { background-position: 0 -1200px, 0 -1200px; }
+    }
+
+    /*
+      MAIN CONTAINER 
+      - Full viewport height
+      - Evenly space out items (logo, tagline, video, contact, button)
     */
     .container {
       display: flex;
@@ -91,9 +110,10 @@
       height: 100vh;
       text-align: center;
       padding: 1rem;
+      /* z-index: auto (in front of grid), so content is visible over the grid */
     }
 
-    /* 1. Logo */
+    /* LOGO */
     .logo {
       max-width: 90%;
       max-height: 150px;
@@ -104,7 +124,7 @@
       transform: scale(1.05);
     }
 
-    /* 2. Tagline (Hero Statement) */
+    /* TAGLINE (Hero Statement) */
     .tagline {
       font-size: 2rem;
       font-weight: 700;
@@ -126,11 +146,11 @@
       100% { opacity: 1; }
     }
 
-    /* 3. Main Video */
+    /* MAIN VIDEO */
     .video-container {
       width: 80%;
       max-width: 800px;
-      max-height: 50vh; /* prevent the video from hogging the entire page on small screens */
+      max-height: 50vh; /* keep it from dominating small screens */
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 8px 20px rgba(0,0,0,0.5), 0 0 10px rgba(255,255,255,0.2);
@@ -143,7 +163,7 @@
       border-radius: 12px;
     }
 
-    /* 4. Contact Information */
+    /* CONTACT INFO */
     .contact-info {
       line-height: 1.4;
     }
@@ -153,7 +173,7 @@
       text-shadow: 0 0 3px #fff, 0 0 5px magenta;
     }
 
-    /* 5. Call to Action (CTA) */
+    /* CALL TO ACTION (CTA) */
     .cta-btn {
       display: inline-block;
       text-decoration: none;
@@ -174,7 +194,7 @@
       opacity: 0.9;
     }
 
-    /* Mobile Tweaks */
+    /* MOBILE TWEAKS */
     @media (max-width: 480px) {
       .tagline {
         font-size: 1.4rem;
@@ -191,7 +211,8 @@
   </style>
 </head>
 <body>
-  <!-- Transparent Starfield -->
+
+  <!-- STARFIELD behind the grid (z-index: -2) -->
   <canvas id="starfield"></canvas>
 
   <div class="container">
@@ -199,7 +220,7 @@
     <h1 class="tagline">Short-form social videos that boost your brand.</h1>
 
     <div class="video-container">
-      <video src="teaser.mp4" controls></video>
+      <video src="https://storage.googleapis.com/rawreelsocial-videos/teaser.mp4" controls></video>
     </div>
 
     <div class="contact-info">
@@ -211,11 +232,11 @@
   </div>
 
   <script>
-    // Starfield JS (transparent)
+    /* STARFIELD: animates white stars drifting downward. */
     const canvas = document.getElementById('starfield');
     const ctx = canvas.getContext('2d');
     let stars = [];
-    const STAR_COUNT = 150;
+    const STAR_COUNT = 120; // tweak for more or fewer stars
     let w, h;
 
     function initStarfield() {
@@ -225,8 +246,8 @@
         stars.push({
           x: Math.random() * w,
           y: Math.random() * h,
-          speed: 0.4 + Math.random() * 0.5,
-          size: Math.random() * 2
+          speed: 0.5 + Math.random() * 0.5, // star vertical speed
+          size: Math.random() * 2.5        // star radius
         });
       }
     }
@@ -237,19 +258,21 @@
     }
 
     function update() {
-      // Clear the canvas to transparent
+      // Clear to transparent so we see black + pink grid behind.
       ctx.clearRect(0, 0, w, h);
 
+      // Move & redraw stars
       for (let i = 0; i < STAR_COUNT; i++) {
         const s = stars[i];
         s.y += s.speed;
-        // Respawn star at top if it goes off the bottom
+        // If star goes off bottom, respawn at random top position
         if (s.y > h) {
           s.y = 0;
           s.x = Math.random() * w;
         }
+        // Draw star
         ctx.beginPath();
-        ctx.arc(s.x, s.y, s.size, 0, Math.PI * 2);
+        ctx.arc(s.x, s.y, s.size, 0, 2 * Math.PI);
         ctx.fillStyle = "#fff";
         ctx.fill();
       }
@@ -257,6 +280,7 @@
     }
 
     window.addEventListener('resize', initStarfield);
+
     window.addEventListener('load', () => {
       initStarfield();
       update();