Costa Co Studio — Social Media Content System (Remotion)

Transferred from home-session memory 2026-05-24. The system is LIVE and producing client-work content for @costaco.studio.

Where everything lives

Project: /Users/rio/remotion projects/ (Remotion + TypeScript)
Source compositions: /Users/rio/remotion projects/src/ — FeedPost.tsx, FeedPostDesktop.tsx, HighlightCover.tsx, Root.tsx, plus components/, lib/, scenes/, stories/
Rendered output: /Users/rio/remotion projects/out/
Source assets (screenshots): /Users/rio/remotion projects/public/

Output dimensions

Reels / Stories: 1080×1920
Highlight covers: 1080×1080
Portrait feed posts: 1080×1350 (bottom 240px intentionally empty for IG link sticker on Stories cross-post)

Per-client deliverable bundle (3 assets)

For each client's "Client Work" promo, render these 3:

Feed carousel slide 1 (1080×1350) — FeedPostDesktop composition. Browser-window mockup (traffic lights, URL in chrome). This is the grid thumbnail, use the stronger desktop image.
Feed carousel slide 2 (1080×1350) — FeedPost composition. Phone mockup, mobile fullpage. "NN — Client Work" eyebrow + client name + location + studio tagline "Websites THAT WORK."
Story for Client Work highlight (1080×1920) — StoryClientCombo composition. Desktop browser in back, phone overlapping front-right, single caption + link sticker. Renders to out/story-{client}-combo.png.

Carousel order rule

Desktop slide 1 (grid thumbnail), mobile slide 2. Use the stronger image as the thumbnail.

Client series (numbered)

#	Client	Status	Source asset stem
01	Bonham Carter Films / Maya (Miami)	shipped	`bcf-fullpage-mobile.png`
02	Distinctive Designs by Lee (South Florida)	rendered 2026-05-24 (verify if posted)	`dd-fullpage-mobile.png` + `dd-desktop-hero.png`
03	Dylan (Dylan Bub Films · Worldwide)	rendered 2026-06-20 — 3 assets in `out/` (`feed-post-dylan-desktop.png`, `feed-post-dylan.png`, `story-dylan-combo.png`). Verified. Pending: post to @costaco.studio.	`dylan-desktop-hero.png` + `dylan-fullpage-mobile.png`

Screenshot recipe (Playwright)

Playwright location: /Users/rio/Email out reach/node_modules/playwright — run scripts from that dir or copy the script in
Mobile fullpage: viewport 406×900, DPR 3, isMobile: true, fullPage: true → save as {client}-fullpage-mobile.png
Desktop above-fold: viewport 1440×900, DPR 2, fullPage: false → save as {client}-desktop-hero.png
CRITICAL: always screenshot the live deployed URL, never a local build. Multiple dead/scratch dirs exist (see project-folder-map) and shipping the wrong one once nearly leaked fabricated press claims (Lee dd by lee 3/ incident, see brain/06-learnings.md Rule 5)

Render command

cd "/Users/rio/remotion projects"
npx remotion still <CompositionId> out/<filename>.png

Use still, NOT render. The h264 default codec rejects png output.

Highlight covers — IMPORTANT design rule

Highlight covers (1080×1080, HighlightCover composition) are intentionally NOT numbered. Adding a new highlight in IG REORDERS the strip on the profile, so numbered covers (01, 02...) would drift out of sync.

Pattern: just italic + bold word combos. Already rendered:

work-cover.png — Client Work
process-cover.png — Process
about-cover.png — About
bookcall-cover.png — Book Call
faq-cover.png — FAQ
seo-cover.png — SEO
testimonials-cover.png — Testimonials
beforeafter-cover.png — Before/After (italic before + bold After., added 2026-06-20 for the Lee before/after + future transformation content)

(another exists per out/ listing but name not yet documented.)

Caption voice

Philosophical-thread style. Short declarative lines. Contrast setup → reveal → tag client. 3 niche hashtags MAX, never 8+. No em dashes (CLAUDE.md hard rule). Tag client in caption body, not just image.

Reference: Lee example shipped 2026-05-24 (check notes/lee-image-sort-prompt.md or IG history for the actual text).

When adding a new client (Dylan template)

Wait for client site to ship to live URL.
Screenshot live URL: mobile fullpage + desktop above-fold per the recipe above.
Save to /Users/rio/remotion projects/public/ as {shortname}-fullpage-mobile.png + {shortname}-desktop-hero.png.
Add three composition variants in src/Root.tsx:
- FeedPost with number: "03" (Dylan = #03 in series)
- FeedPostDesktop variant
- StoryClientCombo variant
Render the three via npx remotion still.
Draft caption in philosophical-thread voice.
Default to desktop-first carousel order unless the mobile screenshot is stronger.

Existing rendered assets in `out/` (as of 2026-05-24)

Feed posts: feed-post-lee.png, feed-post-lee-desktop.png, feed-post.png, feed-post-story.png
Stories: story-lee-combo.png
Highlight covers (8): work, process, about, bookcall, faq, seo, testimonials, + 1 unlabeled
Reels: costaco-reel.mp4, costaco-reel-story.mp4
Test frames (many test-frame-NN.png — scratch, ignore)

Related brain context

brain/09-personal-brand.md — content strategy for @riocostaaa (personal account, separate from @costaco.studio business account)
brain/04-voice.md — voice rules + no-em-dashes rule
brain/06-learnings.md Rule 5 — no fabricated claims on client-facing assets
clients/lee-distinctive-designs.md — Lee's site (the URL being screenshotted)
templates/personal-brand-scripts.md — Reel script library for @riocostaaa