MedOS — Landing Page

The AI health command center — marketing site. Submitted to the Anthropic-sponsored hackathon with Nvidia judges.

Stack

• Next.js 15 (App Router, React 19, React Server Components where possible)
• Tailwind CSS 4 (beta, @tailwindcss/postcss)
• TypeScript 5
• GSAP 3.13 + ScrollTrigger for scroll-driven animation
• Lenis 1.1 for smooth scroll, ticker-synced with GSAP
• Framer Motion 12 for component-level transitions
• Supabase Auth for secure, database-integrated session management
• Three.js + React Three Fiber + drei + postprocessing for the hero DNA helix with bloom
• react-fast-marquee for the logo bar
• lucide-react for UI icons; simple-icons supplies the real Apple / Windows / Linux brand glyphs on all download CTAs
• next/font: Space Grotesk (display), Inter (body), JetBrains Mono (stats)

Run it

Note: The application code is located in the frontend directory.

cd frontend
npm install --legacy-peer-deps
npm run dev
# open http://localhost:3000

Build:

npm run build
npm start

Design decisions (the short version)

• Never pure black, never pure white. The base is #0A0A0F, text is #E8ECF4. This is what separates premium-feeling sites from amateur ones, and the detail matters.
• Glow is a reward, not a garnish. The gradient-neural (blue → violet → teal) is reserved for: the primary CTA, the second hero headline line, stat numbers, and the step numerals in How-It-Works. Nowhere else.
• One hero visual, earned. The DNA double helix (18 sphere pairs on two rails, joined by cylinders, MeshDistortMaterial, bloomed with EffectComposer) is the single big-ticket 3D moment. It auto-rotates and tilts toward the cursor. On mobile it's replaced by a static SVG rendering of the same helix so mobile stays fast.
• Motion is slow. Aurora drifts over 22–28 seconds. The cursor dot trails with a 150ms ease; the ring follows at 550ms. Nothing on this page bounces.
• prefers-reduced-motion is real. It disables the SplitText-style char reveal, the 3D auto-rotation, aurora drift, the cursor, and the loading overlay. Content stays fully readable and navigable.
• Lenis ↔ GSAP wiring. lenis.on('scroll', ScrollTrigger.update) + gsap.ticker.add(...) + gsap.ticker.lagSmoothing(0) — the three-line incantation that makes pinned ScrollTrigger sections not jitter on trackpads.
• Real brand icons. The Apple, Windows, and Linux glyphs in the download CTAs are the actual paths (from simple-icons), not the generic shapes lucide ships. The "Try in Browser" icon is a custom SVG — a rounded window with one traffic-light dot subtly tinted with the neural gradient — unique to MedOS.
• Noise everywhere. A fixed SVG feTurbulence overlay at 3.5% opacity, mix-blend-mode: overlay. This is the cheap detail that 90% of "premium" landing pages include and amateur ones skip.
• Loading overlay, once. First visit: 1.5s dark screen with a pulsing teal dot, then fade in. localStorage skips it on every subsequent load, and prefers-reduced-motion skips it outright.
• Download CTAs are link-safe. All of them route to /download, which shows platform-specific "coming soon" copy with preview install commands and a decorative notify form. Nothing appears broken to a judge clicking around.
• Cinematic "Huly-Style" Auth. The /login and /signup flows feature textured glass cards (.texture-dots), a "torch-glow" interactive button effect, and a reactive Neural Shield password strength visualization. The flow is optimized for security and speed, featuring auto-advancing 6-digit verification and instant paste support.

Structure

app/
  layout.tsx          fonts, providers, global overlays
  page.tsx            orchestrates 10 sections
  globals.css         tokens, keyframes, utility classes
  download/page.tsx   platform-aware coming-soon
  app/page.tsx        web-preview stub
components/
  Nav.tsx / Footer.tsx
  CustomCursor.tsx / NoiseTexture.tsx / LoadingOverlay.tsx
  ui/
    Button.tsx GlassCard.tsx PlatformIcon.tsx BrowserIcon.tsx Logomark.tsx
  auth/
    AuthShell.tsx AuthButton.tsx FormInput.tsx CodeInput.tsx NeuralShield.tsx SystemLoader.tsx
  sections/
    Hero.tsx LogoBar.tsx Features.tsx HowItWorks.tsx
    HowItWorksMocks.tsx DeepFeature.tsx Stats.tsx
    Security.tsx FinalCTA.tsx
  three/
    HeroScene.tsx DnaHelix.tsx HeroFallbackSVG.tsx
lib/
  gsap.ts lenis.tsx detect-os.ts use-os.ts
  use-prefers-reduced-motion.ts cn.ts

Accessibility

• All interactive elements have visible :focus-visible rings (blue outline, 3px offset).
• Semantic landmarks (<nav>, <main>, <section>, <footer>).
• The custom cursor doesn't replace the native cursor for keyboard or screen-reader users, and disappears on touch devices.
• prefers-reduced-motion disables all non-essential animation.
• Contrast is WCAG AA against #0A0A0F backgrounds.

Performance notes

• The Three.js scene is dynamically imported with ssr: false and Suspense fallback — it doesn't ship in the initial JS payload.
• Fonts use next/font with display: swap, so layout doesn't shift while they load.
• Marquee and scroll-triggered animations only run when their sections enter the viewport.
• Build size: ~22kB for the landing page entry + ~150kB shared chunks (Three.js is the bulk of the shared weight, loaded lazily).