A blazing-fast, cinema-grade anime streaming web application & Progressive Web App (PWA).
Powered by React 19, Vite 6, Tailwind CSS v4, AniList GraphQL v2, and real-time multi-server streaming.
🌐 Live Demo Website • 📦 GitHub Repository • 🐛 Report an Issue
Animora is an ultra-modern, high-performance anime streaming single-page application and installable Progressive Web App (PWA) engineered with a cinema-grade dark aesthetic inspired by Crunchyroll.
It combines the vast catalog of AniList GraphQL v2 with high-speed multi-server streaming (Mirror-Box API + Megaplay SUB/DUB), driven by a 100% Real-Time AniList-to-TMDb Crosswalk Engine that requires zero static mapping databases or bundle bloat.
- 📱 Progressive Web App (PWA): 1-click installable app on iOS Safari, Android Chrome, and Desktop Chrome/Edge with standalone window experience and offline fallback.
- 👆 Real-Time Touch-Scroll Hero Slider: 1:1 finger tracking, smooth rubber-band dragging, centered navigation controls, and full unclipped title presentation.
- 🚀 Extreme Bundle Optimization: Route-level code splitting dropping initial JS load to just ~69 KB (84% reduction!) and sub-second builds (~550ms).
- ⚡ Zero-Latency Native 60/120Hz Scrolling: Clean GPU-accelerated scrolling with zero input lag.
- 🎬 Multi-Server Cinema Theater: 3 dedicated servers (HD-1 Multi-Mirror, SUB, DUB) with 1-click landscape rotation lock and feature-policy iframe controls.
- 🔄 Real-Time Dynamic Crosswalk: Translates AniList IDs to TMDb/IMDb on the fly via
api.ani.zipandarm.haglund.devwith<0.01msin-memory session caching. - 🎯 Smart Auto-Resume & Watch History: Season-aware resume indicators, progress tracking, and guest-friendly
localStoragesync.
- ✨ Key Features
- 📱 Progressive Web App (PWA) System
- 🎠 Next-Gen Touch-Scroll Hero Carousel
- ⚡ Real-Time Crosswalk Architecture
- 📺 Multi-Server Streaming Architecture
- 🏗️ System Architecture
- 💻 Tech Stack
- 📁 Repository Structure
- 🚀 Quickstart & Local Development
- 🌐 Production Deployment Guide
- 📊 Analytics & SEO
- 📜 License & Credits
- Standalone Mobile & Desktop App: Runs in its own distraction-free app window with native status-bar theming and taskbar integration.
- Smart Install Trigger: Dynamic "Install App" action integrated right into the top navigation bar (desktop) and mobile drawer menu.
- Dedicated iOS Safari Guide: Interactive modal offering visual step-by-step guidance for adding Animora to the home screen on iPhone and iPad.
- Offline Reliability: Service worker caching ensures high-speed cold starts and seamless loading even over unstable cellular networks.
- 1:1 Native Finger Dragging: Touch-gesture tracker (
onTouchStart,onTouchMove,onTouchEnd) allows users to smoothly swipe back and forth between spotlight banners with real-time feedback and rubber-band elasticity. - Responsive Aspect Ratio: Proportional auto-resizing across all devices (
aspect-[16/10]on mobile up to600pxon ultra-wide desktop) showing 100% of the anime art without awkward crops. - Full Anime Titles: Non-truncated, multi-line titles allow users to read long anime names effortlessly.
- De-cluttered Interface: Centered tactile navigation arrows with subtle hover lifts; removed cluttered slide counts and mobile dots for an unobstructed visual experience.
- Optimized Timer Loop: Pure CSS keyframes eliminate interval-driven layout thrashing.
- ~69 KB Initial Bundle: Using
React.lazy()andSuspense, only the active route's JavaScript is loaded upfront. - Zero Input Lag: Removed third-party scroll hijackers in favor of native GPU 60/120Hz hardware acceleration.
- Zero Layout Shift (CLS < 0.01): Content-aware skeleton shimmer system maintains exact component dimensions before data arrives.
- Server 1 —
HD-1 (Multi)(Mirror-Box API): Multi-source adaptive player featuring HD mirrors (Abyss, FileMoon, Vidmoly, Streamwish) mapped via real-time TMDb translation. - Server 2 —
SUB(Megaplay Softsub/Hardsub): Dedicated original Japanese audio with multilingual subtitles routed directly via AniList ID (/stream/ani/{id}/{ep}/sub). - Server 3 —
DUB(Megaplay English Dub): Direct English audio streaming server via AniList ID (/stream/ani/{id}/{ep}/dub). - Full Screen & Landscape Lock: Automatically locks screen orientation to landscape (
screen.orientation.lock('landscape')) with a universal CSS 90° fallback and floating exit button for iOS Safari. - Direct CDN Downloads: Instant one-click direct episode & movie downloads.
- No Heavy Static Mappings: Completely eliminates multi-megabyte
mappings.jsonoranime-list-full.jsonfiles. - Instant Dual-Tier Translation: Resolves metadata via
api.ani.zipandarm.haglund.devon demand. - Sub-Millisecond In-Memory Caching: Subsequent lookups complete in
<0.01msfrom runtime session memory.
- Deep Episode & Season Tracking: Keeps track of exact season numbers and episode numbers.
- Smart CTA Buttons: Dynamic action buttons change to
CONTINUE S<season> E<ep>(orResume Ep <ep>). - Visual Progress Badges: Visual "Last Played" chips and progress indicators across all swimlanes.
- Real-Time Countdown: Live ticking countdown showing hours, minutes, and seconds until the next episode broadcasts in Japan.
- Timezone Synchronization: Automatically converts broadcast schedules to the viewer's local browser timezone.
Animora is built from the ground up as a production-grade Progressive Web App:
[ Browser Visit: animora.web.app ]
│
▼
┌───────────────────────┐
│ Service Worker (sw.js)│ ◄─── Pre-caches offline shell & brand assets
└───────────┬───────────┘
│
┌─────────┴─────────┐
▼ ▼
[ Desktop / Android ] [ iOS Safari / iPadOS ]
Native Install API Custom "Add to Home Screen"
Prompt in Navbar Visual Walkthrough Modal
│ │
└─────────┬─────────┘
▼
┌─────────────────────────┐
│ Standalone App Window │
│ • Fullscreen immersion │
│ • Zero address-bar lag │
│ • App switcher icon │
└─────────────────────────┘
| Feature | Legacy Implementation | Animora Next-Gen Implementation |
|---|---|---|
| Mobile Interaction | Click-only / static taps | 1:1 Real-time touch drag with rubber-banding and velocity snapping |
| Art Display | Fixed-height crop (edges lost) | Proportional multi-breakpoint aspect ratio showing full artwork |
| Title Typography | Truncated (line-clamp-1 / 2) |
Full multi-line title with responsive font scaling |
| Animation Loop | 50ms setInterval state re-render |
Hardware-accelerated CSS keyframes with zero React thrash |
| Mobile Cleanliness | Dots & counters covering art | Clean, uncluttered view; centered navigation arrows |
[ User Clicks Episode / Show ]
│
▼
┌──────────────────────────────┐
│ In-Memory Session Cache Hit? │
└──────┬────────────────┬──────┘
│ YES │ NO
▼ ▼
[ Instant Return (<0.01ms) ] [ Real-Time Multi-Tier Crosswalk Query ]
│
├─► Tier 1: api.ani.zip/mappings?anilist_id={id}
│ (Primary: returns TMDb ID & IMDb ID)
│
└─► Tier 2: arm.haglund.dev/api/v2/ids?source=anilist&id={id}
(Fallback: returns TMDb ID, Season & Ep offset)
│
▼
[ Cache in Session Memory ]
│
▼
[ Stream Generated Instantly ]
| Server Name | Provider | Protocol / Endpoint Format | Audio / Language | Features |
|---|---|---|---|---|
HD-1 (Multi) |
Mirror-Box API | https://mirrorboxapi.web.app/embed?type=anime&id={tmdbId}&season={season}&episode={ep} |
Multi-Audio / Sub / Dub | Adaptive HLS mirrors (Abyss, FileMoon, Vidmoly), direct CDN downloads |
SUB |
Megaplay | https://megaplay.buzz/stream/ani/{anilistId}/{ep}/sub |
Japanese (Original) + Multilingual Subs | Direct AniList ID routing, high-speed edge CDN |
DUB |
Megaplay | https://megaplay.buzz/stream/ani/{anilistId}/{ep}/dub |
English Dubbed Audio | Direct AniList ID routing, instant audio swap |
+------------------------------------------+
| Animora PWA & Client App |
| React 19 + TypeScript + Vite + SW |
+--------------------+---------------------+
|
+-------------------------+-------------------------+
| |
[Production / Serverless SPA] [Localhost / BFF]
| |
v v
+---------------------------+ +---------------------------+
| clientAniList.ts | | Express Backend (BFF) |
| crosswalkResolver.ts | | fribb.service.js |
| (Browser Real-Time Engine)| | (Backend Real-Time Engine)|
+-------------+-------------+ +-------------+-------------+
| |
+-------------------------+-------------------------+
|
+----------------------------------+----------------------------------+
| | |
v v v
+─────────────────+ +───────────────────────+ +───────────────────────+
| AniList GraphQL | | Real-Time Crosswalk | | Streaming Providers |
| Metadata v2 | | (ani.zip & arm.haglund| | • Mirror-Box (HD-1) |
| (graphql.anilist) | Live ID Conversion) | | • Megaplay (SUB/DUB) |
+─────────────────+ +───────────────────────+ +───────────────────────+
| Layer | Technologies |
|---|---|
| Frontend Framework | React 19 + TypeScript 5 |
| Bundler & Tooling | Vite 6 with manualChunks route-level code splitting |
| Styling & Design System | Tailwind CSS v4 + Custom Cinema Dark Palette |
| Application Capabilities | Progressive Web App (PWA), Service Worker, Web App Manifest |
| Icons | Lucide React |
| Routing | React Router DOM v7 |
| Backend / BFF | Node.js + Express 4 |
| Metadata Engine | AniList GraphQL API v2 |
| Crosswalk Engines | Ani.zip API + Anime Relations Mappings (ARM) |
| Streaming Engines | Mirror-Box API + Megaplay API |
| Analytics | Google Analytics 4 (gtag.js - G-TD4S9HSEG5) |
| Hosting Targets | Firebase Hosting (animora), Vercel, or Docker |
anime/
├── client/ # Frontend Progressive Web Application (SPA/PWA)
│ ├── public/ # Static public assets
│ │ ├── icons/ # PWA app icons (192x192, 512x512, maskable)
│ │ ├── favicon.svg # Official Animora branded SVG favicon
│ │ ├── manifest.json # Web App Manifest for PWA installation
│ │ └── sw.js # Service Worker for offline shell caching
│ ├── src/
│ │ ├── api/ # Hybrid API clients & real-time ID crosswalk resolver
│ │ │ ├── animeApi.ts # Primary API consumer
│ │ │ ├── clientAniList.ts # Browser-direct AniList GraphQL fallback service
│ │ │ └── crosswalkResolver.ts# Real-time AniList->TMDb resolver & stream builder
│ │ ├── components/ # Reusable design system components
│ │ │ ├── cards/ # Anime poster & horizontal episode cards with CDN download
│ │ │ ├── common/ # SEO manager, Shimmer skeletons, PWA Install Modal
│ │ │ ├── home/ # Real-time touch-scroll Hero Banner Carousel
│ │ │ ├── layout/ # Header, Footer, Mobile Drawer Navigation
│ │ │ └── player/ # Cinema theater player with Multi-Server Switcher
│ │ ├── hooks/ # Custom React hooks (usePWAInstall, useWatchHistory)
│ │ ├── pages/ # Lazy-loaded routed pages (Home, Browse, Watch, Calendar, Detail)
│ │ ├── types/ # Comprehensive TypeScript interfaces & DTOs
│ │ ├── App.tsx # Root router with Suspense fallback
│ │ ├── index.css # Global typography & Tailwind styling
│ │ └── main.tsx # React application entry & SW registration
│ ├── index.html # HTML5 template with SEO, PWA meta & Google Analytics (GA4)
│ ├── package.json # Client dependencies
│ ├── tsconfig.json # TypeScript configuration
│ └── vite.config.ts # Vite build pipeline with optimized code splitting
├── server/ # Optional Node.js BFF (Backend-for-Frontend)
│ ├── src/
│ │ ├── anilist.service.js # AniList GraphQL query engine & rate-limiter
│ │ ├── fribb.service.js # Real-time backend crosswalk resolver & cache
│ │ └── index.js # Express API server with async stream injection
│ └── package.json # Server dependencies
├── .firebaserc # Firebase project configuration (site: animora)
├── firebase.json # Firebase Hosting SPA rewrite rules
├── start.js # Concurrent development launcher
├── LICENSE # MIT License
└── README.md # Project documentation
- Node.js:
v18.0.0or higher (Download Node.js) - npm:
v9.0.0or higher
git clone https://github.com/code9xrs-hub/animora.git
cd animora# Install root launcher dependencies
npm install
# Install client dependencies
cd client && npm install && cd ..
# Install server dependencies
cd server && npm install && cd ..Run both the Node.js backend (http://localhost:5000) and the Vite frontend (http://localhost:3000) concurrently with a single command:
node start.js
# or
npm startOpen your browser and navigate to http://localhost:3000.
The project includes pre-configured .firebaserc and firebase.json files configured for the animora site target.
-
Install Firebase CLI (if not already installed):
npm install -g firebase-tools
-
Authenticate with Firebase:
firebase login
-
Build the Production Client Bundle:
cd client npm run build cd ..
-
Deploy to Firebase Hosting:
firebase deploy --only hosting:animora
Your live site will be instantly available at:
👉 https://animora.web.app/
Since Animora possesses an integrated browser-direct AniList fallback and client-side crosswalk resolver, it can be deployed directly as a pure static SPA on Vercel or Netlify without requiring a Node server:
- Connect your repository to Vercel/Netlify.
- Set build configuration:
- Framework Preset: Vite
- Root Directory:
client - Build Command:
npm run build - Output Directory:
dist
- Configure SPA rewrites to
/index.html.
- Google Analytics 4: Pre-configured with Measurement ID
G-TD4S9HSEG5inclient/index.html. - Dynamic Meta Tags: Automated page titles, descriptions, canonical URLs, and OpenGraph / Twitter Card preview images.
- Schema.org Rich Snippets: Injected JSON-LD structured data for
WebSite(with deepSearchAction),TVSeries,Movie, andTVEpisode. - Domain Auto-Resolution: Automatically adapts metadata and OpenGraph URLs to any custom domain without hardcoding.
This project is licensed under the MIT License — see the LICENSE file for details.
- Creator & Developer: Rasel Khan (
code9xrs-hub) - Metadata Provider: AniList GraphQL API — for the comprehensive and open anime catalog.
- Streaming Engine: Mirror-Box API — for reliable adaptive multi-server embeds.
- Secondary Streaming Servers: Megaplay — for high-performance
SUBandDUBstreaming servers. - Crosswalk Mapping Engines: Ani.zip API and Anime Relations Mappings (ARM).
- Design Inspiration: Crunchyroll for cinema dark UI aesthetics.
Built with ❤️ by Rasel Khan. If you find this project helpful, please consider starring ⭐ the repository!