Product Hero

1"use client";
2 
3import { loadFont as loadInter } from "@remotion/google-fonts/Inter";
4import { type CSSProperties, useCallback, useState } from "react";
5import {
6  AbsoluteFill,
7  continueRender,
8  delayRender,
9  Easing,
10  getRemotionEnvironment,
11  interpolate,
12  OffthreadVideo,
13  staticFile,
14  useCurrentFrame,
15  useVideoConfig,
16} from "remotion";
17import {
18  mixOklch,
19  type SnapCnTheme,
20  useSnapCnTheme,
21  withAlpha,
22} from "@/lib/snap-cn-ui";
23 
24const { fontFamily: SANS } = loadInter("normal", {
25  weights: ["500", "600", "700"],
26  subsets: ["latin"],
27});
28 
29export interface HeroLaunchProps {
30  /** Reveal caption under the cards. */
31  heading?: string;
32  /**
33   * Left card media. An image URL, a video URL (`.mp4`/`.webm`/`.mov` → plays
34   * via <OffthreadVideo>), or a CSS `linear-gradient(...)`. The video editor
35   * swaps this for the viewer's own image/clip.
36   */
37  image1?: string;
38  /** Right card media (same rules as `image1`). */
39  image2?: string;
40  /** Design-system token overrides. */
41  theme?: Partial<SnapCnTheme>;
42  /** Defaults to `"dark"` — the scene is a cinematic stage, lit for dark. */
43  mode?: "light" | "dark";
44}
45 
46const PERSP = 1000;
47// Pure rotateY about each card's INNER edge — no rotateX, so the inner edges
48// stay vertical and the centre gap is a clean, even channel top-to-bottom.
49const TILT = 17;
50const GAP = 92;
51/** Stand-in for missing media — the page lifted a shade, not a fixed grey. */
52const placeholder = (t: SnapCnTheme) =>
53  `linear-gradient(135deg,${mixOklch(t.background, t.card, 0.55)},${mixOklch(
54    t.background,
55    t.card,
56    0.2,
57  )})`;
58 
59// Sample product-reveal clips. Absolute, because these ship as *defaults* into a
60// project that does not have them in its own `public/` — a root-relative default
61// becomes `staticFile()` in a render and 404s the first time anyone renders the
62// component they just installed. Swap them for your own media, root-relative or
63// not; `resolveSrc` handles both.
64const SHOWCASE = [
65  "https://snapcn.dev/showcase-videos/iphone-17-reveal.mp4",
66  "https://snapcn.dev/showcase-videos/airpods-pro.mp4",
67];
68 
69const isVideo = (src: string) => /\.(mp4|webm|mov|m4v)(\?|$)/i.test(src);
70const isGradient = (src: string) => src.startsWith("linear-gradient");
71 
72// easeOutQuint — quick to move, silky to settle, lands exactly on target with
73// no asymptotic "stuck" tail (the thing overdamped springs get wrong).
74const OUT = Easing.bezier(0.22, 1, 0.36, 1);
75// Gravity-ish accelerate for the drop-off.
76// … truncated