Interaction

Enter the actual component to play; leave to exit. Card whitespace does not trigger it. Keyboard focus and blur behave the same way. The detail toolbar plays both sides from initial to final and back once; loading effects follow their loop setting. Pause holds the current display and resumes from the same progress.

States

[data-part="face"] / backgroundColor: #ffffff → #171717; [data-part="face"] / color: #171717 → #ffffff; [data-part="root"] / x: 0 → 0; [data-part="root"] / y: 0 → 0; [data-part="root"] / scale: 1 → 1.

Timing

Total duration 220 ms; trigger delay 0 ms; cubic-bezier(0.22, 1, 0.36, 1). Each track follows its configured start / span and times.

Enter and exit

Enter using the forward keyframes. Exit reverses keyframes, phase order and time points. Hold the final state without repeating.

Repeated input and interruption

Stop the previous trajectory, use the current display as the first frame, and move to the latest target. Actions do not queue. Each new loop cycle starts at the cycle’s configured start.

Reduced motion

Follow prefers-reduced-motion: skip delay, loops and animation and show the target state immediately. Preview speed is observation state and is never saved in the configuration.

Default configuration

These values come from the maintained default configuration. Editor drafts and exported changes can differ.

{
  "schemaVersion": 2,
  "recipeId": "hover-invert",
  "durationMs": 220,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [
    {
      "part": "face",
      "property": "backgroundColor",
      "values": [
        "#ffffff",
        "#171717"
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 1
    },
    {
      "part": "face",
      "property": "color",
      "values": [
        "#171717",
        "#ffffff"
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 1
    }
  ]
}

Source code and reuse

The corresponding GitHub example contains the public renderer, default configuration and runnable entry point. Read the interaction notes and preserve the included third-party and font notices when reusing it. The complete website editor is maintained separately.

Using it in your own project

Open the editor to run the actual preview and compare changes. This document does not run a separate imitation. Recheck content, input, focus and layout after integrating an export.

Catalog provenance label: Reprise. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.