remocn ✕ LN — New sponsor

1import React from "react";
2import { AbsoluteFill, Easing, Img, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
3import { demoAsset } from "@/lib/demo-assets";
4import {
5  TransitionSeries,
6  linearTiming,
7  type TransitionPresentation,
8  type TransitionPresentationComponentProps,
9} from "@remotion/transitions";
10import { Gif } from "@remotion/gif";
11import { loadFont as loadSans } from "@remotion/google-fonts/Manrope";
12 
13import { Backdrop } from "@/components/remocn/backdrop";
14import { SoftBlurIn } from "@/components/remocn/soft-blur-in";
15 
16// Bind the sans font to the CSS variable the remocn typography components read.
17const { fontFamily: SANS_FAMILY } = loadSans("normal", {
18  subsets: ["latin"],
19  weights: ["400", "500", "600", "700", "800"],
20});
21 
22const SANS =
23  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
24 
25const INK = "#fafafa";
26const FAINT = "rgba(250,250,250,0.5)";
27const ACCENT = "#a78bfa";
28 
29const clampOpts = {
30  extrapolateLeft: "clamp" as const,
31  extrapolateRight: "clamp" as const,
32};
33 
34// ---------------------------------------------------------------------------
35// Scene timings (frames @ 30fps). Transitions overlap.
36// ---------------------------------------------------------------------------
37const S_INTRO = 60; //  centered animated emoji
38const S_HOOK = 72; //   text animation
39const S_MAIN = 100; //  sponsor lockup
40 
41const T_X = 16; //  crossfade
42const T_ZB = 18; // zoom-blur
43 
44export const SPONSOR_LN_DURATION = S_INTRO + S_HOOK + S_MAIN - (T_ZB + T_X);
45 
46// ===========================================================================
47// Scene 1 — Intro. A single animated emoji, centered, springing in with a
48// gentle float.
49// ===========================================================================
50const IntroScene: React.FC = () => {
51  const frame = useCurrentFrame();
52  const { fps } = useVideoConfig();
53  const s = spring({
54    frame,
55    fps,
56    config: { damping: 12, stiffness: 150, mass: 0.9 },
57  });
58  const scale = interpolate(s, [0, 1], [0.4, 1]);
59  const float = Math.sin(frame / 14) * 8;
60  const size = 260;
61  return (
62    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
63      <div
64        style={{
65          width: size,
66          height: size,
67          opacity: s,
68          transform: `translateY(${float}px) scale(${scale})`,
69          filter: "drop-shadow(0 22px 44px rgba(0,0,0,0.5))",
70        }}
71      >
72        <Gif
73          src={demoAsset("emoji.gif")}
74// … truncated