skills/ai-host-video/references/motion-style-luminous-interface.md

# Luminous Interface

Use this direction for systems, software, data and process explanation. Its polish
comes from readable state changes, careful alignment and purposeful light. The
system's logic should be understandable before any surface treatment is added.

## Still composition

- Establish a clear parent/child relationship: a central result with subordinate
  inputs, a ranked list, or a process with an identifiable current state.
- Use clean sans type, concise labels and legible tabular figures where values
  change. Space carries hierarchy before borders or containers do.
- Align modules precisely. Shallow overlap or restrained rounded geometry can
  suggest depth without turning every item into a floating panel.
- Begin with dark neutral surfaces and one luminous signal colour, adapting to
  the material when a light treatment communicates better.
- Use connectors, state markers, progress shapes and a restrained glow only where
  they identify an active relationship. Keep critical text crisp and high-contrast.

## Motion vocabulary

- **Show causality:** an input changes, its connection activates, then the output
  updates. Preserve enough separation for the viewer to understand the order.
- **Reveal a dependency:** a line develops toward the affected node, which changes
  state when the connection arrives.
- **Reprioritize:** an existing row moves into prominence while its neighbours
  make room, keeping labels and values attached to their objects.
- **Resolve work:** a progress state becomes a result, retaining its position or
  outline so the viewer recognizes the transformation.
- **Signal attention:** a brief edge emphasis or light sweep marks the meaningful
  change, then returns to a quiet surface.

## Adjustable starting points

- Try 180–350 ms for a local state change and 350–650 ms for a larger rearrangement,
  with a clean ease-out or balanced ease-in-out between established states.
- A cause may lead its payoff by about 80–160 ms; adjust until the relationship
  reads clearly rather than treating the interval as a universal law.
- A small scale settle around 0.98–1 or a shift around 2–5% of a module's width
  can separate depth levels. Use it only if it helps the hierarchy.
- Counters and their diagrams share progress and finish together, without overshoot.

## Example development

A selected input activates a connector to its result. The result updates, then
expands into a comparison with the earlier state held beside it. Its original label
remains in place as an anchor. Light follows the change once; the comparison then
holds without pulsing so the difference can be read.

## Standalone typography

Place a meaningful numeral or short result on an open field with a subordinate label.
As the state changes, update the focal text at its existing anchor and transfer the
accent to the result. Precise spacing and a crisp readable hold carry the system's
character without a dashboard, panel or glow around the letters.

## Avoid

Generic dashboard mockups, glass on every object, decorative pills, low-contrast
glow, continuous scanning and invented numbers or states. An illustrative system
must not appear to be a captured interface or verified result when it is not.