# apps/video

Social media videos (LinkedIn first, 16:9 for YouTube and Google Ads) in the mintel.me look, made with Remotion.
Standalone package: it is **not** in `pnpm-workspace.yaml`, so it never ends up in the web build, the Dockerfile
or `pnpm -r`. `apps/web` must never import from here, and this package imports nothing from `apps/web`.

## Commands (run from this folder)

- Install: `pnpm install --ignore-workspace`
- Studio (the playground, http://localhost:3000): `pnpm studio`
- One frame as PNG: `pnpm still WebsiteDone-de-feed out/check.png --frame=40`
- One video: `pnpm render WebsiteDone-de-feed out/website.mp4`
- The whole library: `pnpm library` (= `node scripts/export.ts`; `--only <VideoId>`, `--formats feed,wide`,
  `--page` to rewrite only post texts and the overview). Writes `out/library/index.html` (watch, copy the post
  text, download) and `out/library/<language>/week-<n>/<slot>-<day>-<id>/` with the files and `post.txt`, in plan order.
- `pnpm typecheck`, `pnpm test`

Compositions are named `<VideoId>-<language>-<format>`: languages `en`, `de`; formats `feed` (4:5, LinkedIn),
`wide` (16:9), `square`, `story` (9:16). `out/` is gitignored and holds only two things: `out/library`
(what gets posted) and `out/tmp` (your check frames, sheets and logs; delete it when you are done).

## Where things are

- `src/content/videos.ts`: every word. Headlines per slide, the post text per video, both languages, and the
  German for labels inside drawings (`LABELS_DE`). Drawing code writes labels in English; they are translated
  when rendered. German addresses the viewer as "Sie".
- `src/compositions/<Video>.tsx`: the slides of one video (ids, durations, illustrations). No text.
- `src/slides`: `SlideDeck` (panel, headline, curtain, loop, portrait and 16:9 layout), `ServiceVideo`
  (frame + language + deck), `ctaSlide` (closing slide with the button).
- `src/illustrations`: `parts.tsx` (tile, icon, cursor, data chip, window, page, badges, day box), `scenes.tsx`
  (scenes several videos share), `motion.ts` (easing helpers).
- `src/brand`: tokens, fonts, `BrandFrame` (logo, labels, digit texture), `Panel` (the dark panel with the
  website's light effects), `BrandButton`.
- `src/lib`: pure, tested logic (`bits.ts`, `aura.ts`).

## How to make a new video

1. Add the texts to `src/content/videos.ts` (new `VideoId`, both languages, post text).
2. Add `src/compositions/<Name>.tsx` with its slides and register it in `src/Root.tsx`.
3. Look before reporting: render the MP4, pull one frame per slide and read them, in `feed` and `wide`, in both
   languages (German lines are longer). Do not hand over a video you have not seen.
4. `pnpm library --only <Name>` and tell the owner where the files are.

## Films (the current format, owner approved 2026-10-04)

Every video is a film in `src/films`: one continuous shot on a dark stage, not a deck of slides.
- Shared: `FilmStage` (backdrop, one centred statement at a time, signature, address) and `shot.ts`
  (one timeline `T`, the camera move `cameraAt`, the six caption slots hook/reveal/problem/turn/calm/cta).
- The pattern: close on something abstract that looks like something else ("Looks like ping-pong."), the
  camera pulls back and shows what it really is ("It's your office."), it stops, resolves, rests, and
  returns to the opening picture so the film loops. Frame 0 is the preview image.
- Minimal and calm (owner feedback: earlier versions were hectic). Only squares, dots, lines and bars; no
  icons or labels in the drawing. One statement of two short lines, held for about three seconds.
  A little sarcasm in the hook is welcome. German has to read like a native wrote it.
- One font size per film: the largest at which the longest line fits, so keep lines short.
- The logo is the white signature (`public/logo-mark.svg`): bottom left, and very large and faint behind.
- The slide deck code (`src/slides/SlideDeck`, `src/illustrations`, `BrandFrame`, `Panel`) is no longer used
  by any video and can be removed once the owner confirms.

## Image posts and the posting plan

- Image posts are made the same way as films: `src/content/images.ts` holds every word and, for a poster, which
  film and frame it shows; `src/images/ImagePost.tsx` draws them. A poster is a film rendered at one frame with
  two lines ("Not ping-pong. Your office."); a card is a client's question with the answer in large type.
  Cards say only what the website says. Compositions: `<ImageId>-<language>-<feed|square>`.
- `src/content/plan.ts` is the posting plan (which film or image in which week); the reasoning is in
  `apps/web/plans/content-strategy.md`. The spec checks that every film and image is planned exactly once
  and that every video post opens with the hook of its film.
- `pnpm library` renders films and images and writes the overview page in plan order;
  `--images`, `--videos`, `--only <id>`, `--page`.

## Rules

- Before any work: bring the worktree up to date with `main` (owner feedback, twice). Take wording, styles and
  effects from the website as it is **now**: texts in `apps/web/src/content/de.ts` and `en.ts`, styles in
  `apps/web/app/globals.css`, drawings in `apps/web/src/components/illustrations`. Do not state prices, terms
  or durations that are not in the texts.
- Picture first, few words (owner feedback): 6 to 8 slides of about 2 s, each one large animated illustration
  plus a headline of two to four words. No paragraphs, no captions.
- It has to look stunning (owner feedback, repeated: "not enough yet"). The videos carry every effect of the
  website: the dark `Panel` with `BitAura` (light along the edge, digits drifting off), `BitGlow` (light over
  the dot grid) and `bit-aurora` (indigo light drifting behind the drawing); slides change with the `BitCurtain`
  (ragged front of digits, `src/lib/curtain.ts`); the button has the `bit-cta` light running round its edge.
  When the website gets a new effect, bring it here as a pure function of the frame in `src/lib`.
- Drawings follow `PathScenes.tsx`: fine light lines, tinted glass surfaces (`DRAW.tint`, `DRAW.glass`) instead
  of solid blocks, amber packets with a halo (`DRAW.mark`), emerald for done, soft glows on what is active.
- UI in a video must be the website's real UI, rebuilt faithfully (owner feedback): read the component in
  `apps/web/src/components` first. The button is `BrandButton` (twin of `Button.tsx`); do not draw your own.
- Almost no frame (owner feedback: the drawing matters far more than what surrounds it). No border, no name,
  no topic label, no progress bar. Only one small line at the bottom: the logo, small and dimmed, and
  `www.mintel.me` (with `www.` so that it reads as an address). The stage is scaled as large as the frame allows.
- Light is drawn with plain gradients that fade to transparent. No `filter: blur`, `mix-blend-mode` or dashed
  strokes for glows: they came out with hard edges in the rendered video (owner feedback).
- Every video loops: the first slide is complete on frame 0 (it is the preview image) and fades back in at the
  end. Anything that moves outside the slides (`Panel`) must repeat exactly over the length of the video.
- Frame-driven only: all motion comes from `useCurrentFrame()` / `interpolate()`. No `setTimeout`,
  `setInterval`, CSS animations, `Math.random()` or framer-motion: they do not render correctly frame by frame.
  Pure logic goes in `src/lib` with a `*.spec.ts`.
- 30 fps, about 15 seconds. The video must work without sound and make sense in the first two seconds.
- Copy rules as on the website (see root `CLAUDE.md`): no AI as the owner's tool, no internal method vocabulary,
  modest and factual, no promises the owner did not confirm. Never write the full email address.
- The hero design of the website (binary-digit headline) is approved: do not recreate it here with changes.