feat: add Remotion hero animation loop and supporting assets to the site

Author: sunnylqm

site/bun.lock

@@ -1,71 +1,85 @@
 import logo from "../../pages/public/images/logo.svg";
 import GitHubButton from "./GitHubButton";
-import ParticleNetwork from "./ParticleNetwork";
 
 interface BannerProps {
   isMobile?: boolean;
 }
 
 function Banner({ isMobile }: BannerProps) {
   return (
-    <div className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-gradient-to-br from-slate-950 via-[#0c1333] to-indigo-950 min-h-[600px] flex items-center">
-      {/* Particle Network Animation */}
-      <div className="absolute inset-0 z-0">
-        <ParticleNetwork />
-      </div>
+    <div className="pushy-hero relative overflow-hidden min-h-[680px] lg:min-h-[760px] flex items-center bg-[#eee7dc]">
+      <img
+        src="/hero-loop/pushy-hero-loop-poster.png"
+        className="pushy-hero__poster absolute inset-0 h-full w-full object-cover"
+        alt=""
+        aria-hidden="true"
+      />
+      <video
+        className="pushy-hero__video absolute inset-0 h-full w-full object-cover"
+        autoPlay
+        muted
+        loop
+        playsInline
+        preload="metadata"
+        poster="/hero-loop/pushy-hero-loop-poster.png"
+        aria-hidden="true"
+      >
+        <source src="/hero-loop/pushy-hero-loop.webm" type="video/webm" />
+        <source src="/hero-loop/pushy-hero-loop.mp4" type="video/mp4" />
+      </video>
 
-      {/* Subtle overlay gradient for depth */}
-      <div className="absolute inset-0 z-[1] pointer-events-none bg-gradient-to-b from-transparent via-transparent to-slate-950/40" />
+      <div className="absolute inset-0 z-[1] pointer-events-none bg-[linear-gradient(90deg,rgba(249,246,240,0.96)_0%,rgba(248,244,236,0.88)_34%,rgba(248,244,236,0.42)_55%,rgba(25,24,22,0.06)_100%)]" />
+      <div className="absolute inset-0 z-[2] pointer-events-none bg-[linear-gradient(180deg,rgba(255,255,255,0.24)_0%,rgba(255,255,255,0)_52%,rgba(45,38,30,0.2)_100%)]" />
 
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative w-full text-center z-10">
-        <div className="flex justify-center mb-8 animate-fade-in-down">
+      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 relative w-full z-10">
+        <div className="max-w-2xl text-left pt-32 pb-20 lg:pt-40 lg:pb-28">
+          <div className="flex justify-start mb-8 animate-fade-in-down">
           <img
             src={logo}
-            className="w-24 h-24 sm:w-32 sm:h-32 hover:scale-105 transition-transform duration-500 drop-shadow-[0_0_24px_rgba(68,131,237,0.5)]"
+            className="w-20 h-20 sm:w-24 sm:h-24 hover:scale-105 transition-transform duration-500 drop-shadow-[0_10px_28px_rgba(68,131,237,0.24)]"
             alt="Pushy Logo"
           />
-        </div>
+          </div>
 
-        <h1 className="text-5xl sm:text-6xl md:text-7xl font-extrabold tracking-tight mb-6 animate-fade-in-up">
-          <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-indigo-400 to-violet-400">
+          <h1 className="text-5xl sm:text-6xl md:text-7xl font-extrabold tracking-tight mb-6 animate-fade-in-up text-[#182235]">
             Pushy
-          </span>
-        </h1>
+          </h1>
 
-        <p className="text-xl sm:text-2xl md:text-3xl font-medium text-slate-200 mb-8 tracking-wide animate-fade-in-up animation-delay-100">
-          极速热更新框架 for React Native
-        </p>
+          <p className="text-xl sm:text-2xl md:text-3xl font-semibold text-[#233248] mb-8 tracking-wide animate-fade-in-up animation-delay-100">
+            让应用体验持续变好，不打断用户
+          </p>
 
-        <div className="max-w-3xl mx-auto mb-12 animate-fade-in-up animation-delay-200">
-          <p className="text-lg sm:text-xl text-slate-400 leading-relaxed font-light">
-            <span className="block mb-4 text-base sm:text-lg font-medium text-blue-100">
+          <div className="max-w-xl mb-12 animate-fade-in-up animation-delay-200">
+            <p className="text-lg sm:text-xl text-[#4a5768] leading-relaxed font-normal">
+              <span className="block mb-4 text-base sm:text-lg font-semibold text-[#1f3f6d]">
               官方 Skill 已支持 AI 自动完成接入、配置检查与常见问题排查。
-            </span>
-            <span className="inline-block mx-4 relative font-medium text-slate-300">高速节点勤分发</span>
-            <span className="inline-block mx-4 relative font-medium text-slate-300">山河浩广若比邻</span>
-            <br className="hidden sm:block" />
-            <span className="inline-block mx-4 mt-2 sm:mt-4 relative font-medium text-slate-300">增量算法尽优化</span>
-            <span className="inline-block mx-4 mt-2 sm:mt-4 relative font-medium text-slate-300">字节四两拨千斤</span>
-          </p>
-        </div>
+              </span>
+              <span className="inline-block mr-5 mt-2 relative font-medium text-[#334256]">高速节点勤分发</span>
+              <span className="inline-block mr-5 mt-2 relative font-medium text-[#334256]">山河浩广若比邻</span>
+              <br className="hidden sm:block" />
+              <span className="inline-block mr-5 mt-3 relative font-medium text-[#334256]">增量算法尽优化</span>
+              <span className="inline-block mr-5 mt-3 relative font-medium text-[#334256]">字节四两拨千斤</span>
+            </p>
+          </div>
 
-        <div className="flex flex-col sm:flex-row items-center justify-center gap-6 animate-fade-in-up animation-delay-300">
-          <a href="/docs/skills" className="w-full sm:w-auto">
-            <button className="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold rounded-2xl text-lg transition-all duration-300 shadow-lg shadow-blue-600/25 hover:shadow-blue-500/40 hover:-translate-y-1">
-              优先：安装 Skill
-            </button>
-          </a>
-          <a href="/docs/getting-started" className="w-full sm:w-auto">
-            <button className="w-full sm:w-auto px-8 py-4 border border-slate-400/40 bg-slate-900/20 hover:bg-slate-900/35 text-slate-100 font-bold rounded-2xl text-lg transition-all duration-300 hover:-translate-y-1">
-              查看手动接入
-            </button>
-          </a>
-          <div className="scale-125 transform origin-center sm:origin-left hover:scale-150 transition-transform duration-300">
-            <GitHubButton
-              type="stargazers"
-              namespace="reactnativecn"
-              repo="react-native-update"
-            />
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-start gap-5 animate-fade-in-up animation-delay-300">
+            <a href="/docs/skills" className="w-full sm:w-auto">
+              <button className="w-full sm:w-auto px-8 py-4 bg-[#286be8] hover:bg-[#1f5ed4] text-white font-bold rounded-2xl text-lg transition-all duration-300 shadow-lg shadow-blue-600/25 hover:shadow-blue-500/35 hover:-translate-y-1">
+                优先：安装 Skill
+              </button>
+            </a>
+            <a href="/docs/getting-started" className="w-full sm:w-auto">
+              <button className="w-full sm:w-auto px-8 py-4 border border-[#27384f]/20 bg-white/56 hover:bg-white/74 text-[#233248] font-bold rounded-2xl text-lg transition-all duration-300 hover:-translate-y-1 backdrop-blur-sm">
+                查看手动接入
+              </button>
+            </a>
+            <div className="scale-125 transform origin-left hover:scale-150 transition-transform duration-300">
+              <GitHubButton
+                type="stargazers"
+                namespace="reactnativecn"
+                repo="react-native-update"
+              />
+            </div>
           </div>
         </div>
       </div>

site/components/home/Banner.tsx

@@ -1 +1,24 @@
+.pushy-hero {
+  isolation: isolate;
+}
 
+.pushy-hero__poster {
+  z-index: 0;
+}
+
+.pushy-hero__video {
+  z-index: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pushy-hero__video {
+    display: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .pushy-hero__poster,
+  .pushy-hero__video {
+    object-position: 64% center;
+  }
+}

site/components/home/home.scss

@@ -7,7 +7,11 @@
     "dev": "rspress dev",
     "build": "rspress build",
     "preview": "rspress preview",
-    "start": "rspress preview"
+    "start": "rspress preview",
+    "remotion:studio": "remotion studio remotion/index.ts --public-dir=pages/public",
+    "remotion:poster:hero": "remotion still remotion/index.ts PushyHeroLoop pages/public/hero-loop/pushy-hero-loop-poster.png --frame=126 --public-dir=pages/public",
+    "remotion:render:hero:mp4": "remotion render remotion/index.ts PushyHeroLoop pages/public/hero-loop/pushy-hero-loop.mp4 --codec=h264 --public-dir=pages/public",
+    "remotion:render:hero:webm": "remotion render remotion/index.ts PushyHeroLoop pages/public/hero-loop/pushy-hero-loop.webm --codec=vp9 --public-dir=pages/public"
   },
   "dependencies": {
     "@ant-design/icons": "^6.1.1",
@@ -24,5 +28,9 @@
     "sass": "^1.99.0",
     "tailwindcss": "^4.2.4",
     "typescript": "^6.0.3"
+  },
+  "devDependencies": {
+    "@remotion/cli": "4.0.454",
+    "remotion": "4.0.454"
   }
 }

site/package.json

@@ -0,0 +1,53 @@
+# Pushy Homepage Hero Loop
+
+This Remotion composition creates a 10-second seamless homepage background loop for a non-technical business audience. The source keeps the left side quiet for headline and CTA copy, while the right side shows a calm professional using a phone as a small app improvement arrives.
+
+## Composition
+
+- `PushyHeroLoop`
+- 1920x1080
+- 30 fps
+- 300 frames
+- Source asset: `/hero-loop/office-phone-base.png`
+- Suggested poster frame: frame `126`
+
+## Preview
+
+```bash
+bun run remotion:studio
+```
+
+## Render
+
+```bash
+bun run remotion:poster:hero
+bun run remotion:render:hero:mp4
+bun run remotion:render:hero:webm
+```
+
+Use WebM first for modern browsers and MP4 as the compatibility fallback. Keep both muted, looping, inline, and behind a left-side readability gradient.
+
+## Website Embed
+
+```tsx
+<video
+  className="absolute inset-0 h-full w-full object-cover"
+  autoPlay
+  muted
+  loop
+  playsInline
+  preload="metadata"
+  poster="/hero-loop/pushy-hero-loop-poster.png"
+  aria-hidden="true"
+>
+  <source src="/hero-loop/pushy-hero-loop.webm" type="video/webm" />
+  <source src="/hero-loop/pushy-hero-loop.mp4" type="video/mp4" />
+</video>
+```
+
+Recommended CSS behavior:
+
+- Put text and CTAs in the left 42% of the hero.
+- Add a light-to-transparent overlay from left to right for contrast.
+- Respect `prefers-reduced-motion` by falling back to the poster image.
+- Use `object-fit: cover`; avoid cropping the phone on the right at desktop widths.

site/pages/public/hero-loop/office-phone-base.png

@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./root";
+
+registerRoot(RemotionRoot);