@deriv-com/dds-marketing 1.1.3 → 1.2.1

package/dist/components/blocks/logo-rows/LogoRows.js

@@ -4,8 +4,11 @@ import { useId } from 'react';
 import './LogoRows.css';
 import './logo-rows-impl.css';
 import '../block-reveal.css';
+import '../block-pattern.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
+import { Background } from '../../core/background/Background.js';
+import { PATTERN_TONE } from '../pattern-tone.js';
 import { logoRowsDefaults, logoRowsParts, } from './LogoRows.types.js';
 /**
  * How many times each row is drawn. A row moves by one set across the rail's pass, so the end of
@@ -27,7 +30,7 @@ const SETS = 4;
  * the first set is announced, so a screen reader hears each name once. The title carries the
  * section's accessible name through `aria-labelledby`.
  */
-export function LogoRows({ ground = logoRowsDefaults.ground, title, description, link, logos, }) {
+export function LogoRows({ ground = logoRowsDefaults.ground, background, title, description, link, logos, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     // Nothing to show is nothing drawn: a row with no logo on it is a claim with no evidence.
@@ -37,7 +40,7 @@ export function LogoRows({ ground = logoRowsDefaults.ground, title, description,
         logos.filter((_, at) => at % 2 === 0),
         logos.filter((_, at) => at % 2 === 1),
     ];
-    return (_jsx("section", { className: logoRowsParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: logoRowsParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: logoRowsParts.header, children: [_jsx("h2", { className: logoRowsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: logoRowsParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: logoRowsParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: logoRowsParts.rail, ...arriving(3), children: rows.map((row, at) => row.length === 0 ? null : (_jsx("ul", { className: logoRowsParts.track, "data-row": at === 0 ? 'leading' : 'trailing', children: Array.from({ length: SETS }, (_, set) => row.map((logo, index) => (
-                        // A logo's place is its identity: the list is the page's, and nothing reorders it.
-                        _jsx("li", { className: logoRowsParts.logo, "aria-hidden": set === 0 ? undefined : 'true', children: _jsx("img", { className: logoRowsParts['logo-image'], src: logo.src, alt: logo.name, draggable: false }) }, `${set}-${index}`)))) }, at))) })] }) }));
+    return (_jsxs("section", { className: logoRowsParts.root, "data-ground": ground, "data-background": background, "aria-labelledby": titleId, children: [background ? _jsx(Background, { tone: PATTERN_TONE[ground], pattern: background, children: null }) : null, _jsxs("div", { className: logoRowsParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: logoRowsParts.header, children: [_jsx("h2", { className: logoRowsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: logoRowsParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: logoRowsParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: logoRowsParts.rail, ...arriving(3), children: rows.map((row, at) => row.length === 0 ? null : (_jsx("ul", { className: logoRowsParts.track, "data-row": at === 0 ? 'leading' : 'trailing', children: Array.from({ length: SETS }, (_, set) => row.map((logo, index) => (
+                            // A logo's place is its identity: the list is the page's, and nothing reorders it.
+                            _jsx("li", { className: logoRowsParts.logo, "aria-hidden": set === 0 ? undefined : 'true', children: _jsx("img", { className: logoRowsParts['logo-image'], src: logo.src, alt: logo.name, draggable: false }) }, `${set}-${index}`)))) }, at))) })] })] }));
 }

package/dist/components/blocks/logo-rows/LogoRows.types.d.ts

@@ -4,9 +4,17 @@ export interface LogoRowsOwnProps {
     /**
      * `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
      * `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. Painted as the band's tint over the page's own ground, so it is the same grey whatever is behind the section
-     * `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the row is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
+     * `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong-on-brand-strong — slate.850 in light and slate.900 in dark, a step above the band in both, so the row is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
      */
     ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `halftone` — A field of coral dots that grow towards a soft glow at the band's foot and settle to a fine screen away from it.
+     * `aurora` — Curtains of the brand's light rising from the band's foot and swaying slowly.
+     * `mesh` — The band in the brand's reds folded into one another like a liquid — the loudest of the five, for a dark band.
+     * `grid` — Hairlines a pitch apart rising from a soft bloom at the band's foot — the quietest, and the one to reach for first.
+     * `rings` — Hairline circles spreading out from the middle of the band's foot.
+     */
+    background?: 'halftone' | 'aurora' | 'mesh' | 'grid' | 'rings';
     /** Always. The one claim the logos back, in the fewest words that say it — "Trusted by leading platforms worldwide". */
     title: string;
     /** The line under the heading: what the logos mean for the reader — which payment methods they can use, which platforms they can trade on. */

package/dist/components/blocks/pattern-tone.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The Background tone that matches each ground, so the pattern is drawn on the ground the band paints.
+ *
+ * Shared because four blocks draw the page's one patterned band as their first layer — FeatureCards,
+ * Stats, TestimonialRow and LogoRows — and all of them have to pick the tone the same way.
+ */
+export declare const PATTERN_TONE: {
+    readonly page: "light";
+    readonly subtle: "subtle";
+    readonly strong: "dark";
+};

package/dist/components/blocks/pattern-tone.js

@@ -0,0 +1,7 @@
+/**
+ * The Background tone that matches each ground, so the pattern is drawn on the ground the band paints.
+ *
+ * Shared because four blocks draw the page's one patterned band as their first layer — FeatureCards,
+ * Stats, TestimonialRow and LogoRows — and all of them have to pick the tone the same way.
+ */
+export const PATTERN_TONE = { page: 'light', subtle: 'subtle', strong: 'dark' };

package/dist/components/blocks/resource-banner/ResourceBanner.css

@@ -91,7 +91,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-resourcebanner[data-ground="strong"] .dds-resourcebanner__panel {
-  background-color: var(--color-bg-surface-card-strong);
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-resourcebanner[data-ground="subtle"] {

package/dist/components/blocks/scene-scroll/SceneScroll.css

@@ -68,7 +68,7 @@
   max-inline-size: var(--size-measure-description);
 }
 
-:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__link {
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__action {
   display: flex;
   position: relative;
   padding-block-end: var(--space-section-default);

package/dist/components/blocks/scene-scroll/SceneScroll.d.ts

@@ -24,13 +24,15 @@ export type { SceneScrollProps };
  * translate and keep in step. The second scene's title sits one level under it, as the second half
  * of the section the first one names.
  *
- * The words are white over a scrim, in both scenes and both modes, rather than the reference's text
- * colour running black to white with the scroll: a colour that changes with the photograph has to
- * be checked against every frame of the dissolve, and white over color.bg.overlay is legible over
- * any photograph at every frame, a pale one included.
+ * Each scene names its ink — near-black over a daylight photograph, white over a night one — and the
+ * scene carries it as `data-ink`, so the stylesheet sets it. White words lay a shade under
+ * themselves, eased out toward the photograph's subject; near-black words sit straight on the
+ * photograph, as the reference's do, there being no light shade. Each scene's words fade as a whole, so
+ * the two inks are never drawn over each other; what the reference ran as one colour interpolating
+ * with the scroll is here two sets of words, each in its own ink, one giving way to the other.
  *
  * `'use client'` for `useId`, which names the region by its heading. There is no arrival: every
  * other block comes up on `useReveal`, and that arrival is an opacity of its own on the parts that
  * make it — on these words it would fight the scrub. The change-over is this block's entrance.
  */
-export declare function SceneScroll({ first, second, link, headingLevel, }: SceneScrollProps): import("react").JSX.Element | null;
+export declare function SceneScroll({ first, second, action, headingLevel, }: SceneScrollProps): import("react").JSX.Element | null;

package/dist/components/blocks/scene-scroll/SceneScroll.js

@@ -29,26 +29,28 @@ const under = { h1: 'h2', h2: 'h3' };
  * translate and keep in step. The second scene's title sits one level under it, as the second half
  * of the section the first one names.
  *
- * The words are white over a scrim, in both scenes and both modes, rather than the reference's text
- * colour running black to white with the scroll: a colour that changes with the photograph has to
- * be checked against every frame of the dissolve, and white over color.bg.overlay is legible over
- * any photograph at every frame, a pale one included.
+ * Each scene names its ink — near-black over a daylight photograph, white over a night one — and the
+ * scene carries it as `data-ink`, so the stylesheet sets it. White words lay a shade under
+ * themselves, eased out toward the photograph's subject; near-black words sit straight on the
+ * photograph, as the reference's do, there being no light shade. Each scene's words fade as a whole, so
+ * the two inks are never drawn over each other; what the reference ran as one colour interpolating
+ * with the scroll is here two sets of words, each in its own ink, one giving way to the other.
  *
  * `'use client'` for `useId`, which names the region by its heading. There is no arrival: every
  * other block comes up on `useReveal`, and that arrival is an opacity of its own on the parts that
  * make it — on these words it would fight the scrub. The change-over is this block's entrance.
  */
-export function SceneScroll({ first, second, link, headingLevel = sceneScrollDefaults.headingLevel, }) {
+export function SceneScroll({ first, second, action, headingLevel = sceneScrollDefaults.headingLevel, }) {
     const titleId = useId();
     // Both scenes are required, but a record from a feed or an editor is not typed: one that never
     // arrived draws nothing rather than taking the page down, and a section with half its change-over
     // missing is not the section, so neither scene is drawn alone.
     if (!first || !second)
         return null;
-    return (_jsx("section", { className: sceneScrollParts.root, "data-heading-level": headingLevel, "aria-labelledby": titleId, children: _jsxs("div", { className: sceneScrollParts.stage, children: [_jsx(Scene, { which: "first", scene: first, level: headingLevel, titleId: titleId, eager: headingLevel === 'h1' }), _jsx(Scene, { which: "second", scene: second, level: under[headingLevel] }), link ? _jsx("div", { className: sceneScrollParts.link, children: link }) : null] }) }));
+    return (_jsx("section", { className: sceneScrollParts.root, "data-heading-level": headingLevel, "aria-labelledby": titleId, children: _jsxs("div", { className: sceneScrollParts.stage, children: [_jsx(Scene, { which: "first", scene: first, level: headingLevel, titleId: titleId, eager: headingLevel === 'h1' }), _jsx(Scene, { which: "second", scene: second, level: under[headingLevel] }), action ? _jsx("div", { className: sceneScrollParts.action, children: action }) : null] }) }));
 }
 function Scene({ which, scene, level, titleId, eager = false }) {
     const Title = level;
     const { image } = scene;
-    return (_jsxs("div", { className: sceneScrollParts.scene, "data-scene": which, children: [_jsx("div", { className: sceneScrollParts.media, children: image ? (_jsx("img", { className: sceneScrollParts.image, src: image.src, alt: image.alt ?? '', width: image.width, height: image.height, loading: eager ? 'eager' : 'lazy', decoding: "async" })) : null }), _jsxs("div", { className: sceneScrollParts.content, children: [_jsx(Title, { className: sceneScrollParts.title, id: titleId, children: scene.title }), given(scene.description) ? _jsx("p", { className: sceneScrollParts.description, children: scene.description }) : null] })] }));
+    return (_jsxs("div", { className: sceneScrollParts.scene, "data-scene": which, "data-ink": scene.ink ?? 'light', children: [_jsx("div", { className: sceneScrollParts.media, children: image ? (_jsx("img", { className: sceneScrollParts.image, src: image.src, alt: image.alt ?? '', width: image.width, height: image.height, loading: eager ? 'eager' : 'lazy', decoding: "async" })) : null }), _jsxs("div", { className: sceneScrollParts.content, children: [_jsx(Title, { className: sceneScrollParts.title, id: titleId, children: scene.title }), given(scene.description) ? _jsx("p", { className: sceneScrollParts.description, children: scene.description }) : null] })] }));
 }

package/dist/components/blocks/scene-scroll/SceneScroll.types.d.ts

@@ -6,12 +6,12 @@ export interface SceneScrollOwnProps {
      * `h1` — The section opens a campaign page and the first scene's title is the page's heading — the reference design's hero use. Drawn at font.h1, the opening band's size
      */
     headingLevel?: 'h2' | 'h1';
-    /** Always. The scene the section opens on: a title in a few words, a line under it where the title needs one, and the photograph filling the band behind them. Its title names the section, so it is the one to write as the section's heading. Give the photograph's width and height; `alt` empty unless it shows something the words do not. */
+    /** Always. The scene the section opens on: a title in a few words, a line under it where the title needs one, and the photograph filling the band behind them. Its title names the section, so it is the one to write as the section's heading. Give its `ink` — `dark` over a light photograph, `light` over a dark one — and the photograph's width and height; `alt` empty unless it shows something the words do not. */
     first: SceneScrollScene;
-    /** Always. The scene the section changes over to, in the same shape as the first. A title of about the same length as the first, so the words change in place rather than jumping, and a photograph of the same composition where there is one, so the dissolve reads as one place changing rather than a cut. */
+    /** Always. The scene the section changes over to, in the same shape as the first. A title of about the same length as the first, so the words change in place rather than jumping, and a photograph of the same composition where there is one, so the dissolve reads as one place changing rather than a cut. Its `ink` is its own, so a daylight first scene in dark words can change over to a night one in white. */
     second: SceneScrollScene;
-    /** A way on for the reader who wants more — "See trading hours", "Learn more". A standalone Link under the words, and it stays put through the change-over: it belongs to the section rather than to either scene, so it never fades while the reader is reaching for it. */
-    link?: ReactNode;
+    /** One thing for the reader to do or a way on — "Trade now", "See trading hours" — under the words. It belongs to the section rather than to either scene, so it holds still through the change-over and never fades while the reader is reaching for it. A primary Button, or a standalone Link at its brand tone: either reads over both photographs, where a Link taking the ink around it would take the band's white over a light photograph. */
+    action?: ReactNode;
 }
 export type SceneScrollProps = SceneScrollOwnProps;
 /** The class each part carries. Apply these — do not retype them. */
@@ -24,7 +24,7 @@ export declare const sceneScrollParts: {
     readonly content: "dds-scenescroll__content";
     readonly title: "dds-scenescroll__title";
     readonly description: "dds-scenescroll__description";
-    readonly link: "dds-scenescroll__link";
+    readonly action: "dds-scenescroll__action";
 };
 /** Generated so defaults cannot drift from the contract. */
 export declare const sceneScrollDefaults: {

package/dist/components/blocks/scene-scroll/SceneScroll.types.js

@@ -9,7 +9,7 @@ export const sceneScrollParts = {
     content: 'dds-scenescroll__content',
     title: 'dds-scenescroll__title',
     description: 'dds-scenescroll__description',
-    link: 'dds-scenescroll__link',
+    action: 'dds-scenescroll__action',
 };
 /** Generated so defaults cannot drift from the contract. */
 export const sceneScrollDefaults = { headingLevel: 'h2' };

package/dist/components/blocks/scene-scroll/scene-scroll-impl.css

@@ -50,23 +50,84 @@
 }
 
 /*
- * The scrim, the same over the whole scene.
+ * The words are drawn in the ink the scene names.
  *
- * color.bg.overlay is ImageBanner cover's scrim, held here across the whole photograph rather than
- * fading to clear: the words are centred over the scene from the fold and run its width on a phone,
- * so there is no clear side to leave. White over it keeps AA over any photograph, a pale one
- * included — a white photograph comes out a mid grey, which white words clear comfortably — so the
- * words never depend on the photograph being dark, and neither scene's words change colour.
+ * Whichever ink the photograph leaves room for — color.fg.on-media-light, near-black in both modes,
+ * over a light photograph such as a daylight sky, and the section's own color.fg.on-brand-strong,
+ * white, over a dark one. The photograph does not change with the theme, so neither ink does. The
+ * block cannot see the photograph, so the scene says which. White words have a shade behind them,
+ * below; near-black words sit straight on the photograph, and the author answers for that contrast.
  *
- * A pseudo-element of the photograph's frame, so it dissolves in with the second photograph rather
- * than being laid over the first a second time.
+ * On the scene, so its title and its line take it together, and inherited through the scene even
+ * where the scroll lays the scenes out as `display: contents`.
  */
-:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__media::after {
-  background-color: var(--color-bg-overlay);
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene[data-ink="dark"] {
+  color: var(--color-fg-on-media-light);
+}
+
+/*
+ * The shade under a white-ink scene's words, ImageBanner's cover shade on a full-screen scene.
+ *
+ * White words were left to the photograph, and a photograph bright anywhere behind them — a sky, a
+ * lit wall — took the line under the title below AA. So the words lay color.bg.overlay under
+ * themselves: full strength to the edge of their own column and then eased out past it, a
+ * smoothstep sampled as stops for the reason ImageBanner gives, so it never reads as a seam on the
+ * photograph. From 62rem it is a band the stage's height down the words' half, fading across
+ * three times space.section.default toward the subject; below 62rem the words run the width at the
+ * top, and it runs down from the top of the stage and out space.section.default under them.
+ *
+ * Drawn by the words rather than the photograph, so it fades with them through the change-over and
+ * is never over a scene whose words are not there. Only under white ink: there is no light shade
+ * for near-black words, which sit straight on a light photograph as they always did. It reaches
+ * past the stage's edges on purpose and is clipped there — by the stage while the scroll drives the
+ * change-over, and by its own scene in the plain fallback, with `clip` rather than `hidden` for the
+ * timeline's sake. A gradient takes a physical direction, so the direction is a custom property,
+ * mirrored under `:dir(rtl)`.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescroll {
+  --dds-scenescroll-shade-fade: var(--space-section-default);
+  --dds-scenescroll-shade-toward: to bottom;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene {
+  overflow: clip;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene[data-ink="light"] .dds-scenescroll__content::before {
+  background-image: linear-gradient(
+    var(--dds-scenescroll-shade-toward),
+    var(--color-bg-overlay),
+    var(--color-bg-overlay) calc(100% - var(--dds-scenescroll-shade-fade) * 1.0),
+    color-mix(in srgb, var(--color-bg-overlay) 95.7%, transparent) calc(100% - var(--dds-scenescroll-shade-fade) * 0.875),
+    color-mix(in srgb, var(--color-bg-overlay) 84.4%, transparent) calc(100% - var(--dds-scenescroll-shade-fade) * 0.75),
+    color-mix(in srgb, var(--color-bg-overlay) 68.4%, transparent) calc(100% - var(--dds-scenescroll-shade-fade) * 0.625),
+    color-mix(in srgb, var(--color-bg-overlay) 50.0%, transparent) calc(100% - var(--dds-scenescroll-shade-fade) * 0.5),
+    color-mix(in srgb, var(--color-bg-overlay) 31.6%, transparent) calc(100% - var(--dds-scenescroll-shade-fade) * 0.375),
+    color-mix(in srgb, var(--color-bg-overlay) 15.6%, transparent) calc(100% - var(--dds-scenescroll-shade-fade) * 0.25),
+    color-mix(in srgb, var(--color-bg-overlay) 4.3%, transparent) calc(100% - var(--dds-scenescroll-shade-fade) * 0.125),
+    transparent
+  );
   content: '';
-  inset: 0;
+  inset: calc(-1 * 100cqh) calc(-1 * 100cqw) calc(-1 * var(--dds-scenescroll-shade-fade));
   pointer-events: none;
   position: absolute;
+  z-index: -1;
+}
+
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-scenescroll {
+    --dds-scenescroll-shade-fade: calc(var(--space-section-default) * 3);
+    --dds-scenescroll-shade-toward: to right;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-scenescroll:dir(rtl) {
+    --dds-scenescroll-shade-toward: to left;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene[data-ink="light"] .dds-scenescroll__content::before {
+    inset-block: calc(-1 * 100cqh);
+    inset-inline: calc(-1 * 100cqw) calc(-1 * var(--dds-scenescroll-shade-fade));
+  }
 }
 
 /*
@@ -81,10 +142,11 @@
  *
  * Below 62rem — the reference's 992px, the same bound FeatureCards takes from it — the words are at
  * the top of the stage and start at the edge, under the room a navigation bar takes: size.bar-height
- * and the section's own step over it, about the reference's 112. From 62rem they are centred in
- * the stage, across and down — a centred title wraps to ragged lines whose edge the eye loses on a
- * narrow screen, which is the section-title rule's reason too. The group and its line are capped
- * narrower than the column, so `margin-inline: auto` centres those boxes as well as their words.
+ * and the section's own step over it, about the reference's 112. From 62rem they are centred down
+ * the stage and still start at the edge, in a column capped at the heading group's measure: the
+ * reference design's later arrangement, which leaves the far side of the photograph to its subject
+ * rather than writing over the middle of it. On either side of the bound the words start, so the
+ * eye finds the same edge on every line and a photograph composed for one width holds at the other.
  *
  * Longhand because `var()` is not permitted in a container query condition; `61.9375rem` is the last
  * width below that bound. The section declares the container, and these are rules on what is inside
@@ -97,16 +159,26 @@
   }
 }
 
-@container (min-width: 62rem) {
-  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__content {
-    align-items: center;
-    margin-inline: auto;
-    text-align: center;
-  }
 
-  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__description {
-    margin-inline: auto;
-  }
+/*
+ * The words keep to the page's content column.
+ *
+ * They start, from 62rem as below it, so on a wide window they would otherwise sit at the page's
+ * gutter while every section around them starts at the edge of size.content.max. The photograph
+ * still fills the band edge to edge; only the words and the action are inset, by the page's gutter or
+ * by however much the window is wider than the content column on each side, whichever is more —
+ * where the column starts in ImageBanner, FeatureCards and the rest.
+ *
+ * Named once on the section, because three boxes take it: each scene and the action in the plain
+ * fallback, and the stage, which carries the insets while the scroll drives the change-over.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescroll {
+  --dds-scenescroll-column-inset: max(var(--space-inset-page), calc((100% - var(--size-content-max)) / 2));
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene,
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__action {
+  padding-inline: var(--dds-scenescroll-column-inset);
 }
 
 /*
@@ -117,6 +189,22 @@
   object-position: bottom;
 }
 
+/*
+ * From 62rem the subject is on the far side from the words, so a crop takes from the words' side
+ * rather than the middle: on a window narrower than the photograph's shape, a centred crop cut into
+ * the subject at the edge and pushed it toward the words. Physical, since `object-position` has no
+ * logical form, and mirrored under `:dir(rtl)`, where the words are on the right.
+ */
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__image {
+    object-position: right bottom;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-scenescroll:dir(rtl) .dds-scenescroll__image {
+    object-position: left bottom;
+  }
+}
+
 /*
  * The change-over, scrubbed by the scroll.
  *
@@ -129,7 +217,7 @@
  * The section names a view timeline, and three things run down it over `contain` — the stretch in
  * which the track covers the whole window, which is exactly the stretch the stage is pinned for:
  *
- *   the second photograph, and its scrim with it, dissolves in from 20% to 80%;
+ *   the second photograph dissolves in from 20% to 80%;
  *   the first scene's words fade out from 20% to 45%;
  *   the second scene's words fade in from 55% to 80%.
  *
@@ -200,39 +288,33 @@
 }
 
 /*
- * The link sits right under the words, whichever scene's words are showing.
+ * The action sits right under the words, whichever scene's words are showing.
  *
  * It belongs to the section rather than to a scene, so it does not fade with either. While the
  * scenes change over, both scenes' words are laid into one grid area of the stage — the scenes
  * themselves step out of the way (`display: contents`), so their photographs and their words become
- * the stage's own items — and that area is as tall as the taller of the two. The link is the row
+ * the stage's own items — and that area is as tall as the taller of the two. The action is the row
  * under it, at space.heading.description-actions, the step from words to what a reader can do: under
  * the text on every screen, and still while the text changes over it.
  *
- * Below 62rem the words and the link sit at the top of the stage, under the room a navigation bar
+ * Below 62rem the words and the action sit at the top of the stage, under the room a navigation bar
  * takes; from 62rem they are centred down the stage, the empty rows above and below sharing what is
- * left. The stage carries the section's insets here, since the scenes that held them are contents.
+ * left, and start at the edge with the words on both sides of the bound. The stage carries the section's insets here, since the scenes that held them are contents.
  *
- * In the plain fallback, where the scenes stack, the link is the stage's last row, under the second
+ * In the plain fallback, where the scenes stack, the action is the stage's last row, under the second
  * scene, on the band's own ground, with its own insets.
  */
-@container (min-width: 62rem) {
-  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__link {
-    justify-content: center;
-  }
-}
-
 @supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
     :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__stage {
       grid-template-areas:
         'words'
-        'link'
+        'action'
         '.';
       grid-template-columns: minmax(0, 1fr);
       grid-template-rows: auto auto 1fr;
       padding-block: calc(var(--size-bar-height) + var(--space-section-default)) var(--space-section-default);
-      padding-inline: var(--space-inset-page);
+      padding-inline: var(--dds-scenescroll-column-inset);
     }
 
     :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene {
@@ -249,8 +331,8 @@
       z-index: 1;
     }
 
-    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__link {
-      grid-area: link;
+    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__action {
+      grid-area: action;
       margin-block-start: var(--space-heading-description-actions);
       padding: 0;
       z-index: 1;
@@ -265,7 +347,7 @@
         grid-template-areas:
           '.'
           'words'
-          'link'
+          'action'
           '.';
         grid-template-rows: 1fr auto auto 1fr;
         padding-block: var(--space-section-default);
@@ -273,3 +355,19 @@
     }
   }
 }
+
+/*
+ * From 62rem the words keep to half the stage.
+ *
+ * The words start at the edge and the photograph's subject is on the far side, but the heading
+ * group's measure alone is most of a laptop's width: a title in a few words ran three quarters of
+ * the way across and over the face it was meant to sit beside. Held to half the stage, or the
+ * heading group's measure where that is narrower, the title wraps in the words' own half and the
+ * other half is the subject's — the reference design's left column. Below 62rem the words run the
+ * width, at the top of a photograph whose subject is below them.
+ */
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__content {
+    max-inline-size: min(var(--size-heading-group-max), 50%);
+  }
+}

package/dist/components/blocks/scene-scroll-word/SceneScrollWord.css

@@ -0,0 +1,105 @@
+/* GENERATED from scenescrollword.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: block;
+  inline-size: 100%;
+  overflow-wrap: anywhere;
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__stage {
+  box-sizing: border-box;
+  display: grid;
+  inline-size: 100%;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  isolation: isolate;
+  justify-content: center;
+  min-inline-size: 0;
+  position: relative;
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__media {
+  overflow: clip;
+  position: absolute;
+  border-radius: var(--radius-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__image {
+  display: block;
+  object-fit: cover;
+  border-radius: var(--radius-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__content {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  position: relative;
+  max-inline-size: var(--size-heading-group-max);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__title {
+  margin-block: 0;
+  text-wrap: balance;
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__before {
+  display: inline;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__word {
+  display: inline-grid;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__after {
+  display: inline;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__description {
+  margin-block: 0;
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  letter-spacing: var(--font-body-lg-letter-spacing);
+  line-height: var(--font-body-lg-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__action {
+  display: flex;
+  position: relative;
+  padding-block-end: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword[data-heading-level="h1"] .dds-scenescrollword__title {
+  font-family: var(--font-h1-family);
+  font-size: var(--font-h1-size);
+  font-weight: var(--font-h1-weight);
+  letter-spacing: var(--font-h1-letter-spacing);
+  line-height: var(--font-h1-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword[data-heading-level="h2"] .dds-scenescrollword__title {
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+}
+

package/dist/components/blocks/scene-scroll-word/SceneScrollWord.d.ts

@@ -0,0 +1,31 @@
+import './SceneScrollWord.css';
+import './scene-scroll-word-impl.css';
+import { type SceneScrollWordProps } from './SceneScrollWord.types.js';
+export type { SceneScrollWordProps };
+/**
+ * SceneScroll's change-over told as one claim with one word changed — "Trade all day", then
+ * "Trade all night": the reference design's inline day-and-night headline, made generic.
+ *
+ * The same track, pin and view timeline as SceneScroll, and nothing here runs a script. Each scene
+ * draws its whole heading — the shared words and its own word — so the outline, a screen reader and
+ * the stacked fallback all read "Trade all day" then "Trade all night". The stylesheet lays the
+ * second heading exactly over the first, keeps the second's shared words undrawn, and changes the
+ * words over alone.
+ *
+ * The changing word falls where the language puts it, so the shared words come as what is before it
+ * and what is after it, either or both, and nothing here adds a space: Japanese has none to add, and
+ * a language that has them writes them into the strings.
+ *
+ * Each word sits in a slot holding the other scene's word too, undrawn: the slot is as wide as the
+ * wider of the two, so both titles wrap alike and the second's word lands exactly where the first's
+ * was. That duplicate is the one thing kept from assistive technology, since the heading it belongs
+ * to is read in full.
+ *
+ * The words sit straight on the photographs in the ink each scene names, as SceneScroll's do. Where
+ * the two inks differ the shared words cross over with the word, so the claim changes colour as one
+ * piece; the section says so as `data-ink-change`.
+ *
+ * `'use client'` for `useId`, which names the region by its heading. There is no arrival, for
+ * SceneScroll's reason: the change-over is this block's entrance.
+ */
+export declare function SceneScrollWord({ titleBefore, titleAfter, first, second, action, headingLevel, }: SceneScrollWordProps): import("react").JSX.Element | null;