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>
