Apps

Faceable

JavaScriptMediaPipe APIHTML5 CanvasCSS3React
Faceable
Project Overview

Inspiration &
Vision

Why we started.

The story begins with a question: If creativity is purely mental, why is it gated by manual dexterity?

For millions with ALS, arthritis, or spinal cord injuries, the artistic world is suppressed by physical barriers. We built Faceable on a core belief: the human face—our most primal expressive surface—can be a zero-contact, high-resolution artistic controller, making expression truly universal.

Inspiration

What it is

The solution.

Faceable transforms your head movements and gaze into a digital brush, enabling you to paint without touching a mouse or keyboard. It acts as an Ocular Stylus, offering a silent, non-manual form of creation that provides instant feedback. This allows artists to bypass physical constraints and immediately realize their vision in a dynamic digital space.

Overview

How it works

Under the hood.

We built Faceable as a single, high-performance React application running entirely in the browser.

How it works
**Computer Vision Pipeline**
Utilized MediaPipe Face Landmarker to analyze live webcam streams.
**Input Normalization**
Calculated normalized coordinates from the central facial point to drive the brush.
**Adaptive Filtering**
Implemented signal stabilization to distinguish intentional gaze from noise.
**Canvas API**
Rendered smooth, continuous lines based on filtered coordinate data.

Challenges

Roadblocks we faced.

The biggest hurdle was Signal Noise.

Initial attempts resulted in erratic lines due to unconscious micro-movements (breathing, lighting changes). We solved this by implementing:

**Dwell Time Filter**
Drawing only initiates when the cursor stabilizes.
**Coordinate Smoothing**
A custom algorithm to average out jitter and create fluid strokes.

Takeaways

Lessons learned.

We learned that Reliability > Complexity.

We initially tried granular eye-tracking but pivoted to head-tracking/central-point tracking for a significantly more stable and forgiving user experience. This reinforced that technical excellence must always be in service of human usability.

Specializing in refined digital web experiences with a focus on animated, responsive, and interactive content.

Partnering with agencies and brands that value design and development integrity.

Delivering highly executed front-end user experiences by paying close attention to the nuances of design, optimization, and performance.

Availability
March 2019 —

Remotely, PDX

Services
Development —
  • Technical Direction
  • Front-end Development
  • Craft CMS Solutions
  • Development Consulting
Awards
ADDY —
  • Best of, Gold, Silver
Awwwards —
  • SOTD, Developer, H.M.,
    Nominations: SOTM,
    Independent of the Year 2018
Communication Arts Web Picks —
  • SOTD
CSSDA —
  • WOTD, UI, UX, Innovation,
    Nominations: SOTM, SOTY
CSS Winner —
  • SOTD
FWA —
  • FOTD, Public Short List
W3 —
  • Best of Show, Gold, Silver
The Webby Awards —
  • Honoree