Samsung's Privacy Display

This project demonstrates a "Privacy Display" feature for a simulated Samsung Galaxy S26 Ultra phone. Its main purpose is to visualize how a phone screen's content can become obscured when viewed from an angle, enhancing privacy. Users can interact by moving their mouse, which changes the phone's viewing angle and the screen's opacity. The demo also allows toggling between applying the privacy effect to the entire screen or just to a notification.

The project's structure is built with HTML, defining the phone's 3D model using nested div elements for the back, edges, bezel, and screen. It also includes a status bar, a sample notification, a dock with app icons, and a control panel to the side. The phone element is the central container for the 3D model.

<div class="phone" id="phone">
  <div class="back"></div>
  <div class="edge edge-r"></div>
  <!-- ... other edges ... -->
  <div class="bezel">
    <div class="inner">
      <div class="screen" id="screen">
        <!-- ... screen content like wallpaper, status bar, notification, dock ... -->
      </div>
    </div>
  </div>
</div>

This HTML snippet shows the core structure of the phone, with div elements representing its physical parts, including the interactive screen.

CSS is crucial for rendering the phone as a 3D object and implementing the privacy effect. It uses transform-style: preserve-3d on the phone container and transform: rotateY() or rotateX() on its edges to create depth. The privacy effect itself is achieved by a black ::before pseudo-element overlaying the screen or notification, whose opacity is controlled by CSS variables.

.screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--priv-opacity, 0); /* This CSS variable controls the screen's privacy overlay */
  z-index: 20;
  pointer-events: none;
  border-radius: inherit;
}

This CSS rule creates a black overlay on the screen, whose visibility is dynamically adjusted by the --priv-opacity variable to simulate the privacy feature. A similar rule applies to the notification.

JavaScript handles the interactivity. It listens for mouse movements across the document, calculates the mouse's position relative to the phone's center, and then determines the targetRx (rotation around X-axis) and targetRy (rotation around Y-axis) values. It also calculates a targetPriv value, which represents the desired opacity for the privacy overlay, based on how far the mouse is from the phone's center (simulating viewing angle).

document.addEventListener('mousemove', function(e) {
  // ... calculations for dx, dy, dist, normDist ...
  targetRy = (dx / maxDist) * maxTilt;
  targetRx = -(dy / maxDist) * maxTilt;
  targetPriv = Math.pow(normDist, 1.3) * 0.95; // Calculates privacy opacity based on distance
  angleVal.textContent = angle + '\u00B0';
});

This JavaScript snippet shows how mouse movement is translated into target rotation angles and a privacy opacity value.

A tick() function, called repeatedly via requestAnimationFrame, smoothly interpolates the current rotation and privacy values towards their targets using a lerp (linear interpolation) function. It then applies the calculated rotateX and rotateY transforms to the phone element and updates the --priv-opacity and --notif-priv CSS variables on the screen and notification elements, respectively, based on the selected privacy mode.

function tick() {
  // ... lerp calculations for rx, ry, priv ...
  phone.style.transform = 'rotateX(' + rx + 'deg) rotateY(' + ry + 'deg)'; // Applies 3D rotation
  if (mode === 'full') {
    screen.style.setProperty('--priv-opacity', priv); // Updates screen privacy
    notif.style.setProperty('--notif-priv', 0);
  } else {
    screen.style.setProperty('--priv-opacity', 0);
    notif.style.setProperty('--notif-priv', priv); // Updates notification privacy
  }
  requestAnimationFrame(tick);
}

This tick function continuously updates the phone's 3D rotation and the privacy overlay's opacity, creating a smooth, interactive experience. The "snooper" emoji also follows the cursor, providing a visual cue for interaction.