Keyframes UI

The Keyframes component provides a visual interface in the editor for inspecting and controlling viewport-specific style changes. It represents style adjustments as discrete keyframes across the viewport range, enabling developers to see which styles apply at which breakpoints.

Table of Contents

Key concepts

  • SpectrumSet:
    Keyframes are derived from a SpectrumSet, a data structure generated from the block’s style rules. Each spectrum represents a property state at a specific viewport, including:
    • saves – persisted styles
    • changes – unsaved editor changes
    • removes – styles marked for removal
    • css – the compiled CSS for the viewport
    • viewport and priority – control ordering and range The SpectrumSet is built by the Generator class, which compares the current and previous viewport states, merges valid and removed styles, and generates ordered spectrums that feed both rendering and UI components.
  • Keyframe generation:
    The Keyframes UI generates visual keyframes from the SpectrumSet. The system ensures a default keyframe at viewport 0 and creates additional keyframes as needed, reflecting style changes, removals, and saved states.
  • Interactive visualization:
    Each keyframe is rendered as a UI element whose width represents the affected viewport range. Keyframes indicate:
    • changes – unsaved modifications
    • removes – removed styles
    • saves – persisted styles
  • Highlighting and pairing:
    Selecting a keyframe highlights the corresponding style in the inspector for editing the affected viewport range.
  • Responsive calculation:
    Keyframe widths are calculated dynamically based on the editor’s current viewport, ensuring accurate visual representation across different layouts.
  • Integration with block state:
    The Keyframes component uses the Quantum Viewports store to track:
    • the active viewport
    • iframe dimensions
    • editor selection
    • keyframe states (saves, changes, removes)

Future enhancements

  • In upcoming releases, changes and removes will be stored directly in the block attributes to allow full navigation in the editor history (undo/redo). Using a separate store currently prevents proper history tracking.
  • Spectrum objects will be implemented as explicit classes to improve accessibility and ease of interaction with the underlying style data.

Purpose

The Keyframes UI bridges the raw viewport style data with the editor experience. It allows developers to visualize and control style changes across breakpoints while preserving consistency with the underlying SpectrumSet and CSS generation.