Callout / highlight box

콜아웃·하이라이트 상자

A box or leader line points out an area without enlarging the screen.

···
html
<div class="stage"><div class="screen"><div class="title">WORKFLOW</div><div class="item"><b>01</b><span>Choose a file</span></div><div class="item active"><b>02</b><span>Review settings</span></div><div class="item"><b>03</b><span>Export result</span></div></div>
  <svg class="leader" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M58 55 C72 55 68 30 83 30"/></svg><div class="box"></div><div class="callout">STEP 02 <i></i></div>
</div>
css
.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.screen{position:absolute;left:15%;top:14%;width:53%;height:70%;padding:5%;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 20px #0001}
.title{font:9px ui-monospace,monospace;letter-spacing:.12em;color:var(--muted);margin-bottom:9%}
.item{display:flex;align-items:center;gap:10px;height:22%;border-top:1px solid var(--line);font:clamp(9px,2vw,13px) system-ui}
.item b{font:10px ui-monospace,monospace;color:var(--muted)}.item span{color:var(--fg)}
.box{position:absolute;left:24%;top:47%;width:38%;height:19%;border:2px solid var(--accent);border-radius:3px;animation:pulse 1.8s ease-in-out infinite}
.leader{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.leader path{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-dasharray:3 2;animation:dash 1.2s linear infinite}
.callout{position:absolute;left:73%;top:23%;padding:8px 10px;border:1px solid var(--accent);background:var(--surface);font:10px ui-monospace,monospace;color:var(--fg)}
.callout i{position:absolute;left:-5px;bottom:-5px;width:8px;height:8px;background:var(--surface);border-left:1px solid var(--accent);border-bottom:1px solid var(--accent);transform:rotate(45deg)}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.035);opacity:1}}
@keyframes dash{to{stroke-dashoffset:-10}}

A callout or highlight box layers an outline, circle, or arrow over a target. Because the screen keeps its original size, spatial relationships remain visible.

Place a transparent border at the target's coordinates and connect it to a short label with a leader line. The demo repeatedly frames one item and draws a line to its callout.

A spotlight dims the whole surround; a callout marks the target with a shape. Leave room for the outline and label so they do not cover important text in the original screen.

When to use

Use it when you want to identify a small target while keeping its location and surrounding context visible.

Open as page ↗

Suggest an entry

Tell us about a film term or effect that’s missing. We review each suggestion.