88      a8P          db         88  88888888ba     ,ad8888ba,    
88    ,88'          d88b        88  88      "8b   d8"'    `"8b   
88  ,88"           d8'`8b       88  88      ,8P  d8'        `8b  
88,d88'           d8'  `8b      88  88aaaaaa8P'  88          88  
8888"88,         d8YaaaaY8b     88  88""""88'    88          88  
88P   Y8b       d8""""""""8b    88  88    `8b    Y8,        ,8P  
88     "88,    d8'        `8b   88  88     `8b    Y8a.    .a8P   
88       Y8b  d8'          `8b  88  88      `8b    `"Y8888Y"'    
                                                                 
                                                                 

a small, quiet anime web client.

features

browse

• trending and latest grids on the home page
• full-featured browse page with paginated trending / latest tabs
• search page with the full filter set (genre, type, status, season, country, language, rating, sort)
• chip-style filter UI; multi-select where the API allows it
• pagination with prev / next and hasNextPage awareness
• skeleton loaders while images and lists fetch

details

• poster, score, MAL score, status, rating, runtime, country
• genres, studios, producers, premiered, aired
• full season list and related entries (clickable)
• episode list with sub / dub / sub&dub badges
• live filter input + sort-toggle for episode lists
• one-tap "watch episode 1" CTA

watch — the player

• custom controls (no native chrome) with auto-hide on idle
• soft subtitles rendered in an overlay (so they look the same on every browser)
• subtitle picker, remembers last chosen language
• quality menu wired to the HLS levels (auto + manual)
• playback speed (0.5× → 2×), persisted across episodes
• resume from where you left off (per-episode local storage)
• intro / outro skip chips that appear during those windows
• skip markers drawn on the seek bar
• volume slider that expands on hover, mute toggle
• back-10 / forward-10 buttons + arrow / J / L / K shortcuts
• picture-in-picture (desktop only) and fullscreen
• multi-server picker
• direct download button when the upstream returns a file URL
• side panel: full episode grid (current ep highlighted) + related anime
• prev / next episode navigation (and n / p keys)

design

• minimal, warm, type-driven aesthetic — sand / parchment palette
• proper light & dark themes, toggle in the header, remembers your choice
• system theme preference respected on first visit
• responsive down to mobile

under the hood

• one tiny api.js wraps every endpoint the API exposes (/, /trending, /latest, /search, /filters, /details, /episodes, /servers/:token, /sources/:id, /proxy)
• all streams flow through the API's own /proxy so CORS / referer issues never surface in the browser
• vendored hls.js lives at scripts/vendor/hls.min.js — no CDN needed

---

keyboard shortcuts (player)

key	action
space / k	play / pause
j / l	back / forward 10s
← / →	back / forward 5s
↑ / ↓	volume up / down
m	mute
f	fullscreen
c	subtitle menu
n / p	next / previous episode

---

⚙ configure your API URL (do this first!)

open scripts/config.js and replace the placeholder:

// scripts/config.js
export const API_BASE = "https://YOUR-API.example.com"; // ← change me
export const API_KEY  = "";                                       // optional

• API_BASE should be the full origin of your deployed AnimeKai API (no trailing slash). examples:
  • http://localhost:8787
  • https://my-api.up.railway.app
  • https://anime-api.fly.dev
• API_KEY is only needed if you set ANIME_API_KEY on your API (it is sent as X-API-Key).

the home page footer shows a green dot when it can reach the API and a red dot when it can't — useful while you're wiring things up.

---

run locally

it is a static site, so any HTTP server works.

# python (most systems already have it)
python3 -m http.server 5173

# or node
npx serve .

# or php
php -S 0.0.0.0:5173

then open http://localhost:5173.

opening index.html directly with file:// will not work — the JS uses ES modules, which require a real http:// origin.

---

legal

this site does not host video. it is a thin client that fetches publicly-reachable streams via your own deployed API. respect the copyright laws in your jurisdiction.

License

MIT — see LICENSE. Do whatever you want, just don't blame ME :3