mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-28 07:43:18 +00:00
📱 Add mobile scene adaptations for PortalPresentationMobile
Mobile-optimized versions of all 9 scenes with portrait layout (1080x1920): - PortalIntroSceneMobile: Smaller logo (280px), text-5xl title - PortalTitleSceneMobile: Title split into two lines, text-5xl - DashboardOverviewSceneMobile: Vertical card stacking, no sidebar - MeetupShowcaseSceneMobile: Vertical layout, 360px featured card - CountryStatsSceneMobile: Single column, 280px bars, compact sparklines - TopMeetupsSceneMobile: Narrower rows, 70px sparklines - ActivityFeedSceneMobile: 400px activity cards - CallToActionSceneMobile: max-w-md container, 100px logo - PortalOutroSceneMobile: 450px horizontal logo Includes 92 tests covering mobile-specific layout adaptations. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
HolgerHatGarKeineNode
272
videos/src/scenes/portal/mobile/DashboardOverviewSceneMobile.tsx
Normal file
272
videos/src/scenes/portal/mobile/DashboardOverviewSceneMobile.tsx
Normal file
@@ -0,0 +1,272 @@
|
||||
import {
|
||||
AbsoluteFill,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
interpolate,
|
||||
spring,
|
||||
Img,
|
||||
staticFile,
|
||||
Sequence,
|
||||
} from "remotion";
|
||||
import { Audio } from "@remotion/media";
|
||||
import { StatsCounter } from "../../../components/StatsCounter";
|
||||
import { SparklineChart } from "../../../components/SparklineChart";
|
||||
|
||||
// Spring configurations
|
||||
const SNAPPY = { damping: 15, stiffness: 80 };
|
||||
|
||||
// Stagger delay between content cards
|
||||
const CARD_STAGGER_DELAY = 8;
|
||||
|
||||
// Sample sparkline data
|
||||
const MEETUP_TREND_DATA = [12, 15, 18, 14, 22, 25, 28, 32, 35, 42, 48, 55];
|
||||
const USER_TREND_DATA = [100, 145, 180, 220, 280, 350, 420, 510, 620, 780, 950, 1100];
|
||||
const EVENT_TREND_DATA = [5, 8, 12, 15, 18, 22, 28, 35, 42, 55, 68, 89];
|
||||
|
||||
/**
|
||||
* DashboardOverviewSceneMobile - Scene 3: Dashboard Overview for Mobile (12 seconds / 360 frames @ 30fps)
|
||||
*
|
||||
* Mobile layout adaptations:
|
||||
* - No sidebar (removed for portrait orientation)
|
||||
* - Vertical card stacking instead of horizontal row
|
||||
* - Smaller card widths optimized for 1080px width
|
||||
* - Reduced padding and spacing
|
||||
*/
|
||||
export const DashboardOverviewSceneMobile: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
// 3D Perspective entrance animation (0-60 frames)
|
||||
const perspectiveSpring = spring({
|
||||
frame,
|
||||
fps,
|
||||
config: { damping: 20, stiffness: 60 },
|
||||
});
|
||||
|
||||
const perspectiveX = interpolate(perspectiveSpring, [0, 1], [25, 0]);
|
||||
const perspectiveScale = interpolate(perspectiveSpring, [0, 1], [0.88, 1]);
|
||||
const perspectiveOpacity = interpolate(perspectiveSpring, [0, 1], [0, 1]);
|
||||
|
||||
// Header entrance animation (delayed)
|
||||
const headerDelay = Math.floor(0.5 * fps);
|
||||
const headerSpring = spring({
|
||||
frame: frame - headerDelay,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
const headerOpacity = interpolate(headerSpring, [0, 1], [0, 1]);
|
||||
const headerY = interpolate(headerSpring, [0, 1], [-30, 0]);
|
||||
|
||||
// Subtle background glow pulse
|
||||
const glowIntensity = interpolate(
|
||||
Math.sin(frame * 0.04),
|
||||
[-1, 1],
|
||||
[0.3, 0.5]
|
||||
);
|
||||
|
||||
// Mobile card width
|
||||
const cardWidth = 420;
|
||||
|
||||
// Card entrance delays (staggered)
|
||||
const cardBaseDelay = Math.floor(1 * fps);
|
||||
|
||||
return (
|
||||
<AbsoluteFill className="bg-zinc-900 overflow-hidden">
|
||||
{/* Audio: card-slide for initial entrance */}
|
||||
<Sequence from={cardBaseDelay} durationInFrames={Math.floor(1 * fps)}>
|
||||
<Audio src={staticFile("sfx/card-slide.mp3")} volume={0.5} />
|
||||
</Sequence>
|
||||
|
||||
{/* Audio: ui-appear for stats */}
|
||||
<Sequence from={cardBaseDelay + Math.floor(0.5 * fps)} durationInFrames={Math.floor(0.5 * fps)}>
|
||||
<Audio src={staticFile("sfx/ui-appear.mp3")} volume={0.4} />
|
||||
</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.1 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dark gradient overlay */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle at center, transparent 0%, rgba(24, 24, 27, 0.6) 50%, rgba(24, 24, 27, 0.95) 100%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 3D Perspective Container */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
transform: `perspective(1200px) rotateX(${perspectiveX}deg) scale(${perspectiveScale})`,
|
||||
transformOrigin: "center center",
|
||||
opacity: perspectiveOpacity,
|
||||
}}
|
||||
>
|
||||
{/* Main Content - Centered for mobile */}
|
||||
<div className="absolute inset-0 flex flex-col items-center px-8 pt-16">
|
||||
{/* Header */}
|
||||
<div
|
||||
className="mb-8 text-center"
|
||||
style={{
|
||||
opacity: headerOpacity,
|
||||
transform: `translateY(${headerY}px)`,
|
||||
}}
|
||||
>
|
||||
<h1 className="text-4xl font-bold text-white mb-2">Dashboard</h1>
|
||||
<p className="text-lg text-zinc-400">
|
||||
Willkommen im Einundzwanzig Portal
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards - Vertical stack for mobile */}
|
||||
<div className="flex flex-col gap-5 w-full items-center">
|
||||
{/* Meetups Card */}
|
||||
<StatsCardMobile
|
||||
title="Meetups"
|
||||
delay={cardBaseDelay}
|
||||
width={cardWidth}
|
||||
glowIntensity={glowIntensity}
|
||||
>
|
||||
<StatsCounter
|
||||
targetNumber={204}
|
||||
delay={cardBaseDelay + 15}
|
||||
duration={60}
|
||||
label="Aktive Gruppen"
|
||||
fontSize={56}
|
||||
color="#f7931a"
|
||||
/>
|
||||
<div className="mt-3">
|
||||
<SparklineChart
|
||||
data={MEETUP_TREND_DATA}
|
||||
width={cardWidth - 48}
|
||||
height={50}
|
||||
delay={cardBaseDelay + 30}
|
||||
showFill={true}
|
||||
fillOpacity={0.15}
|
||||
/>
|
||||
</div>
|
||||
</StatsCardMobile>
|
||||
|
||||
{/* Users Card */}
|
||||
<StatsCardMobile
|
||||
title="Benutzer"
|
||||
delay={cardBaseDelay + CARD_STAGGER_DELAY}
|
||||
width={cardWidth}
|
||||
glowIntensity={glowIntensity}
|
||||
>
|
||||
<StatsCounter
|
||||
targetNumber={1247}
|
||||
delay={cardBaseDelay + CARD_STAGGER_DELAY + 15}
|
||||
duration={60}
|
||||
label="Registrierte Nutzer"
|
||||
fontSize={56}
|
||||
color="#f7931a"
|
||||
/>
|
||||
<div className="mt-3">
|
||||
<SparklineChart
|
||||
data={USER_TREND_DATA}
|
||||
width={cardWidth - 48}
|
||||
height={50}
|
||||
delay={cardBaseDelay + CARD_STAGGER_DELAY + 30}
|
||||
showFill={true}
|
||||
fillOpacity={0.15}
|
||||
/>
|
||||
</div>
|
||||
</StatsCardMobile>
|
||||
|
||||
{/* Events Card */}
|
||||
<StatsCardMobile
|
||||
title="Events"
|
||||
delay={cardBaseDelay + CARD_STAGGER_DELAY * 2}
|
||||
width={cardWidth}
|
||||
glowIntensity={glowIntensity}
|
||||
>
|
||||
<StatsCounter
|
||||
targetNumber={89}
|
||||
delay={cardBaseDelay + CARD_STAGGER_DELAY * 2 + 15}
|
||||
duration={60}
|
||||
label="Diese Woche"
|
||||
fontSize={56}
|
||||
color="#f7931a"
|
||||
/>
|
||||
<div className="mt-3">
|
||||
<SparklineChart
|
||||
data={EVENT_TREND_DATA}
|
||||
width={cardWidth - 48}
|
||||
height={50}
|
||||
delay={cardBaseDelay + CARD_STAGGER_DELAY * 2 + 30}
|
||||
showFill={true}
|
||||
fillOpacity={0.15}
|
||||
/>
|
||||
</div>
|
||||
</StatsCardMobile>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vignette overlay */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.6)",
|
||||
}}
|
||||
/>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Stats Card container with animated entrance for mobile
|
||||
*/
|
||||
type StatsCardMobileProps = {
|
||||
title: string;
|
||||
delay: number;
|
||||
width: number;
|
||||
glowIntensity: number;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
const StatsCardMobile: React.FC<StatsCardMobileProps> = ({
|
||||
title,
|
||||
delay,
|
||||
width,
|
||||
glowIntensity,
|
||||
children,
|
||||
}) => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
const adjustedFrame = Math.max(0, frame - delay);
|
||||
|
||||
const cardSpring = spring({
|
||||
frame: adjustedFrame,
|
||||
fps,
|
||||
config: SNAPPY,
|
||||
});
|
||||
|
||||
const cardScale = interpolate(cardSpring, [0, 1], [0.85, 1]);
|
||||
const cardOpacity = interpolate(cardSpring, [0, 1], [0, 1]);
|
||||
const cardY = interpolate(cardSpring, [0, 1], [30, 0]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="rounded-2xl bg-zinc-800/80 backdrop-blur-md border border-zinc-700/50 p-5"
|
||||
style={{
|
||||
width,
|
||||
transform: `translateY(${cardY}px) scale(${cardScale})`,
|
||||
opacity: cardOpacity,
|
||||
boxShadow: `0 0 ${30 * glowIntensity}px rgba(247, 147, 26, 0.1), 0 8px 32px rgba(0, 0, 0, 0.4)`,
|
||||
}}
|
||||
>
|
||||
<h3 className="text-base font-semibold text-zinc-300 mb-3">{title}</h3>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user