feat(marketing): anime.js clip engine landing page

[SomeRandmGuyy]

Summary

Rebuilds the public landing page (/) as a scroll-driven story on anime.js v4, matching the Spectrum Web Co and Desk Lanes marketing upgrades.

• A pinned CSS-3D clip engine (src/components/marketing/clip-engine.tsx) sits on the right while chapters scroll on the left. One onScroll timeline scrubs it through ten stages: twelve footage frames around a spinning ClippyOS core → film strip → hooks detected → cut into four clips → captioned vertical cards → signed off in Approvals → fanned out to X, YouTube, Instagram and TikTok → stacked into the Library → Hermes loop → online.
• src/components/marketing/anime/landing-motion.ts runs the hero intro (split text, boot LEDs, frames dropping into the ring), split-word reveals, a stage readout with scramble text and timecode, side panels per stage, a scroll HUD and magnetic CTAs, all in one createScope reverted on unmount.
• Stage poses live in src/lib/clip-engine.ts, covered by src/lib/clip-engine.test.ts.
• Ingest, detect, cut and caption/render are labelled Rolling out (the native pipeline is still on the roadmap; AutoClip runs through Crayo today). Approvals, the Social Machine, the Library and Hermes are labelled Live.
• prefers-reduced-motion renders one static formation with nothing animating.
• Magic UI / Motion effects are removed from the homepage only. The FAQ now uses native <details>. The now-unused feature grid, logo cloud, spotlight, tilt card and testimonials components are deleted. Demo form, Get Access flow and product captures are unchanged. The landing header is fixed so the stage fills the viewport from the top.

Type of change

• feat — new capability
• fix — bug fix
• docs — documentation only
• refactor — no behavior change
• chore / ci — tooling and pipeline

Verification

• npm test — tests 415, pass 414, fail 0, skipped 1 (the skip is the existing db.ts-blocked library-storage test); src/lib/clip-engine.test.ts 17/17 pass
• npm run typecheck — tsc --noEmit exit 0
• npm run lint — eslint src/components/marketing src/lib/clip-engine.ts src/lib/clip-engine.test.ts src/routes/index.tsx exit 0, no warnings; prettier check clean on changed source files
• UI touched: exercised via the dev server with Playwright + Chrome — every stage at 1440×900 in dark and light themes, 390×844 mobile, and reduced motion. No page errors, no horizontal overflow (scrollWidth equals viewport width). Only console error is the existing platform-chrome CSP block of grok.com/grok-app-builder/extensions.js.
• Auth/routes touched: n/a

Contracts check

• No secrets committed; .env.example documents names only
• Server-only code stayed under src/lib/server/ / *.server.ts (no server code touched)
• If schema changed: n/a (no schema change)
• Platform chrome untouched (server/middleware/grok-pwa.ts, grokPwaPlugin(), <PreviewHostBridge />, public/__grok/)

🤖 Generated with Claude Code

https://claude.ai/code/session_01AzZUDyzfUAfxJAXaPfiq8t

---

Note

Low Risk
Marketing-only UI and documentation; no auth, API, or server logic changes—main risk is scroll/animation UX regressions on the public page.

Overview
Replaces the public / landing with a scroll-scrubbed story: a pinned CSS-3D clip engine on the right and narrative chapters on the left, wired through anime.js v4 (createScope + onScroll in landing-motion.ts).

Scrolling advances ten demo stages (ring → strip → detect/cut → vertical cards → approvals → social fan-out → library → Hermes → online) using poses from new src/lib/clip-engine.ts, with 17 unit tests on geometry and Live vs Rolling out labels. ClipEngine renders the 3D stage; hero intro, split-word reveals, stage readout/timecode, side panels, ScrollHud, and magnetic CTAs share one timeline; prefers-reduced-motion shows a static publish formation.

The old Magic UI / Motion homepage (feature grid, logo cloud, testimonials canvas, spotlight, tilt cards, marquee) is removed; FAQ uses native <details>. Product shots expand to ten surfaces (adds Social Machine + Inbox); demo/Get Access flows stay. animejs is added; README documents the clip engine. Large styles.css block styles the spine, stage, and later sections.

^{Reviewed by Cursor Bugbot for commit 89db774. Bugbot is set up for automated code reviews on this repo. Configure here.}

Confidence Score: 4/5

The PR does not yet appear safe to merge because the content reveals remain mistimed and the changed UI lacks required Playwright coverage.

Findings

1.  Reveals trigger after content leaves ▶
2.  Missing landing UI coverage ▶
3.  Reduced motion still moves HUD ▶

Fix with agent prompt

### Issue 1
src/components/marketing/anime/landing-motion.ts:323-325
When a visitor scrolls down normally, `bottom top` is reached only after the heading has passed above the viewport. The copy uses the same trigger, and the product shots and FAQ items are hidden before a similarly late trigger. Visitors therefore cannot see these elements reveal while they are viewing them.

### Issue 2
src/components/marketing/landing-page.tsx:328
The landing page now has a scroll-driven engine, and the FAQ uses native `<details>`, but no matching `scripts/qa-*.ts` Playwright suite was added or extended. AGENTS.md requires extending the matching suite when a screen changes. Manual browser checks do not provide repeatable regression coverage; this repository requirement must be satisfied before merging.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

### Issue 3
src/components/marketing/anime/landing-motion.ts:undefined-397
When a visitor requests reduced motion, this animation still moves the ruler head as they scroll. The other motion effects are disabled, but the HUD does not provide the promised static experience.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Summary

Replaces the public landing page with an anime.js scroll-driven clip-engine story, reorganizes the marketing sections, and switches the FAQ to native details. The new UI still needs the repository-required Playwright QA coverage.

_{Reviews (2) · Last reviewed commit: "fix(marketing): drive the engine readout..."}

[vercel]

Deployment failed for project clippyos with the following error:

Hobby accounts are limited to daily cron jobs. This cron expression (*/15 * * * *) would run more than once per day. Upgrade to the Pro plan to unlock all Cron Jobs features on Vercel.

Learn More: https://vercel.link/3Fpeeb1

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
clippyos	Ready	Preview	Sep 28, 2026 2:44am UTC

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_0b12312b-2be8-478b-a781-399a5666e196)

[greptile-apps]

Reveals trigger after content leaves When a visitor scrolls down normally, bottom top is reached only after the heading has passed above the viewport. The copy uses the same trigger, and the product shots and FAQ items are hidden before a similarly late trigger. Visitors therefore cannot see these elements reveal while they are viewing them.

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/components/marketing/anime/landing-motion.ts
Line: 323-325

Comment:
**Reveals trigger after content leaves** When a visitor scrolls down normally, `bottom top` is reached only after the heading has passed above the viewport. The copy uses the same trigger, and the product shots and FAQ items are hidden before a similarly late trigger. Visitors therefore cannot see these elements reveal while they are viewing them.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

[SomeRandmGuyy]

Not a bug. anime.js v4 reads enter/leave as "<container> <target>" (see ScrollObserver.refresh in animejs/dist/modules/events/scroll.js: enterContainer = splitted[0]; enterTarget = splitted[1]). So enter: "bottom top" fires when the viewport's bottom edge meets the element's top edge, i.e. as the heading scrolls into view from below, and leave: "bottom-=36% top" completes the reveal when the heading's top is 36% above the viewport bottom. Checked in headless Chrome at 1440×900: every section heading is fully revealed while it sits in the upper half of the viewport. Same pattern as the Desk Lanes homepage.

[greptile-apps]

You're right — I had the enter/leave boundary order reversed. In anime.js v4 these are parsed as <container> <target>, so enter: "bottom top" starts when the viewport bottom reaches the heading's top, while leave: "bottom-=36% top" completes the reveal at the intended in-view position. The headless check confirms the content is visible during its reveals. I’m withdrawing this finding; no change is needed.

Tip: You can customize Greptile's behavior for this repo with .greptile/rules.md and .greptile/config.json.

[greptile-apps]

Reduced motion still moves HUD When a visitor requests reduced motion, this animation still moves the ruler head as they scroll. The other motion effects are disabled, but the HUD does not provide the promised static experience.

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/components/marketing/anime/landing-motion.ts
Line: 397

Comment:
**Reduced motion still moves HUD** When a visitor requests reduced motion, this animation still moves the ruler head as they scroll. The other motion effects are disabled, but the HUD does not provide the promised static experience.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

[SomeRandmGuyy]

Leaving this as is. With reduced motion the HUD uses sync: true, so the ruler head is a direct 1:1 read-out of scroll position, like a scrollbar thumb, with no easing, smoothing or autonomous movement. The decorative effects (intro, reveals, engine, spin, magnets) are all off in that mode.

[greptile-apps]

That’s a fair distinction. With sync: true, the ruler head is a direct scroll-position indicator rather than an independently animated effect, so it does not violate the reduced-motion intent. The surrounding motion is disabled in reduced-motion mode as described. I’m withdrawing this finding; no change is needed.

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_d2d3d9e4-d7f8-43df-9e1b-ded3605e9330)

[greptile-apps]

Missing landing UI coverage The landing page now has a scroll-driven engine, and the FAQ uses native <details>, but no matching scripts/qa-*.ts Playwright suite was added or extended. AGENTS.md requires extending the matching suite when a screen changes. Manual browser checks do not provide repeatable regression coverage; this repository requirement must be satisfied before merging.

Context Used: AGENTS.md (source)

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/components/marketing/landing-page.tsx
Line: 328

Comment:
**Missing landing UI coverage** The landing page now has a scroll-driven engine, and the FAQ uses native `<details>`, but no matching `scripts/qa-*.ts` Playwright suite was added or extended. AGENTS.md requires extending the matching suite when a screen changes. Manual browser checks do not provide repeatable regression coverage; this repository requirement must be satisfied before merging.

**Context Used:** AGENTS.md ([source](https://github.com/swcstudiospace/clippyos/blob/main/AGENTS.md))

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!