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

- Implement 12-second outro scene with wallpaper background
- Add horizontal EINUNDZWANZIG logo with glow pulse effect
- Include BitcoinEffect particles throughout the scene
- Add "EINUNDZWANZIG" title and subtitle animations
- Include final-chime audio effect at logo appearance
- Add final 2-second fade out for smooth ending
- Include comprehensive test suite with 21 tests

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../scenes/portal/PortalOutroScene.test.tsx   | 262 ++++++++++++++++++
 videos/src/scenes/portal/PortalOutroScene.tsx | 218 +++++++++++++++
 2 files changed, 480 insertions(+)
 create mode 100644 videos/src/scenes/portal/PortalOutroScene.test.tsx
 create mode 100644 videos/src/scenes/portal/PortalOutroScene.tsx

diff --git a/videos/src/scenes/portal/PortalOutroScene.test.tsx b/videos/src/scenes/portal/PortalOutroScene.test.tsx
new file mode 100644
index 0000000..b30a8e4
--- /dev/null
+++ b/videos/src/scenes/portal/PortalOutroScene.test.tsx
@@ -0,0 +1,262 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { PortalOutroScene } from "./PortalOutroScene";
+
+/* eslint-disable @remotion/warn-native-media-tag */
+// Mock Remotion hooks
+vi.mock("remotion", () => ({
+  useCurrentFrame: vi.fn(() => 90),
+  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 BitcoinEffect component
+vi.mock("../../components/BitcoinEffect", () => ({
+  BitcoinEffect: vi.fn(() => (
+    <div data-testid="bitcoin-effect">BitcoinEffect</div>
+  )),
+}));
+
+describe("PortalOutroScene", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<PortalOutroScene />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container with correct classes", () => {
+    const { container } = render(<PortalOutroScene />);
+    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(<PortalOutroScene />);
+    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 horizontal EINUNDZWANZIG logo", () => {
+    const { container } = render(<PortalOutroScene />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const logo = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-horizontal-inverted.svg")
+    );
+    expect(logo).toBeInTheDocument();
+  });
+
+  it("renders the BitcoinEffect component", () => {
+    const { container } = render(<PortalOutroScene />);
+    const bitcoinEffect = container.querySelector('[data-testid="bitcoin-effect"]');
+    expect(bitcoinEffect).toBeInTheDocument();
+  });
+
+  it("renders the EINUNDZWANZIG title text", () => {
+    const { container } = render(<PortalOutroScene />);
+    const title = container.querySelector("h1");
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveTextContent("EINUNDZWANZIG");
+    expect(title).toHaveClass("text-5xl");
+    expect(title).toHaveClass("font-bold");
+    expect(title).toHaveClass("text-white");
+    expect(title).toHaveClass("tracking-widest");
+  });
+
+  it("renders the subtitle with orange color", () => {
+    const { container } = render(<PortalOutroScene />);
+    const subtitle = container.querySelector("p");
+    expect(subtitle).toBeInTheDocument();
+    expect(subtitle).toHaveTextContent("Die deutschsprachige Bitcoin-Community");
+    expect(subtitle).toHaveClass("text-orange-500");
+  });
+
+  it("renders audio sequence for final-chime sound effect", () => {
+    const { container } = render(<PortalOutroScene />);
+    const sequences = container.querySelectorAll('[data-testid="sequence"]');
+    // final-chime = 1 sequence
+    expect(sequences.length).toBe(1);
+  });
+
+  it("includes final-chime audio", () => {
+    const { container } = render(<PortalOutroScene />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const chimeAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("final-chime.mp3")
+    );
+    expect(chimeAudio).toBeInTheDocument();
+  });
+
+  it("renders vignette overlay with pointer-events-none", () => {
+    const { container } = render(<PortalOutroScene />);
+    const vignettes = container.querySelectorAll(".pointer-events-none");
+    expect(vignettes.length).toBeGreaterThan(0);
+  });
+
+  it("renders glow effect element with blur filter", () => {
+    const { container } = render(<PortalOutroScene />);
+    const elements = container.querySelectorAll('[style*="blur(60px)"]');
+    expect(elements.length).toBeGreaterThan(0);
+  });
+
+  it("renders gradient overlay for background effect", () => {
+    const { container } = render(<PortalOutroScene />);
+    const gradientElements = container.querySelectorAll('[style*="radial-gradient"]');
+    expect(gradientElements.length).toBeGreaterThan(0);
+  });
+
+  it("renders logo with drop-shadow glow effect", () => {
+    const { container } = render(<PortalOutroScene />);
+    const glowElements = container.querySelectorAll('[style*="drop-shadow"]');
+    expect(glowElements.length).toBeGreaterThan(0);
+  });
+
+  it("renders ambient glow at bottom", () => {
+    const { container } = render(<PortalOutroScene />);
+    const ambientGlow = container.querySelector(".h-64.pointer-events-none");
+    expect(ambientGlow).toBeInTheDocument();
+  });
+});
+
+describe("PortalOutroScene logo display", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders horizontal logo with correct width", () => {
+    const { container } = render(<PortalOutroScene />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const logo = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-horizontal-inverted.svg")
+    );
+    expect(logo).toBeInTheDocument();
+    expect(logo).toHaveStyle({ width: "600px" });
+  });
+
+  it("logo is centered in the container", () => {
+    const { container } = render(<PortalOutroScene />);
+    const centerContainer = container.querySelector(".flex.flex-col.items-center.justify-center");
+    expect(centerContainer).toBeInTheDocument();
+  });
+});
+
+describe("PortalOutroScene text styling", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("title has text shadow for glow effect", () => {
+    const { container } = render(<PortalOutroScene />);
+    const title = container.querySelector("h1");
+    expect(title).toBeInTheDocument();
+    const style = title?.getAttribute("style");
+    expect(style).toContain("text-shadow");
+  });
+
+  it("subtitle has tracking-wide class", () => {
+    const { container } = render(<PortalOutroScene />);
+    const subtitle = container.querySelector("p");
+    expect(subtitle).toBeInTheDocument();
+    expect(subtitle).toHaveClass("tracking-wide");
+  });
+
+  it("subtitle has font-medium class", () => {
+    const { container } = render(<PortalOutroScene />);
+    const subtitle = container.querySelector("p");
+    expect(subtitle).toBeInTheDocument();
+    expect(subtitle).toHaveClass("font-medium");
+  });
+});
+
+describe("PortalOutroScene audio configuration", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("final-chime sequence starts at logo delay (1 second / 30 frames)", () => {
+    const { container } = render(<PortalOutroScene />);
+    const sequences = container.querySelectorAll('[data-testid="sequence"]');
+    const chimeSequence = Array.from(sequences).find((seq) => {
+      const audio = seq.querySelector('[data-testid="audio"]');
+      return audio?.getAttribute("src")?.includes("final-chime.mp3");
+    });
+    expect(chimeSequence).toBeInTheDocument();
+    expect(chimeSequence).toHaveAttribute("data-from", "30");
+  });
+
+  it("final-chime has correct duration (3 seconds / 90 frames)", () => {
+    const { container } = render(<PortalOutroScene />);
+    const sequences = container.querySelectorAll('[data-testid="sequence"]');
+    const chimeSequence = Array.from(sequences).find((seq) => {
+      const audio = seq.querySelector('[data-testid="audio"]');
+      return audio?.getAttribute("src")?.includes("final-chime.mp3");
+    });
+    expect(chimeSequence).toBeInTheDocument();
+    expect(chimeSequence).toHaveAttribute("data-duration", "90");
+  });
+});
diff --git a/videos/src/scenes/portal/PortalOutroScene.tsx b/videos/src/scenes/portal/PortalOutroScene.tsx
new file mode 100644
index 0000000..816f32f
--- /dev/null
+++ b/videos/src/scenes/portal/PortalOutroScene.tsx
@@ -0,0 +1,218 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Img,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { BitcoinEffect } from "../../components/BitcoinEffect";
+
+// Spring configurations
+const SMOOTH = { damping: 200 };
+const SNAPPY = { damping: 15, stiffness: 80 };
+
+/**
+ * PortalOutroScene - Scene 9: Outro (12 seconds / 360 frames @ 30fps)
+ *
+ * Animation sequence:
+ * 1. Fade from previous scene to wallpaper background
+ * 2. BitcoinEffect particles throughout
+ * 3. Horizontal Logo fades in at center
+ * 4. "EINUNDZWANZIG" text appears below logo
+ * 5. Glow effect pulses around the logo
+ * 6. Background music fades out in last 3 seconds
+ * 7. Audio: final-chime at logo appearance
+ */
+export const PortalOutroScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const durationInFrames = 12 * fps; // 360 frames
+
+  // Background fade-in from black (0-30 frames)
+  const backgroundSpring = spring({
+    frame,
+    fps,
+    config: SMOOTH,
+  });
+  const backgroundOpacity = interpolate(backgroundSpring, [0, 1], [0, 0.3]);
+
+  // Logo entrance animation (delayed 1 second)
+  const logoDelay = Math.floor(1 * fps);
+  const logoSpring = spring({
+    frame: frame - logoDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const logoOpacity = interpolate(logoSpring, [0, 1], [0, 1]);
+  const logoScale = interpolate(logoSpring, [0, 1], [0.8, 1]);
+  const logoY = interpolate(logoSpring, [0, 1], [30, 0]);
+
+  // Logo glow pulse effect
+  const glowIntensity = interpolate(
+    Math.sin((frame - logoDelay) * 0.06),
+    [-1, 1],
+    [0.4, 0.9]
+  );
+  const glowScale = interpolate(
+    Math.sin((frame - logoDelay) * 0.04),
+    [-1, 1],
+    [1.0, 1.2]
+  );
+
+  // Text entrance (delayed 2 seconds)
+  const textDelay = Math.floor(2 * fps);
+  const textSpring = spring({
+    frame: frame - textDelay,
+    fps,
+    config: SMOOTH,
+  });
+  const textOpacity = interpolate(textSpring, [0, 1], [0, 1]);
+  const textY = interpolate(textSpring, [0, 1], [20, 0]);
+
+  // Subtitle entrance (delayed 2.5 seconds)
+  const subtitleDelay = Math.floor(2.5 * fps);
+  const subtitleSpring = spring({
+    frame: frame - subtitleDelay,
+    fps,
+    config: SMOOTH,
+  });
+  const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
+
+  // Final fade out in last 2 seconds (frames 300-360)
+  const fadeOutStart = durationInFrames - 2 * fps;
+  const finalFadeOpacity = interpolate(
+    frame,
+    [fadeOutStart, durationInFrames],
+    [1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+
+  return (
+    <AbsoluteFill className="bg-zinc-900 overflow-hidden">
+      {/* Audio: final-chime when logo appears */}
+      <Sequence from={logoDelay} durationInFrames={Math.floor(3 * fps)}>
+        <Audio src={staticFile("sfx/final-chime.mp3")} volume={0.6} />
+      </Sequence>
+
+      {/* Content wrapper with final fade */}
+      <div style={{ opacity: finalFadeOpacity }}>
+        {/* Wallpaper Background */}
+        <div
+          className="absolute inset-0"
+          style={{
+            transform: "scale(1.05)",
+            transformOrigin: "center center",
+          }}
+        >
+          <Img
+            src={staticFile("einundzwanzig-wallpaper.png")}
+            className="absolute inset-0 w-full h-full object-cover"
+            style={{ opacity: backgroundOpacity }}
+          />
+        </div>
+
+        {/* Dark gradient overlay */}
+        <div
+          className="absolute inset-0"
+          style={{
+            background:
+              "radial-gradient(circle at center, rgba(24, 24, 27, 0.6) 0%, rgba(24, 24, 27, 0.9) 70%, rgba(24, 24, 27, 0.98) 100%)",
+          }}
+        />
+
+        {/* Bitcoin particle effect */}
+        <BitcoinEffect />
+
+        {/* Content container */}
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          {/* Outer glow effect behind logo */}
+          <div
+            className="absolute"
+            style={{
+              width: 800,
+              height: 400,
+              background:
+                "radial-gradient(ellipse, rgba(247, 147, 26, 0.35) 0%, transparent 60%)",
+              opacity: glowIntensity * logoSpring,
+              transform: `scale(${glowScale * logoScale})`,
+              filter: "blur(60px)",
+            }}
+          />
+
+          {/* Horizontal Logo */}
+          <div
+            style={{
+              opacity: logoOpacity,
+              transform: `scale(${logoScale}) translateY(${logoY}px)`,
+            }}
+          >
+            <div
+              style={{
+                filter: `drop-shadow(0 0 ${40 * glowIntensity}px rgba(247, 147, 26, 0.5))`,
+              }}
+            >
+              <Img
+                src={staticFile("einundzwanzig-horizontal-inverted.svg")}
+                style={{
+                  width: 600,
+                  height: "auto",
+                }}
+              />
+            </div>
+          </div>
+
+          {/* EINUNDZWANZIG text */}
+          <div
+            className="mt-12 text-center"
+            style={{
+              opacity: textOpacity,
+              transform: `translateY(${textY}px)`,
+            }}
+          >
+            <h1
+              className="text-5xl font-bold text-white tracking-widest"
+              style={{
+                textShadow: `0 0 ${30 * glowIntensity}px rgba(247, 147, 26, 0.4), 0 2px 20px rgba(0, 0, 0, 0.5)`,
+              }}
+            >
+              EINUNDZWANZIG
+            </h1>
+          </div>
+
+          {/* Subtitle */}
+          <div
+            className="mt-6 text-center"
+            style={{
+              opacity: subtitleOpacity,
+            }}
+          >
+            <p className="text-2xl text-orange-500 font-medium tracking-wide">
+              Die deutschsprachige Bitcoin-Community
+            </p>
+          </div>
+        </div>
+
+        {/* Ambient glow at bottom */}
+        <div
+          className="absolute inset-x-0 bottom-0 h-64 pointer-events-none"
+          style={{
+            background:
+              "linear-gradient(to top, rgba(247, 147, 26, 0.08) 0%, transparent 100%)",
+          }}
+        />
+
+        {/* Vignette overlay */}
+        <div
+          className="absolute inset-0 pointer-events-none"
+          style={{
+            boxShadow: "inset 0 0 250px 100px rgba(0, 0, 0, 0.8)",
+          }}
+        />
+      </div>
+    </AbsoluteFill>
+  );
+};