🎬 Add DashboardOverviewScene component for Dashboard Overview (Scene 3)

Implements the 12-second Dashboard Overview scene featuring:
- 3D perspective entrance animation (rotateX 30° → 0°, scale 0.85 → 1.0)
- DashboardSidebar with staggered navigation items
- Three StatsCounter cards (Meetups: 204, Users: 1247, Events: 89)
- SparklineCharts showing trend data for each metric
- Activity feed section with recent meetup activities
- Quick stats section with country and user metrics
- Audio: card-slide.mp3 and ui-appear.mp3 sound effects
- Vignette overlay and dark theme styling

Includes 23 comprehensive tests covering all components and animations.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
HolgerHatGarKeineNode
2026-01-24 13:20:56 +01:00
parent 74e1bb8742
commit 41acbc9324
3 changed files with 809 additions and 1 deletions

View File

@@ -2,6 +2,7 @@ import { AbsoluteFill, Sequence, useVideoConfig, Img, staticFile } from "remotio
import { inconsolataFont } from "./fonts/inconsolata";
import { PortalIntroScene } from "./scenes/portal/PortalIntroScene";
import { PortalTitleScene } from "./scenes/portal/PortalTitleScene";
import { DashboardOverviewScene } from "./scenes/portal/DashboardOverviewScene";
/**
* PortalPresentation - Main composition for the Einundzwanzig Portal presentation video
@@ -144,7 +145,7 @@ export const PortalPresentation: React.FC = () => {
durationInFrames={sceneFrames.dashboardOverview.duration}
premountFor={fps}
>
<PlaceholderScene name="Dashboard Overview" sceneNumber={3} />
<DashboardOverviewScene />
</Sequence>
{/* Scene 4: Meine Meetups (12s) */}