Pinch

Multi-touch scaling gesture.

html

<div class="pinch-demo" data-scale="100" style="--accent:#BFD9F2;">
  <div class="pinch-demo__frame">
    <svg class="pinch-demo__img" width="64" height="64" viewBox="0 0 64 64" aria-hidden="true"><rect width="64" height="64" rx="8" fill="var(--accent)" /><circle cx="24" cy="26" r="7" fill="#FAF7F2" /><path d="M8 50l16-16 10 8 12-14 10 22z" fill="#FAF7F2" /></svg>
    <div class="pinch-demo__hands">
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#241430" stroke-width="2" aria-hidden="true"><path d="M9 21V11M9 11l-4 3M15 21V11M15 11l4 3" /></svg>
    </div>
  </div>
  <p class="pinch-demo__caption">Two-finger pinch to zoom &mdash; <strong>100%</strong>. No touchscreen? Use Ctrl/Cmd + scroll, or the buttons below.</p>
  
  <div class="pinch-demo__buttons">
    <button type="button" class="pinch-demo__btn" aria-label="Zoom out">&minus;</button>
    <button type="button" class="pinch-demo__btn" aria-label="Zoom in">+</button>
  </div>
  
</div>
<style>
.pinch-demo { width: 280px; font: 14px system-ui, sans-serif; color: #241430; }
.pinch-demo__frame { position: relative; height: 110px; border-radius: 12px; background: #24143010; display: grid; place-items: center; overflow: hidden; }
.pinch-demo__img { transform: scale(1); }
.pinch-demo[data-scale="150"] .pinch-demo__img { transform: scale(1.5); }
.pinch-demo[data-scale="200"] .pinch-demo__img { transform: scale(2); }
@media (prefers-reduced-motion: no-preference) {
  .pinch-demo__img { transition: transform .2s; }
}
.pinch-demo__hands { position: absolute; bottom: 8px; right: 10px; opacity: .5; }
.pinch-demo__caption { margin: 10px 0 0; font-size: 12px; color: #241430aa; }
.pinch-demo__buttons { margin-top: 10px; display: flex; gap: 6px; }
.pinch-demo__btn { width: 30px; height: 30px; border-radius: 7px; border: 1.5px solid var(--accent); background: #FAF7F2; font-size: 16px; cursor: pointer; }
</style>

tailwind

<div class="pinch-tw pinch-tw--100" style="width:280px;font-family:system-ui,sans-serif;color:#241430">
  <div class="relative h-[110px] rounded-xl grid place-items-center overflow-hidden bg-[#24143010]">
    <svg class="pinch-tw__img" width="64" height="64" viewBox="0 0 64 64" aria-hidden="true"><rect width="64" height="64" rx="8" fill="#BFD9F2" /><circle cx="24" cy="26" r="7" fill="#FAF7F2" /><path d="M8 50l16-16 10 8 12-14 10 22z" fill="#FAF7F2" /></svg>
    <div class="absolute bottom-2 right-2.5 opacity-50"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#241430" stroke-width="2" aria-hidden="true"><path d="M9 21V11M9 11l-4 3M15 21V11M15 11l4 3" /></svg></div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430aa]">Two-finger pinch to zoom &mdash; <strong>100%</strong>. No touchscreen? Use Ctrl/Cmd + scroll, or the buttons below.</p>
  
  <div class="mt-2.5 flex gap-1.5">
    <button type="button" aria-label="Zoom out" class="w-[30px] h-[30px] rounded-md border-[1.5px] text-base cursor-pointer" style="border-color:#BFD9F2;background:#FAF7F2">&minus;</button>
    <button type="button" aria-label="Zoom in" class="w-[30px] h-[30px] rounded-md border-[1.5px] text-base cursor-pointer" style="border-color:#BFD9F2;background:#FAF7F2">+</button>
  </div>
  
</div>
<style>
.pinch-tw--150 .pinch-tw__img { transform: scale(1.5); }
.pinch-tw--200 .pinch-tw__img { transform: scale(2); }
</style>

react

export function PinchZoom({
  scale = "100",
  accent = "#BFD9F2",
  showAltControls = true,
}) {
  const factor = { "100": 1, "150": 1.5, "200": 2 }[scale];
  return (
    <div style={{ width: 280, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <div style={{ position: "relative", height: 110, borderRadius: 12, background: "#24143010", display: "grid", placeItems: "center", overflow: "hidden" }}>
        <svg className="pz-svg" width="64" height="64" viewBox="0 0 64 64" aria-hidden="true" style={{ transform: "scale(" + factor + ")" }}>
          <rect width="64" height="64" rx="8" fill={accent} /><circle cx="24" cy="26" r="7" fill="#FAF7F2" /><path d="M8 50l16-16 10 8 12-14 10 22z" fill="#FAF7F2" />
        </svg>
      </div>
      <p style={{ margin: "10px 0 0", fontSize: 12, color: "#241430aa" }}>Two-finger pinch to zoom &mdash; <strong>{scale}%</strong>. No touchscreen? Use Ctrl/Cmd + scroll, or the buttons below.</p>
      {showAltControls && <div style={{ marginTop: 10, display: "flex", gap: 6 }}>
        <button type="button" aria-label="Zoom out" style={{ width: 30, height: 30, borderRadius: 7, border: "1.5px solid " + accent, background: "#FAF7F2", fontSize: 16, cursor: "pointer" }}>&minus;</button>
        <button type="button" aria-label="Zoom in" style={{ width: 30, height: 30, borderRadius: 7, border: "1.5px solid " + accent, background: "#FAF7F2", fontSize: 16, cursor: "pointer" }}>+</button>
      </div>}
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .pz-svg { transition: transform .2s; }
        }
      `}</style>
    </div>
  );
}