chore: remove scraper, add docs, add marketing-videos gitignore
- Remove Scripts/ directory (scraper no longer needed) - Add themed background documentation to CLAUDE.md - Add .gitignore for marketing-videos to prevent node_modules tracking Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Trey t
258
marketing-videos/src/videos/TheSquad/ResultsReveal.tsx
Normal file
258
marketing-videos/src/videos/TheSquad/ResultsReveal.tsx
Normal file
@@ -0,0 +1,258 @@
|
||||
import React from "react";
|
||||
import {
|
||||
AbsoluteFill,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
spring,
|
||||
interpolate,
|
||||
} from "remotion";
|
||||
import { theme } from "../../components/shared/theme";
|
||||
|
||||
// Confetti particles
|
||||
const Confetti: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
|
||||
const particles = React.useMemo(() => {
|
||||
const colors = [theme.colors.accent, theme.colors.secondary, theme.colors.gold, "#9B59B6"];
|
||||
return Array.from({ length: 25 }, (_, i) => ({
|
||||
id: i,
|
||||
x: Math.random() * width,
|
||||
color: colors[Math.floor(Math.random() * colors.length)],
|
||||
size: 6 + Math.random() * 10,
|
||||
rotation: Math.random() * 360,
|
||||
speed: 0.4 + Math.random() * 0.4,
|
||||
delay: Math.random() * 8,
|
||||
}));
|
||||
}, [width]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{particles.map((particle) => {
|
||||
const localFrame = frame - particle.delay;
|
||||
if (localFrame < 0) return null;
|
||||
|
||||
const y = interpolate(
|
||||
localFrame,
|
||||
[0, fps * 2],
|
||||
[-50, height + 100],
|
||||
{ extrapolateRight: "clamp" }
|
||||
) * particle.speed;
|
||||
|
||||
const rotation = particle.rotation + localFrame * 4;
|
||||
const opacity = interpolate(
|
||||
localFrame,
|
||||
[0, fps * 0.3, fps * 1.5, fps * 2],
|
||||
[0, 1, 1, 0],
|
||||
{ extrapolateRight: "clamp" }
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={particle.id}
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: particle.x,
|
||||
top: y,
|
||||
width: particle.size,
|
||||
height: particle.size,
|
||||
background: particle.color,
|
||||
borderRadius: 2,
|
||||
transform: `rotate(${rotation}deg)`,
|
||||
opacity,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const ResultsReveal: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
// Winner card entrance
|
||||
const cardProgress = spring({
|
||||
frame,
|
||||
fps,
|
||||
config: { damping: 15, stiffness: 120 },
|
||||
});
|
||||
|
||||
const cardScale = interpolate(cardProgress, [0, 1], [0.8, 1]);
|
||||
const cardOpacity = interpolate(cardProgress, [0, 1], [0, 1]);
|
||||
|
||||
// "Democracy wins" text entrance
|
||||
const textProgress = spring({
|
||||
frame: frame - fps * 0.6,
|
||||
fps,
|
||||
config: theme.animation.smooth,
|
||||
});
|
||||
|
||||
const textOpacity = interpolate(textProgress, [0, 1], [0, 1]);
|
||||
const textY = interpolate(textProgress, [0, 1], [20, 0]);
|
||||
|
||||
return (
|
||||
<AbsoluteFill
|
||||
style={{
|
||||
background: theme.colors.background,
|
||||
}}
|
||||
>
|
||||
{/* Confetti */}
|
||||
<Confetti />
|
||||
|
||||
<AbsoluteFill
|
||||
style={{
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: 40,
|
||||
}}
|
||||
>
|
||||
{/* Winner card */}
|
||||
<div
|
||||
style={{
|
||||
transform: `scale(${cardScale})`,
|
||||
opacity: cardOpacity,
|
||||
width: "90%",
|
||||
maxWidth: 600,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: "#1C1C1E",
|
||||
borderRadius: 28,
|
||||
padding: 40,
|
||||
border: `3px solid ${theme.colors.accent}`,
|
||||
boxShadow: `0 20px 60px rgba(255, 107, 53, 0.3)`,
|
||||
}}
|
||||
>
|
||||
{/* Winner badge */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 12,
|
||||
marginBottom: 24,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: "50%",
|
||||
background: theme.colors.accent,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="white">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: theme.fonts.display,
|
||||
fontSize: 24,
|
||||
fontWeight: 700,
|
||||
color: theme.colors.accent,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: 2,
|
||||
}}
|
||||
>
|
||||
Winner
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Winning game */}
|
||||
<div style={{ textAlign: "center", marginBottom: 24 }}>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: theme.fonts.text,
|
||||
fontSize: 14,
|
||||
color: theme.colors.textMuted,
|
||||
background: "rgba(255,107,53,0.2)",
|
||||
padding: "6px 12px",
|
||||
borderRadius: 8,
|
||||
}}
|
||||
>
|
||||
NBA
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
fontFamily: theme.fonts.display,
|
||||
fontSize: 36,
|
||||
fontWeight: 700,
|
||||
color: theme.colors.text,
|
||||
textAlign: "center",
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
Lakers vs Celtics
|
||||
</div>
|
||||
|
||||
{/* Vote count */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap: 16,
|
||||
}}
|
||||
>
|
||||
{/* Voter avatars */}
|
||||
<div style={{ display: "flex" }}>
|
||||
{["#FF6B6B", "#4ECDC4", "#45B7D1"].map((color, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: "50%",
|
||||
background: color,
|
||||
border: `2px solid #1C1C1E`,
|
||||
marginLeft: i > 0 ? -10 : 0,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: theme.fonts.text,
|
||||
fontSize: 18,
|
||||
color: theme.colors.textSecondary,
|
||||
}}
|
||||
>
|
||||
3 votes • 100%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* "Democracy wins" text */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 150,
|
||||
opacity: textOpacity,
|
||||
transform: `translateY(${textY}px)`,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: theme.fonts.display,
|
||||
fontSize: 32,
|
||||
fontWeight: 600,
|
||||
color: theme.colors.textSecondary,
|
||||
}}
|
||||
>
|
||||
Democracy wins.
|
||||
</span>
|
||||
</div>
|
||||
</AbsoluteFill>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user