mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-28 07:43:18 +00:00
🎬 Add PortalTitleScene component for Title Card (Scene 2)
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>
This commit is contained in:
HolgerHatGarKeineNode
197
videos/src/scenes/portal/PortalTitleScene.test.tsx
Normal file
197
videos/src/scenes/portal/PortalTitleScene.test.tsx
Normal file
@@ -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");
|
||||
});
|
||||
});
|
||||
181
videos/src/scenes/portal/PortalTitleScene.tsx
Normal file
181
videos/src/scenes/portal/PortalTitleScene.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user