Theme Crossfade Morph

How It Works

1. One skin = one complete layer. Each theme state is a fully pre-styled, full-bleed layer (position: absolute; inset: 0) containing everything that changes: background, shell/chrome, toolbar icons, footer logos, typography. All N_SKINS layers exist in the DOM from t=0, stacked; skin 0 starts visible, the rest at opacity: 0.
2. The morph is a crossfade. At each boundary, two opposing opacity tweens run at the same timeline position over MORPH_DUR (~0.3s): outgoing 1 → 0, incoming 0 → 1. Because both layers are complete, every property “blends” simultaneously for free — including the un-tweenable ones (font families, icon glyphs, logos), which read as morphing precisely because everything else is mid-blend around them.
3. The anchor renders once, on top. The element that must not move lives in its own layer above all skins and is excluded from every skin layer. No transforms, no re-parenting, no per-skin restyle.
4. Windows are precomputed. T_k = CYCLE_START + k × (SKIN_HOLD + MORPH_DUR). Steady cadence by default; hold the final skin longest when it’s the resolve.

The only animated property is opacity — which is why this rule is seek-safe with zero special machinery.

Recipe

Variations

• Anchor-typography reskin (per-layer copies) — when the anchor’s own type treatment must change with the theme (mono in the terminal skin, sans in the editor skin), each skin carries its own copy of the anchor at pixel-identical geometry and there is no separate top layer; the invariant shifts from “one element” to “one geometry.” Verify the copies overlay exactly (screenshot two skins at 50% opacity) — a 2px baseline drift reads as the anchor flinching, which breaks the whole claim.
• Skin-cycle tour with logo relay — a large brand logo outside the anchored shell crossfades in the same windows as the skins (logo k with skin k, same MORPH_DUR). The paired swap sells “same product, every brand.”
• Washout finale — after the last skin, a final low-key layer (faint dot-grid, blueprint wash) fades in while the last shell drops to ~0.25 opacity — the cycle resolves into a held diagram of itself. One extra window; the anchor may fade with the shell or hold full-strength.
• Emphasis brake — steady cadence for N−1 skins, then hold the final skin 2–3× SKIN_HOLD; the cycle demonstrates breadth, the brake lands the resolve. Precompute the hold array; don’t drift the cadence without cause.

Values

Critical Constraints

• The anchor never moves. No transforms, no opacity dips, no re-parenting, no restyle — the contrast between total churn and total stillness is the entire device; one flinch and the shot becomes a slideshow.
• Nothing tweens but opacity — no borderRadius / background tweens; radii and colors change by being different in the next layer. Visibility via opacity only, never display / visibility toggles (they can’t blend mid-fade).
• Pixel-align the shared geometry — mid-blend both skins are partially visible; aligned shells read as one UI changing clothes, misaligned shells ghost into two UIs.
• Pre-style everything — each skin is complete and static; no class toggling, no runtime restyle mid-tween.
• Outgoing and incoming tweens share one timeline position — a staggered blend flashes the stage background between skins.
• Adjacent windows only — skin k crossfades with k+1, never k+2; at no frame are three skins partially visible.
• Camera static — always. A push-in on top of a theme cycle destroys the stillness that makes the anchor read.
• Hard cuts are the cheaper sibling — if the states should snap, that’s discrete-text-sequence territory; the ~0.3s blend is specifically the “morph” read.

See also

context-sensitive-cursor (caret color switches at each T_k) · discrete-text-sequence (type the anchor first; or the hard-cut alternative) · card-morph-anchor (the single-container sibling) · spring-pop-entrance (the lockup that joins the anchor at the resolve) · sine-wave-loop (drifting field under the cycle — never on the anchor).