🎬 Add ActivityFeedScene component for Activity Feed (Scene 7)

Implements the Activity Feed scene for the Einundzwanzig Portal
presentation video. Features include:

- 3D perspective entrance animation with smooth transitions
- "Aktivitäten" header with pulsing LIVE indicator
- 4 activity items with staggered slide-in animations:
  - EINUNDZWANZIG Kempten (vor 13 Stunden)
  - EINUNDZWANZIG Darmstadt (vor 21 Stunden)
  - EINUNDZWANZIG Vulkaneifel (vor 2 Tagen)
  - BitcoinWalk Würzburg (vor 2 Tagen)
- "Neuer Termin" badge with bounce animation
- Audio: button-click.mp3 per item, slide-in.mp3 for entrance
- Uses existing ActivityItem component for consistent styling
- Comprehensive test suite with 24 tests

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

videos/src/PortalPresentation.tsx

@@ -5,6 +5,7 @@ import { PortalTitleScene } from "./scenes/portal/PortalTitleScene";
 import { DashboardOverviewScene } from "./scenes/portal/DashboardOverviewScene";
 import { MeetupShowcaseScene } from "./scenes/portal/MeetupShowcaseScene";
 import { TopMeetupsScene } from "./scenes/portal/TopMeetupsScene";
+import { ActivityFeedScene } from "./scenes/portal/ActivityFeedScene";
 
 /**
  * PortalPresentation - Main composition for the Einundzwanzig Portal presentation video
@@ -183,7 +184,7 @@ export const PortalPresentation: React.FC = () => {
         durationInFrames={sceneFrames.activityFeed.duration}
         premountFor={fps}
       >
-        <PlaceholderScene name="Activity Feed" sceneNumber={7} />
+        <ActivityFeedScene />
       </Sequence>
 
       {/* Scene 8: Call to Action (12s) */}

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

@@ -0,0 +1,268 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { ActivityFeedScene } from "./ActivityFeedScene";
+
+/* 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 ActivityItem component
+vi.mock("../../components/ActivityItem", () => ({
+  ActivityItem: vi.fn(({ eventName, timestamp, badgeText, showBadge, delay, width, accentColor }) => (
+    <div
+      data-testid="activity-item"
+      data-event-name={eventName}
+      data-timestamp={timestamp}
+      data-badge-text={badgeText}
+      data-show-badge={showBadge}
+      data-delay={delay}
+      data-width={width}
+      data-accent-color={accentColor}
+    >
+      <span className="event-name">{eventName}</span>
+      <span className="timestamp">{timestamp}</span>
+      {showBadge && <span className="badge">{badgeText}</span>}
+    </div>
+  )),
+}));
+
+describe("ActivityFeedScene", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<ActivityFeedScene />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container with correct classes", () => {
+    const { container } = render(<ActivityFeedScene />);
+    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(<ActivityFeedScene />);
+    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 section header with 'Aktivitäten'", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const header = container.querySelector("h1");
+    expect(header).toBeInTheDocument();
+    expect(header).toHaveTextContent("Aktivitäten");
+    expect(header).toHaveClass("text-5xl");
+    expect(header).toHaveClass("font-bold");
+    expect(header).toHaveClass("text-white");
+  });
+
+  it("renders the subtitle text", () => {
+    const { container } = render(<ActivityFeedScene />);
+    expect(container.textContent).toContain("Der Puls der Bitcoin-Community");
+  });
+
+  it("renders the LIVE indicator", () => {
+    const { container } = render(<ActivityFeedScene />);
+    expect(container.textContent).toContain("LIVE");
+  });
+
+  it("renders the green live indicator dot", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const greenDot = container.querySelector(".bg-green-500.rounded-full");
+    expect(greenDot).toBeInTheDocument();
+  });
+
+  it("renders all four activity items", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const activityItems = container.querySelectorAll('[data-testid="activity-item"]');
+    expect(activityItems.length).toBe(4);
+  });
+
+  it("renders EINUNDZWANZIG Kempten activity", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const items = container.querySelectorAll('[data-testid="activity-item"]');
+    const kemptenItem = Array.from(items).find(
+      (item) => item.getAttribute("data-event-name") === "EINUNDZWANZIG Kempten"
+    );
+    expect(kemptenItem).toBeInTheDocument();
+    expect(kemptenItem).toHaveAttribute("data-timestamp", "vor 13 Stunden");
+  });
+
+  it("renders EINUNDZWANZIG Darmstadt activity", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const items = container.querySelectorAll('[data-testid="activity-item"]');
+    const darmstadtItem = Array.from(items).find(
+      (item) => item.getAttribute("data-event-name") === "EINUNDZWANZIG Darmstadt"
+    );
+    expect(darmstadtItem).toBeInTheDocument();
+    expect(darmstadtItem).toHaveAttribute("data-timestamp", "vor 21 Stunden");
+  });
+
+  it("renders EINUNDZWANZIG Vulkaneifel activity", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const items = container.querySelectorAll('[data-testid="activity-item"]');
+    const vulkaneifelItem = Array.from(items).find(
+      (item) => item.getAttribute("data-event-name") === "EINUNDZWANZIG Vulkaneifel"
+    );
+    expect(vulkaneifelItem).toBeInTheDocument();
+    expect(vulkaneifelItem).toHaveAttribute("data-timestamp", "vor 2 Tagen");
+  });
+
+  it("renders BitcoinWalk Würzburg activity", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const items = container.querySelectorAll('[data-testid="activity-item"]');
+    const wurzburgItem = Array.from(items).find(
+      (item) => item.getAttribute("data-event-name") === "BitcoinWalk Würzburg"
+    );
+    expect(wurzburgItem).toBeInTheDocument();
+    expect(wurzburgItem).toHaveAttribute("data-timestamp", "vor 2 Tagen");
+  });
+
+  it("renders activity items with 'Neuer Termin' badge text", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const items = container.querySelectorAll('[data-testid="activity-item"]');
+    items.forEach((item) => {
+      expect(item).toHaveAttribute("data-badge-text", "Neuer Termin");
+    });
+  });
+
+  it("renders activity items with badges visible", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const items = container.querySelectorAll('[data-testid="activity-item"]');
+    items.forEach((item) => {
+      expect(item).toHaveAttribute("data-show-badge", "true");
+    });
+  });
+
+  it("renders activity items with Bitcoin orange accent color", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const items = container.querySelectorAll('[data-testid="activity-item"]');
+    items.forEach((item) => {
+      expect(item).toHaveAttribute("data-accent-color", "#f7931a");
+    });
+  });
+
+  it("renders activity items with width of 480px", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const items = container.querySelectorAll('[data-testid="activity-item"]');
+    items.forEach((item) => {
+      expect(item).toHaveAttribute("data-width", "480");
+    });
+  });
+
+  it("renders audio sequences for sound effects", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const sequences = container.querySelectorAll('[data-testid="sequence"]');
+    // 4 button-click sounds + 1 slide-in = 5 sequences
+    expect(sequences.length).toBe(5);
+  });
+
+  it("includes button-click audio for activity item entrances", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const buttonClicks = Array.from(audioElements).filter((audio) =>
+      audio.getAttribute("src")?.includes("button-click.mp3")
+    );
+    expect(buttonClicks.length).toBe(4);
+  });
+
+  it("includes slide-in audio for section entrance", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const slideInAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("slide-in.mp3")
+    );
+    expect(slideInAudio).toBeInTheDocument();
+  });
+
+  it("renders vignette overlay with pointer-events-none", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const vignettes = container.querySelectorAll(".pointer-events-none");
+    expect(vignettes.length).toBeGreaterThan(0);
+  });
+
+  it("applies 3D perspective transform styles", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const elements = container.querySelectorAll('[style*="perspective"]');
+    expect(elements.length).toBeGreaterThan(0);
+  });
+
+  it("renders activity items in a vertical flex layout with gap", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const flexCol = container.querySelector(".flex-col.gap-4");
+    expect(flexCol).toBeInTheDocument();
+  });
+
+  it("renders activity items with staggered delays", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const items = container.querySelectorAll('[data-testid="activity-item"]');
+    const delays = Array.from(items).map((item) =>
+      parseInt(item.getAttribute("data-delay") || "0", 10)
+    );
+
+    // Each item should have an increasing delay
+    for (let i = 1; i < delays.length; i++) {
+      expect(delays[i]).toBeGreaterThan(delays[i - 1]);
+    }
+  });
+
+  it("renders gradient overlay for background effect", () => {
+    const { container } = render(<ActivityFeedScene />);
+    const gradientElements = container.querySelectorAll('[style*="radial-gradient"]');
+    expect(gradientElements.length).toBeGreaterThan(0);
+  });
+});

videos/src/scenes/portal/ActivityFeedScene.tsx

@@ -0,0 +1,275 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Img,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { ActivityItem } from "../../components/ActivityItem";
+
+// Spring configurations
+const SNAPPY = { damping: 15, stiffness: 80 };
+
+// Stagger delay between activity items (in frames)
+const ACTIVITY_STAGGER_DELAY = 20;
+
+// Activity feed data from the screenshot
+const ACTIVITY_FEED_DATA = [
+  {
+    eventName: "EINUNDZWANZIG Kempten",
+    timestamp: "vor 13 Stunden",
+    badgeText: "Neuer Termin",
+  },
+  {
+    eventName: "EINUNDZWANZIG Darmstadt",
+    timestamp: "vor 21 Stunden",
+    badgeText: "Neuer Termin",
+  },
+  {
+    eventName: "EINUNDZWANZIG Vulkaneifel",
+    timestamp: "vor 2 Tagen",
+    badgeText: "Neuer Termin",
+  },
+  {
+    eventName: "BitcoinWalk Würzburg",
+    timestamp: "vor 2 Tagen",
+    badgeText: "Neuer Termin",
+  },
+];
+
+/**
+ * ActivityFeedScene - Scene 7: Activity Feed (10 seconds / 300 frames @ 30fps)
+ *
+ * Animation sequence:
+ * 1. 3D perspective entrance with smooth transition
+ * 2. Section header "Aktivitäten" animates in with fade + translateY
+ * 3. Activity items slide in from right with staggered timing:
+ *    - "Neuer Termin" badge bounces in
+ *    - Meetup name types out / fades in
+ *    - Timestamp fades in
+ * 4. Stack effect: New items push existing ones down
+ * 5. Audio: button-click.mp3 plays per item entrance
+ */
+export const ActivityFeedScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 3D Perspective entrance animation (0-60 frames)
+  const perspectiveSpring = spring({
+    frame,
+    fps,
+    config: { damping: 20, stiffness: 60 },
+  });
+
+  const perspectiveX = interpolate(perspectiveSpring, [0, 1], [20, 0]);
+  const perspectiveScale = interpolate(perspectiveSpring, [0, 1], [0.9, 1]);
+  const perspectiveOpacity = interpolate(perspectiveSpring, [0, 1], [0, 1]);
+
+  // Header entrance animation (delayed)
+  const headerDelay = Math.floor(0.3 * fps);
+  const headerSpring = spring({
+    frame: frame - headerDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const headerOpacity = interpolate(headerSpring, [0, 1], [0, 1]);
+  const headerY = interpolate(headerSpring, [0, 1], [-40, 0]);
+
+  // Subtitle animation (slightly more delayed)
+  const subtitleDelay = Math.floor(0.5 * fps);
+  const subtitleSpring = spring({
+    frame: frame - subtitleDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
+  const subtitleY = interpolate(subtitleSpring, [0, 1], [20, 0]);
+
+  // Base delay for activity items
+  const activityBaseDelay = Math.floor(1 * fps);
+
+  // Subtle pulse for live indicator
+  const pulseIntensity = interpolate(
+    Math.sin(frame * 0.1),
+    [-1, 1],
+    [0.5, 1]
+  );
+
+  return (
+    <AbsoluteFill className="bg-zinc-900 overflow-hidden">
+      {/* Audio: button-click for each activity entrance */}
+      {ACTIVITY_FEED_DATA.map((_, index) => (
+        <Sequence
+          key={`audio-${index}`}
+          from={activityBaseDelay + index * ACTIVITY_STAGGER_DELAY}
+          durationInFrames={Math.floor(0.5 * fps)}
+        >
+          <Audio src={staticFile("sfx/button-click.mp3")} volume={0.4} />
+        </Sequence>
+      ))}
+
+      {/* Audio: slide-in for section entrance */}
+      <Sequence from={headerDelay} durationInFrames={Math.floor(1 * fps)}>
+        <Audio src={staticFile("sfx/slide-in.mp3")} volume={0.5} />
+      </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.1 }}
+        />
+      </div>
+
+      {/* Dark gradient overlay */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(circle at 60% 50%, transparent 0%, rgba(24, 24, 27, 0.5) 40%, rgba(24, 24, 27, 0.95) 100%)",
+        }}
+      />
+
+      {/* 3D Perspective Container */}
+      <div
+        className="absolute inset-0"
+        style={{
+          transform: `perspective(1200px) rotateX(${perspectiveX}deg) scale(${perspectiveScale})`,
+          transformOrigin: "center center",
+          opacity: perspectiveOpacity,
+        }}
+      >
+        {/* Main Content */}
+        <div className="absolute inset-0 flex flex-col items-center justify-center px-20">
+          {/* Section Header */}
+          <div
+            className="text-center mb-10"
+            style={{
+              opacity: headerOpacity,
+              transform: `translateY(${headerY}px)`,
+            }}
+          >
+            <div className="flex items-center justify-center gap-3 mb-3">
+              <h1 className="text-5xl font-bold text-white">Aktivitäten</h1>
+              {/* Live indicator dot */}
+              <div
+                className="flex items-center gap-2 px-3 py-1 rounded-full bg-green-500/20 border border-green-500/30"
+                style={{
+                  opacity: pulseIntensity,
+                }}
+              >
+                <div
+                  className="w-2 h-2 rounded-full bg-green-500"
+                  style={{
+                    boxShadow: `0 0 ${8 * pulseIntensity}px rgba(34, 197, 94, 0.8)`,
+                  }}
+                />
+                <span className="text-sm text-green-400 font-medium">LIVE</span>
+              </div>
+            </div>
+            <p
+              className="text-xl text-zinc-400"
+              style={{
+                opacity: subtitleOpacity,
+                transform: `translateY(${subtitleY}px)`,
+              }}
+            >
+              Der Puls der Bitcoin-Community
+            </p>
+          </div>
+
+          {/* Activity Feed List */}
+          <div className="w-full max-w-lg">
+            <div className="flex flex-col gap-4">
+              {ACTIVITY_FEED_DATA.map((activity, index) => (
+                <ActivityItemWrapper
+                  key={activity.eventName}
+                  activity={activity}
+                  delay={activityBaseDelay + index * ACTIVITY_STAGGER_DELAY}
+                  index={index}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Vignette overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.6)",
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+/**
+ * Wrapper component for activity items with stack push-down animation
+ */
+type ActivityItemWrapperProps = {
+  activity: {
+    eventName: string;
+    timestamp: string;
+    badgeText: string;
+  };
+  delay: number;
+  index: number;
+};
+
+const ActivityItemWrapper: React.FC<ActivityItemWrapperProps> = ({
+  activity,
+  delay,
+  index,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Calculate push-down effect from items appearing above
+  // Each item that appears before this one causes a slight downward push
+  let pushDownOffset = 0;
+  for (let i = 0; i < index; i++) {
+    const prevItemDelay = Math.floor(1 * fps) + i * ACTIVITY_STAGGER_DELAY;
+    const prevItemSpring = spring({
+      frame: frame - prevItemDelay,
+      fps,
+      config: { damping: 20, stiffness: 100 },
+    });
+    // Each previous item pushes this one down slightly when it appears
+    pushDownOffset += interpolate(prevItemSpring, [0, 1], [0, 0]);
+  }
+
+  // Container spring for the wrapper itself
+  const containerSpring = spring({
+    frame: frame - delay,
+    fps,
+    config: { damping: 15, stiffness: 80 },
+  });
+
+  const containerOpacity = interpolate(containerSpring, [0, 1], [0, 1]);
+
+  return (
+    <div
+      style={{
+        opacity: containerOpacity,
+        transform: `translateY(${pushDownOffset}px)`,
+      }}
+    >
+      <ActivityItem
+        eventName={activity.eventName}
+        timestamp={activity.timestamp}
+        badgeText={activity.badgeText}
+        showBadge={true}
+        delay={delay}
+        width={480}
+        accentColor="#f7931a"
+      />
+    </div>
+  );
+};