ef-focus-overlay

Hover highlight that tracks the focused element inside an ef-preview.

Renders a position: fixed tinted box over the currently hovered temporal element. Must be a descendant of ef-preview, which provides focusedElementContext. The overlay position is updated every animation frame via getBoundingClientRect.

<ef-preview>
  <ef-timegroup id="demo" mode="fixed" duration="5s" class="w-[1920px] h-[1080px] bg-slate-900 flex items-center justify-center">
    <style>
      @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.08); }
      }
      .demo-text { animation: pulse 2.4s ease-in-out infinite; display: inline-block; }
    </style>
    <ef-text class="demo-text text-white text-7xl font-bold">Hello</ef-text>
    <ef-focus-overlay style="--ef-focus-overlay-color: #6366f1;"></ef-focus-overlay>
  </ef-timegroup>
</ef-preview>

<ef-controls target="demo">
  <div class="fo-chrome">
    <ef-toggle-play>
      <button slot="play" class="fo-btn">▶</button>
      <button slot="pause" class="fo-btn">⏸</button>
    </ef-toggle-play>
    <span class="fo-hint">Hover over elements inside the composition to see the overlay</span>
  </div>
</ef-controls>

<style>
  .fo-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .fo-btn { cursor: pointer; padding: 4px 10px; font-size: 13px; }
  .fo-hint { font-size: 11px; opacity: 0.4; }
</style>

CSS custom properties:

Property	Default	Description
`--ef-focus-overlay-color`	`--ef-color-primary`	Outline and background tint color