mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-29 08:53:18 +00:00
🎬 Add PortalOutroScene component for Outro (Scene 9)
- 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>
This commit is contained in:
HolgerHatGarKeineNode
262
videos/src/scenes/portal/PortalOutroScene.test.tsx
Normal file
262
videos/src/scenes/portal/PortalOutroScene.test.tsx
Normal file
@@ -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");
|
||||||
|
});
|
||||||
|
});
|
||||||
218
videos/src/scenes/portal/PortalOutroScene.tsx
Normal file
218
videos/src/scenes/portal/PortalOutroScene.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user