Tall layout scene hosting several child renderings over one SHARED background image, with scroll-driven color stops: as each direct child section scrolls into view, the scene's tint cross-fades to that child's ColorStops token (comma-separated color-scheme@1 values, e.g. "neutral,accent,primary"), re-toning the whole scene — the premium-brand story-scene pattern (long-scroll brand narratives, product story chapters, immersive campaign pages, cocktail/recipe journeys). StickyBackground (default on) pins the photo to the viewport while sections pass over it; BackgroundScrim/BackgroundPosition follow the shared section-background vocabulary; TransitionMs tunes the cross-fade (reduced-motion visitors get snaps). Drop any renderings inside the permissive scroll-scene-content placeholder — each direct child is one scene section. When NOT to use: for a single section over one photo use section-wrapper's BackgroundImage; for plain multi-slot layout without scroll effects use column-splitter or row-splitter; for a rotating full-bleed slideshow use hero-carousel.

• src/components/registry/components/layout/scroll-scene.tsx→components/registry/components/layout/scroll-scene.tsx
• src/components/registry/components/layout/scroll-scene.client.tsx→components/registry/components/layout/scroll-scene.client.tsx
• src/components/registry/components/layout/scroll-scene.sitecore.ts→components/registry/components/layout/scroll-scene.sitecore.ts
• src/components/registry/components/layout/scroll-scene.recipe.ts→src/recipes/scroll-scene.recipe.ts