Skip to main content
AnimeThemes Web provides a rich browsing experience with card-based UI and advanced filtering options. You can explore content by anime, artists, series, studios, and years with intuitive sorting and search capabilities.

​
Browsing Anime

The anime index provides alphabetical browsing and advanced search with multiple filters.
1

Navigate to Anime Index

Visit /anime to see the alphabetical index of all anime in the database.
2

Use Search Filters

Apply filters to narrow down results:
  • First Letter: Filter by starting character
  • Season: Spring, Summer, Fall, Winter
  • Year: Filter by release year
  • Media Format: TV, Movie, OVA, ONA, Special
3

Sort Results

Choose from multiple sorting options:
  • A → Z or Z → A (alphabetical)
  • Old → New or New → Old (by premiere date)
  • Last Added (most recently added to database)
  • Relevance (when searching)

​
Anime Summary Cards

Each anime is displayed in a card showing:
  • Cover image
  • Anime title
  • Media format (TV, Movie, etc.)
  • Premiere season and year
  • Number of themes
Clicking on an anime card navigates to its detail page at /anime/[slug]

​
Expandable Theme Lists

In search results, anime cards can be expanded to show all themes inline: 
// From AnimeSummaryCard.tsx
function AnimeSummaryCard({ anime, expandable = false }) {
  const [isExpanded, toggleExpanded] = useToggle();
  
  return (
    <SummaryCard
      title={anime.name}
      onClick={handleToggleExpand}
    >
      {expandable && (
        <Collapse collapse={!isExpanded}>
          <ThemeTable themes={anime.themes} />
        </Collapse>
      )}
    </SummaryCard>
  );
}

​
Browsing by Entity Type

AnimeThemes Web supports browsing multiple entity types:

Anime

Browse all anime series with filtering by season, year, and format

Artists

Discover artists who performed theme songs

Series

Explore anime grouped by series (e.g., “Monogatari Series”)

Studios

Browse anime by production studio

​
Search Filters

The search system provides entity-specific filters:

​
Available Filters

// From SearchAnime.tsx
const initialFilter = {
  firstLetter: null,
  season: null,
  year: null,
  mediaFormat: null,
  sortBy: "name",
};
Filters are preserved in local storage, so your preferences persist across sessions

​
Filter Components

The codebase includes specialized filter components:
  • SearchFilterFirstLetter - A-Z filtering
  • SearchFilterSeason - Seasonal filtering
  • SearchFilterYear - Year range selection
  • SearchFilterMediaFormat - TV/Movie/OVA/etc.
  • SearchFilterSortBy - Sorting options

​
Alphabetical Index

Many pages use an alphabetical index for efficient navigation: 
// From pages/anime/index.tsx
export default function AnimeIndexPage({ animeAll }) {
  return (
    <>
      <Text variant="h1">Anime Index</Text>
      <AlphabeticalIndex items={animeAll}>
        {(anime) => (
          <Text as={Link} href={`/anime/${anime.slug}`} block link>
            {anime.name}
          </Text>
        )}
      </AlphabeticalIndex>
    </>
  );
}

​
Card-Based UI

All browsing interfaces use consistent card layouts:

​
Summary Card Pattern

The SummaryCard component is the foundation:
  • Image: Anime/artist cover
  • Title: Entity name
  • Description: Metadata (format, year, count)
  • Link: Navigation to detail page

​
Hover Effects

Cards reveal additional actions on hover:
  • Expand/collapse button for theme lists
  • Context menu for actions
  • Visual feedback
On mobile, expand buttons are always visible since hover isn’t available

​
Year and Season Browsing

Navigate anime by premiere date:
  • /year - All years index
  • /year/[year] - Anime from specific year
  • /year/[year]/[season] - Anime from specific season
Seasons include: Winter, Spring, Summer, Fall

​
Studio and Series Browsing

Explore related content:

​
Studios

  • /studio - All studios index
  • /studio/[slug] - Anime by studio

​
Series

  • /series - All series index
  • /series/[slug] - Anime in series
Use series pages to watch related anime in chronological order

Build docs developers (and LLMs) love

Get started for freeTalk to us