@deriv-com/dds-marketing 1.1.0 → 1.1.2

package/.llm/components/featurescroll.md

@@ -64,7 +64,7 @@ FeatureScroll renders 11 elements. A token binding names the part it applies to.
   
   Every stop has one and at full width they are stacked in the same column of the grid, pinned at the same line under the bar. One is shown and the rest are held at nothing, so a reader who scrolls past a stop's title sees the square change rather than travel — which is the section's whole effect and the reason the stops give up their boxes for it.
   
-  One picture gives way to the next by fading in over it, rather than by the pair fading past each other. The arriving one is brought to the front and takes the full duration to become opaque, and the one beneath holds exactly as it was until it is covered — so at no moment is the square anything less than a complete picture. Fading both at once would leave them near half way together, the section's ground showing through the pair, and the square would brighten and dim: a pulse made of nothing but two opacities crossing.
+  One picture gives way to the next by being uncovered over it from an edge — up from the foot as a reader scrolls on, down from the head as they scroll back — rather than by fading in. The arriving one is brought to the front and uncovered over the bound duration and curve, and the one beneath holds whole until it is covered, then goes. A fade put both pictures on screen at half strength at once, a double exposure that read as the two overlapping; a wipe never mixes them, so every point of the square is one complete picture or the other.
   
   Front is the shown one rather than the later one in the markup, because a reader scrolls back as well as forward — going up, the arriving picture is earlier in the document and would fade in underneath what it is replacing.
   

package/.llm/components/imagebanner.md

@@ -98,9 +98,9 @@ Accepts: *
 Use when: Always. The page's photograph, through AspectRatio or as an image — people or product. Split and cover crop it to fill the space they give it. Alt text is the page's to give, empty where the photograph is decoration.
 Never for: Artwork with words in it. The cover photograph sits under a scrim and the text, and the split crops to fill
 
-### parallax — `boolean` (default `false`)
+### parallax — `boolean` (default `true`)
 
-Use when: The photograph drifts against the scroll as the card passes through the view, by motion.distance.drift over the whole pass, so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. For a careers or about page, where the photograph of the people is the point. Off by default: a card selling one action does not need its picture moving under the button.
+Use when: The photograph drifts against the scroll as the card passes through the view, by motion.distance.drift over the whole pass, so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. On by default, as every block's picture drifts: pass false for a card whose photograph must hold still under its button.
 Never for: Holding still for a reader who asked for less motion — it already holds still for them, and in a browser that cannot drive it from the scroll.
 
 ## Accessibility

package/.llm/components/steps.md

@@ -33,7 +33,7 @@ Steps renders 15 elements. A token binding names the part it applies to.
   It paints one of the page's three grounds and the ink that goes with it, in one decision — see `ground`. The ink is set here and inherited by everything inside.
 - `inner` — `<div>`, class `dds-steps__inner`. The measure and the gutter, holding the section's content in the same column as every other section on the page.
 - `split` — `<div>`, class `dds-steps__split`. The two halves. A row at full width with the picture on whichever side `mediaPosition` names, and one column below the fold with the picture first — the order the reference design takes and the one a sequence reads in.
-- `media` — `<div>`, class `dds-steps__media`. The picture, and one of the section's two halves rather than an addition to it. Held to a square and cropped to fill it, so the section is the same shape whatever the page passes. With pictures on the steps it holds all of them in one cell, and the current step's is the one shown: the first while the list is still, each in turn under `autoplay`, crossing over in motion.duration.shift.
+- `media` — `<div>`, class `dds-steps__media`. The picture, and one of the section's two halves rather than an addition to it. Held to a square and cropped to fill it, so the section is the same shape whatever the page passes. With pictures on the steps it holds all of them in one cell, and the current step's is the one shown: the first while the list is still, each in turn under `autoplay`, uncovered over one another in motion.duration.turn.
 - `image` — `<img>`, class `dds-steps__image`. One step's picture, from its `image`, stacked in the media cell with the others and shown while its step is current. Decoration, as the media cell is: what the step says is its title and its line.
 - `content` — `<div>`, class `dds-steps__content`. The title and the steps under it.
   
@@ -56,7 +56,7 @@ Steps renders 15 elements. A token binding names the part it applies to.
 - `step-title` — `<h3>`, class `dds-steps__step-title`. What the reader does at this step. `h3` under the section's `h2`, so a reader moving by heading walks the steps one at a time.
 - `trigger` — `<button>`, class `dds-steps__trigger`. Under `autoplay`, the step's title as a button: pressing it makes the step current and stops the turn for good. Inside the heading, so a reader moving by heading still walks the steps; `aria-current="step"` on the current one says which step is shown. Rendered only when `autoplay` is set.
 - `step-description` — `<p>`, class `dds-steps__step-description`. What the step involves, in a sentence.
-- `progress` — `<span>`, class `dds-steps__progress`. Under `autoplay`, the current step's rule filling from the start edge over motion.duration.dwell — how long until the next step — in the brand's coral. Held where the turn holds, full and still once it stops or for a reader who asked for less motion. Hidden from assistive technology: the current step is said by `aria-current`.
+- `progress` — `<span>`, class `dds-steps__progress`. Under `autoplay`, the current step's rule filling from the start edge over motion.duration.step — how long until the next step — in the brand's coral. Held where the turn holds, full and still once it stops or for a reader who asked for less motion. Hidden from assistive technology: the current step is said by `aria-current`.
 
 Apply these classes from the generated `stepsParts` constant rather than writing the strings by hand.
 
@@ -90,8 +90,8 @@ Never for: Moving the picture on a phone. There is one column there and the pict
 
 ### autoplay — `boolean` (default `false`)
 
-Use when: Whether the steps take their turn on their own: one step is current, its rule fills over motion.duration.dwell, then the next takes over, and back to the first after the last. The current step's number is drawn at full strength and the rest recede; with an `image` on each step the picture changes to the current one's. Each step's title becomes a button that makes it current. Off by default, so a list nobody configured stays still. On, it holds while the pointer is over the section or focus is inside it, waits until the section is on screen, never moves for a reader who asked for less motion, and stops for good once the reader presses a step — the WAI carousel rule CtaBannerSlider follows: a reader who has chosen a step is reading it. That gives a reader a way to stop it, which WCAG 2.2.2 asks for, but not a visible one, so a page that needs 2.2.2 met plainly should leave it off.
-Never for: Steps whose descriptions take longer to read than motion.duration.dwell — leave it off rather than cut the copy to the timer. And a list with no picture per step, where the only thing that moves is a rule: the turn is worth it when the picture changes with it.
+Use when: Whether the steps take their turn on their own: one step is current, its rule fills over motion.duration.step, then the next takes over, and back to the first after the last. The current step's number is drawn at full strength and the rest recede; with an `image` on each step the picture changes to the current one's. Each step's title becomes a button that makes it current. Off by default, so a list nobody configured stays still. On, it holds while focus is inside the section — not under the pointer, so it keeps turning while a reader watches it — waits until the section is on screen, never moves for a reader who asked for less motion, and stops for good once the reader presses a step — the WAI carousel rule CtaBannerSlider follows: a reader who has chosen a step is reading it. That gives a reader a way to stop it, which WCAG 2.2.2 asks for, but not a visible one, so a page that needs 2.2.2 met plainly should leave it off.
+Never for: Steps whose descriptions take longer to read than motion.duration.step — leave it off rather than cut the copy to the timer. And a list with no picture per step, where the only thing that moves is a rule: the turn is worth it when the picture changes with it.
 
 ### title — `string` **Required.**
 
@@ -122,7 +122,7 @@ Guaranteed by the component. Write none of it by hand: the ids these attributes
 - The number drawn beside each step is decoration and is hidden from assistive technology. The ordered list already announces each step's place, and reading the drawn number as well says it twice
 - Each step's title is a heading one level under the section's, so a reader moving by heading walks the steps one at a time
 - The picture is decoration and is hidden from assistive technology — the one picture and every step's alike. What the section says is the title and the steps; a picture carrying something they do not is a section that reads as half empty to anyone who cannot see it
-- Under autoplay, a hold while the pointer is over the section or focus is inside it, no turn until the section is on screen, no movement for a reader who asked for less motion, and a stop for good once a step is pressed — the way to stop a list that would otherwise turn for as long as it is shown, which WCAG 2.2.2 asks for. The current step's title carries aria-current="step", so the step a reader is shown is the step a screen reader names
+- Under autoplay, a hold while focus is inside the section, no turn until the section is on screen, no movement for a reader who asked for less motion, and a stop for good once a step is pressed — the way to stop a list that would otherwise turn for as long as it is shown, which WCAG 2.2.2 asks for. The current step's title carries aria-current="step", so the step a reader is shown is the step a screen reader names
 
 ## Rules
 
@@ -270,7 +270,7 @@ import { AspectRatio, Steps } from '@deriv-com/dds-marketing'
 
 ### Taking turns
 
-With `autoplay` each step takes its turn: its rule fills, its picture shows, then the next. Hover or focus holds it; pressing a step chooses it and stops the turn.
+With `autoplay` each step takes its turn: its rule fills, its picture shows, then the next. Focus holds it, hovering does not; pressing a step stops it.
 
 ```tsx
 import { Steps } from '@deriv-com/dds-marketing'
@@ -280,6 +280,14 @@ import { Steps } from '@deriv-com/dds-marketing'
 
 // autoplay on the dark band
 <Steps title="Get started in three steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details.","image":{"src":"/sample-stop-brand.svg","alt":"","width":800,"height":600}},{"title":"Fund it","description":"Deposit with the local payment method you already use.","image":{"src":"/sample-stop-teal.svg","alt":"","width":800,"height":600}},{"title":"Start trading","description":"Pick a market and place your first trade.","image":{"src":"/sample-stop-amber.svg","alt":"","width":800,"height":600}}]} autoplay ground="strong" mediaPosition="end" />
+```
+
+### A picture on each step
+
+Pictures on the steps without autoplay: the list stays still, the first step's picture is shown, and each title is a button that shows its own.
+
+```tsx
+import { Steps } from '@deriv-com/dds-marketing'
 
 // still, a picture on each step — the first is shown
 <Steps title="Get started in three steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details.","image":{"src":"/sample-stop-brand.svg","alt":"","width":800,"height":600}},{"title":"Fund it","description":"Deposit with the local payment method you already use.","image":{"src":"/sample-stop-teal.svg","alt":"","width":800,"height":600}},{"title":"Start trading","description":"Pick a market and place your first trade.","image":{"src":"/sample-stop-amber.svg","alt":"","width":800,"height":600}}]} />

package/.llm/digest/imagebanner.md

@@ -51,7 +51,7 @@ A dark card in the middle of a page, pairing a headline and a line under it with
   - never: A second action. The card asks for one thing
 - **media** `node` · required — Always. The page's photograph, through AspectRatio or as an image — people or product. Split and cover crop it to fill the space they give it. Alt text is the page's to give, empty where the photograph is decoration
   - never: Artwork with words in it. The cover photograph sits under a scrim and the text, and the split crops to fill
-- **parallax** `boolean` · default false — The photograph drifts against the scroll as the card passes through the view, by motion.distance.drift over the whole pass, so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. …
+- **parallax** `boolean` · default true — The photograph drifts against the scroll as the card passes through the view, by motion.distance.drift over the whole pass, so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. …
   - never: Holding still for a reader who asked for less motion — it already holds still for them, and in a browser that cannot drive it from the scroll
 
 ## Inside it

package/.llm/digest/steps.md

@@ -36,8 +36,8 @@ A two-column how-it-works section pairing a supporting picture with a numbered,
   - `start` — The default, and the reference design's: the picture first, then the steps it introduces
   - `end` — The steps first, for a section sitting under a split whose picture is already at the start
   - never: Moving the picture on a phone. There is one column there and the picture leads it
-- **autoplay** `boolean` · default false — Whether the steps take their turn on their own: one step is current, its rule fills over motion.duration.dwell, then the next takes over, and back to the first after the last. …
-  - never: Steps whose descriptions take longer to read than motion.duration.dwell — leave it off rather than cut the copy to the timer. And a list with no picture per step, where the only thing that moves is a rule: the turn is worth it when the picture changes with it
+- **autoplay** `boolean` · default false — Whether the steps take their turn on their own: one step is current, its rule fills over motion.duration.step, then the next takes over, and back to the first after the last. …
+  - never: Steps whose descriptions take longer to read than motion.duration.step — leave it off rather than cut the copy to the timer. And a list with no picture per step, where the only thing that moves is a rule: the turn is worth it when the picture changes with it
 - **title** `string` · required — Always. What the steps get a reader to, in the fewest words that say it — 'Get started in 3 steps'
   - never: A sentence. The steps underneath are the argument; this only has to name where they lead
 - **steps** `data` · required — Always. The steps, in the order a reader takes them — three or four is right, six the most. Each is a short imperative and a sentence under about two hundred characters. …

package/.llm/tokens.md

@@ -392,6 +392,7 @@ one value at every width.
 - `--motion-duration-slow` — Large UI transitions, e.g. accordions expanding, page transitions, interactive demos.
 - `--motion-duration-spinner` — One full rotation of a spinner. Fast enough to read as working, slow enough that the stroke does not blur into a solid ring.
 - `--motion-duration-stagger` — The step between one part of a section arriving and the next. A gap rather than a length: five parts at this step trail the first by less than half a second, so a block still arrives as one thing rather than assembling itself while a reader waits.
+- `--motion-duration-step` — How long one step holds before the next takes its turn, in a Steps list under autoplay. Longer than dwell: a step is a title, a sentence and a picture to take in, not a headline to glance at, and at dwell's pace the list moved on before a reader had finished the line.
 - `--motion-duration-ticker` — How long a running row takes to carry one item past — Awards' row on a phone, multiplied by the number of awards for one whole loop. The reference site's pace: thirty-two seconds for eight awards, slow enough to read an award as it goes by.
 - `--motion-duration-trail` — How long something takes to catch up with a pointer it trails — a background's glow following the pointer across a band. Half a second, so the light drifts after the hand rather than sticking to it: a trail is felt, a cursor is tracked.
 - `--motion-duration-turn` — One turn of a wheel of figures: the one in place rising away as the next rises into it. The reference site's 700 — long enough that the eye follows the number in rather than seeing it swap.
@@ -406,9 +407,12 @@ one value at every width.
 - `--motion-scale-enter` — What a component scales from when something reveals it — a tooltip appearing. Needs a transform origin on the edge nearest its anchor, or it grows out of its own middle. The counterpart to scale.hover, which is a response rather than an entrance.
 - `--motion-scale-hover` — How much a control grows under the cursor on hover. Deliberately small — a control that grows past the pointer fires its own mouse-out.
 - `--motion-scale-media-hover` — How much art grows inside a frame that holds still — an editorial card's picture under the cursor. Twice motion.scale.hover, which stays smaller because a control can outrun its own pointer and a framed picture cannot.
+- `--motion-scale-parallax` — How much larger a block's picture is drawn inside its frame, so it can drift with the scroll without its edge showing. A tenth: room for the parallax travel either way with a margin to spare, and too little to feel like a crop.
 - `--motion-scale-pile-covered` — How far a card in a StickyCards pile draws back once the next card has slid over it, from its top edge, so the pile reads as depth. Not motion.scale.enter, which is for something arriving.
 - `--motion-translate-enter` — Where a surface waits before something reveals it: level on the inline axis, its own full height down the block one. A share of the element rather than of the page, so a sheet travels exactly its own height whatever that turns out to be.
 - `--motion-translate-hover` — How far a pressable surface rises under the cursor. A fixed distance rather than a share of the element, so a tall card and a short one lift by the same amount and a row of them stays level. Small enough that nothing it sits beside looks disturbed.
+- `--motion-translate-parallax-from` — Where a block's picture stands in its frame as the frame enters the view from below: a little above centre, as a share of its own height. It runs to parallax-to as the frame crosses the view, so the picture moves slower than the page and reads as further away.
+- `--motion-translate-parallax-to` — Where a block's picture stands as its frame leaves the view at the top: a little below centre. The pair stays inside the room motion.scale.parallax gives, so no edge ever shows.
 - `--motion-translate-reveal` — How far a section waits below where it lands, before the scroll brings it up. A fixed distance rather than a share of the block, so a hero a screen tall and a split half that arrive by the same movement. Pairs with motion.easing.reveal.
 
 ## opacity

package/dist/components/blocks/block-parallax.css

@@ -0,0 +1,62 @@
+/*
+ * The drift every block's picture shares, defined once.
+ *
+ * As a block passes through the view its picture moves a little slower than the page, so it reads
+ * as further away than the words beside it — the reference design's parallax, on every block that
+ * holds a picture rather than as an option one banner had. A copy per block is how ten sections
+ * come to disagree about how far a picture moves, so the movement is stated here and each block
+ * only marks its frame: `data-dds-parallax` on the box that holds the picture and clips it.
+ *
+ * Imported by each block's component, which is what puts it in the bundle once however many blocks
+ * a page uses.
+ *
+ * Driven by the scroll and nothing else. The frame names a view timeline and the picture runs down
+ * it over the frame's whole pass across the view (`cover`), from motion.translate.parallax-from to
+ * motion.translate.parallax-to. No script measures anything and no listener runs on scroll: the
+ * browser advances the timeline itself, and the only properties it animates are `translate` and
+ * `scale`, which it composites without laying the page out or painting it again — so a page full
+ * of pictures scrolls as smoothly as a page with none. Linear, because the scroll is the easing.
+ *
+ * The picture is drawn at motion.scale.parallax inside a frame that clips it, which leaves room
+ * above and below for the travel, so no edge of the picture is ever seen. The frame keeps its size,
+ * so nothing around it moves.
+ *
+ * The frame clips with `overflow: clip`, not `hidden`. `hidden` makes a box a scroll container, and
+ * a view timeline is measured against its nearest one: under a box that never scrolls it stands
+ * still at its first frame. The same holds for every box above the frame, which is why the blocks
+ * that carry one clip their roots rather than hiding their overflow.
+ *
+ * Every picture inside the frame drifts, except one inside an IllustrationCard: the card is a
+ * picture of the product laid over the photograph, and the photograph moving behind it is the
+ * effect; the product's own icons sliding inside the card would be the card coming apart.
+ *
+ * Only where the browser can drive it from the scroll, and only for a reader who has not asked for
+ * less motion. Everywhere else the picture stands still, centred and at its own size.
+ */
+/* FeatureCards' pictures are drawn by CardBody, a core component that marks nothing, so its frame is
+   named here for the one block that wants it moving. */
+:where([data-dds-context="marketing"]) :is([data-dds-parallax], .dds-featurecards .dds-cardbody__media-frame) {
+  overflow: clip;
+  view-timeline-axis: block;
+  view-timeline-name: --dds-parallax;
+}
+
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) :is([data-dds-parallax], .dds-featurecards .dds-cardbody__media-frame) img:not(.dds-illustrationcard img) {
+      animation: dds-parallax linear both;
+      animation-range: cover;
+      animation-timeline: --dds-parallax;
+      scale: var(--motion-scale-parallax);
+    }
+  }
+}
+
+@keyframes dds-parallax {
+  from {
+    translate: var(--motion-translate-parallax-from);
+  }
+  to {
+    translate: var(--motion-translate-parallax-to);
+  }
+}

package/dist/components/blocks/download-banner/DownloadBanner.d.ts

@@ -1,6 +1,7 @@
 import './DownloadBanner.css';
 import './download-banner-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type DownloadBannerProps } from './DownloadBanner.types.js';
 export type { DownloadBannerProps };
 /**

package/dist/components/blocks/download-banner/DownloadBanner.js

@@ -5,6 +5,7 @@ import { AndroidApkFillColoredIcon, AppleAppStoreFillColoredIcon, AppleDmgFillCo
 import './DownloadBanner.css';
 import './download-banner-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { Background } from '../../core/background/Background.js';
 import { given } from '../../given.js';
 import { arriving, useReveal } from '../use-reveal.js';
@@ -71,5 +72,5 @@ export function DownloadBanner({ ground = downloadBannerDefaults.ground, variant
                                builds of the same desktop app — and a key repeated is a badge React confuses
                                with the other. */
                             _jsx("li", { className: downloadBannerParts.badge, children: _jsx("a", { className: downloadBannerParts['badge-link'], href: href, "aria-label": given(label) ? label : name, children: _jsx(Mark, { className: downloadBannerParts.mark, width: undefined, height: undefined, "aria-hidden": "true", focusable: "false" }) }) }, `${platform}-${at}`));
-                        }) })) : null, variant === 'featured' && media !== undefined && media !== null ? (_jsx("div", { className: downloadBannerParts.media, ...arriving(3), children: media })) : null] }) }) }));
+                        }) })) : null, variant === 'featured' && media !== undefined && media !== null ? (_jsx("div", { "data-dds-parallax": "", className: downloadBannerParts.media, ...arriving(3), children: media })) : null] }) }) }));
 }

package/dist/components/blocks/feature-bullets/FeatureBullets.d.ts

@@ -1,6 +1,7 @@
 import './FeatureBullets.css';
 import './feature-bullets-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type FeatureBulletsProps } from './FeatureBullets.types.js';
 export type { FeatureBulletsProps };
 /**

package/dist/components/blocks/feature-bullets/FeatureBullets.js

@@ -5,6 +5,7 @@ import { CircleCheckSolidIcon } from '@deriv-com/quill-icons-web';
 import './FeatureBullets.css';
 import './feature-bullets-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { featureBulletsDefaults, featureBulletsParts, } from './FeatureBullets.types.js';
 /**
@@ -51,5 +52,5 @@ export function FeatureBullets({ ground = featureBulletsDefaults.ground, mediaPo
               
                                  Two behind the claim, which the picture beside them takes — the two halves of
                                  the split arrive first and the list follows them. */
-                                _jsxs("li", { className: featureBulletsParts.item, ...arriving(2 + at), children: [_jsx("span", { className: featureBulletsParts.mark, "aria-hidden": "true", children: _jsx(CircleCheckSolidIcon, {}) }), _jsx("span", { className: featureBulletsParts.text, children: bullet })] }, bullet))) })] }), _jsx("div", { className: featureBulletsParts.media, ...arriving(1), "aria-hidden": "true", children: media })] }) }) }));
+                                _jsxs("li", { className: featureBulletsParts.item, ...arriving(2 + at), children: [_jsx("span", { className: featureBulletsParts.mark, "aria-hidden": "true", children: _jsx(CircleCheckSolidIcon, {}) }), _jsx("span", { className: featureBulletsParts.text, children: bullet })] }, bullet))) })] }), _jsx("div", { "data-dds-parallax": "", className: featureBulletsParts.media, ...arriving(1), "aria-hidden": "true", children: media })] }) }) }));
 }

package/dist/components/blocks/feature-cards/FeatureCards.d.ts

@@ -1,6 +1,7 @@
 import './FeatureCards.css';
 import './feature-cards-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type FeatureCardsProps } from './FeatureCards.types.js';
 export type { FeatureCardsProps };
 /**

package/dist/components/blocks/feature-cards/FeatureCards.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import './FeatureCards.css';
 import './feature-cards-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { given } from '../../given.js';
 import { cardsOf } from '../cards-of.js';
 import { arriving, useReveal } from '../use-reveal.js';

package/dist/components/blocks/feature-scroll/FeatureScroll.js

@@ -52,7 +52,13 @@ export function FeatureScroll({ ground = featureScrollDefaults.ground, title, st
     const root = useRef(null);
     const titles = useRef([]);
     const band = useRef(null);
-    const [showing, setShowing] = useState(0);
+    /*
+      Which stop's picture is showing, and which way the reader went to reach it. The way is held with
+      the stop rather than worked out after it, so the picture arriving and the edge it is uncovered
+      from change in the same render — a step behind, it would open from the wrong side for a frame.
+    */
+    // `going` is absent until the first change, so the picture a reader opens on is simply there.
+    const [{ at: showing, going }, setShowing] = useState({ at: 0 });
     const count = steps.length;
     useLayoutEffect(() => {
         if (count === 0)
@@ -92,7 +98,7 @@ export function FeatureScroll({ ground = featureScrollDefaults.ground, title, st
                     reached = i;
             }
             const next = Math.min(count - 1, reached + 1);
-            setShowing((held) => (held === next ? held : next));
+            setShowing((held) => (held.at === next ? held : { at: next, going: next > held.at ? 'down' : 'up' }));
         };
         const schedule = () => {
             if (frame !== 0)
@@ -127,7 +133,7 @@ export function FeatureScroll({ ground = featureScrollDefaults.ground, title, st
                 window.cancelAnimationFrame(frame);
         };
     }, [count]);
-    return (_jsx("section", { className: featureScrollParts.root, "data-ground": ground, "data-media-position": mediaPosition, "aria-labelledby": titleId, ref: root, children: _jsxs("div", { className: featureScrollParts.inner, children: [_jsx("h2", { className: featureScrollParts.heading, ref: heading, "data-revealed": revealed, ...arriving(0), id: titleId, children: title }), _jsx("div", { className: featureScrollParts.steps, style: { '--dds-featurescroll-stops': count }, children: steps.map((step, index) => (
+    return (_jsx("section", { className: featureScrollParts.root, "data-ground": ground, "data-media-position": mediaPosition, "data-going": going, "aria-labelledby": titleId, ref: root, children: _jsxs("div", { className: featureScrollParts.inner, children: [_jsx("h2", { className: featureScrollParts.heading, ref: heading, "data-revealed": revealed, ...arriving(0), id: titleId, children: title }), _jsx("div", { className: featureScrollParts.steps, style: { '--dds-featurescroll-stops': count }, children: steps.map((step, index) => (
                     /* Keyed by the title. An index would key the set by position, so filtering a stop out
                        would renumber every stop under it and React would reconcile the wrong ones — and
                        these are the content, so two the same would be a duplicate stop rather than a key

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

@@ -226,53 +226,50 @@
    * The duration and the curve are bound on the part, so the generated sheet writes the
    * reduced-motion block that turns this into a cut.
    */
+  /*
+   * One of them is shown, and the next is uncovered over it rather than faded in.
+   *
+   * The only thing the component's own listener writes is which stop's picture belongs to the words
+   * a reader has reached, and which way they went to reach it — a question about where each title
+   * has got to, which no query asks. The pinning and the change are this stylesheet's.
+   *
+   * A wipe rather than a dissolve. Fading the arriving picture in over the last one put both on
+   * screen at once for the whole of the change — at its middle the square was two photographs at
+   * half strength each, a double exposure that read as the pictures overlapping. Uncovered from an
+   * edge instead, every point of the square is one picture or the other at full strength, and the
+   * line between them moves the way the page does: up from the foot as a reader scrolls on, down
+   * from the head as they scroll back. Nothing is mixed, so nothing overlaps.
+   *
+   * An animation rather than a transition, because an animation starts from its first frame. A
+   * transition starts from wherever the picture last rested, so a reader who turned back mid-section
+   * had the next picture open from the edge they were no longer moving towards.
+   *
+   * The shown picture is brought to the front and uncovered; the one it replaces stays beneath,
+   * whole, for the same duration and then goes — a step at the end of a zero-length transition,
+   * delayed by the uncovering's own duration, read from the same role so the two cannot drift
+   * apart into a gap. Every other picture is already gone.
+   *
+   * `z-index` is a bare integer, the one kind of value this system keeps out of its tokens: a
+   * stacking order inside a component is not a decision any brand or mode has an opinion about.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__media {
+    transition: opacity 0s linear var(--motion-duration-media-hover);
+  }
+
   :where([data-dds-context="marketing"])
     .dds-featurescroll
     .dds-featurescroll__media[data-showing="true"] {
     opacity: 1;
-    /*
-     * On top, and that is what makes this a dissolve rather than a dip.
-     *
-     * The arriving picture fades in over whatever is beneath it, so at every moment of the change
-     * the square is covered by something opaque. Fading both at once instead leaves them near half
-     * way together, the section's own ground shows through the pair, and the square brightens and
-     * darkens — a pulse, from nothing but two opacities crossing.
-     *
-     * It has to be the shown one rather than the later one in the document, because a reader
-     * scrolls back as well as forward. Going up, the arriving picture is earlier in the markup and
-     * would fade in underneath the one it is replacing: invisible until that one left, which is a
-     * cut with a pause in front of it.
-     *
-     * A bare integer, which is the one kind of value this system keeps out of its tokens: a
-     * stacking order inside a component is not a decision any brand or mode has an opinion about.
-     */
-    z-index: 1;
-    /* No wait on the way in. The pair of delays is the whole mechanism — see the rule below. */
     transition-delay: 0s;
+    z-index: 1;
   }
 
-  /*
-   * The one leaving holds until it has been covered, then goes.
-   *
-   * This is the other half of the dissolve. The arriving picture takes the whole duration to reach
-   * full opacity, and for all of it the one underneath stays exactly as it was — so there is never
-   * a frame where the square is anything less than a complete picture. Only once it is hidden
-   * behind the new one does it drop, which costs nothing to look at because nobody can see it.
-   *
-   * The delay is the arriving picture's own duration, read from the same role, so the two cannot
-   * drift apart into a gap or an overlap.
-   *
-   * There is no scale here any more. It read as a pulse, which is what it was: a square this large
-   * carries a change of picture on its own, and a sixth of a second of zoom on top of it is the
-   * section drawing attention to its own machinery.
-   */
-  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__media {
-    transition-delay: var(--motion-duration-media-hover);
-    /* Named here rather than in the contract because `staticCss` takes keywords, and this is the
-       one property the pair of rules is about. The duration and the curve stay bound there, which
-       is what the generated reduced-motion block is written from — so a reader who asked for less
-       still gets a cut. */
-    transition-property: opacity;
+  :where([data-dds-context="marketing"]) .dds-featurescroll[data-going="down"] .dds-featurescroll__media[data-showing="true"] {
+    animation: dds-featurescroll-from-foot var(--motion-duration-media-hover) var(--motion-easing-media-hover);
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurescroll[data-going="up"] .dds-featurescroll__media[data-showing="true"] {
+    animation: dds-featurescroll-from-head var(--motion-duration-media-hover) var(--motion-easing-media-hover);
   }
 
   /*
@@ -290,3 +287,29 @@
     );
   }
 }
+
+@keyframes dds-featurescroll-from-foot {
+  from {
+    clip-path: inset(100% 0 0 0);
+  }
+  to {
+    clip-path: inset(0);
+  }
+}
+
+@keyframes dds-featurescroll-from-head {
+  from {
+    clip-path: inset(0 0 100% 0);
+  }
+  to {
+    clip-path: inset(0);
+  }
+}
+
+/* Less movement is a cut: no uncovering, and the last picture gone at once. The generated sheet
+   already drops every transition here; the animation is this sheet's to drop. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__media[data-showing="true"] {
+    animation: none;
+  }
+}

package/dist/components/blocks/feature-split/FeatureSplit.d.ts

@@ -1,6 +1,7 @@
 import './FeatureSplit.css';
 import './feature-split-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type FeatureSplitProps } from './FeatureSplit.types.js';
 export type { FeatureSplitProps };
 /**

package/dist/components/blocks/feature-split/FeatureSplit.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import './FeatureSplit.css';
 import './feature-split-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
 import { featureSplitDefaults, featureSplitParts, } from './FeatureSplit.types.js';
@@ -34,5 +35,5 @@ import { featureSplitDefaults, featureSplitParts, } from './FeatureSplit.types.j
 export function FeatureSplit({ ground = featureSplitDefaults.ground, mediaPosition = featureSplitDefaults.mediaPosition, title, description, link, media, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
-    return (_jsx("section", { className: featureSplitParts.root, "data-ground": ground, "data-media-position": mediaPosition, "aria-labelledby": titleId, children: _jsx("div", { className: featureSplitParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: featureSplitParts.split, children: [_jsxs("div", { className: featureSplitParts.content, children: [_jsx("h2", { className: featureSplitParts.title, ...arriving(0), id: titleId, children: title }), given(description) ? (_jsx("p", { className: featureSplitParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureSplitParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: featureSplitParts.media, ...arriving(3), "aria-hidden": "true", children: media })] }) }) }));
+    return (_jsx("section", { className: featureSplitParts.root, "data-ground": ground, "data-media-position": mediaPosition, "aria-labelledby": titleId, children: _jsx("div", { className: featureSplitParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: featureSplitParts.split, children: [_jsxs("div", { className: featureSplitParts.content, children: [_jsx("h2", { className: featureSplitParts.title, ...arriving(0), id: titleId, children: title }), given(description) ? (_jsx("p", { className: featureSplitParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureSplitParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { "data-dds-parallax": "", className: featureSplitParts.media, ...arriving(3), "aria-hidden": "true", children: media })] }) }) }));
 }

package/dist/components/blocks/feature-stack/FeatureStack.d.ts

@@ -1,6 +1,7 @@
 import './FeatureStack.css';
 import './feature-stack-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type FeatureStackProps } from './FeatureStack.types.js';
 export type { FeatureStackProps };
 /**

package/dist/components/blocks/feature-stack/FeatureStack.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import './FeatureStack.css';
 import './feature-stack-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { given } from '../../given.js';
 import { arriving, useReveal } from '../use-reveal.js';
 import { featureStackDefaults, featureStackParts, } from './FeatureStack.types.js';
@@ -23,5 +24,5 @@ import { featureStackDefaults, featureStackParts, } from './FeatureStack.types.j
 export function FeatureStack({ ground = featureStackDefaults.ground, title, description, link, image, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
-    return (_jsx("section", { className: featureStackParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: featureStackParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: featureStackParts.header, children: [_jsx("h2", { className: featureStackParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: featureStackParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureStackParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: featureStackParts.media, ...arriving(3), children: image ? (_jsx("img", { className: featureStackParts.image, src: image.src, alt: image.alt, width: image.width, height: image.height, loading: "lazy", decoding: "async" })) : null })] }) }));
+    return (_jsx("section", { className: featureStackParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: featureStackParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: featureStackParts.header, children: [_jsx("h2", { className: featureStackParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: featureStackParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureStackParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { "data-dds-parallax": "", className: featureStackParts.media, ...arriving(3), children: image ? (_jsx("img", { className: featureStackParts.image, src: image.src, alt: image.alt, width: image.width, height: image.height, loading: "lazy", decoding: "async" })) : null })] }) }));
 }

package/dist/components/blocks/image-banner/ImageBanner.types.d.ts

@@ -29,7 +29,7 @@ export interface ImageBannerOwnProps {
     action?: ReactNode;
     /** Always. The page's photograph, through AspectRatio or as an image — people or product. Split and cover crop it to fill the space they give it. Alt text is the page's to give, empty where the photograph is decoration. */
     media: ReactNode;
-    /** The photograph drifts against the scroll as the card passes through the view, by motion.distance.drift over the whole pass, so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. For a careers or about page, where the photograph of the people is the point. Off by default: a card selling one action does not need its picture moving under the button. */
+    /** The photograph drifts against the scroll as the card passes through the view, by motion.distance.drift over the whole pass, so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. On by default, as every block's picture drifts: pass false for a card whose photograph must hold still under its button. */
     parallax?: boolean;
 }
 export type ImageBannerProps = ImageBannerOwnProps;
@@ -50,5 +50,5 @@ export declare const imageBannerDefaults: {
     readonly variant: "split";
     readonly mediaPosition: "end";
     readonly headingLevel: "h2";
-    readonly parallax: false;
+    readonly parallax: true;
 };

package/dist/components/blocks/image-banner/ImageBanner.types.js

@@ -11,4 +11,4 @@ export const imageBannerParts = {
     media: 'dds-imagebanner__media',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const imageBannerDefaults = { ground: 'page', variant: 'split', mediaPosition: 'end', headingLevel: 'h2', parallax: false };
+export const imageBannerDefaults = { ground: 'page', variant: 'split', mediaPosition: 'end', headingLevel: 'h2', parallax: true };

package/dist/components/blocks/landing-hero/LandingHero.css

@@ -6,7 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
-  overflow: hidden;
+  overflow: clip;
   overflow-wrap: anywhere;
   position: relative;
   background-color: var(--color-bg-brand-strong);

package/dist/components/blocks/landing-hero/LandingHero.d.ts

@@ -1,6 +1,7 @@
 import './LandingHero.css';
 import './landing-hero-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type LandingHeroProps } from './LandingHero.types.js';
 export type { LandingHeroProps };
 /**

package/dist/components/blocks/landing-hero/LandingHero.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import './LandingHero.css';
 import './landing-hero-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
 import { Background } from '../../core/background/Background.js';
@@ -51,5 +52,5 @@ export function LandingHero({ eyebrow, title, headingLevel = landingHeroDefaults
         /* The one inline style here, and it is a value rather than a decision: which photograph,
            supplied by the page. Everything about how it is drawn — the cover fit and the position — is in the stylesheet, where it can be reasoned about. A background shorthand
            would have reset those four properties every time the page passed an image. */
-        style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: [background === 'halftone' ? _jsx(Background, { tone: "dark", children: null }) : null, media ? (_jsx("div", { className: landingHeroParts.media, "aria-hidden": "true", children: media })) : null, _jsx("div", { className: landingHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: landingHeroParts.content, children: [_jsxs("div", { className: landingHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: landingHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: landingHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: landingHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: landingHeroParts.actions, ...arriving(3), children: actions })) : null] }) })] }));
+        style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: [background === 'halftone' ? _jsx(Background, { tone: "dark", children: null }) : null, media ? (_jsx("div", { "data-dds-parallax": "", className: landingHeroParts.media, "aria-hidden": "true", children: media })) : null, _jsx("div", { className: landingHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: landingHeroParts.content, children: [_jsxs("div", { className: landingHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: landingHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: landingHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: landingHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: landingHeroParts.actions, ...arriving(3), children: actions })) : null] }) })] }));
 }

package/dist/components/blocks/product-hero/ProductHero.css

@@ -6,7 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
-  overflow: hidden;
+  overflow: clip;
   overflow-wrap: anywhere;
   position: relative;
   background-color: var(--color-bg-brand-strong);

package/dist/components/blocks/product-hero/ProductHero.d.ts

@@ -1,6 +1,7 @@
 import './ProductHero.css';
 import './product-hero-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type ProductHeroProps } from './ProductHero.types.js';
 export type { ProductHeroProps };
 /**

package/dist/components/blocks/product-hero/ProductHero.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import './ProductHero.css';
 import './product-hero-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
 import { productHeroDefaults, productHeroParts, } from './ProductHero.types.js';
@@ -47,5 +48,5 @@ export function ProductHero({ eyebrow, title, headingLevel = productHeroDefaults
         style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: _jsx("div", { className: productHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: productHeroParts.content, children: [_jsxs("div", { className: productHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: productHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: productHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: productHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: productHeroParts.actions, ...arriving(3), children: actions })) : null, image ? (
                     // The picture at its own shape: drawn here so the band can size it, and read for its
                     // `alt`, which the page leaves empty where the claim already names it.
-                    _jsx("div", { className: productHeroParts.media, ...arriving(4), children: _jsx("img", { className: productHeroParts.image, src: image.src, alt: image.alt, width: image.width, height: image.height, decoding: "async" }) })) : media ? (_jsx("div", { className: productHeroParts.media, ...arriving(4), "aria-hidden": "true", children: media })) : null] }) }) }));
+                    _jsx("div", { "data-dds-parallax": "", className: productHeroParts.media, ...arriving(4), children: _jsx("img", { className: productHeroParts.image, src: image.src, alt: image.alt, width: image.width, height: image.height, decoding: "async" }) })) : media ? (_jsx("div", { "data-dds-parallax": "", className: productHeroParts.media, ...arriving(4), "aria-hidden": "true", children: media })) : null] }) }) }));
 }

package/dist/components/blocks/steps/Steps.css

@@ -38,8 +38,8 @@
 
 :where([data-dds-context="marketing"]) .dds-steps .dds-steps__image {
   display: block;
-  transition-duration: var(--motion-duration-shift);
-  transition-timing-function: var(--motion-easing-standard);
+  transition-duration: var(--motion-duration-turn);
+  transition-timing-function: var(--motion-easing-reveal);
 }
 
 :where([data-dds-context="marketing"]) .dds-steps .dds-steps__content {

package/dist/components/blocks/steps/Steps.d.ts

@@ -1,6 +1,7 @@
 import './Steps.css';
 import './steps-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type StepsProps } from './Steps.types.js';
 export type { StepsProps };
 /**

package/dist/components/blocks/steps/Steps.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import './Steps.css';
 import './steps-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
 import { useTurn } from './use-turn.js';
@@ -41,11 +42,11 @@ export function Steps({ ground = stepsDefaults.ground, mediaPosition = stepsDefa
     // records as they are typed, and a number against nothing is a step the page did not write — so
     // it is dropped before the count is taken, and the numbers close up rather than skipping one.
     const shown = steps.filter((step) => given(step.title));
-    const { current, turning, playing, next, choose, section, hold } = useTurn(shown.length, autoplay);
+    const { current, going, turning, playing, next, choose, section, hold } = useTurn(shown.length, autoplay);
     // The steps' own pictures replace the one picture only where every step has one: a turn that
     // reached a step without a picture would show nothing beside it.
     const pictured = shown.length > 0 && shown.every((step) => given(step.image?.src));
-    return (_jsx("section", { className: stepsParts.root, ref: section, "data-ground": ground, "data-media-position": mediaPosition, "data-autoplay": autoplay || undefined, "aria-labelledby": titleId, ...(autoplay ? hold : {}), children: _jsx("div", { className: stepsParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: stepsParts.split, children: [_jsx("div", { className: stepsParts.media, ...arriving(0), "aria-hidden": "true", children: pictured
+    return (_jsx("section", { className: stepsParts.root, ref: section, "data-ground": ground, "data-media-position": mediaPosition, "data-autoplay": autoplay || undefined, "data-going": going, "aria-labelledby": titleId, ...(autoplay ? hold : {}), children: _jsx("div", { className: stepsParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: stepsParts.split, children: [_jsx("div", { "data-dds-parallax": "", className: stepsParts.media, ...arriving(0), "aria-hidden": "true", children: pictured
                             ? shown.map((step, at) => (_jsx("img", { className: stepsParts.image, src: step.image?.src, alt: "", width: step.image?.width, height: step.image?.height, "data-current": at === current, loading: at === 0 ? undefined : 'lazy' }, `${at}:${step.title}`)))
                             : media }), _jsxs("div", { className: stepsParts.content, children: [_jsx("h2", { className: stepsParts.title, ...arriving(0), id: titleId, children: title }), _jsx("ol", { className: stepsParts.list, role: "list", "data-turning": autoplay ? turning : undefined, "data-playing": autoplay ? playing : undefined, children: shown.map((step, at) => (
                                 /* Keyed by the step's own name. An index would key the list by position, so

package/dist/components/blocks/steps/Steps.types.d.ts

@@ -12,7 +12,7 @@ export interface StepsOwnProps {
      * `end` — The steps first, for a section sitting under a split whose picture is already at the start
      */
     mediaPosition?: 'start' | 'end';
-    /** Whether the steps take their turn on their own: one step is current, its rule fills over motion.duration.dwell, then the next takes over, and back to the first after the last. The current step's number is drawn at full strength and the rest recede; with an `image` on each step the picture changes to the current one's. Each step's title becomes a button that makes it current. Off by default, so a list nobody configured stays still. On, it holds while the pointer is over the section or focus is inside it, waits until the section is on screen, never moves for a reader who asked for less motion, and stops for good once the reader presses a step — the WAI carousel rule CtaBannerSlider follows: a reader who has chosen a step is reading it. That gives a reader a way to stop it, which WCAG 2.2.2 asks for, but not a visible one, so a page that needs 2.2.2 met plainly should leave it off. */
+    /** Whether the steps take their turn on their own: one step is current, its rule fills over motion.duration.step, then the next takes over, and back to the first after the last. The current step's number is drawn at full strength and the rest recede; with an `image` on each step the picture changes to the current one's. Each step's title becomes a button that makes it current. Off by default, so a list nobody configured stays still. On, it holds while focus is inside the section — not under the pointer, so it keeps turning while a reader watches it — waits until the section is on screen, never moves for a reader who asked for less motion, and stops for good once the reader presses a step — the WAI carousel rule CtaBannerSlider follows: a reader who has chosen a step is reading it. That gives a reader a way to stop it, which WCAG 2.2.2 asks for, but not a visible one, so a page that needs 2.2.2 met plainly should leave it off. */
     autoplay?: boolean;
     /** Always. What the steps get a reader to, in the fewest words that say it — 'Get started in 3 steps' */
     title: string;

package/dist/components/blocks/steps/steps-impl.css

@@ -152,7 +152,7 @@
 }
 
 /*
- * The fill: the current step's rule, drawn from the start edge over motion.duration.dwell. When it
+ * The fill: the current step's rule, drawn from the start edge over motion.duration.step. When it
  * ends the next step takes over — the component listens for the end, so the bar and the turn are
  * one clock. Paused wherever the turn is held; full and still where the turn has stopped or never
  * runs, so the current step is still marked.
@@ -175,7 +175,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-steps .dds-steps__list[data-turning="true"] > .dds-steps__step[data-current="true"] > .dds-steps__progress {
-  animation: dds-steps-fill var(--motion-duration-dwell) linear;
+  animation: dds-steps-fill var(--motion-duration-step) linear;
 }
 
 :where([data-dds-context="marketing"]) .dds-steps .dds-steps__list[data-playing="false"] > .dds-steps__step[data-current="true"] > .dds-steps__progress {
@@ -184,7 +184,20 @@
 
 /*
  * The steps' own pictures share the media cell, and the current step's is the one shown — the
- * first while the list is still. They cross over rather than cut, in motion.duration.shift.
+ * first while the list is still.
+ *
+ * The next is uncovered over the last rather than faded into it, FeatureScroll's change. A fade put
+ * both pictures on screen at half strength at once — a double exposure that read as the two
+ * overlapping. Uncovered from an edge, every point of the square is one picture or the other at full
+ * strength: up from the foot as the turn moves on, the wrap to the first step included, and down
+ * from the head when a reader presses an earlier step.
+ *
+ * An animation rather than a transition, because an animation starts from its first frame and a
+ * transition from wherever the picture last rested. The current picture is brought to the front and
+ * uncovered over motion.duration.turn — the figure-to-figure step a turning set already takes — and
+ * the one it replaces stays beneath, whole, for that long, then goes: a zero-length transition
+ * delayed by the same role, so the two cannot drift into a gap. Every other picture is already gone.
+ * No `data-going` before the first change, so the picture a reader opens on is simply there.
  */
 :where([data-dds-context="marketing"]) .dds-steps .dds-steps__media:has(> .dds-steps__image) {
   display: grid;
@@ -193,11 +206,66 @@
 :where([data-dds-context="marketing"]) .dds-steps .dds-steps__media > .dds-steps__image {
   grid-area: 1 / 1;
   opacity: 0;
-  transition-property: opacity;
+  transition: opacity 0s linear var(--motion-duration-turn);
 }
 
 :where([data-dds-context="marketing"]) .dds-steps .dds-steps__media > .dds-steps__image[data-current="true"] {
   opacity: 1;
+  transition-delay: 0s;
+  z-index: 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-steps[data-going="on"] .dds-steps__media > .dds-steps__image[data-current="true"] {
+  animation: dds-steps-from-foot var(--motion-duration-turn) var(--motion-easing-reveal);
+}
+
+:where([data-dds-context="marketing"]) .dds-steps[data-going="back"] .dds-steps__media > .dds-steps__image[data-current="true"] {
+  animation: dds-steps-from-head var(--motion-duration-turn) var(--motion-easing-reveal);
+}
+
+/*
+ * The wipe and the parallax together. The current picture's wipe is an `animation`, and so is the
+ * drift block-parallax.css gives every picture in the frame — one shorthand would replace the other,
+ * and the current picture, the only one a reader sees, would stop drifting the moment it arrived. So
+ * both are listed here: the wipe on the document's clock, the drift on the frame's view timeline,
+ * where the browser can drive one and the reader has not asked for less motion.
+ */
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) .dds-steps[data-going="on"] .dds-steps__media > .dds-steps__image[data-current="true"] {
+      animation:
+        dds-steps-from-foot var(--motion-duration-turn) var(--motion-easing-reveal),
+        dds-parallax linear both;
+      animation-range: normal, cover;
+      animation-timeline: auto, --dds-parallax;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-steps[data-going="back"] .dds-steps__media > .dds-steps__image[data-current="true"] {
+      animation:
+        dds-steps-from-head var(--motion-duration-turn) var(--motion-easing-reveal),
+        dds-parallax linear both;
+      animation-range: normal, cover;
+      animation-timeline: auto, --dds-parallax;
+    }
+  }
+}
+
+@keyframes dds-steps-from-foot {
+  from {
+    clip-path: inset(100% 0 0 0);
+  }
+  to {
+    clip-path: inset(0);
+  }
+}
+
+@keyframes dds-steps-from-head {
+  from {
+    clip-path: inset(0 0 100% 0);
+  }
+  to {
+    clip-path: inset(0);
+  }
 }
 
 /*
@@ -213,4 +281,8 @@
   :where([data-dds-context="marketing"]) .dds-steps[data-autoplay] .dds-steps__number {
     transition: none;
   }
+
+  :where([data-dds-context="marketing"]) .dds-steps .dds-steps__media > .dds-steps__image[data-current="true"] {
+    animation: none;
+  }
 }

package/dist/components/blocks/steps/use-turn.d.ts

@@ -1,9 +1,9 @@
-import { type FocusEvent, type PointerEvent } from 'react';
+import { type FocusEvent } from 'react';
 /**
  * The steps taking their turn under `autoplay`: which step is current, and whether the turn is
  * running.
  *
- * The timing is not here. The current step's rule fills over motion.duration.dwell as a CSS
+ * The timing is not here. The current step's rule fills over motion.duration.step as a CSS
  * animation, and the turn moves on when that animation ends (`next`), so the bar a reader watches
  * and the step changing are one clock rather than two that drift. Holding the turn is pausing that
  * animation, which is what `playing` is for: the stylesheet pauses the fill wherever it is false.
@@ -12,21 +12,21 @@ import { type FocusEvent, type PointerEvent } from 'react';
  * - `autoplay` is on and there are two steps or more;
  * - the reader has not asked for less motion — asked live, so turning it on mid-visit stops it;
  * - the section is on screen. A turn nobody can see does not run, and starts again where it was;
- * - nothing holds it: a pointer over the section or focus inside it holds it for as long as it
- *   lasts, and pressing a step stops it for good — CtaBannerSlider's rule, by way of the WAI
- *   carousel pattern: a reader who has chosen a step is reading it. The pointer's way, the
- *   keyboard's and a touch screen's, which WCAG 2.2.2 asks for of anything that moves on its own.
+ * - nothing holds it: focus inside the section holds it for as long as it lasts, and pressing a
+ *   step stops it for good — a reader who has chosen a step is reading it. The keyboard's way and
+ *   the pointer's and a touch screen's, which WCAG 2.2.2 asks for of anything that moves on its own.
+ *   A pointer merely resting over the section does not hold it: the list is meant to be watched as
+ *   it turns, and pausing whenever the pointer crossed it read as the list having stopped.
  */
 export declare function useTurn(count: number, autoplay: boolean): {
     current: number;
+    going: "on" | "back" | undefined;
     turning: boolean;
     playing: boolean;
     next: () => void;
     choose: (at: number) => void;
     section: import("react").RefObject<HTMLElement | null>;
     hold: {
-        onPointerEnter: (event: PointerEvent<HTMLElement>) => void;
-        onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
         onFocus: () => void;
         onBlur: (event: FocusEvent<HTMLElement>) => void;
     };

package/dist/components/blocks/steps/use-turn.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
  * The steps taking their turn under `autoplay`: which step is current, and whether the turn is
  * running.
  *
- * The timing is not here. The current step's rule fills over motion.duration.dwell as a CSS
+ * The timing is not here. The current step's rule fills over motion.duration.step as a CSS
  * animation, and the turn moves on when that animation ends (`next`), so the bar a reader watches
  * and the step changing are one clock rather than two that drift. Holding the turn is pausing that
  * animation, which is what `playing` is for: the stylesheet pauses the fill wherever it is false.
@@ -13,13 +13,21 @@ import { useCallback, useEffect, useRef, useState } from 'react';
  * - `autoplay` is on and there are two steps or more;
  * - the reader has not asked for less motion — asked live, so turning it on mid-visit stops it;
  * - the section is on screen. A turn nobody can see does not run, and starts again where it was;
- * - nothing holds it: a pointer over the section or focus inside it holds it for as long as it
- *   lasts, and pressing a step stops it for good — CtaBannerSlider's rule, by way of the WAI
- *   carousel pattern: a reader who has chosen a step is reading it. The pointer's way, the
- *   keyboard's and a touch screen's, which WCAG 2.2.2 asks for of anything that moves on its own.
+ * - nothing holds it: focus inside the section holds it for as long as it lasts, and pressing a
+ *   step stops it for good — a reader who has chosen a step is reading it. The keyboard's way and
+ *   the pointer's and a touch screen's, which WCAG 2.2.2 asks for of anything that moves on its own.
+ *   A pointer merely resting over the section does not hold it: the list is meant to be watched as
+ *   it turns, and pausing whenever the pointer crossed it read as the list having stopped.
  */
 export function useTurn(count, autoplay) {
     const [current, setCurrent] = useState(0);
+    /*
+      Which way the last change went, for the picture to be uncovered from the matching edge: on, from
+      the foot, for every turn — the wrap from the last step to the first included, because the turn
+      still moves on — and back, from the head, when a reader presses an earlier step. Absent until the
+      first change, so the picture a reader opens on is simply there.
+    */
+    const [going, setGoing] = useState(undefined);
     const [seen, setSeen] = useState(false);
     const [still, setStill] = useState(false);
     const [held, setHeld] = useState(false);
@@ -46,24 +54,19 @@ export function useTurn(count, autoplay) {
     }, [autoplay]);
     /** The current step's fill has run: the next step takes over, and the first after the last. */
     const next = useCallback(() => {
-        if (count > 0)
+        if (count > 0) {
+            setGoing('on');
             setCurrent((at) => (at + 1) % count);
+        }
     }, [count]);
     /** A step pressed: it is current, and the turn stops for good. */
     const choose = useCallback((at) => {
+        setGoing(at >= current ? 'on' : 'back');
         setCurrent(at);
         setStopped(true);
-    }, []);
+    }, [current]);
     /** Spread on the section: what holds the turn. */
     const hold = {
-        onPointerEnter: (event) => {
-            if (event.pointerType === 'mouse')
-                setHeld(true);
-        },
-        onPointerLeave: (event) => {
-            if (event.pointerType === 'mouse')
-                setHeld(false);
-        },
         onFocus: () => setHeld(true),
         onBlur: (event) => {
             if (!event.currentTarget.contains(event.relatedTarget))
@@ -71,5 +74,5 @@ export function useTurn(count, autoplay) {
         },
     };
     // A list that shrank under the current step falls back to its first.
-    return { current: current < count ? current : 0, turning, playing, next, choose, section, hold };
+    return { current: current < count ? current : 0, going, turning, playing, next, choose, section, hold };
 }

package/dist/components/blocks/team-grid/TeamGrid.d.ts

@@ -1,6 +1,7 @@
 import './TeamGrid.css';
 import './team-grid-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type TeamGridProps } from './TeamGrid.types.js';
 export type { TeamGridProps };
 /**

package/dist/components/blocks/team-grid/TeamGrid.js

@@ -4,6 +4,7 @@ import { useId, useState } from 'react';
 import './TeamGrid.css';
 import './team-grid-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { given } from '../../given.js';
 import { Button } from '../../core/button/Button.js';
 import { Link } from '../../core/link/Link.js';
@@ -69,6 +70,6 @@ export function TeamGrid({ ground = teamGridDefaults.ground, title, description,
                                         style: { '--dds-teamgrid-extra-at': at - shown },
                                     }
                                     : arriving(Math.min(FIRST_PERSON + at, LAST_STEP));
-                                return (_jsxs("li", { className: teamGridParts.item, hidden: extra && !expanded, ...motion, children: [_jsx("div", { className: teamGridParts.media, children: _jsx(AspectRatio, { ratio: "square", children: _jsx("img", { src: person.image.src, alt: person.image.alt, loading: "lazy", decoding: "async" }) }) }), _jsxs("div", { className: teamGridParts.text, children: [_jsx("h3", { className: teamGridParts.name, children: person.name }), _jsx("p", { className: teamGridParts.role, children: person.role }), person.profile !== undefined ? (_jsx("div", { className: teamGridParts.profile, children: _jsx(Link, { href: person.profile.href, external: true, tone: inverse ? 'inherit' : 'brand', "aria-label": `${profileName(person)} ${externalLabel}`, children: person.profile.label }) })) : null] })] }, `${person.name}-${at}`));
+                                return (_jsxs("li", { className: teamGridParts.item, hidden: extra && !expanded, ...motion, children: [_jsx("div", { "data-dds-parallax": "", className: teamGridParts.media, children: _jsx(AspectRatio, { ratio: "square", children: _jsx("img", { src: person.image.src, alt: person.image.alt, loading: "lazy", decoding: "async" }) }) }), _jsxs("div", { className: teamGridParts.text, children: [_jsx("h3", { className: teamGridParts.name, children: person.name }), _jsx("p", { className: teamGridParts.role, children: person.role }), person.profile !== undefined ? (_jsx("div", { className: teamGridParts.profile, children: _jsx(Link, { href: person.profile.href, external: true, tone: inverse ? 'inherit' : 'brand', "aria-label": `${profileName(person)} ${externalLabel}`, children: person.profile.label }) })) : null] })] }, `${person.name}-${at}`));
                             }) }), longer ? (_jsx("div", { className: teamGridParts.actions, ...arriving(Math.min(FIRST_PERSON + shown, LAST_STEP + 1)), children: _jsx(Button, { variant: "secondary", size: "md", tone: inverse ? 'inverse' : 'default', "aria-expanded": expanded, "aria-controls": listId, onClick: () => setExpanded((open) => !open), children: expanded ? collapseLabel : expandLabel }) })) : null] })] }) }));
 }

package/dist/components/core/card/Card.css

@@ -4,7 +4,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow: clip;
   border-radius: var(--radius-surface);
 }
 

package/dist/components/core/illustration-scene/illustration-scene-impl.css

@@ -44,3 +44,18 @@
 :where([data-dds-context="marketing"]) .dds-illustrationscene[data-ratio='upright'] > .dds-illustrationcard {
   inline-size: 78%;
 }
+
+/*
+ * At the foot, the card is a strip across the frame rather than a pane in the middle of it: as wide
+ * as the frame less the inset either side, and only as tall as what it holds — the card's own shape
+ * would stand a square of glass over most of the photograph, where the point of the foot is to leave
+ * the subject above it clear. The same inset below it as either side.
+ *
+ * After the per-shape widths, which it replaces, and only here: a centred card keeps its shape.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement='bottom'] > .dds-illustrationcard {
+  aspect-ratio: auto;
+  inline-size: auto;
+  justify-self: stretch;
+  margin-block-end: var(--space-inset-card);
+}

package/dist/marketing.css

@@ -238,6 +238,7 @@
   --motion-duration-slow: 300ms;
   --motion-duration-spinner: 500ms;
   --motion-duration-stagger: 100ms;
+  --motion-duration-step: 8000ms;
   --motion-duration-ticker: 4000ms;
   --motion-duration-trail: 500ms;
   --motion-duration-turn: 700ms;
@@ -252,9 +253,12 @@
   --motion-scale-enter: 0.96;
   --motion-scale-hover: 1.02;
   --motion-scale-media-hover: 1.04;
+  --motion-scale-parallax: 1.1;
   --motion-scale-pile-covered: 0.96;
   --motion-translate-enter: 0 100%;
   --motion-translate-hover: 0 -4px;
+  --motion-translate-parallax-from: 0 -4%;
+  --motion-translate-parallax-to: 0 4%;
   --motion-translate-reveal: 0 24px;
   --opacity-disabled: 0.22;
   --opacity-dot-current: 1;
@@ -591,6 +595,7 @@
   --motion-duration-slow: 300ms;
   --motion-duration-spinner: 500ms;
   --motion-duration-stagger: 100ms;
+  --motion-duration-step: 8000ms;
   --motion-duration-ticker: 4000ms;
   --motion-duration-trail: 500ms;
   --motion-duration-turn: 700ms;
@@ -605,9 +610,12 @@
   --motion-scale-enter: 0.96;
   --motion-scale-hover: 1.02;
   --motion-scale-media-hover: 1.04;
+  --motion-scale-parallax: 1.1;
   --motion-scale-pile-covered: 0.96;
   --motion-translate-enter: 0 100%;
   --motion-translate-hover: 0 -4px;
+  --motion-translate-parallax-from: 0 -4%;
+  --motion-translate-parallax-to: 0 4%;
   --motion-translate-reveal: 0 24px;
   --opacity-disabled: 0.22;
   --opacity-dot-current: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deriv-com/dds-marketing",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Deriv Design System — components and tokens for marketing sites (landing pages, pricing, sign-up).",
   "license": "MIT",
   "author": {