mmintelandClaude Opus 5.5
4bfbcbcacd
Adds apps/video, a standalone Remotion package (not part of the pnpm workspace, so it never reaches the web build or the Docker image). It renders six looping films, one per service, in German and English, as 4:5 for LinkedIn and 16:9 for YouTube and ads, together with the text to post and an overview page. Each film is one continuous shot: close on something abstract, the camera pulls back to show what it really is, the form changes, and the picture folds back into its opening. The slide deck code from the earlier attempts is still in the package and no longer used. Also adds the Google Ads concept, brings the relaunch concept in line with the site as built, and a project skill that describes how to make further films. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
43 lines
1.8 KiB
TypeScript
43 lines
1.8 KiB
TypeScript
/** Brand tokens, mirrored from apps/web (Tailwind slate scale, white paper, mono labels). */
|
|
export const COLOR = {
|
|
paper: "#ffffff",
|
|
ink: "#0f172a", // slate-900
|
|
inkSoft: "#1e293b", // slate-800
|
|
body: "#475569", // slate-600
|
|
muted: "#64748b", // slate-500
|
|
faint: "#94a3b8", // slate-400
|
|
line: "#e2e8f0", // slate-200
|
|
wash: "#f8fafc", // slate-50
|
|
active: "#fbbf24", // amber-400: work in progress
|
|
done: "#10b981", // emerald-500: finished
|
|
} as const;
|
|
|
|
/** Colours for drawings, which sit on a dark panel like the animated panels of the website. */
|
|
export const DRAW = {
|
|
bg: "#0f172a", // slate-900: the panel
|
|
raised: "#1e293b", // slate-800: quiet surfaces on the panel
|
|
soft: "#334155", // slate-700: placeholder lines and blocks
|
|
label: "#94a3b8", // slate-400: mono labels
|
|
fg: "#f8fafc", // slate-50: lines, tiles, text
|
|
rim: "#64748b", // slate-500: fine outlines of quiet things
|
|
tint: "rgba(248, 250, 252, 0.14)", // a lit surface: a light tint instead of a solid block
|
|
glass: "rgba(15, 23, 42, 0.55)", // windows and cards: the dot grid shows through
|
|
mark: "#fde68a", // amber-200: work that is travelling
|
|
glow: "99, 102, 241", // indigo-500 as r, g, b: the light along the edge
|
|
light: "129, 140, 248", // indigo-400 as r, g, b: the light on buttons and nodes
|
|
core: "224, 231, 255", // indigo-100 as r, g, b: its bright centre
|
|
} as const;
|
|
|
|
/** Output formats. LinkedIn feed default is 4:5; the others are variants of the same video. */
|
|
export const FORMATS = {
|
|
feed: { width: 1080, height: 1350 },
|
|
square: { width: 1080, height: 1080 },
|
|
story: { width: 1080, height: 1920 },
|
|
/** 16:9 for YouTube and Google Ads video campaigns. */
|
|
wide: { width: 1920, height: 1080 },
|
|
} as const;
|
|
|
|
export type FormatName = keyof typeof FORMATS;
|
|
|
|
export const FPS = 30;
|