Serenify
A calm, mood-themed SaaS landing page you can actually click around in
Overview
Serenify is a front-end marketing/demo landing page for a fictional mood-and-productivity app, combining email, tasks, and daily mood check-ins into one dashboard. It ships with 8 live-switchable mood themes (4 light, 4 dark) built on an OKLCH analogous-hue color system that re-tints the entire UI instantly. The dashboard mockup is genuinely interactive — folders, a reading pane, a compose modal, and todos/mood state that persist to localStorage — rather than a static screenshot. It's deployed as a Cloudflare Worker that serves the static Vite build and layers on security headers (CSP, HSTS) plus a lightweight health-check route.
Demonstrates a polished, animated SaaS-style landing page for a hypothetical mood-tracking productivity app, pswitching a theme requires no per-component logic.
Served through a Cloudflare Worker rather than plain static hosting, letting the app attach a strict CSP and security headers to every response and expose a minimal /ping route alongside the SPA asset fallback.
Stack
UI / Frontend
Animation / 3D
Infra / Deploy
How it works
Hero section
Visitor lands on the hero with the OS-matched theme already applied.
Theme showcase
Visitor switches between 8 mood themes; the whole page re-tints live via CSS variables.
Interactive dashboard
GSAP ScrollTrigger pins and unfolds the dashboard mockup, revealing mail, todos, mood check-in, and analytics widgets.
Try it live
Visitor adds/completes todos and sets a mood check-in; state persists to localStorage.
Conversion sections
Testimonials, pricing, and FAQ sections lead into a closing CTA banner.