feat: sync hero text warp to video

Author: zemaj

src/app/globals.css

@@ -46,9 +46,30 @@ body {
 .hero-warp {
   display: inline-block;
   filter: url(#hero-warp-filter);
+  transform-origin: center;
   will-change: filter;
 }
 
+@property --hero-warp {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+.hero-pull-down {
+  letter-spacing: calc(var(--hero-warp) * -0.02em);
+  transform: translate3d(0, calc(var(--hero-warp) * 24px), 0)
+    scaleX(calc(1 - var(--hero-warp) * 0.08))
+    scaleY(calc(1 + var(--hero-warp) * 0.06));
+}
+
+.hero-pull-up {
+  letter-spacing: calc(var(--hero-warp) * -0.02em);
+  transform: translate3d(0, calc(var(--hero-warp) * -24px), 0)
+    scaleX(calc(1 - var(--hero-warp) * 0.08))
+    scaleY(calc(1 + var(--hero-warp) * 0.06));
+}
+
 .hero-title {
   filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.65));
 }
@@ -61,6 +82,11 @@ body {
   .hero-warp {
     filter: none;
   }
+
+  .hero-pull-down,
+  .hero-pull-up {
+    transform: none;
+  }
 }
 
 video:fullscreen::-webkit-media-text-track-display,

src/app/layout.tsx

@@ -116,37 +116,26 @@ export default async function RootLayout({
               colorInterpolationFilters="sRGB"
             >
               <feTurbulence
+                id="hero-warp-turbulence"
                 type="fractalNoise"
-                baseFrequency="0.004 0.012"
+                baseFrequency="0.002 0.006"
                 numOctaves="1"
                 seed="2"
                 result="noise"
-              >
-                <animate
-                  attributeName="baseFrequency"
-                  dur="14s"
-                  repeatCount="indefinite"
-                  values="0.004 0.012;0.004 0.012;0.007 0.02;0.004 0.012;0.004 0.012"
-                  keyTimes="0;0.78;0.84;0.9;1"
-                  calcMode="linear"
-                />
-              </feTurbulence>
+              />
+              <feGaussianBlur
+                in="noise"
+                stdDeviation="1.35"
+                result="noiseSmooth"
+              />
               <feDisplacementMap
+                id="hero-warp-displacement"
                 in="SourceGraphic"
-                in2="noise"
+                in2="noiseSmooth"
                 scale="0"
                 xChannelSelector="R"
                 yChannelSelector="G"
-              >
-                <animate
-                  attributeName="scale"
-                  dur="14s"
-                  repeatCount="indefinite"
-                  values="0;0;22;8;0"
-                  keyTimes="0;0.78;0.84;0.9;1"
-                  calcMode="linear"
-                />
-              </feDisplacementMap>
+              />
             </filter>
           </defs>
         </svg>

src/app/page.tsx

@@ -11,7 +11,9 @@ export default function Home() {
 
       <div className="absolute top-1/2 left-1/2 z-10 -mt-[3.375rem] w-full max-w-4xl -translate-x-1/2 -translate-y-full text-center">
         <h1 className="hero-title font-display text-4xl font-semibold tracking-tight text-balance sm:text-6xl md:text-7xl">
-          <span className="hero-warp">Push AI further, faster.</span>
+          <span className="hero-warp hero-pull-down">
+            Push AI further, faster.
+          </span>
         </h1>
       </div>
 
@@ -27,9 +29,11 @@ export default function Home() {
 
       <div className="absolute top-1/2 left-1/2 z-10 mt-[3.375rem] w-full max-w-3xl -translate-x-1/2 px-2">
         <div className="hero-title font-display text-center text-2xl tracking-tight sm:text-3xl">
-          When you move at light speed,
-          <br />
-          <b>every</b> bold idea can ship.
+          <span className="hero-warp hero-pull-up">
+            When you move at light speed,
+            <br />
+            <b>every</b> bold idea can ship.
+          </span>
         </div>
       </div>
     </div>

src/components/HeroMedia.tsx

@@ -103,6 +103,79 @@ export function HeroMedia() {
     };
   }, []);
 
+  useEffect(() => {
+    if (
+      typeof window !== 'undefined' &&
+      window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+    ) {
+      return;
+    }
+
+    const doc = document.documentElement;
+    const displacement = document.getElementById(
+      'hero-warp-displacement'
+    ) as SVGFEDisplacementMapElement | null;
+    const turbulence = document.getElementById(
+      'hero-warp-turbulence'
+    ) as SVGFETurbulenceElement | null;
+
+    if (!displacement || !turbulence) return;
+
+    const clamp01 = (value: number) => Math.max(0, Math.min(1, value));
+    const pulse = (time: number, center: number, width: number) => {
+      const x = (time - center) / width;
+      return Math.exp(-x * x);
+    };
+
+    let rafId = 0;
+    let lastWarp = -1;
+
+    const tick = () => {
+      const intro = introRef.current;
+      const loop = loopRef.current;
+
+      const introActive = !!intro && !introEndedRef.current;
+      const activeVideo = introActive ? intro : loop;
+      const activeTime = activeVideo?.currentTime ?? 0;
+
+      let warp = 0;
+      if (introActive) {
+        warp = pulse(activeTime, 2, 0.5);
+      } else if (loop) {
+        warp = pulse(activeTime, 5, 0.7);
+      }
+
+      warp = clamp01(Math.pow(warp, 1.65));
+
+      if (Math.abs(warp - lastWarp) > 0.01) {
+        lastWarp = warp;
+
+        doc.style.setProperty('--hero-warp', warp.toFixed(3));
+
+        const scale = 22 * warp;
+        displacement.setAttribute('scale', scale.toFixed(2));
+
+        const freqX = 0.002 + 0.004 * warp;
+        const freqY = 0.006 + 0.01 * warp;
+        turbulence.setAttribute(
+          'baseFrequency',
+          `${freqX.toFixed(4)} ${freqY.toFixed(4)}`
+        );
+      }
+
+      rafId = window.requestAnimationFrame(tick);
+    };
+
+    rafId = window.requestAnimationFrame(tick);
+
+    return () => {
+      window.cancelAnimationFrame(rafId);
+      doc.style.setProperty('--hero-warp', '0');
+      displacement.setAttribute('scale', '0');
+      turbulence.setAttribute('baseFrequency', '0.002 0.006');
+    };
+  }, []);
+
   return (
     <div
       aria-hidden