The "CLICK TO COPY" hint was absolute-positioned at top:10/right:14 of
the cmd-box, landing on top of "~/facere — bash" in the bar header.
Move the hint into the bar as a flex sibling so the title and hint
share the row cleanly without overlap.
Replace the placeholder install command with the real installer pulled
from raw.githubusercontent.com, with FACERE_GH_TOKEN as a
"contact us for demo" placeholder.
Also fix deploy/build.sh: `npm init -y` rejects the leading-dot dir
name `.build`, and the preset must be resolved by absolute path since
babel runs from the repo root.
This is the big "make scrolling smooth" pass — the biggest wins live
in cold-start, not in the scroll loop itself, but a fast cold start
means GSAP starts in a non-thrashing state and stays there.
- Drop @babel/standalone (~3MB) from the page entirely. app.jsx is
pre-compiled to app.js via deploy/build.sh; the browser loads the
compiled bundle directly. JSX-in-browser was running babel transform
on every page load, which is brutal on phones.
- Switch React UMD bundles from .development to .production.min:
~1.1MB → ~140KB, no dev-mode warnings/checks in the hot path.
- Add `defer` + `<link rel=preload as=script>` for the React/GSAP CDN
scripts so they fetch in parallel with HTML parse, execute in order
after DOM is ready, and don't block first paint.
- Re-encode the three 1.4–1.8MB PNG backgrounds as WebP at full size
(~190KB total) plus a 900px-wide mobile variant (~52KB total).
Mobile preload links use `media=` so phones never download the
full-size variants.
- Move bg-image URLs from inline JSX styles into styles.css so the
mobile media query can swap them in cleanly.
- nginx: long-cache versioned static assets (Cache-Control immutable,
1 year) since URLs already carry ?v=… cache busters; keep the HTML
itself on must-revalidate so the version pointer can update.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Mobile scrolling was janky from a stack of expensive paint passes
running every frame. This pass:
- CSS: hide .grain (SVG feTurbulence is the single biggest cost),
drop mix-blend-mode on .haze/.smoke-puff, drop backdrop-filter on
.cmd-box, hide the blurred arm-glow, and remove blur filters from
chip-glow / conveyor-pulse / scan-tear under <=760px.
- JSX: capture an IS_MOBILE flag once at boot. On mobile, halve
smoke puffs / chimneys / sparks / chip-pulse dots / embers, and
switch GSAP scrub from 0.6 (rAF interpolation) to true (direct
scroll-tied) — which is cheaper and more responsive.
- HUD: gate setProgress() on a changed integer depth (0..100) so we
re-render at most ~100 times per full scroll instead of every frame.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- PixelLogo scales to viewport via a responsive hook so FACERE no
longer overflows narrow screens.
- styles.css mobile breakpoints (760px / 480px / short-landscape)
unwrap headlines/body copy, compact the HUD, allow the install
command to wrap on tiny phones, and re-aim the bg pan origins so
the meaningful slice of each landscape image stays in frame.
- Shorten scroll-track to 480vh on phones — the GSAP timeline still
scrubs by progress so the choreography is preserved, just less
exhausting to swipe through.
- Bump cache-busting query string on css/jsx.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bring in the newer app.jsx/styles.css/facere.html that were edited
directly on the deployed copy, rename Facere.html -> facere.html to
match the nginx index, and check in the docker-compose + nginx.conf
that drives the container.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
