Let words take on colors, and let every page turn be the beginning of a little piece of magic.

Welcome to Shirone.

Shirone is an expressive, anime-inspired static blog theme built on the Material 3 Expressive (M3E) design system.

The magic here is not about piling on extravagant visual effects—it lives in dynamic colors that adapt to lighting and mood, in smooth page transitions powered by Swup without breaking atmosphere, and in thoughtful details that bring your personal world to life.

Whether you are writing long-form technical articles, fleeting daily thoughts, or showcasing your anime watchlists, photo galleries, friend circles, open-source projects, skills, and growth timeline, Shirone provides an elegant and immersive platform for your expression.

---

Key Features

Dynamic Color System

Dynamic color system based on HCT color space and Google Material Color Utilities, supporting real-time theme color extraction from banner wallpapers with 8 palettes and over 25 color roles.

Seamless Navigation

Smooth client-side page transitions via Swup, keeping the outer peripheral frame persistent and uninterrupted.

Markdown Extensions

Built-in Expressive Code syntax highlighting, KaTeX math typesetting, Mermaid diagrams, Callout containers, Tabs, timelines, and media galleries.

Zero Overhead

SSR-first, keyboard-friendly. Optional integrations leave zero requests, zero DOM footprint, and zero bundle bloat when disabled.

Behavior & Content Separation

Config governs behavior and feature switches, while pure data structures hold content items.

Content Separation Ecosystem

Decouple theme code from private content with Shirone-Content, incremental YAML overlay support, and streamlined CLI workflows.

---

Repositories & Community

• Live Demo: shirone.mysqil.com
• Repository: LyraVoid/Shirone

Astro is a modern web framework designed specifically for content-driven websites. Its innovative architecture minimizes client-side JavaScript overhead to deliver remarkable performance and search engine optimization results.

Shirone leverages Astro's static site generation, combined with Svelte 5 and Tailwind CSS 4 to craft high-interaction components with speed.

---

Next Steps

• Head over to Get Started: learn about environment requirements, local setup, and basic configuration.

Copyright

Copyright Ownership:matsuzaka-yuki

License under:Attribution 4.0 International (CC-BY-4.0)

Contributors: matsuzaka-yuki, yCENzh

Next pageQuick Start