Issue № 09Healthcare

Clinical Skin-Health App

A clinical skin-health diagnostic experience that turns complex thermography and 3D data into something patients can actually read — clinical yet approachable.

At a glance: Ethereal built a skin-health app for a health-tech company that turns complex scan results into something patients can actually understand. It shows your skin as a 3D model you can rotate, with heat-map scan readings laid over it so problem spots are easy to see, and guides you through your results one clear step at a time.

Clinical Skin-Health App — cover artwork09
Client
Confidential health-tech client
Industry
Health techDiagnostics · 3D visualization
Year
2025
Services
Product Engineering3D VisualizationCinematic UXE2E Testing
3D + thermalscan data made legible
E2EPlaywright-tested user journeys
60fpscinematic R3F experience
01

The Problem

Skin-health diagnostics must feel clinical yet approachable. Thermography readings and 3D scan data are inherently complex — presented raw, they overwhelm patients and undermine trust in the diagnosis.

Complexity

Thermography and 3D scan data are clinically dense — shown raw, they overwhelm patients.

Trust

A diagnosis is only believed if the patient can actually read the evidence behind it.

Tone

Health tech has to feel clinical and approachable at once — cold data, warm experience.

02

The Solution

We built the product around legibility of data: an interactive 3D skin model rendered with React-Three-Fiber, thermography visualization layered onto it, and a cinematic UX — smooth scroll, considered motion, post-processing effects — that guides users through their results step by step. The entire experience is covered by Playwright end-to-end tests.

How it's built
L1Render

3D Skin Model

A React-Three-Fiber model renders the patient's skin as an explorable 3D surface.

L2Data

Thermography Layer

Thermal readings are mapped onto the model so hot spots are visible, not tabular.

L3Motion

Cinematic UX

Lenis smooth-scroll, GSAP motion, and post-processing walk users through results step by step.

L4Core

Legibility Engine

Every interaction is designed to make complex diagnostic data readable at a glance.

Tested end to end

The full patient journey is covered by Playwright end-to-end tests.

Experience details
Explorable 3D

Patients rotate and inspect their own skin model, not a stock illustration.

Thermal Overlay

Thermography maps directly onto the 3D surface for instant legibility.

Guided Reveal

Motion paces the story so results land one clear step at a time.

Post-Processing

Depth-of-field and lighting keep the scene clinical, not clinical-cold.

E2E Coverage

Playwright verifies the journey so the experience never silently breaks.

03

The Outcome

A premium health-tech product with 3D analysis at its core — clinical data made legible, an experience patients trust, and an engineering foundation verified by automated E2E testing.

Built with

06 technologies
01Next.js 16App framework
02React-Three-Fiber3D rendering
03Three.jsScene & materials
04GSAP + Framer MotionChoreography
05LenisSmooth scroll
06PlaywrightE2E testing
Next issue — yours?

Have an healthcare problem like this?

Tell us what you're building — we'll tell you exactly how we'd ship it.

Keep reading

From the archive

All 15 case studies →