Akari
Finding something worth watching…
The study / 2026
Akari is a Next.js frontend concept for two very different media homepages: AnimeX and MissAV. It keeps what works—density, immediacy, trailers—and removes what gets in the way.
The brief
The target is a production-shaped Next.js app: server-rendered discovery, a typed data adapter, route handlers, real search, a detail route, a private watchlist, and a second visual mode for cinema. The prototype runs against AniList's public metadata API, with a checked-in fallback snapshot so the UI never depends on a live request.
Stack
Source audit
A full-bleed featured carousel over a black shell, followed by Recently Added, Popular This Season, Popular Movies, and Coming Soon. The art direction is strong; the first-visit changelog modal and competing overlays fight it.
A dark Nord palette with a pink accent, a deep utility navigation, and a very dense thumbnail grid. It is fast to scan but has almost no editorial hierarchy, and the explicit imagery makes brand-safe presentation impossible without a different content strategy.
Design response
Both source homepages compete with themselves: carousel, changelog, rows of badges, partner links. Akari gives the hero one job and lets the rest of the page breathe.
A streaming catalogue is a database. The redesign keeps the useful density but groups it: resume, discover, seasonal, films, forthcoming. Each rail has a reason to exist.
Search is a single, keyboard-first surface. Navigation stays shallow. The watchlist is local and private. Nothing asks for an account before it earns one.
Anime is bright, fast, and image-led. Cinema is typographic, slower, and quieter. The same tokens, grid, and components hold both without forcing them into one visual voice.
A deliberate boundary
The source sites aggregate catalogue data and third-party media without a clear licensing path. This study does not proxy their pages, bypass their protection, or reproduce their media. Anime metadata comes from AniList's public GraphQL API. Nocturne is a non-explicit, public-domain-era film programme; it is not a recreation of MissAV's adult catalogue.
If this becomes a production project, the adapter in lib/anilist.ts is the seam. Replace it with your licensed catalogue API, keep the UI contracts, and connect playback through a provider that has the rights and regional clearance.
Under the hood
The home and detail routes are server components. AniList is called once per revalidation window, with a local snapshot fallback.
/api/anime/home, /api/anime/[id], /api/search, and /api/cinema expose the same contracts to other clients.
Search, the hero carousel, rails, the trailer modal, and the watchlist are the only client islands. Everything else ships as HTML.
The point
Run npm run dev and start at the home page. The build notes and API contract are in README.md.