Interaction

Hover github, orocoa or star to reveal its image; pointer movement shifts and tilts it. Tab reveals, arrow keys switch words, Escape dismisses. Tap to pin; tap again or outside to close.

States

Images enter from opacity 0 and scale 0.94 to opacity 1 and scale 1. Preferred position above; text is centered; rotated bounds stay inside the canvas and images scale down to fit the space beside the paragraph.

Timing

Enter 200 ms, exit 150 ms, with a fixed cubic Bezier ease-out. Pointer following uses a short transition of up to 160 ms. Observation speed only changes runtime clocks.

Enter and exit

Leaving or blurring the word fades and shrinks the image from its current pose. A tapped preview remains until dismissed. The image does not intercept pointer events.

Repeated input and interruption

Rapid changes retarget the latest word without queuing. The toolbar demonstrates orocoa entering, holding for 800 ms and leaving. Pause preserves both animation and demo progress; Play resumes. Hover, taps, focus and observation speed are not serialized.

Reduced motion

Show and dismiss instantly with no tilt or animation; keyboard, taps and image content remain available.

Image preview settings

Position above; size 200px; aspect 1; rotation 12°; offset 15px; radius 12px; shadow true; target padding 4px.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "hover-preview",
  "durationMs": 200,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "hoverPreview": {
    "imagePosition": "above",
    "exitMs": 150,
    "maxRotation": 12,
    "maxOffset": 15,
    "imageSize": 200,
    "aspect": 1,
    "radius": 12,
    "shadow": true,
    "targetPadding": 4
  }
}

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: Original implementation. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.