OralPath

AI-Powered Oral Histopathology Analysis

Live Demo · Report Bug · Request Feature

Overview

OralPath is an AI-powered oral histopathology assistant designed for oral pathologists, dental professionals, researchers, and postgraduate students. It transforms the traditional microscope-to-diagnosis workflow by enabling users to capture microscope field images with a smartphone and receive AI-assisted classifications, confidence scores, and pathological observations within seconds.

This repository contains the premium marketing website for OralPath, built with cinematic scroll-driven animations, a dark scientific aesthetic, and a mobile-first responsive design inspired by industry leaders like Apple, OpenAI, Linear, and Vercel.

Mission: To accelerate oral pathology workflows, education, and research through accessible, explainable AI.

Features

Cinematic Scroll Experience

192-frame WebP scroll animation powered by GSAP ScrollTrigger
Four immersive scenes: Histopathology Slide → Microscope → Lens Dive → AI Classification
Lenis smooth scrolling with reduced-motion fallback for accessibility
Real-time loading progress indicator with Framer Motion

Premium Design Language

Dark-mode-only interface with scientific, minimal aesthetics
Custom noise texture overlay and radial vignettes for depth
Glassmorphism cards with subtle borders and hover states
Tailor-made scrollbar and selection colors

Comprehensive Sections

Hero — Scroll-driven narrative introducing OralPath's purpose
The Problem — Side-by-side comparison of traditional vs. AI-assisted workflows
How It Works — Three-step visual guide: Capture → Analyze → Results
Mobile Showcase — Animated phone mockups of the actual app experience
Coverage — Grid of 8 supported oral pathology classification categories
Why OralPath — Feature highlights: Fast, Accessible, Explainable
Tech Pipeline — Animated research credibility diagram
Disclaimer — Clear research-tool positioning for medical trust
Beta Program — Lead capture form for early access

Supported Classifications

Category	Description
Normal Oral Mucosa	Healthy tissue baseline
Oral Submucous Fibrosis (OSMF)	Pre-cancerous fibrotic condition
Well Differentiated OSCC	Early-stage oral squamous cell carcinoma
Moderately Differentiated OSCC	Intermediate-grade malignancy
Poorly Differentiated OSCC	Aggressive high-grade malignancy
Verrucous Carcinoma	Low-grade exophytic variant
Basaloid Squamous Cell Carcinoma	Rare aggressive variant
Salivary Gland Tumors	Diverse glandular neoplasms

Accessibility & Performance

Fully responsive from mobile to 4K desktop
prefers-reduced-motion support throughout
Focus-visible outlines and keyboard navigation
SEO-optimized metadata and Open Graph tags
Lighthouse score target > 95

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript 5
Styling	Tailwind CSS 4
Animation	GSAP 3 + ScrollTrigger
Motion	Framer Motion
Scroll	Lenis
Icons	Lucide React
Fonts	Figtree + Noto Sans (Google Fonts / next/font)

Screenshots & Demo

Scroll-Driven Hero Animation

The centerpiece of the site is a 500vh scroll track that scrubs through 192 high-resolution WebP frames, creating a seamless narrative from a histopathology slide to an AI-powered mobile diagnosis.

Mobile-First Responsive Design

Every section adapts gracefully from compact smartphone screens to ultrawide monitors, with typography scales, spacing, and interaction patterns optimized per breakpoint.

View the live demo: orion2809.github.io/OralPath.ai

Getting Started

Prerequisites

Node.js 18.x or later
npm 9.x or later (or pnpm / yarn / bun)

Installation

# Clone the repository
git clone https://github.com/ORION2809/OralPath.ai.git
cd OralPath.ai

# Install dependencies
npm install

Development

# Start the development server
npm run dev

Open http://localhost:3000 in your browser.

Note: The project is configured with basePath and assetPrefix for GitHub Pages deployment. For local development, you may need to adjust next.config.ts if assets do not load correctly.

Build

# Create an optimized static export
npm run build

The static site will be generated in the dist/ directory, ready for deployment to GitHub Pages, Vercel, Netlify, or any static host.

Project Structure

oralPath_web/
├── app/                          # Next.js App Router
│   ├── favicon.ico
│   ├── globals.css               # Tailwind imports + custom theme
│   ├── layout.tsx                # Root layout with fonts & metadata
│   └── page.tsx                  # Landing page composition
├── components/
│   ├── providers/
│   │   └── SmoothScroll.tsx      # Lenis + GSAP ScrollTrigger integration
│   ├── sections/                 # Page sections
│   │   ├── Hero.tsx              # Scroll-driven canvas animation
│   │   ├── Problem.tsx           # Workflow comparison
│   │   ├── HowItWorks.tsx        # 3-step process
│   │   ├── MobileShowcase.tsx    # Phone mockups
│   │   ├── Coverage.tsx          # Classification cards
│   │   ├── WhyOralPath.tsx       # Feature highlights
│   │   ├── TechPipeline.tsx      # Animated pipeline diagram
│   │   ├── Disclaimer.tsx        # Research disclaimer
│   │   ├── Beta.tsx              # Beta signup CTA
│   │   └── Footer.tsx            # Site footer
│   └── ui/                       # Reusable UI primitives
│       ├── Button.tsx
│       ├── Container.tsx
│       ├── GlassCard.tsx
│       ├── Navbar.tsx
│       └── SectionHeading.tsx
├── lib/
│   └── utils.ts                  # cn() helper (clsx + tailwind-merge)
├── public/
│   └── scroll-frames/            # 192 WebP frames for hero animation
│       ├── frame_0001.webp
│       ├── frame_0002.webp
│       └── ...
├── next.config.ts                # Next.js config (static export)
├── postcss.config.mjs
├── tailwind.config.ts
├── tsconfig.json
└── package.json

Design System

Color Palette

Token	Value	Usage
Background	`#050505`	Page background
Primary	`#14B8A6`	CTAs, accents, highlights
Primary Hover	`#0D9488`	Interactive hover states
Secondary	`#60A5FA`	Supporting accents
Text Primary	`#FFFFFF`	Headings, body text
Text Secondary	`#A1A1AA`	Captions, metadata
Border	`rgba(255,255,255,0.08)`	Dividers, card borders
Card	`rgba(255,255,255,0.03)`	Card backgrounds
Card Hover	`rgba(255,255,255,0.06)`	Card hover backgrounds

Typography

Headings: Figtree (300–700)
Body: Noto Sans (300–700)

Animation Principles

Smooth, premium, cinematic motion
Scroll-scrubbed timelines for narrative control
Reduced-motion fallbacks for accessibility
Subtle scale, opacity, and translate transforms

Performance

Static Export: Pre-rendered HTML for instant load times
Image Optimization: WebP format with unoptimized fallback for static hosting
Font Optimization: next/font for zero-layout-shift loading
Lazy Loading: Frames preload progressively; sections animate on scroll
Bundle Analysis: Tree-shaken dependencies via Next.js 16

Roadmap

Connect beta form to backend / email service
Add multi-language support (i18n)
Integrate actual AI inference demo (WASM or API)
Add blog / research publication section
Dark/light theme toggle
Analytics and conversion tracking

See the open issues for a full list of proposed features and known issues.

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

Please make sure to follow the existing code style and run linting before submitting:

npm run lint

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Project Link: https://github.com/ORION2809/OralPath.ai

For inquiries, collaborations, or research partnerships, please reach out via:

Email: your-email@example.com
LinkedIn: Your Profile

Acknowledgments

Next.js for the incredible React framework
GreenSock for industry-standard animation tools
Tailwind Labs for utility-first CSS
Framer for declarative React animations
The open-source medical imaging and pathology communities for continuous innovation

Built for oral pathology research and education.

⭐ Star this repo if you find it useful!

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
.github/workflows		.github/workflows
app		app
components		components
lib		lib
public		public
.gitignore		.gitignore
AGENTS.md		AGENTS.md
CLAUDE.md		CLAUDE.md
Microscope_analyzing_tissue_on_s…_202606231644.mp4		Microscope_analyzing_tissue_on_s…_202606231644.mp4
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json
web_brief.md		web_brief.md

Folders and files

Latest commit

History

Repository files navigation

OralPath

Table of Contents

Overview

Features

Cinematic Scroll Experience

Premium Design Language

Comprehensive Sections

Supported Classifications

Accessibility & Performance

Tech Stack

Screenshots & Demo

Scroll-Driven Hero Animation

Mobile-First Responsive Design

Getting Started

Prerequisites

Installation

Development

Build

Project Structure

Design System

Color Palette

Typography

Animation Principles

Performance

Roadmap

Contributing

License

Contact

Acknowledgments

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages