Motion UIComponentsComponent

Scroll spotlight

Copy lines that brighten as they cross a reading band, driving a sticky product visual.

API reference

Components

`<ScrollSpotlight />`

Provider for the shared active index and motion mode. Renders no DOM.

`focusOffset?`

number = 45

Reading-band inset as a percentage of viewport height. Default 45.

`dimmedOpacity?`

number = 0.4

Resting opacity for non-active copy lines. Default 0.4.

`revealScale?`

number = 1.03

Scale the visual reveals from. Dropped under calm. Default 1.03.

`initialItem?`

number = 0

Active item index before any line crosses the band. Default 0.

`initialLine?`

string = ""

Active lineId before any scroll. Default "".

`children?`

ReactNode

Walkthrough children: copy column, rail, stage and visuals.

`<SpotlightCopy />`

Walkthrough copy line that dims until it crosses the reading band.

`tag`

"h2" | "h3" | "h4" | "p"

Element to render.

`lineId`

string

Stable id for this line, unique across the walkthrough.

`itemIndex`

number

Item index this line belongs to.

`id?`

string

DOM id for aria-labelledby wiring.

`className?`

string

Merged onto the element.

`children?`

ReactNode

Line text.

`<SpotlightRail />`

Discrete step-dot column for the walkthrough.

`count`

number

Number of step dots (one per walkthrough item).

`className?`

string

Merged onto the <ol>.

`<SpotlightStage />`

Fixed 4:3 stage for product visuals.

`children?`

ReactNode

Stacked SpotlightVisuals or a single inline visual.

`className?`

string

Merged onto the stage.

`<SpotlightVisual />`

Product visual with sticky crossfade or inline scroll reveal.

`index`

number

Item index matched against the active index.

`sticky?`

boolean = false

Sticky crossfade (true) or inline scroll reveal (false).

`className?`

string

Merged onto the animating panel.

`children?`

ReactNode | ((state: SpotlightVisualState) => ReactNode)

Visual content, or a render function receiving reveal state.

Hooks

`useSpotlight`

Read active index and motion mode from the nearest ScrollSpotlight.

useSpotlight(): SpotlightState

Returns

`activeItem`

number

Active item index (0-based).

`activeLine`

string

Active line id from the last SpotlightCopy to cross the band.

`fullMotion`

boolean

True when full motion runs (sticky column and scroll tracking live).

`calm`

boolean

True under the calm reduced-motion strategy.

`still`

boolean

True under the off reduced-motion strategy.