Redesign Kinetic Launch template (#9)

* Redesign Kinetic Launch template

Lean harder into BareDOM's kinetic surface. The template now
visits seven kinetic components in one cohesive launch-page
narrative, instead of the four it shipped with at v0.1.0.

- Background layers: x-metaball-cursor, x-soft-body, plus a
  toned-down x-gaussian-blur (opacity 0.35 from 0.65) so the
  three layers share the canvas without fighting.
- Hero: x-kinetic-typography preset wave (kept from v0.1.0).
- Reveal section: a new large x-kinetic-font header above an
  x-bento-grid (replaces the old x-grid). The hero's scroll-
  driven preset text and the reveal's cursor-driven physics
  text put both kinetic-text flavours on the same page.
- Bento grid: featured 2x2 cell wraps x-liquid-glass; two 1x1
  side cells; one wide 3-col closing strip for visual rhythm.
- Mid-page x-ripple-effect accent.
- Voices section: x-scroll-stack with three rotating cards.
- Same closing organic-divider + x-particle-button CTA as
  before.

x-morph-stack deliberately omitted — its active-state contract
makes it a live-data component and a starter template should
demonstrate the visual surface before pulling the user into
state plumbing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* Fix Kinetic Launch render bugs + ask-before-PR rule

Four rendering issues fixed in the Kinetic Launch template:

- **Liquid-glass hidden by elevated x-card.** The featured
  bento cell wrapped its headline in `x-card variant
  "elevated"`, whose solid background painted over the glass
  effect. The card is dropped — `x-liquid-glass` already pads
  its slotted content via `[part=content]`. The h3 + body now
  sit directly inside the glass with extra body2 copy so the
  cell fills its 2x2 area without dead space.
- **Bento grid laid out as 4 columns instead of 3.**
  `x-bento-grid` parses `columns` as a single integer (1–12)
  and composes `repeat(N,minmax(0,1fr))` itself; passing
  `"repeat(3, 1fr)"` failed `parseInt` and silently fell back
  to the 4-column default. Also dropped the `row-height
  "minmax(180px, auto)"` override, which forced row-span 2
  cells to a 360px minimum and produced "a lot of empty
  height" behind the featured cell. Falls back to the
  component's `row-height "auto"` default — rows size to
  content.
- **Standalone `x-ripple-effect` was invisible.** The
  component is a wrapper around clickable content (clicks on
  slotted children produce ripples) — not a standalone "ambient
  heartbeat" surface. Removed from the template entirely; the
  page already showcases six kinetic components without it.
  Worth revisiting later as a wrapper around an actual CTA or
  card.
- **`x-scroll-stack` rendered statically.** Stacking is
  driven by a `position:sticky;height:100dvh` inner container,
  so the host needs height greater than the viewport to give
  scroll-distance for the stacking animation. Added
  `extra-style "height: 250vh;"` — one and a half viewports of
  scroll room for three cards.

Also: codify in CLAUDE.md that AI assistants ALWAYS ask for
explicit permission before opening a pull request, even when
the four PR-readiness gates are green. Pushing the feature
branch and reporting gate results is fine; running `gh pr
create` without the maintainer's go-ahead is not.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* Kinetic Launch: x-soft-body cards, x-ripple wrap, scroll-stack attrs

- **x-card → x-soft-body** across the bento cells (Live
  collaboration, Open API, Roadmap) and the three voices
  testimonials. x-soft-body fills the same surface role as
  x-card (filled background, border, shadow, dark-mode aware,
  padded slot via [part=content]) but morphs its outline on
  hover/touch via SVG path deformation. Same mid-range
  stiffness/damping/intensity across all six instances so the
  reveal section reads as physically deformable end-to-end.
- **x-ripple-effect re-added** as a wrapper around the closing
  "Notify me on launch" CTA. It's a click-handler component:
  clicks on slotted children kick off a goo-style ripple
  through the shadow DOM. Stacks naturally with the
  particle-button's own burst — two complementary effects on
  the same click.
- **x-scroll-stack attribute corrections.** The earlier draft
  had `peek "0.12"` (peek is in PIXELS, default 6 — 0.12 is
  effectively zero) and `scroll-distance "100"` (small for the
  default 150). Bumped to `peek "20"` and `scroll-distance
  "300"` so each card has visible peek and meaningful
  per-card scroll-room. Dropped the host's manual height
  override — the component sets its own height in
  connectedCallback (vh + n*scroll-distance). Added an inline
  comment about the editor-canvas vs. window scrollport
  caveat: x-scroll-stack listens to window.scroll, so its
  animation only plays where the page itself is the scrollport
  — i.e. every exported artefact, but not necessarily the
  in-editor preview when the canvas-host has overflow:auto.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* Drop x-scroll-stack for x-grid; turn up x-soft-body intensity

- **x-scroll-stack → x-grid for testimonials.** Every
  scroll-driven BareDOM component (x-scroll-stack / -parallax
  / -story / -timeline) listens to window scroll events. In
  Bareforge's editor canvas-host (which has its own
  overflow:auto scrollport) those events never fire, so the
  scroll-driven section read as static while editing. A plain
  three-column grid keeps the testimonials kinetic via the
  soft-body cards' own pointer-driven physics, without
  depending on a scroll source the editor doesn't expose.
- **x-soft-body parameters tuned for a visible effect.** The
  earlier `stiffness "0.5" damping "0.7" intensity "0.5"` were
  below or at the lower clamps of x-soft-body's parse ranges
  (stiffness 10–1000, damping 1–100, intensity 0–5) — the
  effect rendered but with such mild deformation it was easy
  to miss. Now: `stiffness "60" damping "5" intensity "4"
  grab-radius "250" radius "40"`. Lower stiffness + lower
  damping = more squish and visible bounce; higher intensity +
  wider grab-radius = a much larger pointer-driven distortion;
  larger corner radius reads as more "blob" than "card". Same
  values across all six instances (3 bento cells + 3
  testimonials) so the reveal section feels physically
  cohesive.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* Kinetic Launch: drop background x-soft-body; double hero font

- **x-metaball-cursor was hidden by an opaque sibling.**
  x-soft-body isn't a backdrop component — it's a card whose
  SVG path paints a solid rounded-rect filled with
  --x-soft-body-bg (--x-color-surface, white). Sitting beside
  x-metaball-cursor under :placement :background, with its
  host stretched to inset:0, it covered the entire backdrop
  with a white shape that hid the metaball blobs underneath.
  Dropped the background-layer x-soft-body; ambient backdrop
  is now metaball-cursor + gaussian-blur, the original v0.1.0
  pairing. x-soft-body still appears extensively on the bento
  cells and testimonial cards, where it's correctly used as a
  surface container.
- **x-kinetic-typography hero doubled in size.** The component
  reads its size from the `font-size` attribute (default
  24px). Set to `3rem` (~48px) so the hero reads as a hero,
  not a subhead.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* Pin x-metaball-cursor above all content via position:fixed

The cursor blobs were intermittently disappearing behind content
because :placement :background stamps z-index:0 on the host (via
the canvas-host stylesheet rule), and content gets z-index:1 — so
flow elements paint over the metaball-cursor whenever a card,
button, or grid landed in the cursor's path. The metaball-cursor's
own :host { z-index:9999 } rule loses to the outer attribute
selector's specificity, so the inner declaration is moot.

Switched the layout to plain extra-style with `position: fixed;
inset: 0; width/height: 100%; z-index: 9999; pointer-events:
none;`. Three things this fixes:

- **Always on top**: z-index 9999 is far above any content
  stacking context the page can produce.
- **Viewport-relative**: position:fixed is what a cursor-
  following effect actually wants. The blobs follow the pointer
  across the whole viewport regardless of where the page has
  scrolled.
- **Clicks pass through**: pointer-events:none means content
  underneath stays clickable; the metaball-cursor doesn't
  swallow clicks even though it sits above everything.

Trade-off: dropping :placement :background means the cursor
isn't tagged as a background layer, so it can't be selected by
clicking the canvas. Designers can still select it from the
layers panel — and a cursor-following overlay shouldn't
intercept canvas clicks anyway.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* Tune kinetic-typography hero font-size: 3rem → 2rem

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: avanelsas

CLAUDE.md

@@ -45,6 +45,15 @@ maintainer's review time. The CI workflow at
 `.github/workflows/ci.yml` enforces the same four gates;
 matching them locally first is the contract.
 
+**AI assistants: ALWAYS ask for explicit permission before
+opening a pull request.** Even when the four gates above are
+green and the work looks ready, do not run `gh pr create`
+without the maintainer's go-ahead. PR creation is a public,
+shared-state action (notifies reviewers, kicks CI, lands in the
+PR list); the maintainer wants the final call on timing, title,
+and body. Push the feature branch if needed, summarise the
+gate results, and wait for a "yes" before opening the PR.
+
 ## Onboarding a new BareDOM component
 
 Two-step recipe: