Future You Mirror

Future You Mirror is a cinematic Al experience powered by Perfect Corp: a mirror that shows you the cost of time, and the reward of starting today.

Comment

Inspiration

We were drawn to the idea that seeing the future might change the present. Most skincare apps give you a score and a product carousel they diagnose, then sell. We wanted to show not tell. What if a single selfie could become a quiet, editorial moment of self-confrontation: this is what time does, and this is what care undoes? Future You Mirror was born from that question. We chose Perfect Corp because their AI Skin Analysis, AI Aging, and AI Skin Simulation APIs aren't just accurate they're emotionally legible. The output is a face, not a spreadsheet. That made them the perfect engine for a product about seeing yourself clearly.

What it does

Future You Mirror is an eight-step web experience built for the Perfect Corp × Pegasus Startup World Cup. The journey flows: Consent → Capture → Loading → Morph Reveal → Skin-Age Reveal → Split Mirror → Insights → Share.

  1. Upload a selfie (camera or file drop).
  2. AI Skin Analysis runs 14 concern checks (wrinkles, firmness, eye bags, radiance, etc.) and estimates your skin age.
  3. AI Aging generates ~16 rendered portraits from age ~12 to ~70 in a single call.
  4. AI Skin Simulation renders a "what if you started caring today" alternate future at your chosen age.
  5. A cinematic 2.4s morph crossfades your current face into your aged future.
  6. A skin-age reveal shows your real age vs. your skin age.
  7. The split mirror lets you scrub to any age and adjust lifestyle sliders (sleep, sun, stress, skincare) to see the two futures diverge in real time. A "Started Today" toggle instantly shows the best-case scenario.
  8. Insights gives you a composite skin-score ring, three personalized concern insights, and a climate card pulled from local UV, humidity, and particulate data.
  9. Finally, export a 1080×1920 shareable story card.

A ?demo=true path lets anyone try the full flow without burning API credits.

How we built it

Stack: Next.js 16 + Turbopack, React 19, TypeScript strict, Tailwind CSS v4, Framer Motion, Zustand, sharp, and @base-ui/react.

The core architecture is a state machine in Zustand (consent → capture → loading → morph → reveal → split → insights → share). An orchestration layer in app/api/analyze/route.ts runs Skin Analysis and AI Aging in parallel (~13s cold), then caches results aggressively using SHA256 hashes (memory + .cache/ disk layer). AI Skin Simulation is debounced (1.2s) from SplitMirrorStep via app/api/simulate/route.ts.

Perfect Corp API integration details:

  • Auth: We perform an RSA-PKCS1 handshake with Perfect Corp's auth host (yce-api-01.perfectcorp.com). We build a plaintext payload of client_id + timestamp, encrypt it with the RSA public key from our console, base64 it as an id_token, and exchange it for a 2-hour Bearer token. We cache it for 90 minutes and automatically re-auth on 401s.
  • Image flow: Every image is resized to long-side ≤1024px via sharp (with EXIF orientation correction), validated for face-size and pose constraints, then uploaded to Perfect Corp via a two-step presigned PUT. The returned file_id is fed into task creation.
  • API endpoints used: /s2s/v2.0/task/skin-analysis, /s2s/v2.0/task/aging, /s2s/v2.0/task/skin-simulation, and /s2s/v2.0/file/{api} for upload.
  • Edge routes: /api/share-card generates a 1080×1920 PNG export using next/og ImageResponse (Satori); photos are fetched server-side and inlined as base64 to avoid Satori's unreliable mid-render fetches. /api/climate uses Vercel geo headers or ip-api.com + Open-Meteo for UV, humidity, and PM2.5 — no external API keys needed.
  • Share card: Generated on the edge at runtime with twin portrait ovals, a skin score ring, an insight line, and editorial typography (Fraunces + Inter).

Design: Warm mocha editorial palette calm, decelerated, never clinical. Motion is RAF-driven with cubic easing, not spring physics.

Challenges we ran into

  1. API docs vs. reality. The published AI Aging docs describe a nested payload.file_sets.src_ids request body. The live API rejects it. We had to reverse-engineer the correct flat envelope ({ src_file_id }) by trial and error.
  2. Discovering nested response shapes. The skin-analysis docs claim all, skin_age, and resize_image live at the top level of the response. They don't, they're entries inside output[]. We wrote defensive branching to find the right field.
  3. Routing and caching images. With ~16 aging photos + 1 simulated photo per interaction, we had to build a robust two-tier cache (memory + disk, keyed by SHA256) to stay within our 1k credit budget. A single cache miss means a fresh upload + task burn.
  4. Satori's external image fetch is unreliable. The first share-card generation would randomly 404 on external aging-image URLs. We solved it by fetching the images server-side inside the edge function, base64-encoding them, and inlining them as data URIs before Satori renders.
  5. Perfect Corp's security was impressive and additive. Their RSA handshake, 2-hour rotating Bearer tokens, presigned S3 PUTs for file uploads, and strict image-validation rules (face ≥ 60% width, pose constraints, no glasses) felt enterprise-grade. Working with them forced us to build better: we added security headers (X-Frame-Options: DENY, restrictive Permissions-Policy, no sniff), never store raw photos in a database, cache everything ephemerally, and built a full privacy dashboard with a self-serve data erasure flow.

Accomplishments that we're proud of

  • Three Perfect Corp APIs, one coherent journey. Skin Analysis, AI Aging, and AI Skin Simulation aren't separate features here, they're one continuous emotional arc.
  • The "Started Today" toggle. It's a tiny UI detail, but it inverts the entire value proposition: instead of guilt, it offers hope. Slide it on and immediately see how many years you could "save."
  • The morph reveal. We built a 2.4s RAF-driven cinematic crossfade with a tracing hairline arc and three caption beats. It respects the user's attention, no autoplay sound, no bouncy springs just a quiet, inevitable transition.
  • Privacy-by-design. No user accounts, no database, no telemetry. Photos live only in ephemeral process memory and Perfect Corp's task queues. We shipped a privacy dashboard with a self-serve "Erase my reading" flow because the product handles faces, and faces deserve respect.
  • Solo dev, full stack. Next.js app router, edge functions, RSA auth, image pipelines, Satori's quirks, and a responsive split-mirror with real-time simulation all wired by one builder in a sprint.

What we learned

  • Read the network tab before the docs. Perfect Corp's live API behavior diverged from published specs in subtle but critical ways. For aging, the request shape was wrong in the docs. For skin analysis, the response shape was nested differently. Treat docs as a best guess; the truth is in the HTTP response.
  • Cache like your credits depend on it because they do. With ~1,000 credits, every uncached call is a real cost. We learned to build SHA256-keyed memory caches with a disk fallback, and to structure cache scope so that demo mode, dev testing, and production all stay isolated.
  • Satori is powerful but picky. next/og ImageResponse can render beautiful cards at the edge, but it can't fetch arbitrary external URLs reliably. Base64-inline your images server-side before passing them to the JSX tree.
  • Split architecture (auth host vs. data host) requires care. Perfect Corp separates the RSA handshake host (perfectcorp.com) from the task/file host (makeupar.com). Both need the same Bearer token, but forgetting which host handles which operation leads to confusing 401s.
  • Motion should serve the emotion. We threw out bouncy spring physics early. The user's face is aging in front of them the motion language needs to feel calm, editorial, and respectful. That meant custom RAF tweens with cubic-bezier easing instead of off-the-shelf animation presets.

What's next for Future You Mirror

  • Routine tracking + longitudinal comparison. Store periodic readings (encrypted, user-controlled keys) so users can see how their skin trajectory shifts after three months of a new routine.
  • Product recommendation layer. Use the top three concern scores to suggest ingredient classes (not brands) retinoids for texture, niacinamide for pores, etc. keeping the product editorial, not commercial.
  • Expanded climate modeling. Integrate seasonal forecasts so the mirror can say: "In your city, winter humidity drops 40%. Your moisture score suggests you'll feel it."
  • Multi-face support. Let couples or friends see parallel aging timelines side by side a shared mirror moment.
  • Native app. Port the flow to React Native with on-device image preprocessing and native share-sheet integration for Instagram Stories.

Details of Creator

Created by Praneel S

Pitched by Pankhudi P

Representing Company MUKTI

Built With

Share this project:

Updates