@vectoriox/iox-ui 5.71.1 → 5.72.0

package/index.d.ts

@@ -2206,6 +2206,12 @@ declare enum VisibilityActionType {
     Hide = "hide",
     Toggle = "toggleVisibility"
 }
+/** The reveals (premium sites SC3): a wipe from a chosen side, a picture settling, text rising line by line. */
+declare enum RevealActionType {
+    Clip = "clipReveal",
+    Zoom = "zoomOut",
+    Text = "revealText"
+}
 /** Actions that reveal an element (hidden → visible). Their FIRST frame is the pre-state. */
 declare const ENTRANCE_ACTION_TYPES: ReadonlySet<string>;
 /** Actions that hide an element (visible → hidden). */
@@ -2220,6 +2226,19 @@ declare function effectiveActionType(type: string, isHidden: boolean): string;
  * directly it answers with `hide`'s frames, the toggle of an element that starts visible.
  */
 declare function buildInteractionKeyframes(type: string, params?: Readonly<Record<string, unknown>> | null): InteractionKeyframe[] | null;
+interface AnimateActionOptions {
+    /** The frames are `buildInteractionKeyframes`' reversed: a reverse pass never splits text, it just fades back. */
+    reverse?: boolean;
+}
+/**
+ * Start an element action's animation: THE call both runtimes make. Most actions are one `element.animate`; a text
+ * reveal plays its pieces and a clip reveal opens from the side the page's direction makes of Start and End, then takes
+ * its clip away so a resting element never crops its own shadow. Each still comes back as one Animation.
+ */
+declare function animateAction(el: HTMLElement, action: {
+    type: string;
+    params?: Readonly<Record<string, unknown>> | null;
+}, frames: ReadonlyArray<InteractionKeyframe>, timing: KeyframeAnimationOptions, options?: AnimateActionOptions): Animation;
 /** `translateX` → `translate-x`, `opacity` → `opacity`: the CSS property name of a keyframe key. */
 declare function keyframePropertyName(key: string): string;
 /** A keyframe as `[css-property, value]` pairs — what a runtime writes inline. */
@@ -2249,8 +2268,11 @@ declare const ENTRANCE_PRESTATE_ATTRIBUTE = "data-iox-enter";
  */
 declare const ENTRANCE_FALLBACK_CSS: string;
 /** The same, for a visitor with no script: every pre-stated element shown at once (served inside `<noscript>`). */
-declare const ENTRANCE_NOSCRIPT_CSS = "[data-iox-enter]{opacity:1!important;transform:none!important;visibility:visible!important;pointer-events:auto!important;animation:none!important}";
-/** The frame an animation comes to rest on (what reduced motion applies at once). */
+declare const ENTRANCE_NOSCRIPT_CSS = "[data-iox-enter]{opacity:1!important;transform:none!important;clip-path:none!important;visibility:visible!important;pointer-events:auto!important;animation:none!important}";
+/**
+ * The frame an animation comes to rest on (what reduced motion applies at once). A clip that has fully opened rests as
+ * no clip at all: `inset(0)` would still crop the element's shadow and stack it, for the rest of the visit.
+ */
 declare function finalKeyframe(frames: ReadonlyArray<InteractionKeyframe> | null | undefined): InteractionKeyframe | null;
 
 /**
@@ -3196,5 +3218,5 @@ declare class GalleryLoop {
     private emit;
 }
 
-export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DIALOG_CLOSE_ABOVE_ATTRIBUTE, DIALOG_NODE_TYPE, DeclarationContext, ENTRANCE_ACTION_TYPES, ENTRANCE_FALLBACK_CSS, ENTRANCE_NOSCRIPT_CSS, ENTRANCE_PRESTATE_ATTRIBUTE, EXIT_ACTION_TYPES, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, INTERACTION_HIDDEN_ATTRIBUTE, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, IoxVideoComponent, LAST_EMITTED_STATES, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, NO_PAGE_TRANSITION, ON_STATE_ROLES, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PHONE_TRANSITION_QUERY, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, REDUCED_MOTION_QUERY, SCROLL_EASINGS, SELF_PLAYING_TRIGGERS, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, ScrollEasing, SectionComponent, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, applyBindingPipes, applyFeel, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildInteractionKeyframes, buildPartSelector, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, entranceStartsHidden, feelFor, finalKeyframe, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCurrentLink, isExternalOrFragment, isGradientPaint, isInputOverriddenAt, isLastEmittedStateKey, isOverriddenAt, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeGalleryImage, normalizeIconClass, orderStatesForEmit, pageTransitionOf, parentBreakpoint, parseUrlList, partClassName, planResponsiveRules, planScroll, planSwiperOptions, playDualLayerTransition, prefersReducedMotion, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, sliderControlElements, sliderInputsFromProps, sliderInputsOf, stateNamesIn, statePseudoClass, stateSelectorSuffix, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, targetedStateSelector, viewportTransitionContext, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
-export type { A11yNodeSource, BoundValueSpec, BreakpointDef, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageScrollStart, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionContext, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, PlannedPageTransition, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteAnimationLike, ScrollPlanContext, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SliderBootOptions, SliderControlElements, SliderInputs, StateStyleMap, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, SwiperPlan, SwiperPlanContext, ToggleableAction, TransitionFeel, TransitionPhase, TransitionPreviewLayers, TransitionTimelineInput, TransitionViewport, ValueSource, VirtualTraitGroup };
+export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DIALOG_CLOSE_ABOVE_ATTRIBUTE, DIALOG_NODE_TYPE, DeclarationContext, ENTRANCE_ACTION_TYPES, ENTRANCE_FALLBACK_CSS, ENTRANCE_NOSCRIPT_CSS, ENTRANCE_PRESTATE_ATTRIBUTE, EXIT_ACTION_TYPES, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, INTERACTION_HIDDEN_ATTRIBUTE, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, IoxVideoComponent, LAST_EMITTED_STATES, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, NO_PAGE_TRANSITION, ON_STATE_ROLES, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PHONE_TRANSITION_QUERY, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, REDUCED_MOTION_QUERY, RevealActionType, SCROLL_EASINGS, SELF_PLAYING_TRIGGERS, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, ScrollEasing, SectionComponent, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, animateAction, applyBindingPipes, applyFeel, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildInteractionKeyframes, buildPartSelector, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, entranceStartsHidden, feelFor, finalKeyframe, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCurrentLink, isExternalOrFragment, isGradientPaint, isInputOverriddenAt, isLastEmittedStateKey, isOverriddenAt, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeGalleryImage, normalizeIconClass, orderStatesForEmit, pageTransitionOf, parentBreakpoint, parseUrlList, partClassName, planResponsiveRules, planScroll, planSwiperOptions, playDualLayerTransition, prefersReducedMotion, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, sliderControlElements, sliderInputsFromProps, sliderInputsOf, stateNamesIn, statePseudoClass, stateSelectorSuffix, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, targetedStateSelector, viewportTransitionContext, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
+export type { A11yNodeSource, AnimateActionOptions, BoundValueSpec, BreakpointDef, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageScrollStart, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionContext, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, PlannedPageTransition, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteAnimationLike, ScrollPlanContext, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SliderBootOptions, SliderControlElements, SliderInputs, StateStyleMap, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, SwiperPlan, SwiperPlanContext, ToggleableAction, TransitionFeel, TransitionPhase, TransitionPreviewLayers, TransitionTimelineInput, TransitionViewport, ValueSource, VirtualTraitGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-ui",
-  "version": "5.71.1",
+  "version": "5.72.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/scene-core/index.d.ts

@@ -19,19 +19,33 @@ declare enum SceneProp {
     Rotate = "rotate",
     /** 0–1. */
     Opacity = "opacity",
-    /** Inset from every side, in % of the layer (0 = whole, 50 = gone). */
+    /** How much of the layer shows, in % (100 = whole, 0 = gone). Its track's `from` says where it opens from. */
     Clip = "clip",
+    /** How many of the layer's words are lit, in % (100 = all): the word-by-word light-up. Split in the browser only. */
+    Words = "words",
     /** The layer's background colour. */
     Ground = "ground",
     /** The layer's text colour. */
     Ink = "ink"
 }
+/** Where a reveal opens from. Start and End mirror in RTL. */
+declare enum SceneRevealFrom {
+    Centre = "centre",
+    Bottom = "bottom",
+    Top = "top",
+    Start = "start",
+    End = "end"
+}
+/** What a reveal opens from when nobody has said: the page's own direction of travel, upward as it scrolls. */
+declare const SCENE_REVEAL_DEFAULT = SceneRevealFrom.Bottom;
 /** One key: at progress `[0]` (0–1) the property holds `[1]`: a number, or a colour for Ground and Ink. */
 type SceneKey = readonly [number, number | string];
 interface SceneTrack {
     prop: SceneProp;
     /** Ascending by progress. Between two keys the value eases (smoothstep); outside them it holds the nearest. */
     keys: ReadonlyArray<SceneKey>;
+    /** A Clip track's direction. */
+    from?: SceneRevealFrom;
 }
 /** What a node carries (both a builder node and a saved one). */
 interface SceneNodeSource {
@@ -63,6 +77,11 @@ declare const SCENE_PHONE_MAX_WIDTH = 767;
  * keys sorted by progress, a track left with no key dropped. Never throws on what a page document holds.
  */
 declare function normalizeTracks(tracks: unknown): SceneTrack[];
+/**
+ * The clip-path of a layer `showing` % revealed, opening from `from`. The one shape behind a Scene's Clip track and the
+ * clipReveal action. `clip-path` has no logical sides, so Start and End take the direction from `inlineSign`.
+ */
+declare function revealClipPath(showing: number, from?: SceneRevealFrom, inlineSign?: 1 | -1): string;
 /** A numeric track's value at progress `p`. */
 declare function valueAt(keys: ReadonlyArray<SceneKey>, p: number): number;
 /**
@@ -79,6 +98,12 @@ interface SceneFrameOptions {
  * canvas zoom, on the server and with no measuring: the stage is the size container (`iox-design.css`).
  */
 declare function sceneFrame(tracks: ReadonlyArray<SceneTrack>, p: number, options?: SceneFrameOptions): SceneFrame;
+/** How far an unlit word still shows: readable as a shape, plainly not yet said. */
+declare const SCENE_WORD_DIM = 0.16;
+/** How many of a layer's words are lit at `p`, in %; null when it has no such track. */
+declare function sceneWordsLit(tracks: ReadonlyArray<SceneTrack>, p: number): number | null;
+/** Word `index` of `count`, with `lit` % lit: words light one after the other, each easing in as the last finishes. */
+declare function sceneWordOpacity(index: number, count: number, lit: number): number;
 /** A frame as kebab-case style declarations, for a string renderer. */
 declare function sceneFrameDeclarations(frame: SceneFrame): Record<string, string>;
 /** The attributes a node's own element carries — the same decision in all three render paths. The runtime reads them,
@@ -129,6 +154,13 @@ declare function sceneDisplayValue(tracks: ReadonlyArray<SceneTrack>, prop: Scen
  */
 declare function sceneColourKeyAt(tracks: ReadonlyArray<SceneTrack>, prop: SceneProp, p: number): string;
 declare function sceneHasKeyAt(tracks: ReadonlyArray<SceneTrack>, prop: SceneProp, p: number): boolean;
+/** Where a layer's reveal opens from: its track's direction, else where a new one would open from. */
+declare function sceneRevealFromOf(tracks: ReadonlyArray<SceneTrack>): SceneRevealFrom;
+/**
+ * Open a layer's reveal from `from`. With no reveal yet it starts one with a key at `p` holding the layer whole, so the
+ * direction is kept and nothing on screen changes until the author sets a second key.
+ */
+declare function withSceneRevealFrom(tracks: ReadonlyArray<SceneTrack>, from: SceneRevealFrom, p: number): SceneTrack[];
 /**
  * Set a key at `p`, in the author's units. A number is clamped to its bounds; a colour that is no colour changes nothing,
  * because `normalizeTracks` would drop it anyway and the author's other keys must survive.
@@ -275,22 +307,80 @@ declare class ScrollDriver {
     offsetFor(root: HTMLElement, p: number): number | null;
     /** Land on the next frame with no glide: a scrubber sets a position, and the author is waiting to see that moment. */
     settle(root: HTMLElement): void;
+    /**
+     * Hold every stage against the scroll, now. For a host that moves the scroll itself inside a frame (the canvas's
+     * Lenis): waiting for the scroll event paints that frame with the stage carried off its pin, up to a whole frame's
+     * scroll, which reads as a shake. Damping is untouched: only the pin has to be exact.
+     */
+    pinNow(): void;
     /** Something moved that no scroll or resize announces (the canvas's zoom). */
     wake(): void;
     destroy(): void;
     /** Read a root's stage and layers from its DOM: its own Scene's only, never a nested one's. */
     private readScene;
     private letGo;
+    private restoreWords;
     private readLayer;
     private remeasureAll;
     private measure;
     private readonly tick;
     private read;
     private write;
+    /** One opacity per word, and a write only for the few the scroll actually changed. */
+    private writeWords;
 }
 /** A page's Scenes, driven by one driver; null when it holds none, or when the visitor asked for less motion (the
  *  page's own CSS then lets each Scene flow). The live site's door. */
 declare function attachScenes(container: HTMLElement, options?: ScrollDriverOptions): ScrollDriver | null;
 
-export { SCENE_BUDGET, SCENE_DAMPING, SCENE_FLOW_RULES, SCENE_LENGTH, SCENE_MAX_SCREENS, SCENE_MIN_SCREENS, SCENE_PHONE_LENGTH, SCENE_PHONE_MAX_WIDTH, SCENE_REDUCED_MOTION_CSS, SCENE_STAGE_HEIGHT, SCENE_TRACK_DEFS, SCENE_WORDS, SceneAttribute, SceneProp, ScrollDriver, applySceneFirstFrame, attachScenes, buildSceneRecipe, colourAt, dampToward, movedSceneKey, normalizeTracks, sceneBudget, sceneColourKeyAt, sceneDisplayValue, sceneFirstFrame, sceneFrame, sceneFrameDeclarations, sceneHasKeyAt, sceneHeightForScreens, sceneKeyPosition, sceneLayersOf, sceneNodeAttributes, sceneRootOnPath, sceneScreensOf, sceneScrollState, sceneTrackDef, sceneTrackSpan, scenesIn, syncSceneAttributes, valueAt, withSceneKey, withoutSceneKey };
-export type { SceneBudget, SceneFrame, SceneFrameOptions, SceneFrameState, SceneKey, SceneLayerNode, SceneNodeSource, SceneTrack, SceneTrackDef, SceneTreeNode, SceneWords, ScrollDriverOptions };
+/**
+ * Text into pieces, in the browser only (premium sites SC3, Motion v2 §3c). A saved node keeps its plain text and the
+ * server sends it whole, so every word is in the raw response, editing never meets a piece, and there is no markup for
+ * hydration to disagree with. Each original text node is kept and put back as it was, never rebuilt from a string: a
+ * framework may hold that node, and a layer may hold live components.
+ */
+declare enum TextRevealBy {
+    Line = "line",
+    Word = "word"
+}
+/** Past these a text is plainly no heading: it fades whole, and lights up whole. */
+declare const REVEAL_PIECE_CAP = 120;
+declare const LIGHT_UP_PIECE_CAP = 300;
+interface TextPiece {
+    text: string;
+    /** False for the space between two words, which stays bare text so lines wrap exactly as they did. */
+    word: boolean;
+}
+/**
+ * A string as words and the space between them. With `keepLtrRuns` a run of words holding no RTL letter stays ONE word:
+ * an inline-block is neutral to the bidi algorithm, so "Studio Alma" inside a Hebrew heading, split, would read reversed.
+ */
+declare function textPieces(text: string, keepLtrRuns?: boolean): TextPiece[];
+interface SplitTextOptions {
+    cap: number;
+    /** Each piece in a clipping mask, to rise out of (and so an inline-block). Without it a piece is a plain inline span. */
+    mask?: boolean;
+    /** The element reads right-to-left. Only a mask needs to know. */
+    rtl?: boolean;
+}
+interface SplitText {
+    /** In reading order. With a mask, the moving part inside it. */
+    pieces: HTMLElement[];
+    /** Put every original text node back. Safe after the text was replaced: what is gone stays gone. */
+    restore(): void;
+}
+/** Split `root`'s text, or null when it holds none or more than `cap` pieces (nothing is changed then). */
+declare function splitText(root: HTMLElement, options: SplitTextOptions): SplitText | null;
+/** The line each piece stands on: 0, 0, 1, 1, 1, 2… Read once, as a reveal starts. */
+declare function lineIndexes(tops: ReadonlyArray<number>, heights: ReadonlyArray<number>): number[];
+declare function revealStagger(groups: number, by: TextRevealBy): number;
+/**
+ * Play a text reveal: each piece rises out of its mask, line by line or word by word. Returns ONE animation for the
+ * whole, so a runtime treats it as any other: it finishes when the last piece lands, and on finish or cancel the text
+ * is put back whole, which leaves nothing for a screen reader to stumble on and nothing to re-split on a resize. Null
+ * when there is nothing to split or it is being edited: the caller plays its plain fade.
+ */
+declare function playTextReveal(el: HTMLElement, by: TextRevealBy, timing: KeyframeAnimationOptions): Animation | null;
+
+export { LIGHT_UP_PIECE_CAP, REVEAL_PIECE_CAP, SCENE_BUDGET, SCENE_DAMPING, SCENE_FLOW_RULES, SCENE_LENGTH, SCENE_MAX_SCREENS, SCENE_MIN_SCREENS, SCENE_PHONE_LENGTH, SCENE_PHONE_MAX_WIDTH, SCENE_REDUCED_MOTION_CSS, SCENE_REVEAL_DEFAULT, SCENE_STAGE_HEIGHT, SCENE_TRACK_DEFS, SCENE_WORDS, SCENE_WORD_DIM, SceneAttribute, SceneProp, SceneRevealFrom, ScrollDriver, TextRevealBy, applySceneFirstFrame, attachScenes, buildSceneRecipe, colourAt, dampToward, lineIndexes, movedSceneKey, normalizeTracks, playTextReveal, revealClipPath, revealStagger, sceneBudget, sceneColourKeyAt, sceneDisplayValue, sceneFirstFrame, sceneFrame, sceneFrameDeclarations, sceneHasKeyAt, sceneHeightForScreens, sceneKeyPosition, sceneLayersOf, sceneNodeAttributes, sceneRevealFromOf, sceneRootOnPath, sceneScreensOf, sceneScrollState, sceneTrackDef, sceneTrackSpan, sceneWordOpacity, sceneWordsLit, scenesIn, splitText, syncSceneAttributes, textPieces, valueAt, withSceneKey, withSceneRevealFrom, withoutSceneKey };
+export type { SceneBudget, SceneFrame, SceneFrameOptions, SceneFrameState, SceneKey, SceneLayerNode, SceneNodeSource, SceneTrack, SceneTrackDef, SceneTreeNode, SceneWords, ScrollDriverOptions, SplitText, SplitTextOptions, TextPiece };

package/src/actions-core/element-actions.ts

@@ -31,6 +31,21 @@ export const ELEMENT_ACTION_DESCRIPTORS: readonly ActionDescriptor[] = Object.fr
     { type: 'scaleOut', labelKey: 'builder.actions.scaleOut', kind: 'animated', group: 'motion', builderBehaviour: 'run' },
     { type: 'rotate',   labelKey: 'builder.actions.rotate',   kind: 'animated', group: 'motion', builderBehaviour: 'run',
       params: [{ name: 'degrees', type: 'number', label: 'Degrees' }] },
+    // SC3: the reveals. Each opens from where the author says and rests as the element itself.
+    { type: 'clipReveal', labelKey: 'builder.actions.clipReveal', kind: 'animated', group: 'motion', builderBehaviour: 'run',
+      params: [{ name: 'from', type: 'string', label: 'builder.actions.params.revealFrom', options: [
+          { value: 'bottom', labelKey: 'builder.scene.from.bottom' },
+          { value: 'top', labelKey: 'builder.scene.from.top' },
+          { value: 'start', labelKey: 'builder.scene.from.start' },
+          { value: 'end', labelKey: 'builder.scene.from.end' },
+          { value: 'centre', labelKey: 'builder.scene.from.centre' },
+      ] }] },
+    { type: 'zoomOut', labelKey: 'builder.actions.zoomOut', kind: 'animated', group: 'motion', builderBehaviour: 'run' },
+    { type: 'revealText', labelKey: 'builder.actions.revealText', kind: 'animated', group: 'motion', builderBehaviour: 'run',
+      params: [{ name: 'by', type: 'string', label: 'builder.actions.params.revealBy', options: [
+          { value: 'line', labelKey: 'builder.actions.params.byLine' },
+          { value: 'word', labelKey: 'builder.actions.params.byWord' },
+      ] }] },
 
     // ── Visibility (shipped) ─────────────────────────────────────────────────
     { type: 'show',             labelKey: 'builder.actions.show',             kind: 'instant', group: 'visibility', builderBehaviour: 'run' },

package/src/scene-core/public-api.ts

@@ -8,3 +8,4 @@ export * from './scene';
 export * from './scene-edit';
 export * from './scene-recipe';
 export * from './scroll-driver';
+export * from './split-text';

package/src/scene-core/scene-edit.ts

@@ -1,6 +1,6 @@
 import { SceneRole } from '@vectoriox/iox-ui/composite-core';
 
-import { normalizeTracks, SceneKey, SceneNodeSource, SceneProp, SceneTrack, valueAt } from './scene';
+import { normalizeTracks, SCENE_REVEAL_DEFAULT, SceneKey, SceneNodeSource, SceneProp, SceneRevealFrom, SceneTrack, valueAt } from './scene';
 
 /**
  * Authoring a Scene (premium-sites plan §5b, SC2): the decisions the builder's timeline and its panel share, so neither
@@ -43,7 +43,8 @@ export const SCENE_TRACK_DEFS: ReadonlyArray<SceneTrackDef> = [
     { prop: SceneProp.Scale, colour: false, rest: 1, min: 0, max: 2000, step: 1, factor: 100, unit: PERCENT },
     { prop: SceneProp.Rotate, colour: false, rest: 0, min: -720, max: 720, step: 1, factor: 1, unit: DEGREES },
     { prop: SceneProp.Opacity, colour: false, rest: 1, min: 0, max: 100, step: 1, factor: 100, unit: PERCENT },
-    { prop: SceneProp.Clip, colour: false, rest: 0, min: 0, max: 50, step: 1, factor: 1, unit: PERCENT },
+    { prop: SceneProp.Clip, colour: false, rest: 100, min: 0, max: 100, step: 1, factor: 1, unit: PERCENT },
+    { prop: SceneProp.Words, colour: false, rest: 100, min: 0, max: 100, step: 1, factor: 1, unit: PERCENT },
     { prop: SceneProp.Ground, colour: true, rest: 0, min: 0, max: 0, step: 0, factor: 1, unit: '' },
     { prop: SceneProp.Ink, colour: true, rest: 0, min: 0, max: 0, step: 0, factor: 1, unit: '' },
 ];
@@ -91,10 +92,25 @@ function replaceTrack(tracks: ReadonlyArray<SceneTrack>, prop: SceneProp, keys:
     if (!keys.length) return rest;
     const at = tracks.findIndex(t => t.prop === prop);
     const next = [...rest];
-    next.splice(at < 0 ? rest.length : at, 0, { prop, keys });
+    const from = prop === SceneProp.Clip ? { from: tracks[at]?.from ?? SCENE_REVEAL_DEFAULT } : {};
+    next.splice(at < 0 ? rest.length : at, 0, { prop, ...from, keys });
     return next;
 }
 
+/** Where a layer's reveal opens from: its track's direction, else where a new one would open from. */
+export function sceneRevealFromOf(tracks: ReadonlyArray<SceneTrack>): SceneRevealFrom {
+    return trackOf(tracks, SceneProp.Clip)?.from ?? SCENE_REVEAL_DEFAULT;
+}
+
+/**
+ * Open a layer's reveal from `from`. With no reveal yet it starts one with a key at `p` holding the layer whole, so the
+ * direction is kept and nothing on screen changes until the author sets a second key.
+ */
+export function withSceneRevealFrom(tracks: ReadonlyArray<SceneTrack>, from: SceneRevealFrom, p: number): SceneTrack[] {
+    if (!trackOf(tracks, SceneProp.Clip)) return [...tracks, { prop: SceneProp.Clip, from, keys: [[sceneKeyPosition(p), sceneTrackDef(SceneProp.Clip).rest]] }];
+    return tracks.map(track => (track.prop === SceneProp.Clip ? { ...track, from } : track));
+}
+
 /**
  * Set a key at `p`, in the author's units. A number is clamped to its bounds; a colour that is no colour changes nothing,
  * because `normalizeTracks` would drop it anyway and the author's other keys must survive.

package/src/scene-core/scene.ts

@@ -20,14 +20,28 @@ export enum SceneProp {
     Rotate = 'rotate',
     /** 0–1. */
     Opacity = 'opacity',
-    /** Inset from every side, in % of the layer (0 = whole, 50 = gone). */
+    /** How much of the layer shows, in % (100 = whole, 0 = gone). Its track's `from` says where it opens from. */
     Clip = 'clip',
+    /** How many of the layer's words are lit, in % (100 = all): the word-by-word light-up. Split in the browser only. */
+    Words = 'words',
     /** The layer's background colour. */
     Ground = 'ground',
     /** The layer's text colour. */
     Ink = 'ink',
 }
 
+/** Where a reveal opens from. Start and End mirror in RTL. */
+export enum SceneRevealFrom {
+    Centre = 'centre',
+    Bottom = 'bottom',
+    Top = 'top',
+    Start = 'start',
+    End = 'end',
+}
+
+/** What a reveal opens from when nobody has said: the page's own direction of travel, upward as it scrolls. */
+export const SCENE_REVEAL_DEFAULT = SceneRevealFrom.Bottom;
+
 /** One key: at progress `[0]` (0–1) the property holds `[1]`: a number, or a colour for Ground and Ink. */
 export type SceneKey = readonly [number, number | string];
 
@@ -35,6 +49,8 @@ export interface SceneTrack {
     prop: SceneProp;
     /** Ascending by progress. Between two keys the value eases (smoothstep); outside them it holds the nearest. */
     keys: ReadonlyArray<SceneKey>;
+    /** A Clip track's direction. */
+    from?: SceneRevealFrom;
 }
 
 /** What a node carries (both a builder node and a saved one). */
@@ -76,6 +92,9 @@ const smoothstep = (t: number): number => t * t * (3 - 2 * t);
 const COLOUR = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\([\d\s.,%/]+\)|var\(--iox-[\w-]+\))$/i;
 const COLOUR_PROPS: ReadonlySet<SceneProp> = new Set([SceneProp.Ground, SceneProp.Ink]);
 const ALL_PROPS: ReadonlySet<string> = new Set(Object.values(SceneProp));
+const REVEAL_FROMS: ReadonlySet<string> = new Set(Object.values(SceneRevealFrom));
+const PERCENT = 100;
+const clampPercent = (v: number): number => Math.min(PERCENT, Math.max(0, v));
 
 function validKey(key: unknown, colour: boolean): key is SceneKey {
     if (!Array.isArray(key) || key.length !== 2) return false;
@@ -98,11 +117,36 @@ export function normalizeTracks(tracks: unknown): SceneTrack[] {
             .filter(key => validKey(key, COLOUR_PROPS.has(prop)))
             .slice()
             .sort((a, b) => a[0] - b[0]);
-        if (keys.length) out.push({ prop, keys });
+        if (!keys.length) continue;
+        out.push(prop === SceneProp.Clip ? clipTrack(keys, (track as SceneTrack).from) : { prop, keys });
     }
     return out;
 }
 
+/**
+ * A Clip track with a direction. One with none was saved when a reveal could only close in from every side, its value
+ * the inset per side (50 = gone): it reads as the same movement, from the centre, in % showing.
+ */
+function clipTrack(keys: ReadonlyArray<SceneKey>, from: unknown): SceneTrack {
+    if (typeof from === 'string' && REVEAL_FROMS.has(from)) return { prop: SceneProp.Clip, from: from as SceneRevealFrom, keys };
+    return { prop: SceneProp.Clip, from: SceneRevealFrom.Centre, keys: keys.map(([p, inset]): SceneKey => [p, clampPercent(PERCENT - Number(inset) * 2)]) };
+}
+
+/**
+ * The clip-path of a layer `showing` % revealed, opening from `from`. The one shape behind a Scene's Clip track and the
+ * clipReveal action. `clip-path` has no logical sides, so Start and End take the direction from `inlineSign`.
+ */
+export function revealClipPath(showing: number, from: SceneRevealFrom = SCENE_REVEAL_DEFAULT, inlineSign: 1 | -1 = 1): string {
+    const hidden = round(PERCENT - clampPercent(showing));
+    switch (from) {
+        case SceneRevealFrom.Centre: return `inset(${round(hidden / 2)}%)`;
+        case SceneRevealFrom.Top: return `inset(0 0 ${hidden}% 0)`;
+        case SceneRevealFrom.Start: return inlineSign === 1 ? `inset(0 ${hidden}% 0 0)` : `inset(0 0 0 ${hidden}%)`;
+        case SceneRevealFrom.End: return inlineSign === 1 ? `inset(0 0 0 ${hidden}%)` : `inset(0 ${hidden}% 0 0)`;
+        default: return `inset(${hidden}% 0 0 0)`;
+    }
+}
+
 /** The two keys around `p` and how far between them it eases. */
 function span(keys: ReadonlyArray<SceneKey>, p: number): { a: SceneKey; b: SceneKey; f: number } {
     const at = clamp01(p);
@@ -154,14 +198,14 @@ const TRANSFORM_REST: Readonly<Partial<Record<SceneProp, number>>> = { [ScenePro
 export function sceneFrame(tracks: ReadonlyArray<SceneTrack>, p: number, options: SceneFrameOptions = {}): SceneFrame {
     const frame: SceneFrame = {};
     const moves: Partial<Record<SceneProp, number>> = {};
-    for (const { prop, keys } of tracks) {
+    for (const { prop, keys, from } of tracks) {
         if (prop in TRANSFORM_REST) moves[prop] = valueAt(keys, p);
         else if (prop === SceneProp.Opacity) {
             const opacity = clamp01(valueAt(keys, p));
             frame.opacity = String(opacity);
             frame.pointerEvents = opacity > 0 ? '' : 'none';
         }
-        else if (prop === SceneProp.Clip) frame.clipPath = `inset(${Math.min(50, Math.max(0, valueAt(keys, p)))}%)`;
+        else if (prop === SceneProp.Clip) frame.clipPath = revealClipPath(valueAt(keys, p), from ?? SceneRevealFrom.Centre, options.inlineSign ?? 1);
         else if (prop === SceneProp.Ground) frame.backgroundColor = colourAt(keys, p);
         else if (prop === SceneProp.Ink) frame.color = colourAt(keys, p);
     }
@@ -173,6 +217,20 @@ export function sceneFrame(tracks: ReadonlyArray<SceneTrack>, p: number, options
     return frame;
 }
 
+/** How far an unlit word still shows: readable as a shape, plainly not yet said. */
+export const SCENE_WORD_DIM = 0.16;
+
+/** How many of a layer's words are lit at `p`, in %; null when it has no such track. */
+export function sceneWordsLit(tracks: ReadonlyArray<SceneTrack>, p: number): number | null {
+    const track = tracks.find(t => t.prop === SceneProp.Words);
+    return track ? clampPercent(valueAt(track.keys, p)) : null;
+}
+
+/** Word `index` of `count`, with `lit` % lit: words light one after the other, each easing in as the last finishes. */
+export function sceneWordOpacity(index: number, count: number, lit: number): number {
+    return round(SCENE_WORD_DIM + (1 - SCENE_WORD_DIM) * clamp01((lit / PERCENT) * count - index));
+}
+
 const CSS_NAME: Readonly<Record<keyof SceneFrame, string>> = {
     transform: 'transform',
     opacity: 'opacity',
@@ -204,7 +262,11 @@ export function sceneNodeAttributes(node: SceneNodeSource | null | undefined): R
 /** The frame a layer ships in from the server: where it stands before anyone has scrolled. Without it the page would
  *  paint every layer at once, and then jump when the script arrives. */
 export function sceneFirstFrame(node: SceneNodeSource | null | undefined): SceneFrame {
-    return sceneFrame(normalizeTracks(node?.sceneTracks), 0);
+    const tracks = normalizeTracks(node?.sceneTracks);
+    const frame = sceneFrame(tracks, 0);
+    // The words are split in the browser, so until then the whole layer stands for them, or it paints lit and then dims.
+    const lit = sceneWordsLit(tracks, 0);
+    return lit !== null && lit < PERCENT && frame.opacity === undefined ? { ...frame, opacity: String(SCENE_WORD_DIM) } : frame;
 }
 
 /**

package/src/scene-core/scroll-driver.ts

@@ -1,6 +1,7 @@
 import { SceneRole } from '@vectoriox/iox-ui/composite-core';
 
-import { normalizeTracks, SCENE_PHONE_MAX_WIDTH, SceneAttribute, sceneFrame, SceneFrame, SceneTrack } from './scene';
+import { normalizeTracks, SCENE_PHONE_MAX_WIDTH, SceneAttribute, sceneFrame, SceneFrame, sceneWordOpacity, sceneWordsLit, SceneTrack } from './scene';
+import { LIGHT_UP_PIECE_CAP, SplitText, splitText } from './split-text';
 
 /**
  * The ONE scroll loop (premium-sites plan §5b, SC0). Every Scene on a page reads one progress value from it, on the
@@ -65,6 +66,10 @@ interface Layer {
     last: SceneFrame;
     /** Write every property on the next frame, changed or not: a measure may have moved what a frame resolves to. */
     stale: boolean;
+    /** Its words, split while a Words track plays them. Null until the first frame that needs them. */
+    words: SplitText | null;
+    /** Too many words to split: it holds as it is, and is not counted again on every frame. */
+    wordsRefused: boolean;
 }
 
 interface Scene {
@@ -127,7 +132,10 @@ export class ScrollDriver {
         scene.mutations?.disconnect();
         this.resize?.unobserve(root);
         if (scene.stage) scene.stage.style.removeProperty('translate');
-        for (const layer of scene.layers) layer.el.style.removeProperty('will-change');
+        for (const layer of scene.layers) {
+            layer.el.style.removeProperty('will-change');
+            this.restoreWords(layer);
+        }
         this.scenes.delete(root);
     }
 
@@ -161,6 +169,18 @@ export class ScrollDriver {
         this.wake();
     }
 
+    /**
+     * Hold every stage against the scroll, now. For a host that moves the scroll itself inside a frame (the canvas's
+     * Lenis): waiting for the scroll event paints that frame with the stage carried off its pin, up to a whole frame's
+     * scroll, which reads as a shake. Damping is untouched: only the pin has to be exact.
+     */
+    pinNow(): void {
+        if (!this.options.pin) return;
+        for (const scene of this.scenes.values()) {
+            if (scene.stage) scene.stage.style.setProperty('translate', `0 ${this.read(scene).local}px`);
+        }
+    }
+
     /** Something moved that no scroll or resize announces (the canvas's zoom). */
     wake(): void {
         if (this.frame) return;
@@ -195,12 +215,18 @@ export class ScrollDriver {
     private letGo(layer: Layer): void {
         layer.el.style.removeProperty('will-change');
         for (const key of Object.keys(layer.last) as (keyof SceneFrame)[]) layer.el.style[key] = '';
+        this.restoreWords(layer);
+    }
+
+    private restoreWords(layer: Layer): void {
+        layer.words?.restore();
+        layer.words = null;
     }
 
     private readLayer(el: HTMLElement, scene: Scene): Layer {
         const previous = scene.layers.find(layer => layer.el === el);
         el.style.setProperty('will-change', TRANSFORM_WILL_CHANGE);
-        return { el, tracks: parseTracks(el.getAttribute(SceneAttribute.Tracks)), phoneTracks: parseTracks(el.getAttribute(SceneAttribute.PhoneTracks)), last: previous?.last ?? {}, stale: true };
+        return { el, tracks: parseTracks(el.getAttribute(SceneAttribute.Tracks)), phoneTracks: parseTracks(el.getAttribute(SceneAttribute.PhoneTracks)), last: previous?.last ?? {}, stale: true, words: previous?.words ?? null, wordsRefused: false };
     }
 
     private remeasureAll(): void {
@@ -248,6 +274,7 @@ export class ScrollDriver {
     private write(scene: Scene): void {
         for (const layer of scene.layers) {
             const tracks = scene.phone && layer.phoneTracks.length ? layer.phoneTracks : layer.tracks;
+            this.writeWords(layer, sceneWordsLit(tracks, scene.progress));
             const frame = sceneFrame(tracks, scene.progress, { inlineSign: scene.inlineSign });
             for (const key of Object.keys(frame) as (keyof SceneFrame)[]) {
                 if (layer.stale || frame[key] !== layer.last[key]) layer.el.style[key] = frame[key] ?? '';
@@ -260,6 +287,28 @@ export class ScrollDriver {
             layer.stale = false;
         }
     }
+
+    /** One opacity per word, and a write only for the few the scroll actually changed. */
+    private writeWords(layer: Layer, lit: number | null): void {
+        if (lit === null) {
+            this.restoreWords(layer);
+            return;
+        }
+        // Gone from the page: the text was replaced under it (an edit on the canvas), so its words are new.
+        if (layer.words && !layer.words.pieces[0]?.isConnected) layer.words = null;
+        if (!layer.words && !layer.wordsRefused) {
+            layer.words = splitText(layer.el, { cap: LIGHT_UP_PIECE_CAP });
+            layer.wordsRefused = !layer.words;
+            // The whole layer stood for its words until now (`sceneFirstFrame`); an Opacity track's frame writes after this.
+            layer.el.style.removeProperty('opacity');
+            layer.stale = true;
+        }
+        const pieces = layer.words?.pieces ?? [];
+        pieces.forEach((piece, i) => {
+            const opacity = String(sceneWordOpacity(i, pieces.length, lit));
+            if (piece.style.opacity !== opacity) piece.style.opacity = opacity;
+        });
+    }
 }
 
 /** A page's Scenes, driven by one driver; null when it holds none, or when the visitor asked for less motion (the