From 5b31792ff865fb446e9987c0d1c5db4ea92e547d Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 31 Aug 2026 04:13:43 +0000 Subject: [PATCH] Add CCC Site Kit scripts under site-kit/ Adds the build, deploy, and use-stock shell scripts and the kit README verbatim as provided, in a site-kit/ subfolder so they stay separate from the Hermes connection setup at the repo root. Two identical copies of build.sh were supplied; only one is committed. The root README gains a site-kit section noting that the supporting files the kit README references (site.config.mjs, render.mjs, stamp.mjs, and the engine/, templates/, render/, reference/, and stock/ folders) are not in this repository, and that the scripts target a macOS shell environment. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_019deVPV6cpzdoFzkk6VAKXq --- README.md | 21 ++++++++++++++++++ site-kit/README.md | 51 +++++++++++++++++++++++++++++++++++++++++++ site-kit/build.sh | 34 +++++++++++++++++++++++++++++ site-kit/deploy.sh | 21 ++++++++++++++++++ site-kit/use-stock.sh | 12 ++++++++++ 5 files changed, 139 insertions(+) create mode 100644 site-kit/README.md create mode 100755 site-kit/build.sh create mode 100755 site-kit/deploy.sh create mode 100755 site-kit/use-stock.sh diff --git a/README.md b/README.md index e429d2d..5558908 100644 --- a/README.md +++ b/README.md @@ -79,5 +79,26 @@ configuration for the Claude Code project settings. ├── .claude/ │ └── settings.json # Claude Code project configuration ├── setup.sh # One-shot setup script +├── site-kit/ # CCC Site Kit scripts (see site-kit/README.md) +│ ├── build.sh +│ ├── deploy.sh +│ ├── use-stock.sh +│ └── README.md └── README.md ``` + +--- + +## site-kit/ + +`site-kit/` holds the CCC Site Kit shell scripts and their README. It is +independent of the Hermes setup above. + +Only the shell scripts and the README are present. The kit's README also refers +to `site.config.mjs`, `render.mjs`, `stamp.mjs`, and the `engine/`, `templates/`, +`render/`, `reference/`, and `stock/` folders, none of which are in this +repository yet, so the scripts are not runnable as-is. + +The scripts also assume a macOS shell environment: they use `#!/bin/zsh`, and +`build.sh` calls `sips` (macOS only) plus `ffmpeg`, `ffprobe`, and `bc` without +checking that they exist. diff --git a/site-kit/README.md b/site-kit/README.md new file mode 100644 index 0000000..1b2bac1 --- /dev/null +++ b/site-kit/README.md @@ -0,0 +1,51 @@ +# CCC Site Kit + +Build a $10k-class animated website for any brand. The engine gives you the quality floor; you supply one config and your assets. + +## Quickstart + +The easy way: open Claude Code in this folder and run **`/build-site`**. It interviews you, fills `site.config.mjs`, renders your assets, and ships the site. + +The manual way: + +```bash +# 1. Edit site.config.mjs — your brand, palette, copy, style, and render prompts. + +# 2. Render your 2 videos + 3 images (needs a fal.ai key): +FAL_KEY=your_key node render.mjs +# ...or no key? use a stock set: ./use-stock.sh warm + +# 3. Build: +./build.sh + +# 4. Preview: +cd dist && python3 -m http.server 8000 # then open // + +# 5. Ship it live (one command): +./deploy.sh +``` + +### Hosting: no Cloudinary, no third-party media host +Your built site lives in `dist//` and is **fully self-contained** — the HTML, the engine, and every video and image are in that one folder. It deploys like any static site: `./deploy.sh` pushes it to Vercel, or drag the folder onto [Netlify Drop](https://app.netlify.com/drop). The videos play because they ship right next to the page. + +## What's in here + +| Folder | What it is | Touch it? | +|---|---|---| +| `engine/` | premium2.css + premium2.js — living scrub, footer FX, mesh, legibility, the no-duplication spine | **No** | +| `templates/` | the spine + style variants (A–G) | No | +| `render/` | gen-image / gen-motion / gen-transform (Nano Banana + Seedance) | No | +| `reference/` | the style catalog + design laws | Read | +| `stock/` | fallback videos + images if you have no fal key | Use | +| `site.config.mjs` | **your brand, copy, palette, style, render prompts** | **Yes — this is yours** | +| `dist/` | the built site | Output | + +## The standard (baked in, so every site clears the bar) +- 7 scroll styles: A loop · B scrub · C cursor · D horizontal · E exploded · F push-through · G scrollytelling. +- Every site = 2 videos + 3 images, each used exactly once. No duplication. +- Living scrub (heroes keep moving when idle), legibility halo, mesh background, animated footer. +- OKLCH color, no `#000`/`#fff`, one accent, no em dashes. + +Customizing is a conversation: tell Claude "darker," "exploded style," "new headline," and it edits the config and rebuilds. Copy changes never need a re-render. + +Built by Claude Code Club · claudecodeclub.ai diff --git a/site-kit/build.sh b/site-kit/build.sh new file mode 100755 index 0000000..47ac243 --- /dev/null +++ b/site-kit/build.sh @@ -0,0 +1,34 @@ +#!/bin/zsh +# build.sh — wires rendered assets + stamps the config onto the engine. +# Run AFTER `node render.mjs` (or after ./use-stock.sh dropped stock into work//). +cd "$(dirname "$0")" +slug=$(node -e "import('./site.config.mjs').then(m=>process.stdout.write(m.default.slug))") +style=$(node -e "import('./site.config.mjs').then(m=>process.stdout.write(m.default.style||'B'))") +A="dist/$slug/assets"; W="work/$slug" +mkdir -p "$A/sec" + +if [ "$style" = "A" ]; then + # Style A: ambient loop hero — use the video directly, no frame extraction + cp "$W/hero/hero.mp4" "$A/hero.mp4" + ffmpeg -y -loglevel error -i "$W/hero/hero.mp4" -frames:v 1 -vf "scale=1600:-2" "$A/still.jpg" +else + # B/C/D/E/F/G: hero scrub frames from video 1 + mkdir -p "$A/frames"; rm -f "$A/frames"/[0-9]*.jpg 2>/dev/null + src="$W/hero/hero.mp4" + dur=$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$src") + fps=$(echo "scale=4;120/$dur" | bc) + ffmpeg -y -loglevel error -i "$src" -vf "fps=$fps,scale=1600:-2" -frames:v 120 "$A/frames/tmp_%03d.jpg" + i=1; for f in "$A/frames"/tmp_*.jpg; do mv "$f" "$A/frames/$(printf '%04d' $i).jpg"; i=$((i+1)); done + w=$(sips -g pixelWidth "$A/frames/0001.jpg" | awk '/pixelWidth/{print $2}') + h=$(sips -g pixelHeight "$A/frames/0001.jpg" | awk '/pixelHeight/{print $2}') + printf '{"count":120,"w":%s,"h":%s}' "$w" "$h" > "$A/frames/manifest.json" + cp "$A/frames/0001.jpg" "$A/still.jpg" +fi + +# video 2 -> middle band loop (every style) +cp "$W/middle/hero.mp4" "$A/sec/hero.mp4" +# 3 images +cp "$W/g1.jpg" "$A/g1.jpg"; cp "$W/g2.jpg" "$A/g2.jpg"; cp "$W/g3.jpg" "$A/g3.jpg" + +node stamp.mjs +echo "BUILD DONE ($style) -> dist/$slug/ (serve dist/ and open /$slug/)" diff --git a/site-kit/deploy.sh b/site-kit/deploy.sh new file mode 100755 index 0000000..2cfedb4 --- /dev/null +++ b/site-kit/deploy.sh @@ -0,0 +1,21 @@ +#!/bin/zsh +# deploy.sh — publish your site live in one command. +# Your built site (dist//) is SELF-CONTAINED: the HTML, the engine, and every +# video and image are in that one folder. No Cloudinary, no external media host needed. +# It deploys like any static folder. +cd "$(dirname "$0")" +slug=$(node -e "import('./site.config.mjs').then(m=>process.stdout.write(m.default.slug))") +dir="dist/$slug" +[ -d "$dir" ] || { echo "Nothing built yet. Run ./build.sh first."; exit 1; } + +echo "Publishing $dir ..." +echo "(first run will ask you to log in to Vercel — free)" +npx --yes vercel@latest deploy "$dir" --prod --yes + +cat <<'NOTE' + +No CLI? Two zero-setup alternatives: + - Netlify Drop: open app.netlify.com/drop and drag the dist/ folder onto the page. + - GitHub Pages: push dist/ to a repo and enable Pages. +Everything in that folder ships together. Your videos will play because they are right there next to the page. +NOTE diff --git a/site-kit/use-stock.sh b/site-kit/use-stock.sh new file mode 100755 index 0000000..50c6384 --- /dev/null +++ b/site-kit/use-stock.sh @@ -0,0 +1,12 @@ +#!/bin/zsh +# use-stock.sh e.g. ./use-stock.sh warm mybrand +cd "$(dirname "$0")" +set=$1; slug=$2 +[ -d "stock/$set" ] || { echo "no stock set '$set' (have: $(ls stock))"; exit 1; } +mkdir -p "work/$slug/hero" "work/$slug/middle" +cp "stock/$set/hero.mp4" "work/$slug/hero/hero.mp4" +cp "stock/$set/middle.mp4" "work/$slug/middle/hero.mp4" +cp "stock/$set/g1.jpg" "work/$slug/g1.jpg" +cp "stock/$set/g2.jpg" "work/$slug/g2.jpg" +cp "stock/$set/g3.jpg" "work/$slug/g3.jpg" +echo "stock set '$set' -> work/$slug/ (now run ./build.sh)"