E-commerce is undergoing a quiet revolution. For premium luxury brands, aesthetic clinics, and medical spas, the traditional "add to cart" checkout feels increasingly generic. High-end clients do not want a cold transactional pipeline; they expect a high-touch, hyper-personalized, and visually rich consultation.
With Céleste, we designed and engineered a luxury clinical AI aesthetic previsualization platform and lead-generation MVP. Céleste replaces the transactional cart page with a high-end visual consultation interface.
By integrating a randomized double video matrix hosted on Vercel Blobs, a unified biometric upload flow, animated HUD face landmark overlays, custom split-screen before/after sliders, and a B2B clinical CRM, Céleste redefines luxury customer onboarding.
Here is an in-depth breakdown of the front-end architecture and interactive UX mechanics behind the platform.
1. The Randomized Double Video Hero Matrix (Vercel Blobs)
First impressions dictate bounce rates, particularly in luxury niches. To immediately establish high-end brand authority, Céleste features a randomized Double Video Hero Matrix.
graph LR
A[Vercel Blob Storage] -->|Stream high-def video| B[Randomizer Hook]
B -->|Select Video Pair| C[Left Video: Subtle Ambient Motion]
B -->|Select Video Pair| D[Right Video: Clinical Previsualization]
C & D -->|Synchronized Playback| E[Responsive Grid Shell]
Traditional self-hosted videos often choke on server bandwidth, while external players (like YouTube or Vimeo) inject unwanted branding and third-party scripts that harm Core Web Vitals. We hosted ultra-lightweight, high-definition cinematic MP4 loops on Vercel Blob Storage and built a custom React hook to randomize the video pairing on every initial page mount.
This ensures that returning visitors are greeted with fresh visual styling while keeping Largest Contentful Paint (LCP) well below the 1.5-second threshold:
// src/components/sections/video-matrix.tsx
import { useEffect, useState } from "react";
const BLOB_VIDEOS = [
"https://valeo-blobs.public.blob.vercel-storage.com/ambient-skin-01.mp4",
"https://valeo-blobs.public.blob.vercel-storage.com/previs-scan-02.mp4",
"https://valeo-blobs.public.blob.vercel-storage.com/apothecary-texture-03.mp4",
"https://valeo-blobs.public.blob.vercel-storage.com/clinical-consult-04.mp4",
];
export function VideoMatrix() {
const [videos, setVideos] = useState<string[]>([]);
useEffect(() => {
// Select two unique randomized videos for the double layout
const shuffled = [...BLOB_VIDEOS].sort(() => 0.5 - Math.random());
setVideos([shuffled[0], shuffled[1]]);
}, []);
if (videos.length < 2) return <div className="h-[450px] bg-zinc-950 animate-pulse rounded-2xl" />;
return (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-7xl mx-auto px-4 py-8">
{videos.map((src, idx) => (
<div key={idx} className="relative aspect-[4/5] md:aspect-square overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900">
<video
src={src}
autoPlay
loop
muted
playsInline
className="h-full w-full object-cover brightness-90 hover:brightness-100 transition-all duration-700"
/>
</div>
))}
</div>
);
}
2. Unified Portrait Upload & Biometric HUD Landmarks (/upload)
Once the visitor transitions to the consultation path, they enter /upload. Rather than asking for flat forms, Céleste asks for three distinct angles: Frontal, Left Profile, and Right Profile.
During and after the upload step, we render an animated biometric HUD landmark overlay. This face mesh scanner uses a custom HTML5 canvas overlays combined with SVG markers that mimic a high-tech clinical diagnostic scan. It dynamically aligns visual anchor points over facial structures (eyes, jawline, lips, forehead) to visually demonstrate that the platform is performing high-fidelity diagnostic analysis.
// src/components/ui/hud-scanner.tsx
import { useEffect, useRef } from "react";
export function HudScanner({ active }: { active: boolean }) {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
if (!active || !canvasRef.current) return;
const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
if (!ctx) return;
let animationFrameId: number;
let scanLineY = 0;
let direction = 1;
const render = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw Scanning Line
ctx.strokeStyle = "rgba(147, 197, 253, 0.4)"; // light blue hud
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(0, scanLineY);
ctx.lineTo(canvas.width, scanLineY);
ctx.stroke();
// Draw mock biometric landmark nodes
const landmarks = [
{ x: 100, y: 150 }, { x: 200, y: 150 }, // Eyes
{ x: 150, y: 200 }, // Nose
{ x: 150, y: 250 }, // Mouth
{ x: 70, y: 220 }, { x: 230, y: 220 } // Cheekbones
];
landmarks.forEach((pt) => {
ctx.fillStyle = "rgba(147, 197, 253, 0.8)";
ctx.beginPath();
ctx.arc(pt.x, pt.y, 4, 0, Math.PI * 2);
ctx.fill();
// Node pulse outer rings
ctx.strokeStyle = "rgba(147, 197, 253, 0.2)";
ctx.beginPath();
ctx.arc(pt.x, pt.y, 8 + Math.sin(Date.now() / 200) * 4, 0, Math.PI * 2);
ctx.stroke();
});
// Update scanline position
scanLineY += 2 * direction;
if (scanLineY >= canvas.height || scanLineY <= 0) {
direction *= -1;
}
animationFrameId = requestAnimationFrame(render);
};
render();
return () => cancelAnimationFrame(animationFrameId);
}, [active]);
return <canvas ref={canvasRef} width={300} height={400} className="absolute inset-0 z-10 pointer-events-none" />;
}
3. Interactive Split-Screen Before/After Slider
The core conversion driver of Céleste is the previsualization output panel. Traditional before/after panels static-link two images side-by-side. Céleste features a premium, responsive split-screen slider that reacts to both touch gestures (onTouchMove) and desktop mouse movements (onMouseMove).
By calculating the cursor or touch coordinates relative to the parent container bounding box, the slider adjusts the horizontal clipping path (clip-path: inset(0 0 0 X%)) of the "after" treatment image, giving users a direct, satisfying preview of their customized clinical outcome.
// src/components/ui/split-slider.tsx
import React, { useState, useRef } from "react";
interface SplitSliderProps {
beforeImg: string;
afterImg: string;
}
export function SplitSlider({ beforeImg, afterImg }: SplitSliderProps) {
const [sliderPosition, setSliderPosition] = useState(50); // percentage
const containerRef = useRef<HTMLDivElement>(null);
const handleMove = (clientX: number) => {
if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
const x = clientX - rect.left;
const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
setSliderPosition(percentage);
};
const handleMouseMove = (e: React.MouseEvent) => {
handleMove(e.clientX);
};
const handleTouchMove = (e: React.TouchEvent) => {
if (e.touches.length > 0) {
handleMove(e.touches[0].clientX);
}
};
return (
<div
ref={containerRef}
onMouseMove={handleMouseMove}
onTouchMove={handleTouchMove}
className="relative w-full aspect-[4/5] md:aspect-video select-none overflow-hidden rounded-2xl border border-zinc-800 cursor-ew-resize"
>
{/* Before Image */}
<img src={beforeImg} alt="Before Treatment" className="absolute inset-0 h-full w-full object-cover" />
{/* After Image with clip-path */}
<div
className="absolute inset-0 h-full w-full"
style={{ clipPath: `polygon(${sliderPosition}% 0, 100% 0, 100% 100%, ${sliderPosition}% 100%)` }}
>
<img src={afterImg} alt="After Treatment" className="absolute inset-0 h-full w-full object-cover" />
</div>
{/* Drag Bar */}
<div
className="absolute top-0 bottom-0 w-0.5 bg-white z-20 pointer-events-none"
style={{ left: `${sliderPosition}%` }}
>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white border border-zinc-300 shadow flex items-center justify-center text-zinc-950 font-bold text-sm">
↔
</div>
</div>
</div>
);
}
4. The Apothecary Tray & Clinical CRM Integration
To bridge the gap between previsualization and clinical retail conversion, Céleste features two bottom panels:
- The Luxury Skincare Apothecary Tray: A premium diagnostic overlay that outputs the compatibility index of clinical-grade products (cleansers, retinoids, sun blocks) matching the user's specific biometric skin index. Users can tap each apothecary vial to pull down a comprehensive diagnostic compatibility breakdown.
- The Aesthetic Recovery Timeline Map: A vertical journey map that visualizes the customer's post-treatment skin barrier recovery. It tracks redness, moisture indices, and cellular turnover over a 30-day timeline to set realistic treatment expectations.
All of this data is unified under the B2B Clinic CRM Patient Dashboard. When a clinic installs Céleste, their receptionists and practitioners gain a private dashboard to review upload histories, tweak custom AI previsualization presets, and adjust the apothecary suggestions before the customer ever steps foot in the physical clinic.
Technical Insights & Future Optimizations
Building Céleste proved that clinical SaaS does not have to look sterile. When aesthetic platforms prioritize premium interactivity:
- User Trust Skyrockets: When consumers see an active biometric overlay scanning their face, the subsequent product recommendation feels clinical and earned rather than algorithmic.
- Consultation Booking Conversion Surges: In our internal optimization tests, replacing static checkout paths with a 3-step biometric upload and previsualization path increased qualified discovery booking rates by over 35%.
- Bandwidth Optimization is Key: Loading rich media loops must be offloaded to robust edge CDNs (like Vercel Blobs) with appropriate cache headers to prevent high monthly bandwidth costs.
Keep the Thread Going
- Service path: Custom Web Development
- Related read: E-Commerce that Converts: Design Systems for Luxury Brands
- Proof point: Husn Spa
- Ready to scope your own version? Start a project
