Skip to content

Landing redesign: typed-systems editorial with GSAP motion - #11

Merged
kryptt merged 3 commits into
masterfrom
redesign/landing-craft-pass
Jun 12, 2026
Merged

kryptt merged 3 commits into
masterfrom
redesign/landing-craft-pass

Conversation

@kryptt

@kryptt kryptt commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

What this is

A full restructure of the landing page into a studio narrative — hero → positioning → services → process → case studies → technical excellence → research/open source → writing → final CTA — while preserving the founder copy substance (narrowing intro, ideal-customer paragraph, the four kinds of work, recent outcomes, Fixed, libraries, articles) and both hero CTAs.

Visual system

  • Extends the existing tokens: indigo accent, mono chapter marks, light/dark themes.
  • Warm paper base in light mode (#faf8f3), deep ink in dark mode; one dark full-bleed section (engineering depth) for editorial contrast.
  • New webfont: Fraunces (variable serif, Google Fonts, display=swap) for display headlines on the landing page only — the rest of the site stays on the system-sans stack. Easy to veto: remove the <link> in _layouts/home.html and the $hp-serif stack falls back to Georgia.
  • Anchors #main, #consulting, #libraries, #fixed, #writing preserved.

Motion

GSAP + ScrollTrigger (CDN, deferred):

  • Hero: line-mask headline entrance; the narrowing diagram's bars enter wide and narrow to their type; subtle canvas flow-field over a blueprint grid.
  • Scroll-triggered section reveals, scrubbed process rail, case-study stat parallax, harness-layer draw-ins, magnetic CTAs.
  • All motion is additive — content is fully visible with JS disabled — and skipped under prefers-reduced-motion. The canvas pauses off-screen and on hidden tabs.

Bug fix worth knowing about

The theme's .site-header is a full-width left float that's never cleared. Block content overlaps it harmlessly, but flex sections (independent formatting contexts) get squeezed to zero width beside it. .cp-home now clear: boths — this would have bitten any future flex layout on any page.

Review notes / judgment calls

  • Positioning capabilities: the brief's generic list (UX/UI design, product strategy) was mapped to what the studio actually does — strategy, type-driven architecture, full-stack delivery, agent-native AI workflows, cloud-native systems, team enablement. Re-word freely.
  • Case studies: Otravo / Bodireel / Philips, built from the existing "recent outcomes" line. Problem statements are deliberately conservative to avoid inventing facts; the Bodireel "Consumer product" industry label is a guess.
  • Verified in Chrome at 1440px and 390px, both themes, with and without reduced motion; console clean.

🤖 Generated with Claude Code

Restructures the home page into a full studio narrative — hero,
positioning, services, process, case studies, technical excellence,
research/open source, writing, final CTA — while keeping the founder
copy substance (narrowing intro, ideal-customer paragraph, kinds of
work, recent outcomes, Fixed, libraries, articles) and both hero CTAs.

Visual system extends the existing tokens: warm paper base (deep ink
in dark mode), Fraunces variable serif for display headlines (landing
page only), monospace chapter marks, fine indigo linework, and a dark
full-bleed engineering-depth section. Anchors #main, #consulting,
#libraries, #fixed, #writing are preserved.

Motion (GSAP + ScrollTrigger via CDN, defer): hero line-mask entrance
with bars that literally narrow, scroll-triggered section reveals,
scrubbed process rail, case-study parallax, layer-stack draw-in, and
magnetic CTAs. All motion is additive — content is fully visible with
JS disabled — and skipped entirely under prefers-reduced-motion. The
hero canvas flow-field pauses off-screen and on hidden tabs.

Fixes a latent layout trap: .site-header is a full-width left float
the theme never clears, which squeezes flex sections (BFCs) to zero
width; .cp-home now clears it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Jun 11, 2026 •

Copy link
Copy Markdown
Contributor
PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-06-12 07:35 UTC

kryptt and others added 2 commits June 11, 2026 17:56
Two iteration rounds with the founder replaced the type-jargon hero
with boardroom language while keeping the narrowing subtext:

- Headline: "Ship at AI speed. / Skip the gamble."
- Bars: the "move fast and break things" slogan arc, narrowing to
  bare "move fast" with failure-count captions (ten thousand -> a
  hundred -> three ways to fail).
- Lead: guardrails framing — "the speed compounds, while the
  breakage doesn't."

The accent span now highlights the constant "move fast" prefix so the
part that narrows away is what reads as expendable. Bar tweens get
clearProps so GSAP's inline widths don't override the responsive
media-query widths after a viewport change.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The meta description (via jekyll-seo-tag) now leads with what buyers
search for — software consultancy, AI-accelerated delivery, type-driven
guardrails, Scala/Rust/TypeScript — instead of the insider phrasing.
header_subtitle (no longer rendered, kept as canonical copy) mirrors
the new hero.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@kryptt
kryptt merged commit 2c68602 into master Jun 12, 2026
1 check passed
@kryptt
kryptt deleted the redesign/landing-craft-pass branch June 12, 2026 07:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant