Welcome to Tsubaki

A Theme Rooted in Japanese Aesthetics

Tsubaki (椿) — the Japanese Camellia — has inspired poets, painters, and designers for centuries. Its bloom is bold yet restrained: vivid red against dark green, precisely structured petals, no excess.

We built this theme around those same principles. Every decision — the washi-paper cream background, the sharp editorial corners, the Playfair Display headings — is deliberate.

What Makes Tsubaki Different

Most blog themes treat performance as an afterthought. We treat it as a first principle.

Performance by Default

• Static HTML served from the edge — no JavaScript required to render content.
• Images automatically optimized by Astro’s built-in <Image /> component.
• Fonts loaded with the media="print" onload pattern: zero render-blocking resources.
• GSAP loaded asynchronously via dynamic import() — never delays first paint.

Thoughtful Animations

Animations should reveal content, not compete with it. In Tsubaki:

• Text headings split into words and animate in on page load.
• Cards scroll into view with a gentle fade and upward slide.
• The reading progress bar tracks your position through an article.
• Page transitions use Astro’s native View Transitions API with a 350ms fade.

The Design System

Token	Value
Primary ink	#1a1a1a
Background	#faf8f5 (washi cream)
Accent	#c8102e (camellia red)
Heading font	Playfair Display
Border radius	0 (sharp, editorial)

Getting Started

Clone the template, run npm install, and start the dev server:

npm run dev

Open src/content/blog/ and start writing. Your posts will appear automatically on the blog listing page.

Happy writing.