pointing to video

2025-03-12 02:53:19 -06:00 · 2025-03-12 02:53:19 -06:00 · 1ddf02dd94
parent 8d78045501
commit 1ddf02dd94
2 changed files with 93 additions and 68 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+teaser.mp4
--- 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();