From 74e1bb87426a5b3980089bedd39f0a4313e8fcdf Mon Sep 17 00:00:00 2001
From: HolgerHatGarKeineNode <fsociety.mkv@pm.me>
Date: Sat, 24 Jan 2026 13:16:05 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=AC=20Add=20PortalTitleScene=20compone?=
 =?UTF-8?q?nt=20for=20Title=20Card=20(Scene=202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements the Title Card scene with:
- Typing animation for "EINUNDZWANZIG PORTAL" title
- Blinking cursor during typing effect
- Subtitle fade-in animation after title completes
- Audio integration with typing and ui-appear sounds
- Background glow and vignette effects

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 videos/src/PortalPresentation.tsx             |   3 +-
 .../scenes/portal/PortalTitleScene.test.tsx   | 197 ++++++++++++++++++
 videos/src/scenes/portal/PortalTitleScene.tsx | 181 ++++++++++++++++
 3 files changed, 380 insertions(+), 1 deletion(-)
 create mode 100644 videos/src/scenes/portal/PortalTitleScene.test.tsx
 create mode 100644 videos/src/scenes/portal/PortalTitleScene.tsx

diff --git a/videos/src/PortalPresentation.tsx b/videos/src/PortalPresentation.tsx
index 948d3f8..108e8e3 100644
--- a/videos/src/PortalPresentation.tsx
+++ b/videos/src/PortalPresentation.tsx
@@ -1,6 +1,7 @@
 import { AbsoluteFill, Sequence, useVideoConfig, Img, staticFile } from "remotion";
 import { inconsolataFont } from "./fonts/inconsolata";
 import { PortalIntroScene } from "./scenes/portal/PortalIntroScene";
+import { PortalTitleScene } from "./scenes/portal/PortalTitleScene";
 
 /**
  * PortalPresentation - Main composition for the Einundzwanzig Portal presentation video
@@ -134,7 +135,7 @@ export const PortalPresentation: React.FC = () => {
         durationInFrames={sceneFrames.portalTitle.duration}
         premountFor={fps}
       >
-        <PlaceholderScene name="Portal Title" sceneNumber={2} />
+        <PortalTitleScene />
       </Sequence>
 
       {/* Scene 3: Dashboard Overview (12s) */}
diff --git a/videos/src/scenes/portal/PortalTitleScene.test.tsx b/videos/src/scenes/portal/PortalTitleScene.test.tsx
new file mode 100644
index 0000000..1647283
--- /dev/null
+++ b/videos/src/scenes/portal/PortalTitleScene.test.tsx
@@ -0,0 +1,197 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { PortalTitleScene } from "./PortalTitleScene";
+
+/* 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 */
+
+describe("PortalTitleScene", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<PortalTitleScene />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container with correct classes", () => {
+    const { container } = render(<PortalTitleScene />);
+    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(<PortalTitleScene />);
+    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 title element", () => {
+    const { container } = render(<PortalTitleScene />);
+    const title = container.querySelector("h1");
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveClass("text-7xl");
+    expect(title).toHaveClass("font-bold");
+    expect(title).toHaveClass("text-white");
+  });
+
+  it("displays typed text based on current frame", () => {
+    const { container } = render(<PortalTitleScene />);
+    const title = container.querySelector("h1");
+    // At frame 60 with 2 frames per char, we should have 30 characters typed
+    // But title is only 20 chars, so full title should be displayed
+    expect(title?.textContent).toContain("EINUNDZWANZIG PORTAL");
+  });
+
+  it("renders the cursor element with orange color", () => {
+    const { container } = render(<PortalTitleScene />);
+    const cursor = container.querySelector(".text-orange-500");
+    expect(cursor).toBeInTheDocument();
+    expect(cursor?.textContent).toBe("|");
+  });
+
+  it("renders the subtitle text", () => {
+    const { container } = render(<PortalTitleScene />);
+    const subtitle = container.querySelector("p");
+    expect(subtitle).toBeInTheDocument();
+    expect(subtitle).toHaveTextContent(
+      "Das Herzstück der deutschsprachigen Bitcoin-Community"
+    );
+    expect(subtitle).toHaveClass("text-zinc-300");
+  });
+
+  it("renders audio sequences for sound effects", () => {
+    const { container } = render(<PortalTitleScene />);
+    const sequences = container.querySelectorAll('[data-testid="sequence"]');
+    expect(sequences.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("includes typing audio", () => {
+    const { container } = render(<PortalTitleScene />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const typingAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("typing.mp3")
+    );
+    expect(typingAudio).toBeInTheDocument();
+  });
+
+  it("includes ui-appear audio for subtitle", () => {
+    const { container } = render(<PortalTitleScene />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const uiAppearAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("ui-appear.mp3")
+    );
+    expect(uiAppearAudio).toBeInTheDocument();
+  });
+
+  it("renders vignette overlay with pointer-events-none", () => {
+    const { container } = render(<PortalTitleScene />);
+    const vignette = container.querySelector('[class*="pointer-events-none"]');
+    expect(vignette).toBeInTheDocument();
+  });
+
+  it("renders center glow effect", () => {
+    const { container } = render(<PortalTitleScene />);
+    // Look for the glow element with blur filter
+    const elements = container.querySelectorAll('[style*="blur(60px)"]');
+    expect(elements.length).toBeGreaterThan(0);
+  });
+
+  it("renders decorative line under subtitle", () => {
+    const { container } = render(<PortalTitleScene />);
+    const line = container.querySelector(".h-0\\.5");
+    expect(line).toBeInTheDocument();
+    expect(line).toHaveClass("bg-gradient-to-r");
+  });
+});
+
+describe("PortalTitleScene typing animation", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("shows partial text at early frames", async () => {
+    const remotion = await import("remotion");
+    vi.mocked(remotion.useCurrentFrame).mockReturnValue(10);
+
+    const { container } = render(<PortalTitleScene />);
+    const title = container.querySelector("h1");
+    // At frame 10 with 2 frames per char = 5 characters
+    const titleSpan = title?.querySelector("span");
+    expect(titleSpan?.textContent?.length).toBeLessThanOrEqual(5);
+  });
+
+  it("shows full title after typing completes", async () => {
+    const remotion = await import("remotion");
+    // Title is 20 chars, 2 frames per char = 40 frames to complete
+    vi.mocked(remotion.useCurrentFrame).mockReturnValue(50);
+
+    const { container } = render(<PortalTitleScene />);
+    const title = container.querySelector("h1");
+    expect(title?.textContent).toContain("EINUNDZWANZIG PORTAL");
+  });
+});
diff --git a/videos/src/scenes/portal/PortalTitleScene.tsx b/videos/src/scenes/portal/PortalTitleScene.tsx
new file mode 100644
index 0000000..50eec6f
--- /dev/null
+++ b/videos/src/scenes/portal/PortalTitleScene.tsx
@@ -0,0 +1,181 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Img,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { Audio } from "@remotion/media";
+
+// Spring configurations from PRD
+const SMOOTH = { damping: 200 };
+
+// Typing animation configuration
+const CHAR_FRAMES = 2; // Frames per character
+const CURSOR_BLINK_FRAMES = 16;
+
+/**
+ * PortalTitleScene - Scene 2: Title Card (4 seconds / 120 frames @ 30fps)
+ *
+ * Animation sequence:
+ * 1. "EINUNDZWANZIG PORTAL" types in character by character
+ * 2. Blinking cursor during typing
+ * 3. Subtitle fades in after title completes
+ * 4. Audio: typing sound during type animation, ui-appear for subtitle
+ */
+export const PortalTitleScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Main title text
+  const titleText = "EINUNDZWANZIG PORTAL";
+  const subtitleText = "Das Herzstück der deutschsprachigen Bitcoin-Community";
+
+  // Calculate typed characters for title
+  const typedTitleChars = Math.min(
+    titleText.length,
+    Math.floor(frame / CHAR_FRAMES)
+  );
+  const typedTitle = titleText.slice(0, typedTitleChars);
+
+  // Title typing complete frame
+  const titleCompleteFrame = titleText.length * CHAR_FRAMES;
+
+  // Cursor blink effect - only show while typing or shortly after
+  const showCursor = frame < titleCompleteFrame + fps; // Show cursor for 1 second after typing completes
+  const cursorOpacity = showCursor
+    ? interpolate(
+        frame % CURSOR_BLINK_FRAMES,
+        [0, CURSOR_BLINK_FRAMES / 2, CURSOR_BLINK_FRAMES],
+        [1, 0, 1],
+        { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+      )
+    : 0;
+
+  // Subtitle entrance - after title typing completes
+  const subtitleDelay = titleCompleteFrame + Math.floor(0.3 * fps);
+  const subtitleSpring = spring({
+    frame: frame - subtitleDelay,
+    fps,
+    config: SMOOTH,
+  });
+  const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
+  const subtitleY = interpolate(subtitleSpring, [0, 1], [20, 0]);
+
+  // Background glow that pulses subtly
+  const glowIntensity = interpolate(
+    Math.sin(frame * 0.05),
+    [-1, 1],
+    [0.3, 0.5]
+  );
+
+  // Scene entrance fade from intro scene
+  const entranceFade = interpolate(frame, [0, Math.floor(0.3 * fps)], [0, 1], {
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill
+      className="bg-zinc-900 overflow-hidden"
+      style={{ opacity: entranceFade }}
+    >
+      {/* Audio: typing sound */}
+      <Sequence durationInFrames={titleCompleteFrame + Math.floor(0.5 * fps)}>
+        <Audio src={staticFile("sfx/typing.mp3")} volume={0.5} />
+      </Sequence>
+
+      {/* Audio: ui-appear for subtitle */}
+      <Sequence from={subtitleDelay} durationInFrames={Math.floor(1 * fps)}>
+        <Audio src={staticFile("sfx/ui-appear.mp3")} volume={0.6} />
+      </Sequence>
+
+      {/* Wallpaper Background */}
+      <div className="absolute inset-0">
+        <Img
+          src={staticFile("einundzwanzig-wallpaper.png")}
+          className="absolute inset-0 w-full h-full object-cover"
+          style={{ opacity: 0.15 }}
+        />
+      </div>
+
+      {/* Dark gradient overlay */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(circle at center, transparent 0%, rgba(24, 24, 27, 0.8) 60%, rgba(24, 24, 27, 0.98) 100%)",
+        }}
+      />
+
+      {/* Center glow effect */}
+      <div
+        className="absolute inset-0 flex items-center justify-center"
+        style={{ opacity: glowIntensity }}
+      >
+        <div
+          style={{
+            width: 800,
+            height: 400,
+            background:
+              "radial-gradient(ellipse, rgba(247, 147, 26, 0.2) 0%, transparent 70%)",
+            filter: "blur(60px)",
+          }}
+        />
+      </div>
+
+      {/* Content container */}
+      <div className="absolute inset-0 flex flex-col items-center justify-center">
+        {/* Title with typing animation */}
+        <div className="text-center">
+          <h1 className="text-7xl font-bold text-white tracking-wider">
+            <span>{typedTitle}</span>
+            <span
+              className="text-orange-500"
+              style={{ opacity: cursorOpacity }}
+            >
+              |
+            </span>
+          </h1>
+        </div>
+
+        {/* Subtitle */}
+        <div
+          className="mt-8 text-center"
+          style={{
+            opacity: subtitleOpacity,
+            transform: `translateY(${subtitleY}px)`,
+          }}
+        >
+          <p className="text-2xl text-zinc-300 font-light tracking-wide">
+            {subtitleText}
+          </p>
+        </div>
+
+        {/* Decorative line under subtitle */}
+        <div
+          className="mt-6"
+          style={{
+            opacity: subtitleOpacity,
+            transform: `scaleX(${subtitleSpring})`,
+          }}
+        >
+          <div
+            className="h-0.5 bg-gradient-to-r from-transparent via-orange-500 to-transparent"
+            style={{ width: 300 }}
+          />
+        </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>
+  );
+};