Camera UI — Free Phone Camera Viewfinder Snippet

<div class="cm-phone">
  <div class="cm-screen" id="cmScreen">
    <div class="cm-view" id="cmView">
      <div class="cm-grid"></div>
      <div class="cm-top">
        <button class="cm-flash" id="cmFlash"><span id="cmFlashIc">⚡</span></button>
        <span class="cm-timer">0:00</span>
        <button class="cm-hdr">HDR</button>
      </div>
      <div class="cm-focus" id="cmFocus"></div>
      <div class="cm-flashfx" id="cmFx"></div>
    </div>
    <div class="cm-controls">
      <div class="cm-modes" id="cmModes">
        <span>TIME-LAPSE</span><span>VIDEO</span><span class="on">PHOTO</span><span>PORTRAIT</span><span>PANO</span>
      </div>
      <div class="cm-bar">
        <div class="cm-thumb"></div>
        <button class="cm-shutter" id="cmShutter" aria-label="Take photo"><span></span></button>
        <button class="cm-flip" id="cmFlip" aria-label="Switch camera">
          <svg viewBox="0 0 24 24" width="22" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h3l1.5-2h7L17 7h3v12H4z"/><path d="M9 13a3 3 0 0 1 6 0M15 13l1.5-1.5M15 13l-1.5-1.5"/></svg>
        </button>
      </div>
    </div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#1e293b;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px}

.cm-phone{width:280px;height:580px;background:#0b1220;border-radius:46px;padding:11px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 2px #1e293b}
.cm-screen{width:100%;height:100%;border-radius:34px;overflow:hidden;background:#000;display:flex;flex-direction:column}

.cm-view{position:relative;flex:1;background:linear-gradient(160deg,#334155,#0f172a),radial-gradient(circle at 30% 30%,#475569,transparent);overflow:hidden}
.cm-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:33.33% 33.33%;opacity:.5}
.cm-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.cm-flash,.cm-hdr{background:rgba(0,0,0,.4);border:none;color:#fff;border-radius:8px;padding:6px 9px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.cm-flash.on{background:#facc15;color:#0f172a}
.cm-timer{color:#fff;font-size:12px;font-weight:700;background:rgba(0,0,0,.4);padding:4px 10px;border-radius:99px}

.cm-focus{position:absolute;width:74px;height:74px;border:1.5px solid #facc15;border-radius:8px;opacity:0;transform:translate(-50%,-50%) scale(1.4);pointer-events:none;z-index:3}
.cm-focus.show{animation:cmFocus .9s ease forwards}
@keyframes cmFocus{0%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}30%{transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.cm-flashfx{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4}
.cm-flashfx.fire{animation:cmFx .35s ease}
@keyframes cmFx{0%{opacity:0}20%{opacity:.9}100%{opacity:0}}

.cm-controls{background:#000;padding:14px 0 22px}
.cm-modes{display:flex;justify-content:center;gap:18px;font-size:11px;font-weight:700;color:#64748b;margin-bottom:16px;overflow-x:auto;padding:0 20px;scrollbar-width:none;-ms-overflow-style:none}
.cm-modes::-webkit-scrollbar{display:none}
.cm-modes span{cursor:pointer;white-space:nowrap;transition:color .15s}
.cm-modes span.on{color:#facc15}

.cm-bar{display:flex;align-items:center;justify-content:space-between;padding:0 30px}
.cm-thumb{width:42px;height:42px;border-radius:9px;background:linear-gradient(135deg,#6366f1,#ec4899);border:2px solid rgba(255,255,255,.5)}
.cm-shutter{width:66px;height:66px;border-radius:50%;border:4px solid #fff;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.cm-shutter span{width:54px;height:54px;border-radius:50%;background:#fff;transition:transform .12s}
.cm-shutter:active span{transform:scale(.86)}
.cm-flip{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .4s}
.cm-flip.spin{transform:rotate(180deg)}

var view = document.getElementById('cmView');
var focus = document.getElementById('cmFocus');
var fx = document.getElementById('cmFx');

// Tap anywhere on the viewfinder to drop a focus square.
view.addEventListener('pointerdown', function (e) {
  if (e.target.closest('.cm-top')) return;
  var r = view.getBoundingClientRect();
  focus.style.left = (e.clientX - r.left) + 'px';
  focus.style.top = (e.clientY - r.top) + 'px';
  focus.classList.remove('show'); void focus.offsetWidth; focus.classList.add('show');
});

// Shutter: flash the screen white like a capture.
document.getElementById('cmShutter').addEventListener('click', function () {
  fx.classList.remove('fire'); void fx.offsetWidth; fx.classList.add('fire');
});

var flash = document.getElementById('cmFlash');
flash.addEventListener('click', function () {
  flash.classList.toggle('on');
  document.getElementById('cmFlashIc').textContent = flash.classList.contains('on') ? '⚡' : '⚡';
});

var flip = document.getElementById('cmFlip');
flip.addEventListener('click', function () {
  flip.classList.toggle('spin');
});

document.getElementById('cmModes').querySelectorAll('span').forEach(function (m) {
  m.addEventListener('click', function () {
    document.querySelectorAll('.cm-modes span').forEach(function (s) { s.classList.remove('on'); });
    m.classList.add('on');
  });
});