- Create PortalPresentationMobile.tsx for portrait mobile resolution
- Register PortalPresentationMobile composition in Root.tsx
- Add comprehensive tests for the mobile composition
- Reuse existing portal scenes which adapt via useVideoConfig()
- Mobile version has same scene structure and timing as desktop
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add test suite for PortalPresentation main composition
- Verify PortalAudioManager renders with background music
- Test all 9 scene sequences are rendered in correct order
- Verify scene timing totals 90 seconds (2700 frames at 30fps)
- Test audio integration including loop and volume settings
- Confirm premountFor is set correctly for all scenes
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add PortalAudioManager.tsx with background music fade in/out
- 1 second fade-in at the beginning
- 3 second fade-out at the end
- Base volume at 0.25 (25%)
- Integrate PortalAudioManager into PortalPresentation
- Add PortalOutroScene to PortalPresentation (was using placeholder)
- Add comprehensive tests for PortalAudioManager (13 tests)
- Tests for volume at various frames
- Tests for fade-in/fade-out behavior
- Integration tests
Scene-specific SFX remain in individual scene components for
better timing accuracy and maintainability.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 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>
Implements Scene 8 of the Portal Presentation video:
- Dashboard blur and zoom out animation
- Glassmorphism overlay with spring entrance
- "Werde Teil der Community" title with bounce animation
- URL typing animation: portal.einundzwanzig.space
- Orange pulsing glow effect on URL after typing completes
- EINUNDZWANZIG logo with animated glow
- Audio: success-fanfare, typing, url-emphasis, logo-reveal
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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>
Implements Scene 6 of the Portal presentation video, showcasing the top 5
most active Einundzwanzig meetups with animated rankings, sparkline charts,
and progress bars. Features 3D perspective entrance, staggered item animations,
and audio cues.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implements the Country Statistics scene which visualizes the geographic
reach of the Bitcoin community across German-speaking countries with
animated country bars, sparkline charts, and user counts.
Features:
- 3D perspective entrance animation for smooth scene transition
- Sequential country reveals with staggered timing (12 frame delay)
- CountryBar components with animated progress bars and user counts
- SparklineChart components showing growth trends for each country
- Total users badge with globe icon
- Audio: success-chime per country, slide-in for section entrance
- Countries displayed: Germany, Austria, Switzerland, Luxembourg,
Bulgaria, and Spain
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implements the meetup showcase scene with:
- Featured meetup card with 3D perspective and shadow effects
- Date/time display with calendar and clock icons
- Upcoming meetups list (Memmingen, Friedrichshafen)
- Action buttons for calendar integration
- Staggered animations with spring physics
- Audio cues for slide-in and badge appearances
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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>
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>
Implement the first scene of the Portal presentation video (6 seconds):
- AnimatedLogo scales from 0 to 100% with spring animation
- Wallpaper background with zoom effect (1.2 → 1.0 scale)
- Bitcoin particle effects in the background
- Pulsing glow effect around the logo
- Audio integration: logo-whoosh at start, logo-reveal when logo appears
- Title "EINUNDZWANZIG" and subtitle "Das Portal" with staggered entrance
- Vignette overlay for cinematic depth
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Adds a fully animated sidebar component for the portal dashboard with:
- Slide-in animation from left with spring physics
- Animated logo section with scale entrance
- Navigation items with staggered reveal animations
- Badge counters with bounce animation and glow effects
- Support for section headers and nested items with indentation
- Active state highlighting with accent color border
- SVG icons for all navigation types (dashboard, nostr, meetups, etc.)
- Customizable dimensions, accent color, and animation timing
Includes comprehensive test suite with 28 tests covering:
- Rendering and layout
- Navigation item display
- Badge count display
- Section headers and nested items
- Custom styling and accent colors
- Icon rendering for all icon types
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Implements animated activity item with slide-in from right animation
- Badge with bounce effect ("Neuer Termin" default)
- Event name with fade/slide animation
- Timestamp with clock icon and monospace font
- Configurable props: eventName, timestamp, badgeText, showBadge, delay, width, accentColor
- Follows established component patterns with spring animations and glow effects
- Includes comprehensive test suite with 21 tests
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add a new CountryBar component that displays:
- Country flag emoji with scale animation
- Country name with slide-in animation
- Animated user count with tabular numbers
- Progress bar that fills based on user count ratio
The component follows existing patterns from StatsCounter and
MeetupCard, using Remotion's spring animations and interpolation
for smooth entrance effects and a subtle glow pulse.
Includes comprehensive test suite with 30 tests covering:
- Basic rendering and props
- Custom styling and colors
- Bar rendering and animation
- Real-world country data scenarios
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Animated card component with logo, name, and location for showcasing
Bitcoin meetups. Features spring-based entrance animations, location
pin icon, and customizable styling with Bitcoin orange accent color.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implement SparklineChart for visualizing data trends with animated line
drawing using stroke-dasharray/dashoffset technique. Features include
configurable dimensions, spring animations, optional fill gradient,
glow effects, and support for delay/duration parameters.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implement reusable animated statistics counter component for Remotion videos
that smoothly animates from 0 to a target number (default: 204).
Features:
- Spring-based or linear animation modes
- Configurable delay, duration, and decimal places
- Support for prefix/suffix (e.g., "$", "%", "+")
- Customizable colors and font sizes
- Glow effect that pulses with counting progress
- Optional label display below the number
Includes comprehensive test suite with 12 passing tests.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Set up testing infrastructure using Vitest and React Testing Library.
Add test verifying empty MyComposition renders without errors.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
