Skip to content

Shadow engine v2: contact/key/ambient model, tinted shadows, perf fixes - #2

Merged
simonweniger merged 14 commits into
mainfrom
shadow-engine-v2
Jul 12, 2026
Merged

Shadow engine v2: contact/key/ambient model, tinted shadows, perf fixes#2
simonweniger merged 14 commits into
mainfrom
shadow-engine-v2

Conversation

@simonweniger

Copy link
Copy Markdown
Contributor

Summary

Replaces the v1 5-divisor shadow engine with a unified, physically-motivated contact / key / ambient layer model across every target (SwiftUI, CSS, Figma, Framer), plus surface-tinted shadow colors and performance hardening. Public APIs are unchanged.

  • v2 layer engine — 5 layers (contact, key 1–3 with penumbra alpha falloff, ambient), same layer count as v1. Constants live in layers.ts, are mirrored verbatim in Constants.swift, and a shared JSON fixture is asserted by both the TS and Swift test suites so the ports can't drift.
  • Tinted shadowstintShadowColor (TS) / Color.happyShadowTint (Swift): keeps the surface hue, boosts saturation, drops lightness. Opt-in toggle + surface picker in the web app, Figma plugin, Framer plugin, and ShadowDesigner. Color is baked into generated code — zero runtime cost.
  • Performance.compositingGroup() before both SwiftUI shadow stacks (blurs run on one rasterized silhouette instead of re-rendering the hierarchy 5×); new generateAnimatedCSS() emits a pseudo-element opacity-crossfade (with isolation: isolate) so elevation transitions never re-blur per frame.
  • Docs/assets — README, spec, and marketing snapshots regenerated for the v2 look.

Design spec: docs/superpowers/specs/2026-07-10-shadow-engine-v2-design.md
Plan: docs/superpowers/plans/2026-07-10-shadow-engine-v2.md

Test plan

  • shadow-core: 12/12 (pnpm -C packages/shadow-core test) — fixture parity, all tint hue branches incl. both hue2rgb wraparounds, blur ordering, gradient expansion, animatable-CSS pattern (all 5 layers, base + elevated)
  • Swift: 5/5 XCTest (swift test) — fixture parity for layers and tint, snapshot regeneration
  • Production builds: web, figma-plugin, framer-plugin, ShadowDesigner
  • Human visual check: web preview vs ShadowDesigner side by side

🤖 Generated with Claude Code

simonweniger and others added 14 commits July 10, 2026 12:41
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…or v2

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… web tab fallback

- fixture now carries 4 tint cases (red/green/blue max, both hue2rgb
  wraparounds), asserted in a loop by both TS and Swift suites
- animatable-CSS parity test asserts all 5 layers of base and elevated
- node --test uses a recursive glob (plain directory arg breaks on Node 24)
- CodePreview derives activeTab so the highlight survives the animatable
  tab disappearing in gradient mode

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

vercel Bot commented Jul 10, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
happy-shadows Error Error Jul 10, 2026 2:44pm

@simonweniger
simonweniger merged commit 95c9c4d into main Jul 12, 2026
2 of 3 checks passed
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