fix(gooey): eliminate box-shadow artifacts and synchronize satellite expansion

[dqev]

Summary of Changes

1. Eliminate Box-Shadow / Drop-Box Artifacts behind Gooey Components

• Problem: Outer drop shadows were previously split out and rendered via CSS filter: drop-shadow(...) on the root <svg> container element. Because the <svg> container occupies full element dimensions, browser rendering engines (Chromium & WebKit) cast a drop-shadow of the SVG filter's rectangular raster bounding box, producing an unsightly dark rectangular box-shadow halo behind the liquid element.
• Fix:
  • Updated Gooey.tsx so all shadow layers are routed directly into SVG filter primitives (<ShadowPass> and <InsetPass>) rendered on the liquid silhouette shape.
  • Removed cssShadowFilter from the root <svg> style.
  • Stripped outer drop shadow layers from LIQUID_SHADOW and SHADOWS definitions while preserving inner highlights/hairlines.

2. Synchronize Expandable PlusMenu Satellites

• Problem: In MorphDemo / PlusMenu, openStagger was set to 40ms, causing delay={i * phase.stagger} to delay satellite 1 by 40ms and satellite 2 by 80ms. On expansion, satellite 0 popped out immediately while satellites 1 and 2 lagged behind, appearing out of sync.
• Fix:
  • Set openStagger default from 40 to 0 in MORPH_DEFAULTS (studio/gooey.tsx) and DEFAULTS (PlusMenu.tsx). All satellite buttons now expand simultaneously in 100% perfect synchronization.

Verification

• Rebuilt @sites/home and liquid-gooey package cleanly.
• Tested interactive preview in development server.

[Copilot]

🟡 Changes recommended

There’s a functional/light-theme shadow regression in the Studio preset plus several now-inaccurate/outdated in-code explanations that need to be corrected to match the new rendering approach.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR updates the liquid-gooey rendering pipeline and demo presets to remove rectangular drop-shadow artifacts from the SVG container and to make PlusMenu satellite expansion fully synchronized.

Changes:

• Remove CSS filter: drop-shadow(...) usage on the Gooey SVG container and route shadow rendering through SVG filter primitives.
• Simplify/strip outer shadow layers from the studio + playground shadow presets.
• Set PlusMenu openStagger defaults to 0 so satellites expand simultaneously.

File summaries

File	Description
sites/home/src/studio/gooey.tsx	Updates studio shadow preset and morph defaults (stagger).
sites/gooey/playground/theme.ts	Adjusts playground shadow presets to remove outer shadows.
sites/gooey/playground/demos/PlusMenu.tsx	Changes PlusMenu default openStagger to 0.
packages/liquid-gooey/src/Gooey.tsx	Removes CSS drop-shadow pipeline and keeps shadows inside the SVG filter path.

Review details

Suppressed comments (1)

packages/liquid-gooey/src/Gooey.tsx:160

• The CSS filter style was removed from this , but willChange still includes filter. Keeping filter in willChange can force extra compositor resources/tiles without benefit, and the adjacent comment implies a CSS filter promotion that no longer exists on this element.

          // Promote the filtered layer: WebKit otherwise repaints the goo a
          // frame or two behind the plain-DOM content.
          willChange: 'filter, transform',

• Files reviewed: 4/4 changed files
• Comments generated: 4
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.