feat: hero video cycle and wormhole warp

magi · magi · commit 15178e165281 · 2025-12-14T01:13:37.000+10:00
diff --git a/--get/post-checkout b/--get/post-checkout
@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { printf >&2 "\n%s\n\n" "This repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting the 'post-checkout' file in the hooks directory (set by 'core.hookspath'; usually '.git/hooks')."; exit 2; }
+git lfs post-checkout "$@"
diff --git a/--get/post-commit b/--get/post-commit
@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { printf >&2 "\n%s\n\n" "This repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting the 'post-commit' file in the hooks directory (set by 'core.hookspath'; usually '.git/hooks')."; exit 2; }
+git lfs post-commit "$@"
diff --git a/--get/post-merge b/--get/post-merge
@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { printf >&2 "\n%s\n\n" "This repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting the 'post-merge' file in the hooks directory (set by 'core.hookspath'; usually '.git/hooks')."; exit 2; }
+git lfs post-merge "$@"
diff --git a/--get/pre-push b/--get/pre-push
@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { printf >&2 "\n%s\n\n" "This repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting the 'pre-push' file in the hooks directory (set by 'core.hookspath'; usually '.git/hooks')."; exit 2; }
+git lfs pre-push "$@"
diff --git a/public/img/hero-spag-map.svg b/public/img/hero-spag-map.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none">
+  <defs>
+    <linearGradient id="spag" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="rgb(0, 0, 0)" />
+      <stop offset="0.2" stop-color="rgb(51, 130, 0)" />
+      <stop offset="0.35" stop-color="rgb(89, 220, 0)" />
+      <stop offset="0.5" stop-color="rgb(128, 255, 0)" />
+      <stop offset="0.65" stop-color="rgb(166, 220, 0)" />
+      <stop offset="0.8" stop-color="rgb(204, 130, 0)" />
+      <stop offset="1" stop-color="rgb(255, 0, 0)" />
+    </linearGradient>
+  </defs>
+  <rect x="0" y="0" width="1" height="1" fill="url(#spag)" />
+</svg>
diff --git a/public/video/hero-alien.mp4 b/public/video/hero-alien.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b9e63fd029017fc09c0bb4c92131b4c5cf228d28618ca1b3cb3f36e8354bb02f
+size 8008198
diff --git a/public/video/hero-alien.webm b/public/video/hero-alien.webm
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7009046a6969005d658752cabe3f90195a90ec637a327d0e29d45f665a473429
+size 10607205
diff --git a/public/video/hero-computer.mp4 b/public/video/hero-computer.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:862fa4948aa7374c6c6e4a6176db06e3fda997078715c45befeef64804693787
+size 11780007
diff --git a/public/video/hero-computer.webm b/public/video/hero-computer.webm
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d307c31a775f0ecdf07bd920b9f3cbb97e015fa3694e676d5c9eda155cf722a3
+size 11907485
diff --git a/public/video/hero-every.mp4 b/public/video/hero-every.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:496df26ae015e5041ad63da6f19d8334fa8bb30eb2e1dfb548f7b3e499da281e
+size 12288427
diff --git a/public/video/hero-every.webm b/public/video/hero-every.webm
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3365d829cd0a8cb0fa3673974a2a448ad06eb681ce7f470fce78a65c9ec3af5f
+size 17679048
diff --git a/public/video/hero-planet.mp4 b/public/video/hero-planet.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a2d1de880251f2abe3f8c85901b267f7d9d32dee0d65666706f796605a85afd2
+size 12034100
diff --git a/public/video/hero-planet.webm b/public/video/hero-planet.webm
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f7b9e2e31d88561e6dc1f73d953dfb8811c011039e1bfcf544b2007fdbbd3ea9
+size 13407508
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -43,31 +43,31 @@ body {
   color: #00e0ff;
 }
 
+@property --hero-warp {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
 .hero-warp {
   display: inline-block;
-  filter: url(#hero-warp-filter);
   transform-origin: center;
-  will-change: filter;
+  will-change: filter, transform;
+  letter-spacing: calc(var(--hero-warp) * -0.03em);
 }
 
-@property --hero-warp {
-  syntax: '<number>';
-  inherits: true;
-  initial-value: 0;
+.hero-warp--down {
+  filter: url(#hero-spag-filter-down);
 }
 
-.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-warp--up {
+  filter: url(#hero-spag-filter-up);
 }
 
-.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-cta-wrap {
+  transform: scale(calc(1 - var(--hero-warp) * 0.18));
+  transform-origin: center;
+  will-change: transform;
 }
 
 .hero-title {
@@ -80,13 +80,9 @@ body {
   }
 
   .hero-warp {
+    letter-spacing: normal;
     filter: none;
   }
-
-  .hero-pull-down,
-  .hero-pull-up {
-    transform: none;
-  }
 }
 
 video:fullscreen::-webkit-media-text-track-display,
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -108,30 +108,59 @@ export default async function RootLayout({
         >
           <defs>
             <filter
-              id="hero-warp-filter"
-              x="-20%"
-              y="-20%"
-              width="140%"
-              height="140%"
+              id="hero-spag-filter-down"
+              x="-30%"
+              y="-120%"
+              width="160%"
+              height="340%"
               colorInterpolationFilters="sRGB"
             >
-              <feTurbulence
-                id="hero-warp-turbulence"
-                type="fractalNoise"
-                baseFrequency="0.002 0.006"
-                numOctaves="1"
-                seed="2"
-                result="noise"
+              <feImage
+                href="/img/hero-spag-map.svg"
+                preserveAspectRatio="none"
+                result="mapSource"
               />
-              <feGaussianBlur
-                in="noise"
-                stdDeviation="1.35"
-                result="noiseSmooth"
+              <feComponentTransfer in="mapSource" result="map">
+                <feFuncR
+                  type="table"
+                  tableValues="0.250 0.345 0.419 0.471 0.502 0.512 0.500 0.488 0.498 0.529 0.581 0.655 0.750"
+                />
+                <feFuncG type="linear" slope="-0.22" intercept="0.61" />
+              </feComponentTransfer>
+              <feDisplacementMap
+                id="hero-spag-displacement-down"
+                in="SourceGraphic"
+                in2="map"
+                scale="0"
+                xChannelSelector="R"
+                yChannelSelector="G"
+              />
+            </filter>
+
+            <filter
+              id="hero-spag-filter-up"
+              x="-30%"
+              y="-120%"
+              width="160%"
+              height="340%"
+              colorInterpolationFilters="sRGB"
+            >
+              <feImage
+                href="/img/hero-spag-map.svg"
+                preserveAspectRatio="none"
+                result="mapSource"
               />
+              <feComponentTransfer in="mapSource" result="map">
+                <feFuncR
+                  type="table"
+                  tableValues="0.250 0.345 0.419 0.471 0.502 0.512 0.500 0.488 0.498 0.529 0.581 0.655 0.750"
+                />
+                <feFuncG type="linear" slope="0.22" intercept="0.39" />
+              </feComponentTransfer>
               <feDisplacementMap
-                id="hero-warp-displacement"
+                id="hero-spag-displacement-up"
                 in="SourceGraphic"
-                in2="noiseSmooth"
+                in2="map"
                 scale="0"
                 xChannelSelector="R"
                 yChannelSelector="G"
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -9,27 +9,29 @@ export default function Home() {
     <div className="relative h-[100svh] overflow-hidden px-6">
       <HeroMedia />
 
-      <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 hero-pull-down">
+      <div className="absolute top-1/2 left-1/2 z-10 -mt-[4.75rem] w-full max-w-[24rem] -translate-x-1/2 -translate-y-full text-center sm:-mt-[6rem] sm:max-w-4xl">
+        <h1 className="hero-title font-display text-5xl font-semibold tracking-tight text-balance sm:text-6xl md:text-7xl">
+          <span className="hero-warp hero-warp--down">
             Push AI further, faster.
           </span>
         </h1>
       </div>
 
       <div className="absolute top-1/2 left-1/2 z-10 -translate-x-1/2 -translate-y-1/2">
-        <a
-          href={everyCodeHref}
-          className="group focus-visible:ring-brand-cyan/70 inline-flex h-11 items-center justify-center gap-2 rounded-full bg-white px-7 text-sm font-semibold whitespace-nowrap text-black transition-all hover:scale-[1.03] hover:bg-white/90 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-black focus-visible:outline-none"
-        >
-          Every Code
-          <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-        </a>
+        <div className="hero-cta-wrap">
+          <a
+            href={everyCodeHref}
+            className="group focus-visible:ring-brand-cyan/70 inline-flex h-11 items-center justify-center gap-2 rounded-full bg-white px-7 text-sm font-semibold whitespace-nowrap text-black transition-all hover:scale-[1.03] hover:bg-white/90 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-black focus-visible:outline-none"
+          >
+            Every Code
+            <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+          </a>
+        </div>
       </div>
 
-      <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="absolute top-1/2 left-1/2 z-10 mt-[4.75rem] w-full max-w-3xl -translate-x-1/2 px-2 sm:mt-[6rem]">
         <div className="hero-title font-display text-center text-2xl tracking-tight sm:text-3xl">
-          <span className="hero-warp hero-pull-up">
+          <span className="hero-warp hero-warp--up">
             When you move at light speed,
             <br />
             <b>every</b> bold idea can ship.
diff --git a/src/components/HeroMedia.tsx b/src/components/HeroMedia.tsx

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+#!/bin/sh`
	`2`	`+command -v git-lfs >/dev/null 2>&1 \|\| { printf >&2 "\n%s\n\n" "This repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting the 'post-checkout' file in the hooks directory (set by 'core.hookspath'; usually '.git/hooks')."; exit 2; }`
	`3`	`+git lfs post-checkout "$@"`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+version https://git-lfs.github.com/spec/v1`
	`2`	`+oid sha256:b9e63fd029017fc09c0bb4c92131b4c5cf228d28618ca1b3cb3f36e8354bb02f`
	`3`	`+size 8008198`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+version https://git-lfs.github.com/spec/v1`
	`2`	`+oid sha256:7009046a6969005d658752cabe3f90195a90ec637a327d0e29d45f665a473429`
	`3`	`+size 10607205`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+version https://git-lfs.github.com/spec/v1`
	`2`	`+oid sha256:862fa4948aa7374c6c6e4a6176db06e3fda997078715c45befeef64804693787`
	`3`	`+size 11780007`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+version https://git-lfs.github.com/spec/v1`
	`2`	`+oid sha256:d307c31a775f0ecdf07bd920b9f3cbb97e015fa3694e676d5c9eda155cf722a3`
	`3`	`+size 11907485`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+version https://git-lfs.github.com/spec/v1`
	`2`	`+oid sha256:496df26ae015e5041ad63da6f19d8334fa8bb30eb2e1dfb548f7b3e499da281e`
	`3`	`+size 12288427`