Spotlight Callout

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Label *

  label · string

  The callout headline, what the spotlit thing is or does. Three to six words; it sets on one or two lines above the leader line.

  now: Start the render here

• Note

  note · string

  One supporting sentence under the label. A callout is a pointer, not a paragraph. Keep it to a single clause.

  now: One button turns the typed brief into a finished scene.

• Step

  step · string

  Tiny mono kicker above the label, e.g. 'Step 02' or 'Start here'. Omit for an unnumbered annotation.

  now: Step 02

• Target

  target · "action" | "search" | "nav" | "row" | "custom"

  Which element of the synthesised panel the hole opens on. 'action' is the primary button, 'search' the field beside it, 'nav' the current sidebar item, 'row' a list row, 'custom' the `focus` rect.

  now: action

• Target row

  targetRow · number

  Which list row to spotlight, 1-based, when `target` is 'row'. Clamped to the number of rows drawn.

  now: 2

• Focus

  focus · object

  The spotlight rect, in frame fractions so it survives a change of aspect. Only read when `target` is 'custom'.

  now: object

• Panel title

  panelTitle · string

  Section heading in the panel behind the scrim. One or two words. It is set dressing, and its initial doubles as the app's logo mark.

  now: Workspace

• Action label

  actionLabel · string

  Label on the panel's primary button. With the default target this is the one piece of UI copy the spotlight actually lets you read, so make it the verb you are teaching.

  now: Render scene

• Rows

  rows · number

  How many list rows the panel draws. They divide the panel body, so more rows means tighter rows.

  now: 5

• Dim

  dim · number

  How far the scrim darkens everything outside the hole. On a dark brand this bites hard, much past 0.7 the surrounding UI stops reading as context at all; a light brand will take 0.8.

  now: 0.58

• Softness

  softness · number

  Feather on the hole edge. 0 is a near-hard cut that looks like a mask; 1 is a wide falloff that looks like a lamp. Mid values read as light.

  now: 0.5

• Ring

  ring · boolean

  Draw a hairline accent rectangle just outside the hole. Turn it off when the light alone is enough.

  now: true

• Brand

  brand · string

  Brand token id, one of the keys of BRANDS.

  now: slate