🎬 Add PortalIntroScene component for Logo Reveal (Scene 1)

Implement the first scene of the Portal presentation video (6 seconds):
- AnimatedLogo scales from 0 to 100% with spring animation
- Wallpaper background with zoom effect (1.2 → 1.0 scale)
- Bitcoin particle effects in the background
- Pulsing glow effect around the logo
- Audio integration: logo-whoosh at start, logo-reveal when logo appears
- Title "EINUNDZWANZIG" and subtitle "Das Portal" with staggered entrance
- Vignette overlay for cinematic depth

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

videos/src/PortalPresentation.tsx

@@ -1,5 +1,6 @@
 import { AbsoluteFill, Sequence, useVideoConfig, Img, staticFile } from "remotion";
 import { inconsolataFont } from "./fonts/inconsolata";
+import { PortalIntroScene } from "./scenes/portal/PortalIntroScene";
 
 /**
  * PortalPresentation - Main composition for the Einundzwanzig Portal presentation video
@@ -124,7 +125,7 @@ export const PortalPresentation: React.FC = () => {
         durationInFrames={sceneFrames.logoReveal.duration}
         premountFor={fps}
       >
-        <PlaceholderScene name="Logo Reveal" sceneNumber={1} />
+        <PortalIntroScene />
       </Sequence>
 
       {/* Scene 2: Portal Title (4s) */}

videos/src/scenes/portal/PortalIntroScene.test.tsx

@@ -0,0 +1,168 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { PortalIntroScene } from "./PortalIntroScene";
+
+/* eslint-disable @remotion/warn-native-media-tag */
+// Mock Remotion hooks
+vi.mock("remotion", () => ({
+  useCurrentFrame: vi.fn(() => 60),
+  useVideoConfig: vi.fn(() => ({ fps: 30, width: 1920, height: 1080 })),
+  interpolate: vi.fn((value, inputRange, outputRange, options) => {
+    const [inMin, inMax] = inputRange;
+    const [outMin, outMax] = outputRange;
+    let progress = (value - inMin) / (inMax - inMin);
+    if (options?.extrapolateLeft === "clamp") {
+      progress = Math.max(0, progress);
+    }
+    if (options?.extrapolateRight === "clamp") {
+      progress = Math.min(1, progress);
+    }
+    return outMin + progress * (outMax - outMin);
+  }),
+  spring: vi.fn(() => 1),
+  AbsoluteFill: vi.fn(({ children, className, style }) => (
+    <div data-testid="absolute-fill" className={className} style={style}>
+      {children}
+    </div>
+  )),
+  Img: vi.fn(({ src, className, style }) => (
+    <img data-testid="remotion-img" src={src} className={className} style={style} />
+  )),
+  staticFile: vi.fn((path: string) => `/static/${path}`),
+  Sequence: vi.fn(({ children, from, durationInFrames }) => (
+    <div data-testid="sequence" data-from={from} data-duration={durationInFrames}>
+      {children}
+    </div>
+  )),
+  Easing: {
+    out: vi.fn((fn) => fn),
+    cubic: vi.fn((t: number) => t),
+  },
+}));
+
+// Mock @remotion/media
+vi.mock("@remotion/media", () => ({
+  Audio: vi.fn(({ src, volume }) => (
+    <audio data-testid="audio" src={src} data-volume={volume} />
+  )),
+}));
+/* eslint-enable @remotion/warn-native-media-tag */
+
+// Mock AnimatedLogo component
+vi.mock("../../components/AnimatedLogo", () => ({
+  AnimatedLogo: vi.fn(({ size, delay }) => (
+    <div data-testid="animated-logo" data-size={size} data-delay={delay}>
+      AnimatedLogo
+    </div>
+  )),
+}));
+
+// Mock BitcoinEffect component
+vi.mock("../../components/BitcoinEffect", () => ({
+  BitcoinEffect: vi.fn(() => (
+    <div data-testid="bitcoin-effect">BitcoinEffect</div>
+  )),
+}));
+
+describe("PortalIntroScene", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<PortalIntroScene />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container with correct classes", () => {
+    const { container } = render(<PortalIntroScene />);
+    const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
+    expect(absoluteFill).toBeInTheDocument();
+    expect(absoluteFill).toHaveClass("bg-zinc-900");
+    expect(absoluteFill).toHaveClass("overflow-hidden");
+  });
+
+  it("renders the wallpaper background image", () => {
+    const { container } = render(<PortalIntroScene />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const wallpaper = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-wallpaper.png")
+    );
+    expect(wallpaper).toBeInTheDocument();
+  });
+
+  it("renders the AnimatedLogo component with correct props", () => {
+    const { container } = render(<PortalIntroScene />);
+    const logo = container.querySelector('[data-testid="animated-logo"]');
+    expect(logo).toBeInTheDocument();
+    expect(logo).toHaveAttribute("data-size", "350");
+    // delay is 0.5 * fps = 0.5 * 30 = 15 frames
+    expect(logo).toHaveAttribute("data-delay", "15");
+  });
+
+  it("renders the BitcoinEffect component", () => {
+    const { container } = render(<PortalIntroScene />);
+    const bitcoinEffect = container.querySelector('[data-testid="bitcoin-effect"]');
+    expect(bitcoinEffect).toBeInTheDocument();
+  });
+
+  it("renders the EINUNDZWANZIG title with correct styling", () => {
+    const { container } = render(<PortalIntroScene />);
+    const title = container.querySelector("h1");
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveTextContent("EINUNDZWANZIG");
+    expect(title).toHaveClass("text-6xl");
+    expect(title).toHaveClass("font-bold");
+    expect(title).toHaveClass("text-white");
+  });
+
+  it("renders the subtitle with orange color", () => {
+    const { container } = render(<PortalIntroScene />);
+    const subtitle = container.querySelector("p");
+    expect(subtitle).toBeInTheDocument();
+    expect(subtitle).toHaveTextContent("Das Portal");
+    expect(subtitle).toHaveClass("text-orange-500");
+  });
+
+  it("renders audio sequences for sound effects", () => {
+    const { container } = render(<PortalIntroScene />);
+    const sequences = container.querySelectorAll('[data-testid="sequence"]');
+    expect(sequences.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("includes logo-whoosh audio", () => {
+    const { container } = render(<PortalIntroScene />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const whooshAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("logo-whoosh.mp3")
+    );
+    expect(whooshAudio).toBeInTheDocument();
+  });
+
+  it("includes logo-reveal audio", () => {
+    const { container } = render(<PortalIntroScene />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const revealAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("logo-reveal.mp3")
+    );
+    expect(revealAudio).toBeInTheDocument();
+  });
+
+  it("renders vignette overlay with pointer-events-none", () => {
+    const { container } = render(<PortalIntroScene />);
+    const vignette = container.querySelector('[class*="pointer-events-none"]');
+    expect(vignette).toBeInTheDocument();
+  });
+
+  it("renders glow effect element", () => {
+    const { container } = render(<PortalIntroScene />);
+    // Look for the glow element with blur filter
+    const elements = container.querySelectorAll('[style*="blur(40px)"]');
+    expect(elements.length).toBeGreaterThan(0);
+  });
+});

videos/src/scenes/portal/PortalIntroScene.tsx

@@ -0,0 +1,191 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Img,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { AnimatedLogo } from "../../components/AnimatedLogo";
+import { BitcoinEffect } from "../../components/BitcoinEffect";
+
+// Spring configurations from PRD
+const SMOOTH = { damping: 200 };
+
+/**
+ * PortalIntroScene - Scene 1: Logo Reveal (6 seconds / 180 frames @ 30fps)
+ *
+ * Animation sequence:
+ * 1. Wallpaper background zooms in from 1.2 to 1.0 scale
+ * 2. AnimatedLogo scales from 0 to 100% with spring animation
+ * 3. Bitcoin particles fall in the background
+ * 4. Glow effect pulses around the logo
+ * 5. Audio: logo-whoosh at start, logo-reveal when logo appears
+ */
+export const PortalIntroScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Background zoom animation - starts zoomed in, zooms out
+  const backgroundZoom = interpolate(frame, [0, 3 * fps], [1.2, 1.0], {
+    extrapolateRight: "clamp",
+  });
+
+  // Logo entrance spring animation - delayed slightly for dramatic effect
+  const logoEntranceDelay = Math.floor(0.5 * fps);
+  const logoSpring = spring({
+    frame: frame - logoEntranceDelay,
+    fps,
+    config: { damping: 15, stiffness: 80 },
+  });
+  const logoScale = interpolate(logoSpring, [0, 1], [0, 1]);
+  const logoOpacity = interpolate(logoSpring, [0, 0.5], [0, 1], {
+    extrapolateRight: "clamp",
+  });
+
+  // Outer glow pulse effect
+  const glowIntensity = interpolate(
+    Math.sin((frame - logoEntranceDelay) * 0.08),
+    [-1, 1],
+    [0.4, 0.8]
+  );
+  const glowScale = interpolate(
+    Math.sin((frame - logoEntranceDelay) * 0.06),
+    [-1, 1],
+    [1.0, 1.15]
+  );
+
+  // Title text entrance - appears after logo
+  const titleDelay = Math.floor(2 * fps);
+  const titleSpring = spring({
+    frame: frame - titleDelay,
+    fps,
+    config: SMOOTH,
+  });
+  const titleOpacity = interpolate(titleSpring, [0, 1], [0, 1]);
+  const titleY = interpolate(titleSpring, [0, 1], [30, 0]);
+
+  // Subtitle entrance
+  const subtitleDelay = Math.floor(2.8 * fps);
+  const subtitleSpring = spring({
+    frame: frame - subtitleDelay,
+    fps,
+    config: SMOOTH,
+  });
+  const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
+
+  // Center position for logo (adjusts as text appears)
+  const contentY = interpolate(frame, [titleDelay, titleDelay + fps], [0, -60], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill className="bg-zinc-900 overflow-hidden">
+      {/* Audio: logo-whoosh at start */}
+      <Sequence durationInFrames={Math.floor(2 * fps)}>
+        <Audio src={staticFile("sfx/logo-whoosh.mp3")} volume={0.7} />
+      </Sequence>
+
+      {/* Audio: logo-reveal when logo appears */}
+      <Sequence from={logoEntranceDelay} durationInFrames={Math.floor(2 * fps)}>
+        <Audio src={staticFile("sfx/logo-reveal.mp3")} volume={0.6} />
+      </Sequence>
+
+      {/* Wallpaper Background with zoom effect */}
+      <div
+        className="absolute inset-0"
+        style={{
+          transform: `scale(${backgroundZoom})`,
+          transformOrigin: "center center",
+        }}
+      >
+        <Img
+          src={staticFile("einundzwanzig-wallpaper.png")}
+          className="absolute inset-0 w-full h-full object-cover"
+          style={{ opacity: 0.25 }}
+        />
+      </div>
+
+      {/* Dark gradient overlay for depth */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(circle at center, transparent 0%, rgba(24, 24, 27, 0.7) 70%, rgba(24, 24, 27, 0.95) 100%)",
+        }}
+      />
+
+      {/* Bitcoin particle effect in background */}
+      <BitcoinEffect />
+
+      {/* Content container with vertical centering */}
+      <div
+        className="absolute inset-0 flex flex-col items-center justify-center"
+        style={{
+          transform: `translateY(${contentY}px)`,
+        }}
+      >
+        {/* Outer glow effect behind logo */}
+        <div
+          className="absolute"
+          style={{
+            width: 500,
+            height: 500,
+            background:
+              "radial-gradient(circle, rgba(247, 147, 26, 0.4) 0%, transparent 60%)",
+            opacity: glowIntensity * logoSpring,
+            transform: `scale(${glowScale * logoScale})`,
+            filter: "blur(40px)",
+          }}
+        />
+
+        {/* AnimatedLogo with entrance animation */}
+        <div
+          style={{
+            opacity: logoOpacity,
+            transform: `scale(${logoScale})`,
+          }}
+        >
+          <AnimatedLogo size={350} delay={logoEntranceDelay} />
+        </div>
+
+        {/* Title text */}
+        <div
+          className="mt-8 text-center"
+          style={{
+            opacity: titleOpacity,
+            transform: `translateY(${titleY}px)`,
+          }}
+        >
+          <h1 className="text-6xl font-bold text-white tracking-wider">
+            EINUNDZWANZIG
+          </h1>
+        </div>
+
+        {/* Subtitle */}
+        <div
+          className="mt-4 text-center"
+          style={{
+            opacity: subtitleOpacity,
+          }}
+        >
+          <p className="text-2xl text-orange-500 font-medium tracking-wide">
+            Das Portal
+          </p>
+        </div>
+      </div>
+
+      {/* Vignette overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.7)",
+        }}
+      />
+    </AbsoluteFill>
+  );
+};