Hero animation sandbox

Dev-only sandbox at /dev/hero-sandbox (not linked, not indexed) for iterating on the homepage hero’s right-hand animation. Locks the hero into a chosen aspect ratio with no top nav, so it can be screen-captured cleanly.

Run it

cd artifacts/marketing && pnpm astro dev

Open http://127.0.0.1:4321/dev/hero-sandbox.

Page layout

Left column: In-House brand mark (matches topbar-v2.tsx: 28px IH_icon.png + “In-House” wordmark) -> green “Bring Your Marketing In-House” tagline pill -> H1 -> lead copy -> “Proudly built in Australia” signature line with the Aussie flag.
Right column: mount point ([data-sandbox-stage]) where the active animation layout renders.
Floating controls (bottom-right, dev only): Layout selector, Aspect selector, Replay, Loop toggle. Press h to hide for screenshots. Astro’s own dev toolbar is hidden via CSS on this page.

Five switchable layouts

All five render into the same right-column slot. Switching layouts (or hitting Replay) re-mounts immediately and skips the 5-second initial delay. Only the first page load has the 5s pause.

Layout	Behaviour
Worklog (default)	Compact feed. Items drop in at top one-by-one using FLIP (existing items slide down smoothly). Once full, rotates: oldest fades off, new pops in on top. 1s entrance, 1s stagger, 1s rotation tick.
Deck	3 rich approval-style cards stacked with depth/scale offset. Top card flies off, others step forward, new joins at back. Header strip, status pill, body + image grid, platform pills, optional floating callout. 1.2s build stagger, 4.5s rotation tick.
Carousel	One big rich card at a time. Current slides off left, next slides in from right. 3s interval.
Grid	2x2 of rich cards. Drop in to build, then one card’s content crossfades to a new agent state every couple of ticks.
Morph	Single rich card. Eyebrow / title / body morph in place to the next agent state, each line staggered ~80ms so it reads as live writing. 3s interval.

Timing constants (top of `<script>` block)

const INITIAL_DELAY_MS = 5000;  // page-load pause before first animation
const POP_IN_MS = 1000;          // entrance duration (card + items)
const STAGGER_MS = 1000;         // gap between items in worklog fill
const TICK_MS = 1000;            // worklog rotation cadence
const DROP_DISTANCE = 14;        // px above slot 0 items enter from
const EXIT_MS = 320;             // worklog oldest-item fade-out

The deck has its own DECK_STAGGER_MS = 1200 and DECK_TICK_MS = 4500 since rich cards need reading time. Other layouts derive from the shared constants (e.g. carousel uses TICK_MS * 3).

Datasets (frontmatter)

ITEMS (5 items) — compact worklog items.
AGENT_CARDS (8 cards) — simple {agent, eyebrow, title, body} used by carousel / grid / morph.
DECK_CARDS (6 cards) — rich approval-style cards used by the deck only:
1. Social Media, Monthly Batch (32 posts, dentist content, image grid, “Approve the week” callout)
2. Google Ads, Campaign Launch (hot water repair)
3. Meta Ads, Boost (reel to lookalike)
4. SEO, New Blog (Brisbane plumber)
5. Social Media, Comment Reply (Sarah’s IG comment)
6. Social Media, DM Reply (Tom’s Messenger lead)

All three datasets pass through a single JSON island ([data-sandbox-data]).

Architecture

Each layout is a LayoutFactory returning { play, cleanup }. setLayout(name) swaps stage.innerHTML and starts the new layout. Replay calls mountActive(true).
Worklog uses FLIP (First/Last/Invert/Play) inside prependItem so existing items smoothly slide down to make room for the new one. This is the source of the “cards below slide down” behaviour. Both fill and rotation share this codepath.
Deck cards use a --depth CSS variable to drive translateY + scale
- opacity, plus --enter-y / --exit-y / --exit-rot so the JS animates entrances/exits without fighting the stack transform.
Brand glyphs for Instagram, Facebook, Google are inline SVGs in BRAND_GLYPHS. Stylised, not official assets.
The <style> block is is:global because dynamically-inserted children don’t carry Astro’s scoped data-astro-cid attribute. The .lp-wl-* rules are duplicated from WorklogFeed.astro to keep this page self-contained. Don’t touch production styles from here.

Known follow-ups

Loop toggle is currently a placeholder. Re-mounts on change but doesn’t pause anything mid-cycle.
The deck is the only layout with rich cards. The carousel, grid, and morph still use the simpler AGENT_CARDS schema. To make them rich, point them at DECK_CARDS and update their build functions.
Deck’s image-grid tiles are placeholder gradients. Swap for real <img> if you want visual fidelity.
Aspect ratios collapse the hero grid to single-column for 9:16 and 1:1; may need per-aspect tuning per layout.

Brand voice when editing copy

Per the project CLAUDE.md (Brand Positioning section): we do the work, not “help you” do it. No em dashes (use commas, periods, colons, semicolons, or parentheses). British / Australian spelling (optimise, organisation). Action verbs (writes, publishes, launches, ships). The owner is the protagonist; In-House does the labour.