Face Distance UI

Welcome to the Face-Aware Interface!

This interactive application tracks your face in real time and adapts the user interface based on how far you are from your screen. No need to touch or click, just move closer or further away. As of right now there is a simple text that asks about your day but this could changed.

How is it powered?

  • face-api.js for facial detection and landmark recognition in the browser
  • A Svelte-based UI that reacts dynamically to your face position
  • Webcam input for continuous, non-intrusive distance sensing

How does it work?

  • The app calculates the distance between your eyes using facial landmarks.
  • This data is used to estimate your distance from the screen.
  • The UI scales text or reacts based on how close or far you are.
Why does this matter?
  • Reduces eye strain and encourages healthy screen habits
  • Enables distance-aware UX in education, games, and kiosks
  • Enables accessible interaction without needing clicks or taps

Start your camera and watch the interface adjust.

Face-Interface Adpater Demo

How is your day going ???