Merged
Conversation
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>
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>
- **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>
- **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>
- **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>
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>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Refresh the
:kinetic-showcasestarter template (label "KineticLaunch") so it demonstrates a wider slice of BareDOM's kinetic
surface in one cohesive launch-page layout. The previous version
covered four animated components; this one visits seven, in
service of the same fictional product-launch theme.
What's new
:placement :background):x-metaball-cursor— pointer-following blobs (rose / violet/ cyan palette).
x-soft-body— gravity-driven squishy backdrop blobs.x-gaussian-blur— kept, but toned down to opacity0.35(was
0.65) so the three layers share the canvas withoutfighting.
x-kinetic-typographypreset"wave",scroll-driven, exactly as before. The launch-date badge now
reads "Launching January 15, 2027".
x-kinetic-fontblock ("Three things we couldn't wait to share"),
trigger "both",mode "wave",per-charon. Pairs with the hero sothe page demonstrates both kinetic-text flavours
(preset/scroll-driven vs physics/cursor-driven) back-to-back.
x-grid—x-bento-gridwith four cells:
x-liquid-glass→x-card.x-ripple-effectaccent between reveal andvoices sections.
x-scroll-stackwrapping threetestimonial cards (rotates with scroll, peeks the next card).
x-organic-divider(blob-edge, drift) +
x-particle-button"Notify me onlaunch" (burst mode).
What I deliberately left out
x-morph-stack. Itsactive-state/active-indexcontractmakes it a live-data component, and a starter template should
demonstrate the visual surface before pulling the user into
bindings/events territory. Worth revisiting later if there's a
natural state-driven section (e.g. a "phase 1 / phase 2 / phase
3" timeline).
Files
src/bareforge/ui/templates.cljs— replaces thekinetic-showcase:buildthunk only. Template:labeland:descriptionand the registry entry are unchanged. No newcomponents added; no augment / plugin / codegen changes.
Test plan
clj-kondo --lint src test scripts— 0 errors / 0 warnings.cljfmt check src test scripts— all files formatted.npx shadow-cljs compile test— 486 tests / 1436assertions / 0 failures / 0 errors.
npx shadow-cljs release app— 0 build warnings.npx shadow-cljs watch app:Templates → "Kinetic Launch" → confirm metaball cursor follows
pointer, soft-body deforms, hero kinetic-typography animates
on scroll, kinetic-font header reacts to cursor and scroll,
bento grid renders with liquid-glass featured cell,
ripple-effect pulses, scroll-stack rotates testimonials, both
particle-button CTAs fire.
template render correctly in a browser (no plugin changes —
verifying
:placement :backgroundflows through codegen forthe new background components).
🤖 Generated with Claude Code