metaphi

Design prototype · 12 screens

Screen index

A static HTML/CSS prototype of the whole Metaphi front end — mobile-first, built in the Hillvine visual system. Every screen is real mock content; nothing is wired to a backend. Best viewed at phone width; also clean on desktop.

Two clickable flows — A: Landing → Capture → Hook → Sign-up → Feed. B: Feed ↔ Dashboard ↔ Workspace ↔ Charts → Profile.

Pre-auth funnel 01LandingPublic value prop · full-width responsive hero 02Birth-data captureDate · gender · place · optional time 03The HookThe conversion read · simulated reading-swap 04Sign-upMinimal account creation · mocked The companion (authed) 05Main feedUpdate-as-message · update-folds-in demo 06Workspace — FamilyCharts + context + memory · catch-me-up 07DashboardOpportunities & cautions across contexts 08Charts / NetworkHeld charts · free-tier limit · upgrade nudge 09Profile detailA person's chart + compatibility vs you 10My ChartFull verified chart + 7-part reading 11SettingsTone · birth details · theme · account 12Plans / paywallFree vs Companion · honest, non-pushy

Tap the ◐ up top to switch cream / pine themes — the choice persists across screens.