|
@@ -151,6 +151,50 @@ const CoverScene: React.FC<{
|
|
|
totalFrames: number;
|
|
totalFrames: number;
|
|
|
}> = ({ template, title, subtitle, keyframes, backgroundAsset }) => {
|
|
}> = ({ template, title, subtitle, keyframes, backgroundAsset }) => {
|
|
|
const accent = THEMES[template].primaryLight;
|
|
const accent = THEMES[template].primaryLight;
|
|
|
|
|
+ const isGithubTrending = template === "github-trending";
|
|
|
|
|
+
|
|
|
|
|
+ // github-trending cover doubles as the opening narration screen — light
|
|
|
|
|
+ // background, much larger masthead typography, no dark image overlay.
|
|
|
|
|
+ if (isGithubTrending) {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <AbsoluteFill style={{
|
|
|
|
|
+ background: "linear-gradient(135deg, #f8fafc 0%, #e2e8f0 60%, #cbd5e1 100%)",
|
|
|
|
|
+ }}>
|
|
|
|
|
+ {/* Top accent bar in template primary */}
|
|
|
|
|
+ <div style={{
|
|
|
|
|
+ position: "absolute", top: 0, left: 0, width: "100%", height: 8,
|
|
|
|
|
+ background: `linear-gradient(90deg, ${THEMES[template].primary}, ${accent})`,
|
|
|
|
|
+ }} />
|
|
|
|
|
+ <div style={{
|
|
|
|
|
+ position: "absolute", inset: 0, display: "flex",
|
|
|
|
|
+ flexDirection: "column", justifyContent: "center", alignItems: "center",
|
|
|
|
|
+ padding: 80, textAlign: "center",
|
|
|
|
|
+ }}>
|
|
|
|
|
+ <div style={{
|
|
|
|
|
+ fontSize: 132, fontWeight: 800, color: "#0f172a",
|
|
|
|
|
+ fontFamily: "Noto Sans SC", lineHeight: 1.15,
|
|
|
|
|
+ marginBottom: 32, letterSpacing: "-0.02em",
|
|
|
|
|
+ }}>
|
|
|
|
|
+ {title}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ {subtitle && (
|
|
|
|
|
+ <div style={{
|
|
|
|
|
+ fontSize: 56, fontWeight: 600, color: "#475569",
|
|
|
|
|
+ fontFamily: "Noto Sans SC",
|
|
|
|
|
+ padding: "12px 36px",
|
|
|
|
|
+ borderRadius: 16,
|
|
|
|
|
+ background: "rgba(255,255,255,0.7)",
|
|
|
|
|
+ border: `2px solid ${accent}`,
|
|
|
|
|
+ boxShadow: "0 8px 24px rgba(15,23,42,0.08)",
|
|
|
|
|
+ }}>
|
|
|
|
|
+ {subtitle}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ )}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </AbsoluteFill>
|
|
|
|
|
+ );
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
return (
|
|
return (
|
|
|
<AbsoluteFill style={{ backgroundColor: "#0f172a" }}>
|
|
<AbsoluteFill style={{ backgroundColor: "#0f172a" }}>
|
|
|
{backgroundAsset && (
|
|
{backgroundAsset && (
|