# PlayStat brand library — draft 04

Open `/branding/` in the local marketing preview. This is a candidate asset library, not a production website change. 待 Elvin review. It does not schedule, publish or send posts.

## Use the pack

1. Choose one of eight post families. Edit the headline, supporting line, series, status, source/time and CTA. Number cards also expose their key number.
2. Select portrait 1080×1350, square 1080×1080, story 1080×1920 or landscape 1600×900. Safe guides are optional and excluded from exports. Story keeps 250px above and 300px below the content; these are internal conservative margins, not a claim about every platform UI.
3. Export PNG for posting or SVG for editing. SVG embeds the original logo and fonts. SVG text remains editable; install the supplied fonts in a design app. Cross-app font substitution must be checked before final export. Changes stay in the current tab only; a reload resets them.
4. Open the caption drawer. Update caption and alt text to match any edits. Add verified sources and dates where required. Fixture/result cards remain templates with placeholders until verified content replaces them.
5. For the number explainer, use all five carousel slides in order. Arithmetic: 10 × $0.90 = $9; 8 × $1 = $8; net −$1 before fees. Each slide is illustrative.

The complete ZIP includes 32 format-ready SVG covers, five carousel SVGs, eight original transparent vector elements, 13 ready portrait PNGs, six motion compositions in `motion.mjs`, source files, captions, design tokens and fonts/licenses. PNGs are browser-exported candidates; review before publishing.

## Rebuild / run

The geometric library needs no package install or credentials. The sports study additionally uses a local reference cutout and remotely linked NBA media.

From the repository root:

```sh
node marketing-preview/branding/build.mjs
python3 -m http.server 8943 --bind 127.0.0.1 --directory marketing-preview
```

If the port is occupied, choose another unused port; do not replace another task's server. Open `http://127.0.0.1:8943/branding/`.

For an extracted pack, from its top folder:

```sh
python3 -m http.server 8943 --bind 127.0.0.1
```

`branding/` and `site/assets/` must remain siblings. To rebuild editable SVG assets in the extracted pack: `node branding/build.mjs`.

To assemble the ZIP from the repository (after browser exports exist):

```sh
python3 marketing-preview/branding/package.py --png-dir /absolute/path/to/ready-png --output /absolute/path/to/playstat-brand-pack.zip
```

`generated/` is ignored build output. The builder is deterministic and accepts an optional output folder. The package validates the 13 PNG dimensions and contains a file/hash manifest. Raw screenshots and downloaded exports belong in registered `~/data-exports/playstat/branding-library-2026-10-28/` storage.

## Motion handoff

Open `motion-player.html` for a focused standalone player, also included in the ZIP. Six 1600×900 browser compositions: brand opener, court reveal, number reveal, research lower third, court-line transition, save/follow. Four seconds each; explicit play/pause/replay/scrub. No autoplay. Off-screen/background playback pauses. OS reduced motion, or the preview checkbox, shows the readable 1.8-second hold. Easing: `cubic-bezier(0.23, 1, 0.32, 1)` for entrances; court drawing uses ease-in-out. Movement is short; holds carry the reading time. UI controls remain immediate.

`motionSVG(id, assets)` creates named SVG groups. `mountMotion(container, id, callbacks)` attaches Web Animations tracks. It returns play, pause, replay, seek, setReduced and destroy. Call destroy before replacing a composition. `render.mjs` provides the same original graphic shapes. The frame download captures current transforms, opacity and stroke progress in a standalone SVG.

Use named groups as animation layers: logo, headline, description, footer, artwork; motion-specific groups use `motion-` prefixes. The lower third contains a labelled footage placeholder. Replace it only with owned/licensed footage. Decorative bars/paths do not imply measured data. Fonts and artwork are locally bundled. No After Effects, Lottie or video-file compatibility is claimed. MP4/transparent-video rendering must follow the Mac mini production workflow; this task supplies editable browser source and stills, not rendered video.

## Identity and provenance

Existing owner-supplied PNG logo/icon, untouched; no redraw or new mark. Source and font licenses: `../site/assets/README.md`. Navy #01024F, green #0AEB7D, paper #F4F7FA. Poppins 600 and Plus Jakarta Sans 400/600, SIL OFL. White plates protect contrast for the original dark wordmark. Use the original icon on dark fields. Source logo resolution is limited (wordmark 342×95, icon 161×162); a real vector original is still desirable for oversized print/motion usage. The supplied raster identity is embedded as raster in SVGs; it is not a vector reconstruction.

New vector elements are original code-native geometry: evidence orbit, basketball, half-court, signal stack, question path, match brackets, abstract bars, forward arrow. These are graphic vocabulary, not alternative logos.

Reference direction was inspected in the prior social review: [sports search](https://posts.design/search?q=sports), [sport search](https://posts.design/search?q=sport), [Sports campaign](https://posts.design/sports-built-to-feed-the-fandom-2026-08-26), [Alex sports UI](https://posts.design/alex-getting-to-redesign-sports-on-x-is-2026-08-27), [Firecrawl explainer](https://posts.design/firecrawl-fantasy-sports-data-in-alexandria-2026-10-06). Applied: sports context, one focal message, strong hierarchy, generous space. No reference imagery, logos or slogans are reused.

Library organisation references: [Air asset board](https://mobbin.com/screens/b1bcbdfe-6341-4de2-9f6f-5c854b0de4b6) for grouped asset previews/downloads; [Adobe libraries](https://mobbin.com/screens/64a854be-0f52-42e8-85a4-352cda9d1685) for separating brand constants from reusable assets. Images inspected, not imported.

The prior strategy remains at `../social-review/2026-10-28/REVIEW.md`: six-post/two-week pilot, useful-attention metrics and evidence requirements. No account-analytics lift is established. Three bounded implementation/review passes are documented in `LOOPS.md`; final aesthetic approval belongs to Elvin.

## Earlier sports study — historical draft 02

`SPORTS-REVIEW.md` preserves the earlier portrait study and failed YouTube embed review. The full-body edition below supersedes those layouts and playback implementation.

## Full-body sports edition — draft 03

Open `/branding/#sports`, or `?view=sheet#sports` to compare six compositions. Click a poster to edit its headline/source and export 1080×1350 or 1080×1920 SVG. The player embeds in the SVG; NBA marks and stills remain remote links. The provided action PNG is a genuine 1804×2700 photograph with alpha, not AI-generated. The source file is unaltered; SVG viewBox framing removes transparent margins.

Attribution: Thelma Carr / FreePNGimg, [asset 93881](https://freepngimg.com/png/93881-golden-basketball-player-warriors-lakers-angeles-los), labelled [CC BY-NC 4.0](https://creativecommons.org/licenses/by-nc/4.0/) by its source. This local kit is for design review. Underlying photograph and athlete rights have not been independently cleared for production. The complete local kit includes this reference PNG; Git stores provenance only.

To restore the cutout in a fresh checkout, download the original from the source page to registered media storage, then link it as `marketing-preview/branding/generated/action-cutout.png`. Current local source: `~/data-exports/playstat/branding-action-2026-10-29/lebron-action.png`. No credentials are required.

The film workbench plays an official Hawks 93.53-second Jalen Johnson archive, published 19 March 2024 UTC, from the original public 1280×720 MP4 exposed on NBA.com. This is distinct from the LeBron cutout study. Play/pause, restart, native seeking and landscape/portrait/story composition switching operate on the same video element. Format changes preserve playback position. Video editing/rendering/export is not supplied. See `ACTION-REVIEW.md` for evidence and source limitations.

The earlier `SPORTS-REVIEW.md` records draft02, including its failed YouTube embed; it is historical. The current workbench replaces that embed with directly playable official archive media.

## Sports motion edition — draft04

Open `sports-motion.html`, or `/branding/#sports-motion`. Six15-second sequences adapt the sports designs in portrait/story. Cutouts and headline layers enter separately, one of three transitions reveals an explicitly named Jalen Johnson chapter,8seconds of real NBA footage play, and a green end card closes. Play/pause, replay, scene jumps, scrubbing, optional source audio and reduced-motion cuts are provided. Initial state does not autoplay. The mobile player has controls above the artwork.

The player journal now uses CONTROL THE COURT with an open paper background and court arc. Landscape footage fills the16:9canvas instead of competing with a title sidebar. `MOTION-REVIEW.md` records choreography and checks. The ZIP includes editable browser source; it is not a rendered video pack.

## Image-generated campaign edition — draft05

The first three sports compositions now use original generated artwork: Arena after dark, Courtside notes and The game within. Open `?view=sheet#sports` to compare, click a poster to edit/export, or use `sports-motion.html` to review the animation. Generated art, actual photo and editable type are separate layers.

See `CAMPAIGN-REVIEW.md` for the Behance reference study, `CAMPAIGN-PROMPTS.json` for exact imagegen prompts and `CAMPAIGN-ASSETS.json` for hashes/dimensions. The ZIP includes `generated/campaign/arena.png`, `daylight.png` and `inside.png`. Restore these from the ZIP or `~/data-exports/playstat/branding-imagegen-2026-10-29/` for a fresh Git checkout; generated media is intentionally ignored. SVG downloads embed campaign artwork. The 13 ready PNGs remain the earlier educational pack. This revision supersedes the first three draft03/04 layouts; previous review records remain historical.

## Explainer edition — draft06

Open `/branding/#explainers` for three complete educational posts: a connected research framework, an annotated hypothetical play and a two-sample shooting comparison. Each exports PNG/SVG at1080×1350; headline/source can be edited in-browser, diagrams in SVG/source. See `EXPLAINERS.md`. Rebuild the original assets first, then `node marketing-preview/branding/build-explainers.mjs`. Three new browser PNGs and standalone SVGs are included in the complete pack. No new explainer animation or video export is supplied.

## Website and transparent banners — draft07

The newest direction appears first under Website & banners. Open `website-system.html` for the portable website guide; download the five original transparent SVGs individually or as `website-assets/playstat-website-kit.zip`. Source and transfer hashes are in `WEBSITE-SYSTEM.md` and `WEBSITE-ASSETS.json`. The complete ZIP includes this addition. Public `/branding` support is prepared separately in PR #4; live publication remains pending review.

## Real-world examples — draft08

Open `examples.html`: six photo/diagram designs, four linked visual references, photo provenance and phone/site mockups. SVGs and PNG export include embedded images/fonts/credits. Rebuild with `python3 marketing-preview/branding/build-examples.py` before packaging. See `EXAMPLES.md` and `EXAMPLE-ASSETS.json`. The complete ZIP includes the sources and images; external reference thumbnails need the network.

## Draft09 direction

Start with examples.html: the five supplied Drive cutout families, square/portrait PNG downloads and three original transparent SVG components. EXAMPLES.md and drive-assets/manifest.json record the source and flattened-layer limitation. This replaces the active real-photo reference gallery.