From d2c2010d845f066c04edf0c8608753ad6687d8d5 Mon Sep 17 00:00:00 2001
From: Tuan Phung <16448321+tuanphungcz@users.noreply.github.com>
Date: Tue, 13 Oct 2026 21:09:48 +0900
Subject: [PATCH 1/9] Website: i18n foundation (locales, messages, localized
 layout, category and interaction pages)

---
 website/astro.config.ts                       |   2 +
 website/src/components/Breadcrumbs.astro      |   6 +-
 website/src/components/CodeBlock.astro        |   7 +-
 website/src/components/FaqList.astro          |   6 +-
 website/src/components/Footer.astro           |  48 +++-
 website/src/components/Header.astro           |  22 +-
 website/src/components/IconGrid.astro         |   9 +-
 website/src/components/InstallCommand.astro   |   8 +-
 website/src/components/LanguageBanner.astro   |  71 ++++++
 website/src/i18n/format.ts                    |  22 ++
 website/src/i18n/index.ts                     |  18 ++
 website/src/i18n/locales.ts                   | 116 +++++++++
 website/src/i18n/messages/en/common.ts        |  45 ++++
 website/src/i18n/messages/en/docs.ts          |   2 +
 website/src/i18n/messages/en/home.ts          |   2 +
 website/src/i18n/messages/en/hubs.ts          | 216 ++++++++++++++++
 website/src/i18n/messages/en/index.ts         |  13 +
 website/src/i18n/messages/en/islands.ts       |   2 +
 website/src/i18n/messages/en/licence.ts       |   2 +
 website/src/i18n/messages/en/pages.ts         |   2 +
 website/src/i18n/messages/en/taxonomy.ts      |  60 +++++
 website/src/i18n/messages/zh/index.ts         |   2 +
 website/src/layouts/Layout.astro              |  33 ++-
 website/src/lib/hubs.ts                       | 199 ++++++---------
 website/src/lib/site.ts                       |  91 ++++---
 website/src/lib/taxonomy.ts                   |  28 ++-
 .../pages/[locale]/categories/[slug].astro    |  18 ++
 .../pages/[locale]/interactions/[slug].astro  |  19 ++
 website/src/pages/categories/[slug].astro     | 131 +---------
 website/src/pages/interactions/[slug].astro   | 237 +-----------------
 website/src/scripts/copy.ts                   |   7 +-
 website/src/views/CategoryPage.astro          | 140 +++++++++++
 website/src/views/InteractionPage.astro       | 223 ++++++++++++++++
 33 files changed, 1243 insertions(+), 564 deletions(-)
 create mode 100644 website/src/components/LanguageBanner.astro
 create mode 100644 website/src/i18n/format.ts
 create mode 100644 website/src/i18n/index.ts
 create mode 100644 website/src/i18n/locales.ts
 create mode 100644 website/src/i18n/messages/en/common.ts
 create mode 100644 website/src/i18n/messages/en/docs.ts
 create mode 100644 website/src/i18n/messages/en/home.ts
 create mode 100644 website/src/i18n/messages/en/hubs.ts
 create mode 100644 website/src/i18n/messages/en/index.ts
 create mode 100644 website/src/i18n/messages/en/islands.ts
 create mode 100644 website/src/i18n/messages/en/licence.ts
 create mode 100644 website/src/i18n/messages/en/pages.ts
 create mode 100644 website/src/i18n/messages/en/taxonomy.ts
 create mode 100644 website/src/i18n/messages/zh/index.ts
 create mode 100644 website/src/pages/[locale]/categories/[slug].astro
 create mode 100644 website/src/pages/[locale]/interactions/[slug].astro
 create mode 100644 website/src/views/CategoryPage.astro
 create mode 100644 website/src/views/InteractionPage.astro

diff --git a/website/astro.config.ts b/website/astro.config.ts
index badf9b0..21231a1 100644
--- a/website/astro.config.ts
+++ b/website/astro.config.ts
@@ -9,6 +9,8 @@ export default defineConfig({
   // The site's own URL: canonical links, sitemap and the file URLs in icons.json and the registry.
   site: process.env.SITE_URL ?? 'https://useanimations.com',
   output: 'static',
+  // A separate output folder, e.g. for builds running side by side: ASTRO_OUT_DIR=/tmp/dist-a
+  ...(process.env.ASTRO_OUT_DIR ? { outDir: process.env.ASTRO_OUT_DIR } : {}),
   // Pages are written as documentation.html, so hosts serve /documentation without a trailing slash,
   // matching the canonical URLs and the previous site.
   trailingSlash: 'never',
diff --git a/website/src/components/Breadcrumbs.astro b/website/src/components/Breadcrumbs.astro
index fad078a..13801c5 100644
--- a/website/src/components/Breadcrumbs.astro
+++ b/website/src/components/Breadcrumbs.astro
@@ -4,12 +4,14 @@ import type { Crumb } from '../lib/hubs';
 interface Props {
   /** Every level, the current page last. */
   crumbs: Crumb[];
+  /** Accessible name of the trail, in the page's language. */
+  label?: string;
 }
 
-const { crumbs } = Astro.props;
+const { crumbs, label = 'Breadcrumb' } = Astro.props;
 ---
 
-<nav aria-label="Breadcrumb" class="text-sm text-muted">
+<nav aria-label={label} class="text-sm text-muted">
   {
     crumbs.map((crumb, index) =>
       index < crumbs.length - 1 ? (
diff --git a/website/src/components/CodeBlock.astro b/website/src/components/CodeBlock.astro
index 5344170..e6c1f7c 100644
--- a/website/src/components/CodeBlock.astro
+++ b/website/src/components/CodeBlock.astro
@@ -1,4 +1,5 @@
 ---
+import { EN, type Locale, t } from '../i18n';
 import { highlight } from '../lib/highlight';
 
 interface Props {
@@ -8,8 +9,10 @@ interface Props {
   class?: string;
   /** Event data for the copy button, e.g. { icon, code } (scripts/analytics.ts). */
   track?: Record<string, string>;
+  /** Language of the button text. */
+  locale?: Locale;
 }
-const { code, lang, label, class: className, track = { code: lang } } = Astro.props;
+const { code, lang, label, class: className, track = { code: lang }, locale = EN } = Astro.props;
 const trackData = Object.fromEntries(Object.entries(track).map(([key, value]) => [`data-track-${key}`, value]));
 const html = await highlight(code, lang);
 ---
@@ -23,6 +26,6 @@ const html = await highlight(code, lang);
     data-track="copy"
     {...trackData}
     class="absolute top-2 right-2 rounded-lg border border-line bg-surface px-2 py-1 text-xs text-muted opacity-0 transition group-hover/code:opacity-100 focus:opacity-100 data-[copied]:text-accent"
-    ><span data-copy-label>Copy</span></button
+    ><span data-copy-label>{t(locale).common.copy}</span></button
   >
 </div>
diff --git a/website/src/components/FaqList.astro b/website/src/components/FaqList.astro
index 1131f7a..2d23c43 100644
--- a/website/src/components/FaqList.astro
+++ b/website/src/components/FaqList.astro
@@ -4,13 +4,15 @@ import type { Faq } from '../lib/seo';
 interface Props {
   faq: Faq;
   class?: string;
+  /** Heading, in the page's language. */
+  title?: string;
 }
 
-const { faq, class: className } = Astro.props;
+const { faq, class: className, title = 'FAQ' } = Astro.props;
 ---
 
 <section class:list={['max-w-3xl', className]} aria-labelledby="faq-title">
-  <h2 id="faq-title" class="text-2xl font-semibold tracking-tight">FAQ</h2>
+  <h2 id="faq-title" class="text-2xl font-semibold tracking-tight">{title}</h2>
   <div class="mt-5 divide-y divide-line rounded-3xl border border-line">
     {
       faq.map(({ question, answer }) => (
diff --git a/website/src/components/Footer.astro b/website/src/components/Footer.astro
index ff520da..bf36c5e 100644
--- a/website/src/components/Footer.astro
+++ b/website/src/components/Footer.astro
@@ -1,18 +1,28 @@
 ---
 import Logo from './Logo.astro';
-import { FOOTER } from '../lib/site';
+import { BUILT, EN, type Locale, localize, t } from '../i18n';
+import { footer } from '../lib/site';
+
+interface Props {
+  locale?: Locale;
+  /** hreflang -> path of the page in each language; pages without them link to each home page. */
+  alternates?: Record<string, string>;
+}
+
+const { locale = EN, alternates } = Astro.props;
+const m = t(locale).common.footer;
+const columns = footer(locale);
+const languages = BUILT.map((l) => ({ locale: l, href: alternates?.[l.hreflang] ?? localize('/', l) }));
 ---
 
 <footer class="mt-32 border-t border-line">
   <div class="mx-auto grid max-w-7xl gap-12 px-5 py-16 sm:px-8 lg:grid-cols-[1.4fr_repeat(4,1fr)]">
     <div class="max-w-xs">
-      <a href="/" aria-label="useAnimations home"><Logo /></a>
-      <p class="mt-4 text-sm leading-relaxed text-muted">
-        Free animated icons with interactions built in. MIT licensed, made for React.
-      </p>
+      <a href={localize('/', locale)} aria-label={t(locale).common.homeLabel}><Logo /></a>
+      <p class="mt-4 text-sm leading-relaxed text-muted">{m.tagline}</p>
     </div>
     {
-      FOOTER.map((column) => (
+      columns.map((column) => (
         <div>
           <h2 class="text-sm font-medium text-fg">{column.title}</h2>
           <ul class="mt-4 space-y-2.5">
@@ -27,9 +37,31 @@ import { FOOTER } from '../lib/site';
         </div>
       ))
     }
+    {
+      languages.length > 1 && (
+        <nav aria-labelledby="footer-languages">
+          <h2 id="footer-languages" class="text-sm font-medium text-fg">{m.languages}</h2>
+          <ul class="mt-4 space-y-2.5">
+            {languages.map(({ locale: l, href }) => (
+              <li>
+                <a
+                  href={href}
+                  hreflang={l.hreflang}
+                  lang={l.hreflang}
+                  aria-current={l === locale ? 'true' : undefined}
+                  class="text-sm text-muted transition-colors hover:text-fg aria-[current=true]:text-fg"
+                >
+                  {l.name}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      )
+    }
   </div>
   <div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 border-t border-line px-5 py-6 text-xs text-subtle sm:px-8">
-    <span>© {new Date().getFullYear()} useAnimations · MIT License</span>
-    <span>Site built with Astro</span>
+    <span>© {new Date().getFullYear()} useAnimations · {m.mitLicense}</span>
+    <span>{m.builtWith}</span>
   </div>
 </footer>
diff --git a/website/src/components/Header.astro b/website/src/components/Header.astro
index b4714c5..24f31e1 100644
--- a/website/src/components/Header.astro
+++ b/website/src/components/Header.astro
@@ -3,20 +3,28 @@ import Logo from './Logo.astro';
 import ThemeToggle from './ThemeToggle';
 import NavIcon from './NavIcon';
 import MobileMenu from './MobileMenu';
-import { GITHUB, NAV } from '../lib/site';
+import { EN, type Locale, localize, t } from '../i18n';
+import { GITHUB, nav } from '../lib/site';
 
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = EN } = Astro.props;
+const m = t(locale).common;
+const items = nav(locale);
 const path = Astro.url.pathname.replace(/\/$/, '') || '/';
 ---
 
 <header class="sticky top-0 z-40 border-b border-line bg-bg/75 backdrop-blur-xl supports-[backdrop-filter]:bg-bg/60">
   <div class="mx-auto flex h-16 max-w-7xl items-center gap-6 px-5 sm:px-8">
-    <a href="/" class="shrink-0 rounded-lg" aria-label="useAnimations home">
+    <a href={localize('/', locale)} class="shrink-0 rounded-lg" aria-label={m.homeLabel}>
       <Logo />
     </a>
     <span class="hidden rounded-full border border-line px-2 py-0.5 font-mono text-[11px] text-muted sm:inline">v3</span>
-    <nav aria-label="Main" class="ml-4 hidden items-center gap-1 md:flex">
+    <nav aria-label={m.mainNav} class="ml-4 hidden items-center gap-1 md:flex">
       {
-        NAV.map((item) => (
+        items.map((item) => (
           <a
             href={item.href}
             aria-current={path === item.href ? 'page' : undefined}
@@ -31,11 +39,11 @@ const path = Astro.url.pathname.replace(/\/$/, '') || '/';
       <NavIcon client:idle href={GITHUB} label="GitHub" />
       <ThemeToggle client:idle />
       <a
-        href="/#icons"
+        href={localize('/#icons', locale)}
         class="ml-1.5 hidden rounded-full bg-fg px-4 py-2 text-sm font-medium text-bg transition hover:opacity-85 sm:inline-flex"
-        >Browse icons</a
+        >{m.browseIcons}</a
       >
-      <MobileMenu client:idle items={NAV} />
+      <MobileMenu client:idle items={items} />
     </div>
   </div>
 </header>
diff --git a/website/src/components/IconGrid.astro b/website/src/components/IconGrid.astro
index 1f671f4..024c9f0 100644
--- a/website/src/components/IconGrid.astro
+++ b/website/src/components/IconGrid.astro
@@ -1,14 +1,18 @@
 ---
+import { EN, type Locale } from '../i18n';
 import type { Icon } from '../lib/icons';
 
 interface Props {
   icons: Icon[];
   class?: string;
+  /** Language of the page; icon pages and titles are English, so other languages mark them. */
+  locale?: Locale;
 }
 
 // Static cards: a link to the icon page with its still (lib/icons.ts), so every icon is crawlable without
 // scripts. Same markup as the related icons on icon pages.
-const { icons, class: className } = Astro.props;
+const { icons, class: className, locale = EN } = Astro.props;
+const lang = locale === EN ? undefined : 'en';
 ---
 
 <ul class:list={['grid grid-cols-[repeat(auto-fill,minmax(7.5rem,1fr))] gap-3', className]}>
@@ -17,10 +21,11 @@ const { icons, class: className } = Astro.props;
       <li>
         <a
           href={`/icons/${icon.id}`}
+          hreflang={lang}
           class="flex aspect-[1/1.08] flex-col items-center justify-center gap-3 rounded-2xl border border-line bg-surface px-2 text-center text-[13px] text-muted transition hover:border-line-strong hover:text-fg"
         >
           <span data-useanimations="" class="block size-10 text-fg" set:html={icon.preview} />
-          {icon.title}
+          {lang ? <span lang={lang}>{icon.title}</span> : icon.title}
         </a>
       </li>
     ))
diff --git a/website/src/components/InstallCommand.astro b/website/src/components/InstallCommand.astro
index 33ae547..6fc36fb 100644
--- a/website/src/components/InstallCommand.astro
+++ b/website/src/components/InstallCommand.astro
@@ -1,9 +1,13 @@
 ---
+import { EN, type Locale, t } from '../i18n';
+
 interface Props {
   command?: string;
   class?: string;
+  /** Language of the button text. */
+  locale?: Locale;
 }
-const { command = 'npm i react-useanimations', class: className } = Astro.props;
+const { command = 'npm i react-useanimations', class: className, locale = EN } = Astro.props;
 ---
 
 <button
@@ -22,6 +26,6 @@ const { command = 'npm i react-useanimations', class: className } = Astro.props;
   <span
     data-copy-label
     class="rounded-full bg-surface-2 px-2.5 py-1 font-sans text-xs text-muted transition group-hover:text-fg"
-    >Copy</span
+    >{t(locale).common.copy}</span
   >
 </button>
diff --git a/website/src/components/LanguageBanner.astro b/website/src/components/LanguageBanner.astro
new file mode 100644
index 0000000..4aaa990
--- /dev/null
+++ b/website/src/components/LanguageBanner.astro
@@ -0,0 +1,71 @@
+---
+// Offers the page in the visitor's language when their browser prefers one we have. It never
+// redirects (Google asks sites not to, and it would hide the other versions from crawlers and
+// people); it only suggests, in that language, and remembers a dismissal.
+import { BUILT, type Locale, t } from '../i18n';
+
+interface Props {
+  locale: Locale;
+  /** hreflang -> path of this page in each language. */
+  alternates: Record<string, string>;
+}
+
+const { locale, alternates } = Astro.props;
+const offers = BUILT.filter((l) => l !== locale && alternates[l.hreflang]).map((l) => ({
+  lang: l.hreflang,
+  href: alternates[l.hreflang],
+  ...t(l).common.languageBanner,
+}));
+---
+
+<div
+  id="language-banner"
+  hidden
+  class="fixed inset-x-3 bottom-3 z-50 mx-auto flex max-w-xl flex-wrap items-center gap-x-4 gap-y-2 rounded-2xl border border-line bg-surface/95 px-4 py-3 text-sm shadow-xl backdrop-blur sm:inset-x-auto sm:right-5 sm:bottom-5"
+>
+  <p data-text class="min-w-0 flex-1 text-fg"></p>
+  <a data-action class="rounded-full bg-fg px-3.5 py-1.5 font-medium text-bg hover:opacity-85" data-track="language-banner"></a>
+  <button data-dismiss type="button" class="rounded-full px-2 py-1 text-muted hover:text-fg">
+    <span aria-hidden="true">×</span><span data-dismiss-label class="sr-only"></span>
+  </button>
+  <script type="application/json" data-offers set:html={JSON.stringify(offers)} />
+</div>
+
+<script>
+  type Offer = { lang: string; href: string; text: string; action: string; dismiss: string };
+
+  const KEY = 'language-banner-dismissed';
+  const banner = document.getElementById('language-banner');
+  const offers: Offer[] = JSON.parse(banner?.querySelector('[data-offers]')?.textContent ?? '[]');
+
+  /** The offer for a browser language: 'pt' or 'pt-PT' -> pt-BR, 'zh-CN' -> zh-Hans (not zh-TW/HK). */
+  const match = (wanted: string): Offer | undefined => {
+    const w = wanted.toLowerCase();
+    if (/^zh-(tw|hk|mo|hant)/.test(w)) return undefined;
+    return (
+      offers.find((offer) => offer.lang.toLowerCase() === w) ??
+      offers.find((offer) => offer.lang.toLowerCase().split('-')[0] === w.split('-')[0])
+    );
+  };
+
+  const pageLang = document.documentElement.lang.toLowerCase().split('-')[0];
+  // Only the first preferred language: someone who reads this page's language first is home.
+  const first = navigator.languages?.[0] ?? navigator.language ?? '';
+  const offer = first.toLowerCase().split('-')[0] === pageLang ? undefined : match(first);
+
+  if (banner && offer && localStorage.getItem(KEY) !== '1') {
+    banner.lang = offer.lang;
+    banner.querySelector('[data-text]')!.textContent = offer.text;
+    const action = banner.querySelector<HTMLAnchorElement>('[data-action]')!;
+    action.textContent = offer.action;
+    action.href = offer.href;
+    action.hreflang = offer.lang;
+    action.dataset.trackLang = offer.lang;
+    banner.querySelector('[data-dismiss-label]')!.textContent = offer.dismiss;
+    banner.querySelector('[data-dismiss]')!.addEventListener('click', () => {
+      localStorage.setItem(KEY, '1');
+      banner.hidden = true;
+    });
+    banner.hidden = false;
+  }
+</script>
diff --git a/website/src/i18n/format.ts b/website/src/i18n/format.ts
new file mode 100644
index 0000000..82b8a4fb
--- /dev/null
+++ b/website/src/i18n/format.ts
@@ -0,0 +1,22 @@
+// Grammar helpers for message files, so no language builds sentences with English rules.
+
+/** 'a, b and c' in the language's own style (Intl.ListFormat). */
+export const listIn =
+  (intl: string) =>
+  (items: string[]): string =>
+    new Intl.ListFormat(intl, { style: 'long', type: 'conjunction' }).format(items);
+
+/**
+ * A count with the right noun form: pluralIn('cs')(n, { one: 'ikona', few: 'ikony', other: 'ikon' }).
+ * Forms follow Intl.PluralRules; `other` is required and covers any form left out.
+ */
+export const pluralIn =
+  (intl: string) =>
+  (n: number, forms: Partial<Record<Intl.LDMLPluralRule, string>> & { other: string }): string =>
+    `${n} ${forms[new Intl.PluralRules(intl).select(n)] ?? forms.other}`;
+
+/** The noun form alone, without the number. */
+export const formIn =
+  (intl: string) =>
+  (n: number, forms: Partial<Record<Intl.LDMLPluralRule, string>> & { other: string }): string =>
+    forms[new Intl.PluralRules(intl).select(n)] ?? forms.other;
diff --git a/website/src/i18n/index.ts b/website/src/i18n/index.ts
new file mode 100644
index 0000000..1e52979
--- /dev/null
+++ b/website/src/i18n/index.ts
@@ -0,0 +1,18 @@
+// Messages of a language: t(locale).hubs.category.title, etc.
+import { type Locale, localeOf } from './locales';
+import type { Messages } from './messages/en';
+
+export type { Messages };
+export * from './locales';
+
+const MESSAGES = import.meta.glob<Messages>('./messages/*/index.ts', {
+  eager: true,
+  import: 'messages',
+});
+
+export const t = (locale: Locale | string): Messages => {
+  const code = typeof locale === 'string' ? locale : locale.code;
+  const messages = MESSAGES[`./messages/${localeOf(code).code}/index.ts`];
+  if (!messages) throw new Error(`i18n: no messages for "${code}"`);
+  return messages;
+};
diff --git a/website/src/i18n/locales.ts b/website/src/i18n/locales.ts
new file mode 100644
index 0000000..9322b37
--- /dev/null
+++ b/website/src/i18n/locales.ts
@@ -0,0 +1,116 @@
+// The languages of the site. English lives at the root; every other language has a path prefix
+// and translates the home page, the documentation, the licence page and the collection hubs. Icon
+// pages stay English. A language is built only when it's live, so an unfinished translation never
+// reaches a sitemap, an hreflang link or Google; I18N_PREVIEW=1 builds them all (PR previews).
+
+export type LocaleCode =
+  | 'en'
+  | 'zh'
+  | 'es'
+  | 'pt-br'
+  | 'de'
+  | 'fr'
+  | 'ja'
+  | 'ko'
+  | 'cs'
+  | 'vi'
+  | 'id'
+  | 'tr'
+  | 'ru';
+
+export type Locale = {
+  code: LocaleCode;
+  /** hreflang and <html lang>, e.g. 'pt-BR'. */
+  hreflang: string;
+  /** Path prefix, '' for English. */
+  prefix: string;
+  /** The language's own name, for the language switcher. */
+  name: string;
+  /** og:locale, e.g. 'pt_BR'. */
+  ogLocale: string;
+  /** Search result limits: CJK characters are wider, so fewer of them fit. */
+  maxTitle: number;
+  maxDescription: number;
+  /** Rollout wave (see the GSC monitor); live languages are built and indexed. */
+  wave: number;
+  live: boolean;
+};
+
+const locale = (
+  code: LocaleCode,
+  hreflang: string,
+  name: string,
+  ogLocale: string,
+  wave: number,
+  live: boolean,
+  cjk = false
+): Locale => ({
+  code,
+  hreflang,
+  prefix: code === 'en' ? '' : `/${code}`,
+  name,
+  ogLocale,
+  maxTitle: cjk ? 32 : 60,
+  maxDescription: cjk ? 80 : 155,
+  wave,
+  live,
+});
+
+export const LOCALES: Locale[] = [
+  locale('en', 'en', 'English', 'en_US', 0, true),
+  locale('zh', 'zh-Hans', '简体中文', 'zh_CN', 0, true, true),
+  locale('es', 'es', 'Español', 'es_ES', 1, false),
+  locale('pt-br', 'pt-BR', 'Português (Brasil)', 'pt_BR', 1, false),
+  locale('de', 'de', 'Deutsch', 'de_DE', 1, false),
+  locale('fr', 'fr', 'Français', 'fr_FR', 1, false),
+  locale('ja', 'ja', '日本語', 'ja_JP', 2, false, true),
+  locale('ko', 'ko', '한국어', 'ko_KR', 2, false, true),
+  locale('cs', 'cs', 'Čeština', 'cs_CZ', 2, false),
+  locale('vi', 'vi', 'Tiếng Việt', 'vi_VN', 3, false),
+  locale('id', 'id', 'Bahasa Indonesia', 'id_ID', 3, false),
+  locale('tr', 'tr', 'Türkçe', 'tr_TR', 3, false),
+  locale('ru', 'ru', 'Русский', 'ru_RU', 3, false),
+];
+
+const preview = process.env.I18N_PREVIEW === '1';
+
+/** Languages that are built: the live ones, or all of them for a preview. */
+export const BUILT = LOCALES.filter((l) => l.live || preview);
+/** Built languages other than English: the [locale] routes. */
+export const TRANSLATED = BUILT.filter((l) => l.code !== 'en');
+
+export const EN = LOCALES[0];
+
+export const localeOf = (code: string): Locale => {
+  const found = LOCALES.find((l) => l.code === code);
+  if (!found) throw new Error(`i18n: no locale "${code}"`);
+  return found;
+};
+
+/** A site path in a language: ('/categories', de) -> '/de/categories', ('/', de) -> '/de', ('/#icons', de) -> '/de#icons'. */
+export const localize = (path: string, l: Locale): string => {
+  if (!l.prefix || !path.startsWith('/')) return path;
+  if (path === '/') return l.prefix;
+  if (path.startsWith('/#')) return l.prefix + path.slice(1);
+  return l.prefix + path;
+};
+
+/** The English path of a localized one: '/de/categories' -> '/categories', '/de' -> '/'. */
+export const unlocalize = (path: string): { locale: Locale; path: string } => {
+  for (const l of LOCALES) {
+    if (!l.prefix) continue;
+    if (path === l.prefix) return { locale: l, path: '/' };
+    if (path.startsWith(`${l.prefix}/`)) return { locale: l, path: path.slice(l.prefix.length) };
+  }
+  return { locale: EN, path };
+};
+
+/**
+ * hreflang -> path for a translated page in every built language, plus x-default (English).
+ * Pages that exist only in English have no alternates.
+ */
+export const alternatesOf = (path: string): Record<string, string> =>
+  Object.fromEntries([
+    ...BUILT.map((l) => [l.hreflang, localize(path, l)]),
+    ['x-default', path],
+  ]);
diff --git a/website/src/i18n/messages/en/common.ts b/website/src/i18n/messages/en/common.ts
new file mode 100644
index 0000000..17f406e
--- /dev/null
+++ b/website/src/i18n/messages/en/common.ts
@@ -0,0 +1,45 @@
+// Text shared by every page: layout, header, footer, breadcrumbs, FAQ and copy buttons.
+export const common = {
+  skipToContent: 'Skip to content',
+  ogImageAlt: 'useAnimations: free animated icons for React, shadcn/ui, Lottie and SVG',
+  homeLabel: 'useAnimations home',
+  mainNav: 'Main',
+  browseIcons: 'Browse icons',
+  nav: {
+    icons: 'Icons',
+    categories: 'Categories',
+    documentation: 'Documentation',
+    shadcn: 'shadcn',
+    lottie: 'Lottie icons',
+    license: 'License',
+  },
+  footer: {
+    tagline: 'Free animated icons with interactions built in. MIT licensed, made for React.',
+    product: 'Product',
+    developers: 'Developers',
+    follow: 'Follow',
+    languages: 'Languages',
+    allIcons: 'All icons',
+    categories: 'Categories',
+    interactions: 'Interactions',
+    lottieIcons: 'Lottie icons',
+    shadcnIcons: 'shadcn/ui icons',
+    documentation: 'Documentation',
+    licencing: 'Licencing & Terms',
+    shadcnRegistry: 'shadcn registry',
+    mitLicense: 'MIT License',
+    builtWith: 'Site built with Astro',
+  },
+  breadcrumb: 'Breadcrumb',
+  crumbs: { icons: 'Icons', categories: 'Categories', interactions: 'Interactions' },
+  faq: 'FAQ',
+  copy: 'Copy',
+  copied: 'Copied',
+  pressCtrlC: 'Press Ctrl+C',
+  /** The suggestion bar for visitors whose browser prefers this language; shown in this language. */
+  languageBanner: {
+    text: 'This page is also available in English.',
+    action: 'Switch to English',
+    dismiss: 'Dismiss',
+  },
+};
diff --git a/website/src/i18n/messages/en/docs.ts b/website/src/i18n/messages/en/docs.ts
new file mode 100644
index 0000000..ba6b1f7
--- /dev/null
+++ b/website/src/i18n/messages/en/docs.ts
@@ -0,0 +1,2 @@
+// Filled in by the page conversion.
+export const docs = {};
diff --git a/website/src/i18n/messages/en/home.ts b/website/src/i18n/messages/en/home.ts
new file mode 100644
index 0000000..4e53508
--- /dev/null
+++ b/website/src/i18n/messages/en/home.ts
@@ -0,0 +1,2 @@
+// Filled in by the page conversion.
+export const home = {};
diff --git a/website/src/i18n/messages/en/hubs.ts b/website/src/i18n/messages/en/hubs.ts
new file mode 100644
index 0000000..3e33bb7
--- /dev/null
+++ b/website/src/i18n/messages/en/hubs.ts
@@ -0,0 +1,216 @@
+// The category and interaction pages (/categories/<slug>, /interactions/<slug>): generated
+// sentences and page text. Message files get facts (counts, icon titles, examples) and build their
+// own sentences, so each language can use its own grammar. Strings ending in Html may contain
+// <code> and <a> tags.
+import type { Interaction } from 'react-useanimations';
+
+export type Faq = { question: string; answer: string }[];
+
+/** An icon as hub sentences mention it. */
+export type ExampleIcon = {
+  id: string;
+  title: string;
+  exportName: string;
+  /** 'react-useanimations/lib/<name>' import line without the semicolon. */
+  importLine: string;
+  shadcnCommand: string;
+  /** Label of its interaction in this language, e.g. 'Click toggle'. */
+  interactionLabel: string;
+};
+
+export type CategoryFacts = {
+  /** Category name in this language, e.g. 'Maps & location'. */
+  name: string;
+  /** Page heading in this language, e.g. 'Animated loading icons'. */
+  title: string;
+  count: number;
+  /** Titles of every icon, in site order (English, they are names). */
+  titles: string[];
+  /** How many icons per interaction, with the interaction's plural verb phrase in this language. */
+  groups: { interaction: Interaction; count: number; plays: string }[];
+  /** How many icons have static SVGs. */
+  withSvg: number;
+  /** Titles of icons that need lottie-web's full build (After Effects expressions). */
+  expressions: string[];
+  example: ExampleIcon;
+  site: string;
+};
+
+export type InteractionFacts = {
+  interaction: Interaction;
+  label: string;
+  title: string;
+  plays: string;
+  /** One sentence of typical uses. */
+  example: string;
+  reducedMotion: string;
+  count: number;
+  titles: string[];
+};
+
+const list = (items: string[]) =>
+  items.length < 2 ? items.join('') : `${items.slice(0, -1).join(', ')} and ${items.at(-1)}`;
+const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? '' : 's'}`;
+const lower = (text: string) => text[0].toLowerCase() + text.slice(1);
+
+/** Up to `max` titles, then 'and N more'. */
+const titles = (items: string[], max = 12) =>
+  items.length > max
+    ? `${items.slice(0, max).join(', ')} and ${items.length - max} more`
+    : list(items);
+
+/** ' with static SVGs' when every icon has them, else how many do. */
+const svgNote = (f: CategoryFacts) => {
+  if (f.withSvg === f.count) return ' with static SVGs';
+  return f.withSvg ? `, and ${f.withSvg} of them also as static SVGs` : '';
+};
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const hubs = {
+  /** Brand suffix of <title>s; titles try it first and drop it when too long. */
+  titleSuffix: ' — useAnimations',
+  iconCount: (n: number) => plural(n, 'icon'),
+
+  category: {
+    /** <title> candidates, best first; the first that fits is used. */
+    titles: (f: CategoryFacts) => [
+      `${f.title} for React & Lottie`,
+      `${f.title} for React`,
+      `Free ${lower(f.title)}`,
+      f.title,
+    ],
+    /** Meta description candidates, best first. */
+    descriptions: (f: CategoryFacts) => {
+      const name = lower(f.title);
+      const examples = list(f.titles.slice(0, 3));
+      return [
+        `${f.count} free ${name}, including ${examples}. Hover, click and loop micro animations for React, shadcn/ui and Lottie JSON, MIT licensed.`,
+        `${f.count} free ${name}, including ${examples}. For React, shadcn/ui and Lottie JSON, MIT licensed.`,
+        `${f.count} free ${name}, including ${examples}. For React, shadcn/ui and Lottie, MIT.`,
+        `${f.count} free ${name} for React, shadcn/ui and Lottie JSON, MIT licensed.`,
+      ];
+    },
+    summary: (f: CategoryFacts) => {
+      const plays = list(
+        f.groups.map(
+          ({ count, plays: phrase }) =>
+            `${count} ${count === 1 ? phrase.replace(/^(\w+)/, '$1s') : phrase}`
+        )
+      );
+      return `${f.groups.length === 1 ? `All ${f.count} icons ${f.groups[0].plays}` : `Of the ${f.count} icons, ${plays}`}. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation${svgNote(f)}, free for commercial use under the MIT license.`;
+    },
+    faq: (f: CategoryFacts): Faq => {
+      const name = lower(f.title);
+      const ex = f.example;
+      const n = f.expressions.length;
+      return [
+        {
+          question: `Which ${name} are included?`,
+          answer: `${plural(f.count, 'icon')}: ${titles(f.titles)}. All of them are free for personal and commercial projects under the MIT license, with no attribution required.`,
+        },
+        {
+          question: `How do I use these ${name} in React?`,
+          answer: `Install react-useanimations, add ${ex.importLine} and render <UseAnimations animation={${ex.exportName}} size={32} />. The icon plays its ${ex.interactionLabel.toLowerCase()} interaction and follows the text color. With shadcn/ui, run ${ex.shadcnCommand} instead.`,
+        },
+        {
+          question: `Can I use these ${name} without React?`,
+          answer: `Yes. Each icon is a Lottie JSON file at ${f.site}/icons/<id>.json (for example ${f.site}/icons/${ex.id}.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package${svgNote(f) ? '; static SVGs are on each icon page' : ''}. ${
+            n
+              ? `${titles(f.expressions, 6)} ${n === 1 ? 'uses' : 'use'} After Effects expressions, so on the web ${n === 1 ? 'it needs' : 'they need'} lottie-web's full build.`
+              : "None of them use expressions, so lottie-web's light build is enough."
+          }`,
+        },
+      ];
+    },
+    badge: (n: number) => `${plural(n, 'icon')} · MIT licensed`,
+    allIcons: (name: string) => `All ${name.toLowerCase()} icons`,
+    whereToUse: 'Where to use them',
+    byInteraction: 'By interaction',
+    addOne: 'Add one to your app',
+    addOneHtml: (label: string, name: string) =>
+      `With React, install ${code('react-useanimations')} and import the icon; it plays its ${label.toLowerCase()} interaction on its own. Every icon in this category works the same way: swap ${code(name)} for the name on its page.`,
+    shadcnHtml: (href: string) =>
+      `With ${link(href, 'shadcn/ui')}, the CLI adds a ready-made component:`,
+    noReactHtml: (href: string) =>
+      `Not using React? Each icon is a Lottie JSON file at ${code('/icons/&lt;id&gt;.json')}; see ${link(href, 'Lottie icons')} for web, iOS, Android and Flutter players.`,
+    more: 'More categories',
+    allIconsButton: 'All icons',
+  },
+
+  interaction: {
+    titles: (f: InteractionFacts) => [
+      `${f.title} for React & Lottie`,
+      `${f.title} for React`,
+      f.title,
+    ],
+    descriptions: (f: InteractionFacts) => {
+      const name = lower(f.title);
+      return [
+        `${f.count} free ${name} that ${f.plays}, such as ${list(f.titles.slice(0, 3))}. For React, shadcn/ui and Lottie JSON, MIT licensed.`,
+        `${f.count} free ${name} that ${f.plays}. For React, shadcn/ui and Lottie JSON, MIT licensed.`,
+      ];
+    },
+    faq: (f: InteractionFacts): Faq => [
+      {
+        question: `Which icons use the ${lower(f.label)} interaction?`,
+        answer: `${plural(f.count, 'icon')}: ${titles(f.titles, 15)}. ${f.example}`,
+      },
+      {
+        question: `What happens when the user prefers reduced motion?`,
+        answer: `${f.reducedMotion} The React component reads prefers-reduced-motion and updates when the setting changes, so you don't need any code for it.`,
+      },
+      {
+        question: `How do I change an icon's interaction?`,
+        answer: `Every icon plays the interaction it was designed for. Pass interaction="${f.interaction}" to give any other icon this behaviour, or another value ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') to change it. The autoplay, loop and speed props adjust playback.${
+          f.interaction === 'click-toggle'
+            ? ' To control the state yourself, pass active={isOn} and update it in onClick: clicks then no longer toggle the icon on their own.'
+            : ''
+        }`,
+      },
+    ],
+    allIcons: (label: string) => `All ${label.toLowerCase()} icons`,
+    behaviour: 'How it behaves',
+    hoverNote:
+      ' Taps on touch screens do not start hover animations, and keyboard focus does when the icon is inside a focusable element.',
+    handled: 'The React component handles all of this; you only pick the icon.',
+    whereToUse: 'Where to use it',
+    byCategory: 'By category',
+    useInReact: 'Use it in React',
+    overrideHtml: `Icons listed here play this interaction by default. Any other icon can use it too: pass the ${code('interaction')} prop.`,
+    /** Code comment in the override example. */
+    normallyUses: (title: string, interaction: string) => `${title} normally uses '${interaction}'`,
+    /** Text before the second code example, per interaction. */
+    extra: {
+      loop: 'Loops autoplay and pause while scrolled out of view. Slow one down with speed, play it once with loop={false}, or keep it still with autoplay={false}:',
+      'click-toggle':
+        'Clicks toggle the icon on their own. To keep it in sync with your state, pass active: the icon animates whenever active changes, and clicks no longer toggle it by themselves.',
+      'click-replay':
+        'Put the icon in a real button with the render prop, so it can be focused and announced. Your onClick runs first; call event.preventDefault() to skip the animation.',
+      hover:
+        'Put the icon in a link or button with the render prop: the animation then also plays when the element gets keyboard focus, and taps on touch screens do not trigger it.',
+      'hover-replay':
+        'Hover the whole card or link, not just the icon: with the render prop the events go on your element, and keyboard focus plays the animation too.',
+      'hover-loop':
+        'Use the render prop so the whole link triggers the loop, including keyboard focus. Change the pace with speed:',
+    } as Record<Interaction, string>,
+    /** Code comments and labels inside the examples. */
+    codeText: {
+      halfSpeed: 'half speed',
+      playsOnce: 'plays once, then stops',
+      staticFrame: 'static first frame',
+      endState: 'true shows the end state',
+      closeMenu: 'Close menu',
+      openMenu: 'Open menu',
+      download: 'Download',
+      archive: 'Archive',
+      weeklyGrowth: 'Weekly growth',
+    },
+    docsHtml: (docs: string, lottie: string) =>
+      `Every prop is in the ${link(docs, 'documentation')}. Outside React, the icons are Lottie JSON files; ${link(lottie, 'Lottie icons')} shows how to recreate the interactions with lottie-web.`,
+    other: 'Other interactions',
+    browseByCategory: 'Browse by category',
+  },
+};
diff --git a/website/src/i18n/messages/en/index.ts b/website/src/i18n/messages/en/index.ts
new file mode 100644
index 0000000..dc675b2
--- /dev/null
+++ b/website/src/i18n/messages/en/index.ts
@@ -0,0 +1,13 @@
+// English, the source language: every other language's messages have this shape (type Messages).
+import { common } from './common';
+import { docs } from './docs';
+import { home } from './home';
+import { hubs } from './hubs';
+import { islands } from './islands';
+import { licence } from './licence';
+import { pages } from './pages';
+import { taxonomy } from './taxonomy';
+
+export const messages = { common, taxonomy, hubs, home, docs, licence, pages, islands };
+
+export type Messages = typeof messages;
diff --git a/website/src/i18n/messages/en/islands.ts b/website/src/i18n/messages/en/islands.ts
new file mode 100644
index 0000000..85c8b5a
--- /dev/null
+++ b/website/src/i18n/messages/en/islands.ts
@@ -0,0 +1,2 @@
+// Filled in by the page conversion.
+export const islands = {};
diff --git a/website/src/i18n/messages/en/licence.ts b/website/src/i18n/messages/en/licence.ts
new file mode 100644
index 0000000..4a33c7e
--- /dev/null
+++ b/website/src/i18n/messages/en/licence.ts
@@ -0,0 +1,2 @@
+// Filled in by the page conversion.
+export const licence = {};
diff --git a/website/src/i18n/messages/en/pages.ts b/website/src/i18n/messages/en/pages.ts
new file mode 100644
index 0000000..b8498c8
--- /dev/null
+++ b/website/src/i18n/messages/en/pages.ts
@@ -0,0 +1,2 @@
+// Filled in by the page conversion.
+export const pages = {};
diff --git a/website/src/i18n/messages/en/taxonomy.ts b/website/src/i18n/messages/en/taxonomy.ts
new file mode 100644
index 0000000..e1e1195
--- /dev/null
+++ b/website/src/i18n/messages/en/taxonomy.ts
@@ -0,0 +1,60 @@
+// Categories and interactions as shown to readers. The English copy lives in lib/taxonomy.ts and
+// lib/icons.ts (icon pages and Markdown use it too); other languages translate this shape.
+import type { Interaction } from 'react-useanimations';
+import { INTERACTIONS } from '../../../lib/icons';
+import {
+  CATEGORY_COPY,
+  INTERACTION_COPY,
+  PLAY,
+  REDUCED_MOTION,
+} from '../../../lib/taxonomy';
+
+export type CategoryText = {
+  /** Display name, e.g. 'Maps & location'. */
+  name: string;
+  /** Page heading, e.g. 'Animated loading icons'. */
+  title: string;
+  intro: string;
+  useCases: string[];
+};
+
+export type InteractionText = {
+  /** Short name, e.g. 'Click toggle'. */
+  label: string;
+  /** Page heading, e.g. 'Click-to-toggle animated icons'. */
+  title: string;
+  intro: string;
+  useCases: string[];
+  /** One sentence of typical uses. */
+  example: string;
+  /** What the interaction does, one or two sentences. */
+  description: string;
+  /** What it does when the user prefers reduced motion, one sentence. */
+  reducedMotion: string;
+  /** How a group of icons plays, as a plural verb phrase: "<n> icons <plays>". */
+  plays: string;
+};
+
+export const taxonomy = {
+  categories: Object.fromEntries(
+    Object.entries(CATEGORY_COPY).map(([name, copy]) => [
+      name,
+      { name, title: copy.title, intro: copy.intro, useCases: copy.useCases },
+    ])
+  ) as Record<string, CategoryText>,
+  interactions: Object.fromEntries(
+    (Object.keys(INTERACTIONS) as Interaction[]).map((interaction) => [
+      interaction,
+      {
+        label: INTERACTIONS[interaction].label,
+        title: INTERACTION_COPY[interaction].title,
+        intro: INTERACTION_COPY[interaction].intro,
+        useCases: INTERACTION_COPY[interaction].useCases,
+        example: INTERACTION_COPY[interaction].example,
+        description: INTERACTIONS[interaction].description,
+        reducedMotion: REDUCED_MOTION[interaction],
+        plays: PLAY[interaction],
+      },
+    ])
+  ) as Record<Interaction, InteractionText>,
+};
diff --git a/website/src/i18n/messages/zh/index.ts b/website/src/i18n/messages/zh/index.ts
new file mode 100644
index 0000000..e77c97f
--- /dev/null
+++ b/website/src/i18n/messages/zh/index.ts
@@ -0,0 +1,2 @@
+// Placeholder until translated.
+export { messages } from '../en';
diff --git a/website/src/layouts/Layout.astro b/website/src/layouts/Layout.astro
index 55c3311..6b45ebc 100644
--- a/website/src/layouts/Layout.astro
+++ b/website/src/layouts/Layout.astro
@@ -2,6 +2,8 @@
 import '../styles/global.css';
 import Footer from '../components/Footer.astro';
 import Header from '../components/Header.astro';
+import LanguageBanner from '../components/LanguageBanner.astro';
+import { EN, LOCALES, type Locale, t } from '../i18n';
 import { SITE } from '../lib/icons';
 
 interface Props {
@@ -9,8 +11,9 @@ interface Props {
   description: string;
   /** Path of the canonical URL, e.g. /documentation; pages without one (the 404 page) omit it. */
   path?: string;
-  lang?: string;
-  /** hreflang alternates, e.g. { en: '/', 'zh-Hans': '/zh' }. */
+  /** The page's language; English by default. */
+  locale?: Locale;
+  /** hreflang alternates of a translated page, from alternatesOf(path). */
   alternates?: Record<string, string>;
   jsonLd?: object;
   /** Extra <link>/<meta> tags. */
@@ -29,13 +32,13 @@ const {
   title,
   description,
   path,
-  lang = 'en',
+  locale = EN,
   alternates,
   jsonLd,
   head = [],
   noindex,
   image: imagePath = '/og.png',
-  imageAlt = 'useAnimations: free animated icons for React, shadcn/ui, Lottie and SVG',
+  imageAlt = t(locale).common.ogImageAlt,
   type = 'website',
   markdown,
 } = Astro.props;
@@ -44,7 +47,7 @@ const image = new URL(imagePath, SITE).href;
 ---
 
 <!doctype html>
-<html lang={lang}>
+<html lang={locale.hreflang}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -62,6 +65,13 @@ const image = new URL(imagePath, SITE).href;
     {head.map((link) => <link {...link} />)}
     <meta property="og:type" content={type} />
     <meta property="og:site_name" content="useAnimations" />
+    <meta property="og:locale" content={locale.ogLocale} />
+    {
+      alternates &&
+        LOCALES.filter((l) => l !== locale && alternates[l.hreflang]).map((l) => (
+          <meta property="og:locale:alternate" content={l.ogLocale} />
+        ))
+    }
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
     {canonical && <meta property="og:url" content={canonical} />}
@@ -115,17 +125,22 @@ const image = new URL(imagePath, SITE).href;
       }
     </script>
   </head>
-  <body class="min-h-screen bg-bg text-fg">
+  <body
+    class="min-h-screen bg-bg text-fg"
+    data-copied-text={t(locale).common.copied}
+    data-copy-failed-text={t(locale).common.pressCtrlC}
+  >
     <a
       href="#main"
       class="sr-only z-50 rounded-lg bg-fg px-4 py-2 text-bg focus:not-sr-only focus:fixed focus:top-3 focus:left-3"
-      >Skip to content</a
+      >{t(locale).common.skipToContent}</a
     >
-    <Header />
+    <Header locale={locale} />
     <main id="main">
       <slot />
     </main>
-    <Footer />
+    <Footer locale={locale} alternates={alternates} />
+    {alternates && <LanguageBanner locale={locale} alternates={alternates} />}
     <script>
       import '../scripts/analytics';
       import '../scripts/copy';
diff --git a/website/src/lib/hubs.ts b/website/src/lib/hubs.ts
index 4488650..fa6ce51 100644
--- a/website/src/lib/hubs.ts
+++ b/website/src/lib/hubs.ts
@@ -2,6 +2,8 @@
 // /shadcn-animated-icons): titles and descriptions within the search limits, and JSON-LD nodes.
 import type { Interaction } from 'react-useanimations';
 import { type Icon, iconById, icons, INTERACTIONS, libImport, shadcnCommand, SITE } from './icons';
+import { EN, type Locale, t } from '../i18n';
+import type { CategoryFacts, ExampleIcon, InteractionFacts } from '../i18n/messages/en/hubs';
 import { type Faq, MAX_DESCRIPTION, MAX_TITLE, TITLE_SUFFIX, WEBSITE_ID } from './seo';
 import {
   CATEGORY_META,
@@ -9,8 +11,11 @@ import {
   INTERACTION_META,
   iconsByCategory,
   iconsByInteraction,
+  REDUCED_MOTION,
 } from './taxonomy';
 
+export { REDUCED_MOTION };
+
 /** The first candidate that fits in max characters, else the last one. */
 export const fit = (candidates: string[], max: number) =>
   candidates.find((candidate) => candidate.length <= max) ?? candidates.at(-1)!;
@@ -21,6 +26,13 @@ export const hubTitle = (...stems: string[]) =>
 
 export const hubDescription = (...candidates: string[]) => fit(candidates, MAX_DESCRIPTION);
 
+/** hubTitle in a language: its own brand suffix and length limit. */
+export const localTitle = (l: Locale, stems: string[]) =>
+  fit([...stems.map((stem) => stem + t(l).hubs.titleSuffix), ...stems], l.maxTitle);
+
+/** hubDescription in a language. */
+export const localDescription = (l: Locale, candidates: string[]) => fit(candidates, l.maxDescription);
+
 export const list = (items: string[]) =>
   items.length < 2 ? items.join('') : `${items.slice(0, -1).join(', ')} and ${items.at(-1)}`;
 
@@ -80,40 +92,19 @@ export const collectionPageNode = (
   path: string,
   name: string,
   description: string,
-  items: Icon[]
+  items: Icon[],
+  l: Locale = EN
 ) => ({
   '@type': 'CollectionPage',
   '@id': `${SITE}${path}`,
   url: `${SITE}${path}`,
   name,
   description,
-  inLanguage: 'en',
+  inLanguage: l.hreflang,
   isPartOf: { '@id': WEBSITE_ID },
   mainEntity: itemListNode(items, name),
 });
 
-// How a group of icons plays, as a plural verb phrase: "<n> icons <phrase>".
-const PLAY: Record<Interaction, string> = {
-  loop: 'loop continuously',
-  'click-toggle': 'toggle between two states on click',
-  'click-replay': 'replay on every click',
-  hover: 'play on hover and reverse on mouse leave',
-  'hover-replay': 'play once on hover',
-  'hover-loop': 'loop while hovered',
-};
-
-/** What each interaction does when the user prefers reduced motion (src/index.tsx). */
-export const REDUCED_MOTION: Record<Interaction, string> = {
-  loop: 'With reduced motion preferred, the icon does not autoplay and stays on its static first frame.',
-  'click-toggle':
-    'With reduced motion preferred, a click switches to the other state immediately, without the animation in between.',
-  'click-replay':
-    'With reduced motion preferred, clicks still reach your handler but the animation does not play.',
-  hover: 'With reduced motion preferred, hovering does not play the animation.',
-  'hover-replay': 'With reduced motion preferred, hovering does not play the animation.',
-  'hover-loop': 'With reduced motion preferred, the icon stays static while hovered.',
-};
-
 // The icon each collection uses in its code example: a well-known member of the group.
 const CATEGORY_EXAMPLE: Record<string, string> = {
   Alerts: 'alert-triangle',
@@ -147,23 +138,6 @@ export const INTERACTION_EXAMPLE: Record<Interaction, string> = {
   'hover-replay': 'trending-up',
 };
 
-const titles = (items: Icon[], max = 12) =>
-  items.length > max
-    ? `${items
-        .slice(0, max)
-        .map((icon) => icon.title)
-        .join(', ')} and ${items.length - max} more`
-    : list(items.map((icon) => icon.title));
-
-/** ', with static SVGs' when every icon has them, else how many do. */
-const svgNote = (items: Icon[]) => {
-  const withSvg = items.filter((icon) => Object.keys(icon.svgs).length > 0).length;
-  if (withSvg === items.length) return ' with static SVGs';
-  return withSvg ? `, and ${withSvg} of them also as static SVGs` : '';
-};
-
-const lower = (text: string) => text[0].toLowerCase() + text.slice(1);
-
 /** Icons grouped by interaction, in the order of INTERACTIONS. */
 const groupByInteraction = (items: Icon[]) =>
   (Object.keys(INTERACTIONS) as Interaction[])
@@ -173,77 +147,77 @@ const groupByInteraction = (items: Icon[]) =>
     }))
     .filter((group) => group.icons.length > 0);
 
+const exampleIcon = (icon: Icon, l: Locale): ExampleIcon => ({
+  id: icon.id,
+  title: icon.title,
+  exportName: icon.exportName,
+  importLine: libImport(icon).replace(/;$/, ''),
+  shadcnCommand: shadcnCommand(icon),
+  interactionLabel: t(l).taxonomy.interactions[icon.interaction].label,
+});
+
+/** The facts a language needs to describe a category. */
+export const categoryFacts = (meta: CategoryMeta, l: Locale = EN): CategoryFacts => {
+  const items = iconsByCategory(meta.name);
+  const m = t(l).taxonomy;
+  return {
+    name: m.categories[meta.name].name,
+    title: m.categories[meta.name].title,
+    count: items.length,
+    titles: items.map((icon) => icon.title),
+    groups: groupByInteraction(items).map(({ interaction, icons: group }) => ({
+      interaction,
+      count: group.length,
+      plays: m.interactions[interaction].plays,
+    })),
+    withSvg: items.filter((icon) => Object.keys(icon.svgs).length > 0).length,
+    expressions: items.filter((icon) => icon.requiresFullPlayer).map((icon) => icon.title),
+    example: exampleIcon(iconById.get(CATEGORY_EXAMPLE[meta.name]) ?? items[0], l),
+    site: SITE,
+  };
+};
+
 /** Title, description, summary, interaction breakdown and example icon of a category page. */
-export const categoryText = (meta: CategoryMeta) => {
+export const categoryText = (meta: CategoryMeta, l: Locale = EN) => {
   const items = iconsByCategory(meta.name);
-  const n = items.length;
-  const name = lower(meta.title);
-  const byInteraction = groupByInteraction(items);
-  const examples = list(items.slice(0, 3).map((icon) => icon.title));
-  const plays = list(
-    byInteraction.map(
-      ({ interaction, icons: group }) =>
-        `${group.length} ${group.length === 1 ? PLAY[interaction].replace(/^(\w+)/, '$1s') : PLAY[interaction]}`
-    )
-  );
+  const facts = categoryFacts(meta, l);
+  const m = t(l).hubs.category;
   return {
-    title: hubTitle(
-      `${meta.title} for React & Lottie`,
-      `${meta.title} for React`,
-      `Free ${name}`,
-      meta.title
-    ),
-    description: hubDescription(
-      `${n} free ${name}, including ${examples}. Hover, click and loop micro animations for React, shadcn/ui and Lottie JSON, MIT licensed.`,
-      `${n} free ${name}, including ${examples}. For React, shadcn/ui and Lottie JSON, MIT licensed.`,
-      `${n} free ${name}, including ${examples}. For React, shadcn/ui and Lottie, MIT.`,
-      `${n} free ${name} for React, shadcn/ui and Lottie JSON, MIT licensed.`
-    ),
-    summary: `${byInteraction.length === 1 ? `All ${n} icons ${PLAY[byInteraction[0].interaction]}` : `Of the ${n} icons, ${plays}`}. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation${svgNote(items)}, free for commercial use under the MIT license.`,
-    byInteraction,
+    title: localTitle(l, m.titles(facts)),
+    description: localDescription(l, m.descriptions(facts)),
+    summary: m.summary(facts),
+    byInteraction: groupByInteraction(items),
     example: iconById.get(CATEGORY_EXAMPLE[meta.name]) ?? items[0],
   };
 };
 
-export const categoryFaq = (meta: CategoryMeta): Faq => {
-  const items = iconsByCategory(meta.name);
-  const { example } = categoryText(meta);
-  const name = lower(meta.title);
-  const label = INTERACTIONS[example.interaction].label.toLowerCase();
-  const expressions = items.filter((icon) => icon.requiresFullPlayer);
-  return [
-    {
-      question: `Which ${name} are included?`,
-      answer: `${plural(items.length, 'icon')}: ${titles(items)}. All of them are free for personal and commercial projects under the MIT license, with no attribution required.`,
-    },
-    {
-      question: `How do I use these ${name} in React?`,
-      answer: `Install react-useanimations, add ${libImport(example).replace(/;$/, '')} and render <UseAnimations animation={${example.exportName}} size={32} />. The icon plays its ${label} interaction and follows the text color. With shadcn/ui, run ${shadcnCommand(example)} instead.`,
-    },
-    {
-      question: `Can I use these ${name} without React?`,
-      answer: `Yes. Each icon is a Lottie JSON file at ${SITE}/icons/<id>.json (for example ${SITE}/icons/${example.id}.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package${svgNote(items) ? '; static SVGs are on each icon page' : ''}. ${
-        expressions.length
-          ? `${titles(expressions, 6)} ${expressions.length === 1 ? 'uses' : 'use'} After Effects expressions, so on the web ${expressions.length === 1 ? 'it needs' : 'they need'} lottie-web's full build.`
-          : "None of them use expressions, so lottie-web's light build is enough."
-      }`,
-    },
-  ];
+export const categoryFaq = (meta: CategoryMeta, l: Locale = EN): Faq =>
+  t(l).hubs.category.faq(categoryFacts(meta, l));
+
+/** The facts a language needs to describe an interaction. */
+export const interactionFacts = (interaction: Interaction, l: Locale = EN): InteractionFacts => {
+  const m = t(l).taxonomy.interactions[interaction];
+  const items = iconsByInteraction(interaction);
+  return {
+    interaction,
+    label: m.label,
+    title: m.title,
+    plays: m.plays,
+    example: m.example,
+    reducedMotion: m.reducedMotion,
+    count: items.length,
+    titles: items.map((icon) => icon.title),
+  };
 };
 
 /** Title, description and summary of an interaction page. */
-export const interactionText = (interaction: Interaction) => {
-  const meta = INTERACTION_META[interaction];
+export const interactionText = (interaction: Interaction, l: Locale = EN) => {
   const items = iconsByInteraction(interaction);
-  const n = items.length;
-  const name = lower(meta.title);
-  const examples = list(items.slice(0, 3).map((icon) => icon.title));
+  const facts = interactionFacts(interaction, l);
+  const m = t(l).hubs.interaction;
   return {
-    title: hubTitle(`${meta.title} for React & Lottie`, `${meta.title} for React`, meta.title),
-    description: hubDescription(
-      `${n} free ${name} that ${PLAY[interaction]}, such as ${examples}. For React, shadcn/ui and Lottie JSON, MIT licensed.`,
-      `${n} free ${name} that ${PLAY[interaction]}. For React, shadcn/ui and Lottie JSON, MIT licensed.`
-    ),
+    title: localTitle(l, m.titles(facts)),
+    description: localDescription(l, m.descriptions(facts)),
     example: iconById.get(INTERACTION_EXAMPLE[interaction]) ?? items[0],
     byCategory: categories()
       .map(({ meta: category, icons: group }) => ({
@@ -254,26 +228,5 @@ export const interactionText = (interaction: Interaction) => {
   };
 };
 
-export const interactionFaq = (interaction: Interaction): Faq => {
-  const meta = INTERACTION_META[interaction];
-  const items = iconsByInteraction(interaction);
-  const label = INTERACTIONS[interaction].label;
-  const toggle =
-    interaction === 'click-toggle'
-      ? ' To control the state yourself, pass active={isOn} and update it in onClick: clicks then no longer toggle the icon on their own.'
-      : '';
-  return [
-    {
-      question: `Which icons use the ${lower(label)} interaction?`,
-      answer: `${plural(items.length, 'icon')}: ${titles(items, 15)}. ${meta.example}`,
-    },
-    {
-      question: `What happens when the user prefers reduced motion?`,
-      answer: `${REDUCED_MOTION[interaction]} The React component reads prefers-reduced-motion and updates when the setting changes, so you don't need any code for it.`,
-    },
-    {
-      question: `How do I change an icon's interaction?`,
-      answer: `Every icon plays the interaction it was designed for. Pass interaction="${interaction}" to give any other icon this behaviour, or another value ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') to change it. The autoplay, loop and speed props adjust playback.${toggle}`,
-    },
-  ];
-};
+export const interactionFaq = (interaction: Interaction, l: Locale = EN): Faq =>
+  t(l).hubs.interaction.faq(interactionFacts(interaction, l));
diff --git a/website/src/lib/site.ts b/website/src/lib/site.ts
index d22751b..bb65463 100644
--- a/website/src/lib/site.ts
+++ b/website/src/lib/site.ts
@@ -1,3 +1,5 @@
+import { type Locale, localize, t } from '../i18n';
+
 export const GITHUB = 'https://github.com/useAnimations/react-useanimations';
 export const NPM = 'https://www.npmjs.com/package/react-useanimations';
 
@@ -12,45 +14,52 @@ export const DEFAULT_SITE = 'https://useanimations.com';
 export const withSite = (text: string, site: string) =>
   text.replaceAll(`${DEFAULT_SITE}/`, `${site.replace(/\/$/, '')}/`);
 
-export const NAV = [
-  { label: 'Icons', href: '/#icons' },
-  { label: 'Categories', href: '/categories' },
-  { label: 'Documentation', href: '/documentation' },
-  { label: 'shadcn', href: '/shadcn-animated-icons' },
-  { label: 'Lottie icons', href: '/lottie-icons' },
-  { label: 'License', href: '/licencing-and-terms' },
-];
+/** The main navigation in a language. */
+export const nav = (l: Locale) => {
+  const m = t(l).common.nav;
+  return [
+    { label: m.icons, href: localize('/#icons', l) },
+    { label: m.categories, href: localize('/categories', l) },
+    { label: m.documentation, href: localize('/documentation', l) },
+    { label: m.shadcn, href: localize('/shadcn-animated-icons', l) },
+    { label: m.lottie, href: localize('/lottie-icons', l) },
+    { label: m.license, href: localize('/licencing-and-terms', l) },
+  ];
+};
 
-export const FOOTER = [
-  {
-    title: 'Product',
-    links: [
-      { label: 'All icons', href: '/icons' },
-      { label: 'Categories', href: '/categories' },
-      { label: 'Interactions', href: '/interactions' },
-      { label: 'Lottie icons', href: '/lottie-icons' },
-      { label: 'shadcn/ui icons', href: '/shadcn-animated-icons' },
-      { label: 'Documentation', href: '/documentation' },
-      { label: 'Licencing & Terms', href: '/licencing-and-terms' },
-      { label: '中文', href: '/zh' },
-    ],
-  },
-  {
-    title: 'Developers',
-    links: [
-      { label: 'react-useanimations', href: NPM },
-      { label: 'GitHub', href: GITHUB },
-      { label: 'shadcn registry', href: '/r/registry.json' },
-      { label: 'icons.json', href: '/icons.json' },
-      { label: 'llms.txt', href: '/llms.txt' },
-    ],
-  },
-  {
-    title: 'Follow',
-    links: [
-      { label: 'X (Twitter)', href: 'https://twitter.com/useAnimations/' },
-      { label: 'Instagram', href: 'https://www.instagram.com/getuseanimations/' },
-      { label: 'Facebook', href: 'https://www.facebook.com/useanimations/' },
-    ],
-  },
-];
+/** The footer's link columns in a language. */
+export const footer = (l: Locale) => {
+  const m = t(l).common.footer;
+  return [
+    {
+      title: m.product,
+      links: [
+        { label: m.allIcons, href: localize('/icons', l) },
+        { label: m.categories, href: localize('/categories', l) },
+        { label: m.interactions, href: localize('/interactions', l) },
+        { label: m.lottieIcons, href: localize('/lottie-icons', l) },
+        { label: m.shadcnIcons, href: localize('/shadcn-animated-icons', l) },
+        { label: m.documentation, href: localize('/documentation', l) },
+        { label: m.licencing, href: localize('/licencing-and-terms', l) },
+      ],
+    },
+    {
+      title: m.developers,
+      links: [
+        { label: 'react-useanimations', href: NPM },
+        { label: 'GitHub', href: GITHUB },
+        { label: m.shadcnRegistry, href: '/r/registry.json' },
+        { label: 'icons.json', href: '/icons.json' },
+        { label: 'llms.txt', href: '/llms.txt' },
+      ],
+    },
+    {
+      title: m.follow,
+      links: [
+        { label: 'X (Twitter)', href: 'https://twitter.com/useAnimations/' },
+        { label: 'Instagram', href: 'https://www.instagram.com/getuseanimations/' },
+        { label: 'Facebook', href: 'https://www.facebook.com/useanimations/' },
+      ],
+    },
+  ];
+};
diff --git a/website/src/lib/taxonomy.ts b/website/src/lib/taxonomy.ts
index c7483c4..7034ecc 100644
--- a/website/src/lib/taxonomy.ts
+++ b/website/src/lib/taxonomy.ts
@@ -37,9 +37,9 @@ export const categorySlug = (name: string) =>
 /** Interactions are already URL-safe ('click-toggle'), so the slug is the key itself. */
 export const interactionSlug = (interaction: Interaction) => interaction;
 
-type Copy = Pick<CollectionMeta, 'title' | 'intro' | 'useCases'>;
+export type Copy = Pick<CollectionMeta, 'title' | 'intro' | 'useCases'>;
 
-const CATEGORY_COPY: Record<string, Copy> = {
+export const CATEGORY_COPY: Record<string, Copy> = {
   Alerts: {
     title: 'Animated alert icons',
     intro:
@@ -295,7 +295,7 @@ export const CATEGORY_META: Record<string, CategoryMeta> = Object.fromEntries(
   })
 );
 
-const INTERACTION_COPY: Record<Interaction, Copy & { example: string }> = {
+export const INTERACTION_COPY: Record<Interaction, Copy & { example: string }> = {
   loop: {
     title: 'Looping animated icons',
     intro:
@@ -402,3 +402,25 @@ const byInteraction = Map.groupBy(icons, (icon) => icon.interaction);
 /** The icons with an interaction, in site order. */
 export const iconsByInteraction = (interaction: Interaction): Icon[] =>
   byInteraction.get(interaction) ?? [];
+
+// How a group of icons plays, as a plural verb phrase: "<n> icons <phrase>".
+export const PLAY: Record<Interaction, string> = {
+  loop: 'loop continuously',
+  'click-toggle': 'toggle between two states on click',
+  'click-replay': 'replay on every click',
+  hover: 'play on hover and reverse on mouse leave',
+  'hover-replay': 'play once on hover',
+  'hover-loop': 'loop while hovered',
+};
+
+/** What each interaction does when the user prefers reduced motion (src/index.tsx). */
+export const REDUCED_MOTION: Record<Interaction, string> = {
+  loop: 'With reduced motion preferred, the icon does not autoplay and stays on its static first frame.',
+  'click-toggle':
+    'With reduced motion preferred, a click switches to the other state immediately, without the animation in between.',
+  'click-replay':
+    'With reduced motion preferred, clicks still reach your handler but the animation does not play.',
+  hover: 'With reduced motion preferred, hovering does not play the animation.',
+  'hover-replay': 'With reduced motion preferred, hovering does not play the animation.',
+  'hover-loop': 'With reduced motion preferred, the icon stays static while hovered.',
+};
diff --git a/website/src/pages/[locale]/categories/[slug].astro b/website/src/pages/[locale]/categories/[slug].astro
new file mode 100644
index 0000000..1d0de75
--- /dev/null
+++ b/website/src/pages/[locale]/categories/[slug].astro
@@ -0,0 +1,18 @@
+---
+import type { GetStaticPaths } from 'astro';
+import { type Locale, TRANSLATED } from '../../../i18n';
+import { categories } from '../../../lib/hubs';
+import CategoryPage from '../../../views/CategoryPage.astro';
+
+export const getStaticPaths = (() =>
+  TRANSLATED.flatMap((locale) =>
+    categories().map(({ meta }) => ({
+      params: { locale: locale.code, slug: meta.slug },
+      props: { locale, name: meta.name },
+    }))
+  )) satisfies GetStaticPaths;
+
+const { locale, name } = Astro.props as { locale: Locale; name: string };
+---
+
+<CategoryPage locale={locale} name={name} />
diff --git a/website/src/pages/[locale]/interactions/[slug].astro b/website/src/pages/[locale]/interactions/[slug].astro
new file mode 100644
index 0000000..03e9e87
--- /dev/null
+++ b/website/src/pages/[locale]/interactions/[slug].astro
@@ -0,0 +1,19 @@
+---
+import type { GetStaticPaths } from 'astro';
+import type { Interaction } from 'react-useanimations';
+import { type Locale, TRANSLATED } from '../../../i18n';
+import { interactions } from '../../../lib/hubs';
+import InteractionPage from '../../../views/InteractionPage.astro';
+
+export const getStaticPaths = (() =>
+  TRANSLATED.flatMap((locale) =>
+    interactions().map(({ interaction }) => ({
+      params: { locale: locale.code, slug: interaction },
+      props: { locale, interaction },
+    }))
+  )) satisfies GetStaticPaths;
+
+const { locale, interaction } = Astro.props as { locale: Locale; interaction: Interaction };
+---
+
+<InteractionPage locale={locale} interaction={interaction} />
diff --git a/website/src/pages/categories/[slug].astro b/website/src/pages/categories/[slug].astro
index 64cacc9..d267893 100644
--- a/website/src/pages/categories/[slug].astro
+++ b/website/src/pages/categories/[slug].astro
@@ -1,136 +1,13 @@
 ---
 import type { GetStaticPaths } from 'astro';
-import Breadcrumbs from '../../components/Breadcrumbs.astro';
-import CodeBlock from '../../components/CodeBlock.astro';
-import FaqList from '../../components/FaqList.astro';
-import IconGrid from '../../components/IconGrid.astro';
-import Layout from '../../layouts/Layout.astro';
-import {
-  breadcrumbNode,
-  categories,
-  categoryFaq,
-  categoryPath,
-  categoryText,
-  collectionPageNode,
-  interactionPath,
-  plural,
-} from '../../lib/hubs';
-import { INTERACTIONS, reactExample, shadcnCommand, shadcnExample } from '../../lib/icons';
-import { faqNode, websiteNode } from '../../lib/seo';
-import { INTERACTION_META } from '../../lib/taxonomy';
+import { EN } from '../../i18n';
+import { categories } from '../../lib/hubs';
+import CategoryPage from '../../views/CategoryPage.astro';
 
 export const getStaticPaths = (() =>
   categories().map(({ meta }) => ({ params: { slug: meta.slug }, props: { name: meta.name } }))) satisfies GetStaticPaths;
 
 const { name } = Astro.props as { name: string };
-const all = categories();
-const { meta, icons } = all.find((category) => category.meta.name === name)!;
-const text = categoryText(meta);
-const path = categoryPath(meta);
-const faq = categoryFaq(meta);
-const crumbs = [
-  { name: 'Icons', path: '/icons' },
-  { name: 'Categories', path: '/categories' },
-  { name: meta.name, path },
-];
-const jsonLd = {
-  '@context': 'https://schema.org',
-  '@graph': [
-    collectionPageNode(path, meta.title, text.description, icons),
-    breadcrumbNode(crumbs),
-    faqNode(faq),
-    websiteNode(),
-  ],
-};
 ---
 
-<Layout title={text.title} description={text.description} path={path} jsonLd={jsonLd} noindex={!meta.indexable} head={[{ rel: 'alternate', type: 'text/markdown', href: `${path}.md`, title: `${meta.title} (Markdown)` }]}>
-  <div class="mx-auto max-w-6xl px-5 pt-10 sm:px-8">
-    <Breadcrumbs crumbs={crumbs} />
-
-    <header class="mt-8 max-w-3xl">
-      <p class="text-sm font-medium text-accent">{plural(icons.length, 'icon')} · MIT licensed</p>
-      <h1 class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">{meta.title}</h1>
-      <p class="mt-4 text-lg leading-relaxed text-muted">{meta.intro}</p>
-      <p class="mt-4 leading-relaxed text-muted">{text.summary}</p>
-    </header>
-
-    <section class="mt-12" aria-labelledby="icons-title">
-      <h2 id="icons-title" class="text-lg font-semibold">All {meta.name.toLowerCase()} icons</h2>
-      <IconGrid class="mt-4" icons={icons} />
-    </section>
-
-    <div class="mt-16 grid gap-12 lg:grid-cols-2">
-      <section aria-labelledby="uses-title">
-        <h2 id="uses-title" class="text-2xl font-semibold tracking-tight">Where to use them</h2>
-        <ul class="mt-4 list-disc space-y-2 pl-5 text-muted marker:text-subtle">
-          {meta.useCases.map((useCase) => <li>{useCase}</li>)}
-        </ul>
-      </section>
-
-      <section aria-labelledby="by-interaction-title">
-        <h2 id="by-interaction-title" class="text-2xl font-semibold tracking-tight">By interaction</h2>
-        <ul class="mt-4 space-y-4">
-          {
-            text.byInteraction.map(({ interaction, icons: group }) => (
-              <li>
-                <a href={interactionPath(interaction)} class="font-medium text-fg underline-offset-4 hover:underline">
-                  {INTERACTION_META[interaction].title}
-                </a>
-                <span class="text-subtle"> · {group.length}</span>
-                <p class="mt-1 text-sm leading-relaxed text-muted">
-                  {INTERACTIONS[interaction].description} {group.map((icon) => icon.title).join(', ')}.
-                </p>
-              </li>
-            ))
-          }
-        </ul>
-      </section>
-    </div>
-
-    <section class="mt-16 max-w-3xl" aria-labelledby="code-title">
-      <h2 id="code-title" class="text-2xl font-semibold tracking-tight">Add one to your app</h2>
-      <p class="mt-3 leading-relaxed text-muted">
-        With React, install <code class="font-mono text-sm text-fg">react-useanimations</code> and import the icon; it
-        plays its {INTERACTIONS[text.example.interaction].label.toLowerCase()} interaction on its own. Every icon in this
-        category works the same way: swap <code class="font-mono text-sm text-fg">{text.example.name}</code> for the
-        name on its page.
-      </p>
-      <CodeBlock class="mt-4" lang="bash" code="npm install react-useanimations" track={{ code: 'install' }} />
-      <CodeBlock class="mt-3" lang="jsx" code={reactExample(text.example.exportName, text.example.name)} track={{ icon: text.example.id, code: 'react' }} />
-      <p class="mt-6 leading-relaxed text-muted">
-        With <a class="text-fg underline underline-offset-4" href="/shadcn-animated-icons">shadcn/ui</a>, the CLI adds a
-        ready-made component:
-      </p>
-      <CodeBlock class="mt-3" lang="bash" code={shadcnCommand(text.example)} track={{ icon: text.example.id, code: 'shadcn-command' }} />
-      <CodeBlock class="mt-3" lang="tsx" code={shadcnExample(text.example.id, text.example.component)} track={{ icon: text.example.id, code: 'shadcn' }} />
-      <p class="mt-6 leading-relaxed text-muted">
-        Not using React? Each icon is a Lottie JSON file at <code class="font-mono text-sm text-fg">/icons/&lt;id&gt;.json</code>;
-        see <a class="text-fg underline underline-offset-4" href="/lottie-icons">Lottie icons</a> for web, iOS, Android
-        and Flutter players.
-      </p>
-    </section>
-
-    <FaqList class="mt-16" faq={faq} />
-
-    <nav aria-labelledby="more-title" class="mt-16 border-t border-line pt-8">
-      <h2 id="more-title" class="text-lg font-semibold">More categories</h2>
-      <ul class="mt-4 flex flex-wrap gap-2">
-        {
-          all
-            .filter((other) => other.meta.name !== meta.name)
-            .map((other) => (
-              <li>
-                <a href={categoryPath(other.meta)} class="inline-flex rounded-full border border-line px-3.5 py-1.5 text-sm text-muted transition hover:border-line-strong hover:text-fg">
-                  {other.meta.name} <span class="ml-1.5 text-subtle">{other.icons.length}</span>
-                </a>
-              </li>
-            ))
-        }
-        <li>
-          <a href="/icons" class="inline-flex rounded-full bg-fg px-3.5 py-1.5 text-sm font-medium text-bg hover:opacity-85">All icons</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</Layout>
+<CategoryPage locale={EN} name={name} />
diff --git a/website/src/pages/interactions/[slug].astro b/website/src/pages/interactions/[slug].astro
index d32e00f..1e46865 100644
--- a/website/src/pages/interactions/[slug].astro
+++ b/website/src/pages/interactions/[slug].astro
@@ -1,243 +1,14 @@
 ---
 import type { GetStaticPaths } from 'astro';
 import type { Interaction } from 'react-useanimations';
-import Breadcrumbs from '../../components/Breadcrumbs.astro';
-import CodeBlock from '../../components/CodeBlock.astro';
-import FaqList from '../../components/FaqList.astro';
-import IconGrid from '../../components/IconGrid.astro';
-import InteractionDemo from '../../components/InteractionDemo';
-import Layout from '../../layouts/Layout.astro';
-import {
-  breadcrumbNode,
-  categoryPath,
-  collectionPageNode,
-  interactionFaq,
-  interactionPath,
-  interactions,
-  interactionText,
-  pickIcons,
-  plural,
-  REDUCED_MOTION,
-} from '../../lib/hubs';
-import { INTERACTIONS } from '../../lib/icons';
-import { faqNode, websiteNode } from '../../lib/seo';
-import { iconsByInteraction, INTERACTION_META } from '../../lib/taxonomy';
+import { EN } from '../../i18n';
+import { interactions } from '../../lib/hubs';
+import InteractionPage from '../../views/InteractionPage.astro';
 
 export const getStaticPaths = (() =>
   interactions().map(({ interaction }) => ({ params: { slug: interaction }, props: { interaction } }))) satisfies GetStaticPaths;
 
 const { interaction } = Astro.props as { interaction: Interaction };
-const meta = INTERACTION_META[interaction];
-const info = INTERACTIONS[interaction];
-const items = iconsByInteraction(interaction);
-const copy = interactionText(interaction);
-const path = interactionPath(interaction);
-const faq = interactionFaq(interaction);
-const hover = interaction.startsWith('hover');
-const crumbs = [
-  { name: 'Icons', path: '/icons' },
-  { name: 'Interactions', path: '/interactions' },
-  { name: info.label, path },
-];
-
-// Another icon given this interaction with the prop.
-const [other] = pickIcons(['settings', 'bookmark', 'star']).filter((icon) => icon.interaction !== interaction);
-const ex = copy.example;
-const imports = (icon: typeof ex) => `import ${icon.exportName} from 'react-useanimations/lib/${icon.name}';`;
-const overrideCode = `import UseAnimations from 'react-useanimations';
-${imports(other)}
-
-// ${other.title} normally uses '${other.interaction}'
-<UseAnimations animation={${other.exportName}} interaction="${interaction}" size={32} />`;
-
-const extra: Record<Interaction, { text: string; code: string }> = {
-  loop: {
-    text: 'Loops autoplay and pause while scrolled out of view. Slow one down with speed, play it once with loop={false}, or keep it still with autoplay={false}:',
-    code: `${imports(ex)}
-
-<UseAnimations animation={${ex.exportName}} speed={0.5} />      // half speed
-<UseAnimations animation={${ex.exportName}} loop={false} />     // plays once, then stops
-<UseAnimations animation={${ex.exportName}} autoplay={false} /> // static first frame`,
-  },
-  'click-toggle': {
-    text: 'Clicks toggle the icon on their own. To keep it in sync with your state, pass active: the icon animates whenever active changes, and clicks no longer toggle it by themselves.',
-    code: `import { useState } from 'react';
-${imports(ex)}
-
-export function MenuButton() {
-  const [open, setOpen] = useState(false);
-  return (
-    <UseAnimations
-      animation={${ex.exportName}}
-      active={open} // true shows the end state
-      onClick={() => setOpen(!open)}
-      aria-label={open ? 'Close menu' : 'Open menu'}
-    />
-  );
-}`,
-  },
-  'click-replay': {
-    text: 'Put the icon in a real button with the render prop, so it can be focused and announced. Your onClick runs first; call event.preventDefault() to skip the animation.',
-    code: `${imports(ex)}
-
-<UseAnimations
-  animation={${ex.exportName}}
-  size={24}
-  onClick={handleDownload}
-  render={(eventProps, animationProps) => (
-    <button type="button" aria-label="Download" {...eventProps}>
-      <span {...animationProps} />
-    </button>
-  )}
-/>`,
-  },
-  hover: {
-    text: 'Put the icon in a link or button with the render prop: the animation then also plays when the element gets keyboard focus, and taps on touch screens do not trigger it.',
-    code: `${imports(ex)}
-
-<UseAnimations
-  animation={${ex.exportName}}
-  render={(eventProps, animationProps) => (
-    <a href="/archive" {...eventProps}>
-      <span {...animationProps} /> Archive
-    </a>
-  )}
-/>`,
-  },
-  'hover-replay': {
-    text: 'Hover the whole card or link, not just the icon: with the render prop the events go on your element, and keyboard focus plays the animation too.',
-    code: `${imports(ex)}
-
-<UseAnimations
-  animation={${ex.exportName}}
-  render={(eventProps, animationProps) => (
-    <a href="/reports" className="card" {...eventProps}>
-      <span {...animationProps} /> Weekly growth
-    </a>
-  )}
-/>`,
-  },
-  'hover-loop': {
-    text: 'Use the render prop so the whole link triggers the loop, including keyboard focus. Change the pace with speed:',
-    code: `${imports(ex)}
-
-<UseAnimations
-  animation={${ex.exportName}}
-  speed={1.5}
-  render={(eventProps, animationProps) => (
-    <a href="https://github.com/useAnimations" aria-label="GitHub" {...eventProps}>
-      <span {...animationProps} />
-    </a>
-  )}
-/>`,
-  },
-};
-
-const jsonLd = {
-  '@context': 'https://schema.org',
-  '@graph': [
-    collectionPageNode(path, meta.title, copy.description, items),
-    breadcrumbNode(crumbs),
-    faqNode(faq),
-    websiteNode(),
-  ],
-};
 ---
 
-<Layout title={copy.title} description={copy.description} path={path} jsonLd={jsonLd}>
-  <div class="mx-auto max-w-6xl px-5 pt-10 sm:px-8">
-    <Breadcrumbs crumbs={crumbs} />
-
-    <div class="mt-8 grid items-start gap-10 lg:grid-cols-[1fr_20rem]">
-      <header class="max-w-3xl">
-        <p class="text-sm font-medium text-accent">
-          {plural(items.length, 'icon')} · <code class="font-mono">interaction="{interaction}"</code>
-        </p>
-        <h1 class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">{meta.title}</h1>
-        <p class="mt-4 text-lg leading-relaxed text-muted">{meta.intro}</p>
-      </header>
-      <InteractionDemo
-        client:visible
-        id={ex.id}
-        interaction={interaction}
-        title={ex.title}
-        description={info.description}
-        hint={info.description}
-      />
-    </div>
-
-    <section class="mt-12" aria-labelledby="icons-title">
-      <h2 id="icons-title" class="text-lg font-semibold">All {info.label.toLowerCase()} icons</h2>
-      <IconGrid class="mt-4" icons={items} />
-    </section>
-
-    <div class="mt-16 grid gap-12 lg:grid-cols-2">
-      <section aria-labelledby="behaviour-title">
-        <h2 id="behaviour-title" class="text-2xl font-semibold tracking-tight">How it behaves</h2>
-        <p class="mt-4 leading-relaxed text-muted">{info.description}</p>
-        <p class="mt-3 leading-relaxed text-muted">
-          {REDUCED_MOTION[interaction]}
-          {hover && ' Taps on touch screens do not start hover animations, and keyboard focus does when the icon is inside a focusable element.'}{' '}
-          The React component handles all of this; you only pick the icon.
-        </p>
-        <h3 class="mt-8 font-semibold">Where to use it</h3>
-        <ul class="mt-3 list-disc space-y-2 pl-5 text-muted marker:text-subtle">
-          {meta.useCases.map((useCase) => <li>{useCase}</li>)}
-        </ul>
-      </section>
-
-      <section aria-labelledby="by-category-title">
-        <h2 id="by-category-title" class="text-2xl font-semibold tracking-tight">By category</h2>
-        <ul class="mt-4 space-y-3">
-          {
-            copy.byCategory.map(({ meta: category, icons: group }) => (
-              <li>
-                <a href={categoryPath(category)} class="font-medium text-fg underline-offset-4 hover:underline">{category.name}</a>
-                <span class="text-subtle"> · {group.length}</span>
-                <p class="mt-0.5 text-sm text-muted">{group.map((icon) => icon.title).join(', ')}</p>
-              </li>
-            ))
-          }
-        </ul>
-      </section>
-    </div>
-
-    <section class="mt-16 max-w-3xl" aria-labelledby="code-title">
-      <h2 id="code-title" class="text-2xl font-semibold tracking-tight">Use it in React</h2>
-      <p class="mt-3 leading-relaxed text-muted">
-        Icons listed here play this interaction by default. Any other icon can use it too: pass the{' '}
-        <code class="font-mono text-sm text-fg">interaction</code> prop.
-      </p>
-      <CodeBlock class="mt-4" lang="jsx" code={overrideCode} track={{ icon: other.id, code: 'interaction' }} />
-      <p class="mt-6 leading-relaxed text-muted">{extra[interaction].text}</p>
-      <CodeBlock class="mt-3" lang="jsx" code={extra[interaction].code} track={{ icon: ex.id, code: 'react' }} />
-      <p class="mt-6 leading-relaxed text-muted">
-        Every prop is in the <a class="text-fg underline underline-offset-4" href="/documentation#props">documentation</a>.
-        Outside React, the icons are Lottie JSON files; <a class="text-fg underline underline-offset-4" href="/lottie-icons">Lottie icons</a>{' '}
-        shows how to recreate the interactions with lottie-web.
-      </p>
-    </section>
-
-    <FaqList class="mt-16" faq={faq} />
-
-    <nav aria-labelledby="more-title" class="mt-16 border-t border-line pt-8">
-      <h2 id="more-title" class="text-lg font-semibold">Other interactions</h2>
-      <ul class="mt-4 flex flex-wrap gap-2">
-        {
-          interactions()
-            .filter((group) => group.interaction !== interaction)
-            .map((group) => (
-              <li>
-                <a href={interactionPath(group.interaction)} class="inline-flex rounded-full border border-line px-3.5 py-1.5 text-sm text-muted transition hover:border-line-strong hover:text-fg">
-                  {INTERACTIONS[group.interaction].label} <span class="ml-1.5 text-subtle">{group.icons.length}</span>
-                </a>
-              </li>
-            ))
-        }
-        <li>
-          <a href="/categories" class="inline-flex rounded-full bg-fg px-3.5 py-1.5 text-sm font-medium text-bg hover:opacity-85">Browse by category</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</Layout>
+<InteractionPage locale={EN} interaction={interaction} />
diff --git a/website/src/scripts/copy.ts b/website/src/scripts/copy.ts
index 7b7637d..f236105 100644
--- a/website/src/scripts/copy.ts
+++ b/website/src/scripts/copy.ts
@@ -1,4 +1,5 @@
-// Copy buttons: <button data-copy="text"> or <button data-copy-from="#selector">.
+// Copy buttons: <button data-copy="text"> or <button data-copy-from="#selector">. The feedback
+// text comes from <body data-copied-text data-copy-failed-text> (Layout.astro), in the page's language.
 const label = (button: HTMLElement, text: string) => {
   const target = button.querySelector('[data-copy-label]') ?? button;
   const previous = target.textContent;
@@ -19,8 +20,8 @@ document.addEventListener('click', async (event) => {
   const text = button.dataset.copy ?? source?.textContent ?? '';
   try {
     await navigator.clipboard.writeText(text.trim());
-    label(button, 'Copied');
+    label(button, document.body.dataset.copiedText ?? 'Copied');
   } catch {
-    label(button, 'Press Ctrl+C');
+    label(button, document.body.dataset.copyFailedText ?? 'Press Ctrl+C');
   }
 });
diff --git a/website/src/views/CategoryPage.astro b/website/src/views/CategoryPage.astro
new file mode 100644
index 0000000..ba753d9
--- /dev/null
+++ b/website/src/views/CategoryPage.astro
@@ -0,0 +1,140 @@
+---
+// A category page (/categories/<slug>) in any language; src/pages routes render it.
+import Breadcrumbs from '../components/Breadcrumbs.astro';
+import CodeBlock from '../components/CodeBlock.astro';
+import FaqList from '../components/FaqList.astro';
+import IconGrid from '../components/IconGrid.astro';
+import { alternatesOf, type Locale, localize, t } from '../i18n';
+import Layout from '../layouts/Layout.astro';
+import {
+  breadcrumbNode,
+  categories,
+  categoryFaq,
+  categoryPath,
+  categoryText,
+  collectionPageNode,
+  interactionPath,
+} from '../lib/hubs';
+import { reactExample, shadcnCommand, shadcnExample } from '../lib/icons';
+import { faqNode, websiteNode } from '../lib/seo';
+
+interface Props {
+  locale: Locale;
+  /** Category name as in catalog.json. */
+  name: string;
+}
+
+const { locale, name } = Astro.props;
+const m = t(locale);
+const h = m.hubs.category;
+const all = categories();
+const { meta, icons } = all.find((category) => category.meta.name === name)!;
+const copy = m.taxonomy.categories[meta.name];
+const text = categoryText(meta, locale);
+const path = categoryPath(meta);
+const href = (p: string) => localize(p, locale);
+const faq = categoryFaq(meta, locale);
+const crumbs = [
+  { name: m.common.crumbs.icons, path: href('/icons') },
+  { name: m.common.crumbs.categories, path: href('/categories') },
+  { name: copy.name, path: href(path) },
+];
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@graph': [
+    collectionPageNode(href(path), copy.title, text.description, icons, locale),
+    breadcrumbNode(crumbs),
+    faqNode(faq),
+    websiteNode(),
+  ],
+};
+const markdown = locale.prefix ? [] : [{ rel: 'alternate', type: 'text/markdown', href: `${path}.md`, title: `${meta.title} (Markdown)` }];
+---
+
+<Layout
+  title={text.title}
+  description={text.description}
+  path={href(path)}
+  locale={locale}
+  alternates={meta.indexable ? alternatesOf(path) : undefined}
+  jsonLd={jsonLd}
+  noindex={!meta.indexable}
+  head={markdown}
+>
+  <div class="mx-auto max-w-6xl px-5 pt-10 sm:px-8">
+    <Breadcrumbs crumbs={crumbs} label={m.common.breadcrumb} />
+
+    <header class="mt-8 max-w-3xl">
+      <p class="text-sm font-medium text-accent">{h.badge(icons.length)}</p>
+      <h1 class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">{copy.title}</h1>
+      <p class="mt-4 text-lg leading-relaxed text-muted">{copy.intro}</p>
+      <p class="mt-4 leading-relaxed text-muted">{text.summary}</p>
+    </header>
+
+    <section class="mt-12" aria-labelledby="icons-title">
+      <h2 id="icons-title" class="text-lg font-semibold">{h.allIcons(copy.name)}</h2>
+      <IconGrid class="mt-4" icons={icons} locale={locale} />
+    </section>
+
+    <div class="mt-16 grid gap-12 lg:grid-cols-2">
+      <section aria-labelledby="uses-title">
+        <h2 id="uses-title" class="text-2xl font-semibold tracking-tight">{h.whereToUse}</h2>
+        <ul class="mt-4 list-disc space-y-2 pl-5 text-muted marker:text-subtle">
+          {copy.useCases.map((useCase) => <li>{useCase}</li>)}
+        </ul>
+      </section>
+
+      <section aria-labelledby="by-interaction-title">
+        <h2 id="by-interaction-title" class="text-2xl font-semibold tracking-tight">{h.byInteraction}</h2>
+        <ul class="mt-4 space-y-4">
+          {
+            text.byInteraction.map(({ interaction, icons: group }) => (
+              <li>
+                <a href={href(interactionPath(interaction))} class="font-medium text-fg underline-offset-4 hover:underline">
+                  {m.taxonomy.interactions[interaction].title}
+                </a>
+                <span class="text-subtle"> · {group.length}</span>
+                <p class="mt-1 text-sm leading-relaxed text-muted">
+                  {m.taxonomy.interactions[interaction].description} <span lang={locale.prefix ? 'en' : undefined}>{group.map((icon) => icon.title).join(', ')}</span>.
+                </p>
+              </li>
+            ))
+          }
+        </ul>
+      </section>
+    </div>
+
+    <section class="mt-16 max-w-3xl" aria-labelledby="code-title">
+      <h2 id="code-title" class="text-2xl font-semibold tracking-tight">{h.addOne}</h2>
+      <p class="mt-3 leading-relaxed text-muted" set:html={h.addOneHtml(m.taxonomy.interactions[text.example.interaction].label, text.example.name)} />
+      <CodeBlock class="mt-4" lang="bash" code="npm install react-useanimations" track={{ code: 'install' }} locale={locale} />
+      <CodeBlock class="mt-3" lang="jsx" code={reactExample(text.example.exportName, text.example.name)} track={{ icon: text.example.id, code: 'react' }} locale={locale} />
+      <p class="mt-6 leading-relaxed text-muted" set:html={h.shadcnHtml(href('/shadcn-animated-icons'))} />
+      <CodeBlock class="mt-3" lang="bash" code={shadcnCommand(text.example)} track={{ icon: text.example.id, code: 'shadcn-command' }} locale={locale} />
+      <CodeBlock class="mt-3" lang="tsx" code={shadcnExample(text.example.id, text.example.component)} track={{ icon: text.example.id, code: 'shadcn' }} locale={locale} />
+      <p class="mt-6 leading-relaxed text-muted" set:html={h.noReactHtml(href('/lottie-icons'))} />
+    </section>
+
+    <FaqList class="mt-16" faq={faq} title={m.common.faq} />
+
+    <nav aria-labelledby="more-title" class="mt-16 border-t border-line pt-8">
+      <h2 id="more-title" class="text-lg font-semibold">{h.more}</h2>
+      <ul class="mt-4 flex flex-wrap gap-2">
+        {
+          all
+            .filter((other) => other.meta.name !== meta.name)
+            .map((other) => (
+              <li>
+                <a href={href(categoryPath(other.meta))} class="inline-flex rounded-full border border-line px-3.5 py-1.5 text-sm text-muted transition hover:border-line-strong hover:text-fg">
+                  {m.taxonomy.categories[other.meta.name].name} <span class="ml-1.5 text-subtle">{other.icons.length}</span>
+                </a>
+              </li>
+            ))
+        }
+        <li>
+          <a href={href('/icons')} class="inline-flex rounded-full bg-fg px-3.5 py-1.5 text-sm font-medium text-bg hover:opacity-85">{h.allIconsButton}</a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</Layout>
diff --git a/website/src/views/InteractionPage.astro b/website/src/views/InteractionPage.astro
new file mode 100644
index 0000000..9700989
--- /dev/null
+++ b/website/src/views/InteractionPage.astro
@@ -0,0 +1,223 @@
+---
+// An interaction page (/interactions/<interaction>) in any language; src/pages routes render it.
+import type { Interaction } from 'react-useanimations';
+import Breadcrumbs from '../components/Breadcrumbs.astro';
+import CodeBlock from '../components/CodeBlock.astro';
+import FaqList from '../components/FaqList.astro';
+import IconGrid from '../components/IconGrid.astro';
+import InteractionDemo from '../components/InteractionDemo';
+import { alternatesOf, type Locale, localize, t } from '../i18n';
+import Layout from '../layouts/Layout.astro';
+import {
+  breadcrumbNode,
+  categoryPath,
+  collectionPageNode,
+  interactionFaq,
+  interactionPath,
+  interactions,
+  interactionText,
+  pickIcons,
+} from '../lib/hubs';
+import { faqNode, websiteNode } from '../lib/seo';
+import { iconsByInteraction } from '../lib/taxonomy';
+
+interface Props {
+  locale: Locale;
+  interaction: Interaction;
+}
+
+const { locale, interaction } = Astro.props;
+const m = t(locale);
+const h = m.hubs.interaction;
+const c = h.codeText;
+const info = m.taxonomy.interactions[interaction];
+const items = iconsByInteraction(interaction);
+const copy = interactionText(interaction, locale);
+const path = interactionPath(interaction);
+const href = (p: string) => localize(p, locale);
+const faq = interactionFaq(interaction, locale);
+const hover = interaction.startsWith('hover');
+const en = locale.prefix ? 'en' : undefined;
+const crumbs = [
+  { name: m.common.crumbs.icons, path: href('/icons') },
+  { name: m.common.crumbs.interactions, path: href('/interactions') },
+  { name: info.label, path: href(path) },
+];
+
+// Another icon given this interaction with the prop.
+const [other] = pickIcons(['settings', 'bookmark', 'star']).filter((icon) => icon.interaction !== interaction);
+const ex = copy.example;
+const imports = (icon: typeof ex) => `import ${icon.exportName} from 'react-useanimations/lib/${icon.name}';`;
+const overrideCode = `import UseAnimations from 'react-useanimations';
+${imports(other)}
+
+// ${h.normallyUses(other.title, other.interaction)}
+<UseAnimations animation={${other.exportName}} interaction="${interaction}" size={32} />`;
+
+const code: Record<Interaction, string> = {
+  loop: `${imports(ex)}
+
+<UseAnimations animation={${ex.exportName}} speed={0.5} />      // ${c.halfSpeed}
+<UseAnimations animation={${ex.exportName}} loop={false} />     // ${c.playsOnce}
+<UseAnimations animation={${ex.exportName}} autoplay={false} /> // ${c.staticFrame}`,
+  'click-toggle': `import { useState } from 'react';
+${imports(ex)}
+
+export function MenuButton() {
+  const [open, setOpen] = useState(false);
+  return (
+    <UseAnimations
+      animation={${ex.exportName}}
+      active={open} // ${c.endState}
+      onClick={() => setOpen(!open)}
+      aria-label={open ? '${c.closeMenu}' : '${c.openMenu}'}
+    />
+  );
+}`,
+  'click-replay': `${imports(ex)}
+
+<UseAnimations
+  animation={${ex.exportName}}
+  size={24}
+  onClick={handleDownload}
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="${c.download}" {...eventProps}>
+      <span {...animationProps} />
+    </button>
+  )}
+/>`,
+  hover: `${imports(ex)}
+
+<UseAnimations
+  animation={${ex.exportName}}
+  render={(eventProps, animationProps) => (
+    <a href="/archive" {...eventProps}>
+      <span {...animationProps} /> ${c.archive}
+    </a>
+  )}
+/>`,
+  'hover-replay': `${imports(ex)}
+
+<UseAnimations
+  animation={${ex.exportName}}
+  render={(eventProps, animationProps) => (
+    <a href="/reports" className="card" {...eventProps}>
+      <span {...animationProps} /> ${c.weeklyGrowth}
+    </a>
+  )}
+/>`,
+  'hover-loop': `${imports(ex)}
+
+<UseAnimations
+  animation={${ex.exportName}}
+  speed={1.5}
+  render={(eventProps, animationProps) => (
+    <a href="https://github.com/useAnimations" aria-label="GitHub" {...eventProps}>
+      <span {...animationProps} />
+    </a>
+  )}
+/>`,
+};
+
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@graph': [
+    collectionPageNode(href(path), info.title, copy.description, items, locale),
+    breadcrumbNode(crumbs),
+    faqNode(faq),
+    websiteNode(),
+  ],
+};
+---
+
+
+<Layout title={copy.title} description={copy.description} path={href(path)} locale={locale} alternates={alternatesOf(path)} jsonLd={jsonLd}>
+  <div class="mx-auto max-w-6xl px-5 pt-10 sm:px-8">
+    <Breadcrumbs crumbs={crumbs} label={m.common.breadcrumb} />
+
+    <div class="mt-8 grid items-start gap-10 lg:grid-cols-[1fr_20rem]">
+      <header class="max-w-3xl">
+        <p class="text-sm font-medium text-accent">
+          {m.hubs.iconCount(items.length)} · <code class="font-mono">interaction="{interaction}"</code>
+        </p>
+        <h1 class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">{info.title}</h1>
+        <p class="mt-4 text-lg leading-relaxed text-muted">{info.intro}</p>
+      </header>
+      <InteractionDemo
+        client:visible
+        id={ex.id}
+        interaction={interaction}
+        title={ex.title}
+        description={info.description}
+        hint={info.description}
+      />
+    </div>
+
+    <section class="mt-12" aria-labelledby="icons-title">
+      <h2 id="icons-title" class="text-lg font-semibold">{h.allIcons(info.label)}</h2>
+      <IconGrid class="mt-4" icons={items} locale={locale} />
+    </section>
+
+    <div class="mt-16 grid gap-12 lg:grid-cols-2">
+      <section aria-labelledby="behaviour-title">
+        <h2 id="behaviour-title" class="text-2xl font-semibold tracking-tight">{h.behaviour}</h2>
+        <p class="mt-4 leading-relaxed text-muted">{info.description}</p>
+        <p class="mt-3 leading-relaxed text-muted">
+          {info.reducedMotion}
+          {hover && h.hoverNote}{' '}
+          {h.handled}
+        </p>
+        <h3 class="mt-8 font-semibold">{h.whereToUse}</h3>
+        <ul class="mt-3 list-disc space-y-2 pl-5 text-muted marker:text-subtle">
+          {info.useCases.map((useCase) => <li>{useCase}</li>)}
+        </ul>
+      </section>
+
+      <section aria-labelledby="by-category-title">
+        <h2 id="by-category-title" class="text-2xl font-semibold tracking-tight">{h.byCategory}</h2>
+        <ul class="mt-4 space-y-3">
+          {
+            copy.byCategory.map(({ meta: category, icons: group }) => (
+              <li>
+                <a href={href(categoryPath(category))} class="font-medium text-fg underline-offset-4 hover:underline">{m.taxonomy.categories[category.name].name}</a>
+                <span class="text-subtle"> · {group.length}</span>
+                <p class="mt-0.5 text-sm text-muted" lang={en}>{group.map((icon) => icon.title).join(', ')}</p>
+              </li>
+            ))
+          }
+        </ul>
+      </section>
+    </div>
+
+    <section class="mt-16 max-w-3xl" aria-labelledby="code-title">
+      <h2 id="code-title" class="text-2xl font-semibold tracking-tight">{h.useInReact}</h2>
+      <p class="mt-3 leading-relaxed text-muted" set:html={h.overrideHtml} />
+      <CodeBlock class="mt-4" lang="jsx" code={overrideCode} track={{ icon: other.id, code: 'interaction' }} locale={locale} />
+      <p class="mt-6 leading-relaxed text-muted">{h.extra[interaction]}</p>
+      <CodeBlock class="mt-3" lang="jsx" code={code[interaction]} track={{ icon: ex.id, code: 'react' }} locale={locale} />
+      <p class="mt-6 leading-relaxed text-muted" set:html={h.docsHtml(href('/documentation#props'), href('/lottie-icons'))} />
+    </section>
+
+    <FaqList class="mt-16" faq={faq} title={m.common.faq} />
+
+    <nav aria-labelledby="more-title" class="mt-16 border-t border-line pt-8">
+      <h2 id="more-title" class="text-lg font-semibold">{h.other}</h2>
+      <ul class="mt-4 flex flex-wrap gap-2">
+        {
+          interactions()
+            .filter((group) => group.interaction !== interaction)
+            .map((group) => (
+              <li>
+                <a href={href(interactionPath(group.interaction))} class="inline-flex rounded-full border border-line px-3.5 py-1.5 text-sm text-muted transition hover:border-line-strong hover:text-fg">
+                  {m.taxonomy.interactions[group.interaction].label} <span class="ml-1.5 text-subtle">{group.icons.length}</span>
+                </a>
+              </li>
+            ))
+        }
+        <li>
+          <a href={href('/categories')} class="inline-flex rounded-full bg-fg px-3.5 py-1.5 text-sm font-medium text-bg hover:opacity-85">{h.browseByCategory}</a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</Layout>

From 466f3e9b72bfb23b5769a4ba9db8200ae967d028 Mon Sep 17 00:00:00 2001
From: Tuan Phung <16448321+tuanphungcz@users.noreply.github.com>
Date: Tue, 13 Oct 2026 21:10:00 +0900
Subject: [PATCH 2/9] Website: format i18n foundation

---
 website/src/i18n/locales.ts              | 5 +----
 website/src/i18n/messages/en/taxonomy.ts | 7 +------
 website/src/lib/hubs.ts                  | 4 ++--
 3 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/website/src/i18n/locales.ts b/website/src/i18n/locales.ts
index 9322b37..ba4a71b 100644
--- a/website/src/i18n/locales.ts
+++ b/website/src/i18n/locales.ts
@@ -110,7 +110,4 @@ export const unlocalize = (path: string): { locale: Locale; path: string } => {
  * Pages that exist only in English have no alternates.
  */
 export const alternatesOf = (path: string): Record<string, string> =>
-  Object.fromEntries([
-    ...BUILT.map((l) => [l.hreflang, localize(path, l)]),
-    ['x-default', path],
-  ]);
+  Object.fromEntries([...BUILT.map((l) => [l.hreflang, localize(path, l)]), ['x-default', path]]);
diff --git a/website/src/i18n/messages/en/taxonomy.ts b/website/src/i18n/messages/en/taxonomy.ts
index e1e1195..167e7e0 100644
--- a/website/src/i18n/messages/en/taxonomy.ts
+++ b/website/src/i18n/messages/en/taxonomy.ts
@@ -2,12 +2,7 @@
 // lib/icons.ts (icon pages and Markdown use it too); other languages translate this shape.
 import type { Interaction } from 'react-useanimations';
 import { INTERACTIONS } from '../../../lib/icons';
-import {
-  CATEGORY_COPY,
-  INTERACTION_COPY,
-  PLAY,
-  REDUCED_MOTION,
-} from '../../../lib/taxonomy';
+import { CATEGORY_COPY, INTERACTION_COPY, PLAY, REDUCED_MOTION } from '../../../lib/taxonomy';
 
 export type CategoryText = {
   /** Display name, e.g. 'Maps & location'. */
diff --git a/website/src/lib/hubs.ts b/website/src/lib/hubs.ts
index fa6ce51..3fdc1af 100644
--- a/website/src/lib/hubs.ts
+++ b/website/src/lib/hubs.ts
@@ -8,7 +8,6 @@ import { type Faq, MAX_DESCRIPTION, MAX_TITLE, TITLE_SUFFIX, WEBSITE_ID } from '
 import {
   CATEGORY_META,
   type CategoryMeta,
-  INTERACTION_META,
   iconsByCategory,
   iconsByInteraction,
   REDUCED_MOTION,
@@ -31,7 +30,8 @@ export const localTitle = (l: Locale, stems: string[]) =>
   fit([...stems.map((stem) => stem + t(l).hubs.titleSuffix), ...stems], l.maxTitle);
 
 /** hubDescription in a language. */
-export const localDescription = (l: Locale, candidates: string[]) => fit(candidates, l.maxDescription);
+export const localDescription = (l: Locale, candidates: string[]) =>
+  fit(candidates, l.maxDescription);
 
 export const list = (items: string[]) =>
   items.length < 2 ? items.join('') : `${items.slice(0, -1).join(', ')} and ${items.at(-1)}`;

From fde6f52e9e9157c5ef30cd38086aee4b5570b278 Mon Sep 17 00:00:00 2001
From: Tuan Phung <16448321+tuanphungcz@users.noreply.github.com>
Date: Tue, 13 Oct 2026 21:18:43 +0900
Subject: [PATCH 3/9] Website: localized home, documentation, licence and hub
 pages; translatable islands; per-language sitemaps

---
 package-lock.json                             |   1 +
 website/astro.config.ts                       |   3 +
 website/package.json                          |   1 +
 website/src/components/Header.astro           |   5 +-
 website/src/components/IconCard.tsx           |  22 +-
 website/src/components/IconDialog.tsx         | 109 ++-
 website/src/components/IconPreview.tsx        |  17 +-
 website/src/components/InteractionDemo.tsx    |  18 +-
 website/src/components/MobileMenu.tsx         |  13 +-
 website/src/components/ThemeToggle.tsx        |  10 +-
 website/src/i18n/messages/en/docs.ts          |  39 +-
 website/src/i18n/messages/en/home.ts          | 234 +++++-
 website/src/i18n/messages/en/islands.ts       |  64 +-
 website/src/i18n/messages/en/licence.ts       |  30 +-
 website/src/i18n/messages/en/pages.ts         | 276 ++++++-
 website/src/lib/home.ts                       |  81 +--
 website/src/lib/markdown.ts                   |  47 ++
 website/src/lib/seo.ts                        |   3 +-
 website/src/lib/sitemap.ts                    |  97 ++-
 .../src/pages/[locale]/categories/index.astro |  12 +
 .../src/pages/[locale]/documentation.astro    |  12 +
 website/src/pages/[locale]/icons.astro        |  12 +
 website/src/pages/[locale]/index.astro        |  12 +
 .../pages/[locale]/interactions/index.astro   |  12 +
 .../pages/[locale]/licencing-and-terms.astro  |  12 +
 website/src/pages/[locale]/lottie-icons.astro |  12 +
 .../[locale]/shadcn-animated-icons.astro      |  12 +
 website/src/pages/categories/index.astro      |  82 +--
 website/src/pages/documentation.astro         | 115 +--
 website/src/pages/icons.astro                 |  88 +--
 website/src/pages/index.astro                 | 654 +----------------
 website/src/pages/interactions/index.astro    | 111 +--
 website/src/pages/licencing-and-terms.astro   |  56 +-
 website/src/pages/lottie-icons.astro          | 337 +--------
 website/src/pages/shadcn-animated-icons.astro | 179 +----
 website/src/pages/sitemap-[locale].xml.ts     |  14 +
 website/src/pages/sitemap.xml.ts              |   4 +-
 website/src/pages/zh.astro                    | 280 -------
 website/src/scripts/browser.ts                |  14 +-
 website/src/views/CategoryIndexPage.astro     |  87 +++
 website/src/views/DocumentationPage.astro     | 122 ++++
 website/src/views/HomePage.astro              | 685 ++++++++++++++++++
 website/src/views/IconIndexPage.astro         |  92 +++
 website/src/views/InteractionIndexPage.astro  | 107 +++
 website/src/views/InteractionPage.astro       |   1 +
 website/src/views/LicencePage.astro           |  54 ++
 website/src/views/LottieIconsPage.astro       | 311 ++++++++
 website/src/views/ShadcnIconsPage.astro       | 155 ++++
 48 files changed, 2669 insertions(+), 2045 deletions(-)
 create mode 100644 website/src/pages/[locale]/categories/index.astro
 create mode 100644 website/src/pages/[locale]/documentation.astro
 create mode 100644 website/src/pages/[locale]/icons.astro
 create mode 100644 website/src/pages/[locale]/index.astro
 create mode 100644 website/src/pages/[locale]/interactions/index.astro
 create mode 100644 website/src/pages/[locale]/licencing-and-terms.astro
 create mode 100644 website/src/pages/[locale]/lottie-icons.astro
 create mode 100644 website/src/pages/[locale]/shadcn-animated-icons.astro
 create mode 100644 website/src/pages/sitemap-[locale].xml.ts
 delete mode 100644 website/src/pages/zh.astro
 create mode 100644 website/src/views/CategoryIndexPage.astro
 create mode 100644 website/src/views/DocumentationPage.astro
 create mode 100644 website/src/views/HomePage.astro
 create mode 100644 website/src/views/IconIndexPage.astro
 create mode 100644 website/src/views/InteractionIndexPage.astro
 create mode 100644 website/src/views/LicencePage.astro
 create mode 100644 website/src/views/LottieIconsPage.astro
 create mode 100644 website/src/views/ShadcnIconsPage.astro

diff --git a/package-lock.json b/package-lock.json
index 630626f..357c7d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7019,6 +7019,7 @@
     "website": {
       "name": "@useanimations/website",
       "dependencies": {
+        "@astrojs/markdown-satteri": "0.4.3",
         "@astrojs/react": "^7.0.1",
         "@fontsource-variable/geist": "^5.3.0",
         "@fontsource-variable/geist-mono": "^5.3.0",
diff --git a/website/astro.config.ts b/website/astro.config.ts
index 21231a1..4f0fa83 100644
--- a/website/astro.config.ts
+++ b/website/astro.config.ts
@@ -1,3 +1,4 @@
+import { satteri } from '@astrojs/markdown-satteri';
 import react from '@astrojs/react';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'astro/config';
@@ -17,6 +18,8 @@ export default defineConfig({
   build: { format: 'file' },
   integrations: [react()],
   markdown: {
+    // `## Überschrift {#english-id}`: translated documentation keeps the English heading ids.
+    processor: satteri({ features: { headingAttributes: true } }),
     // The same themes as lib/highlight.ts.
     shikiConfig: {
       themes: { light: 'github-light-high-contrast', dark: 'github-dark-dimmed' },
diff --git a/website/package.json b/website/package.json
index 47a9fe8..287c716 100644
--- a/website/package.json
+++ b/website/package.json
@@ -8,6 +8,7 @@
     "preview": "astro preview"
   },
   "dependencies": {
+    "@astrojs/markdown-satteri": "0.4.3",
     "@astrojs/react": "^7.0.1",
     "@fontsource-variable/geist": "^5.3.0",
     "@fontsource-variable/geist-mono": "^5.3.0",
diff --git a/website/src/components/Header.astro b/website/src/components/Header.astro
index 24f31e1..b735878 100644
--- a/website/src/components/Header.astro
+++ b/website/src/components/Header.astro
@@ -12,6 +12,7 @@ interface Props {
 
 const { locale = EN } = Astro.props;
 const m = t(locale).common;
+const islands = t(locale).islands;
 const items = nav(locale);
 const path = Astro.url.pathname.replace(/\/$/, '') || '/';
 ---
@@ -37,13 +38,13 @@ const path = Astro.url.pathname.replace(/\/$/, '') || '/';
     </nav>
     <div class="ml-auto flex items-center gap-1.5">
       <NavIcon client:idle href={GITHUB} label="GitHub" />
-      <ThemeToggle client:idle />
+      <ThemeToggle client:idle strings={islands.themeToggle} />
       <a
         href={localize('/#icons', locale)}
         class="ml-1.5 hidden rounded-full bg-fg px-4 py-2 text-sm font-medium text-bg transition hover:opacity-85 sm:inline-flex"
         >{m.browseIcons}</a
       >
-      <MobileMenu client:idle items={items} />
+      <MobileMenu client:idle items={items} strings={islands.mobileMenu} />
     </div>
   </div>
 </header>
diff --git a/website/src/components/IconCard.tsx b/website/src/components/IconCard.tsx
index e1e9c85..d2f81de 100644
--- a/website/src/components/IconCard.tsx
+++ b/website/src/components/IconCard.tsx
@@ -1,16 +1,11 @@
 import type { HTMLAttributes } from 'react';
 import UseAnimations, { type Interaction } from 'react-useanimations';
+import { islands } from '../i18n/messages/en/islands';
 
 export type CardIcon = { id: string; title: string; interaction: Interaction };
 
-const HINT: Record<Interaction, string> = {
-  loop: 'Loop',
-  'click-toggle': 'Click',
-  'click-replay': 'Click',
-  hover: 'Hover',
-  'hover-loop': 'Hover',
-  'hover-replay': 'Hover',
-};
+/** The card's text in the page's language: t(locale).islands.iconCard. */
+export type CardStrings = typeof islands.iconCard;
 
 const SIZE = 'var(--icon-size, 40px)';
 
@@ -23,10 +18,11 @@ export const openIcon = (id: string) =>
 const Frame = ({
   children,
   icon,
+  strings,
   ...props
-}: HTMLAttributes<HTMLDivElement> & { icon: CardIcon }) => (
+}: HTMLAttributes<HTMLDivElement> & { icon: CardIcon; strings: CardStrings }) => (
   <div className="icon-card bg-surface" {...props}>
-    <span className="icon-card-hint">{HINT[icon.interaction]}</span>
+    <span className="icon-card-hint">{strings.hints[icon.interaction]}</span>
     <div className="icon-card-art">{children}</div>
     {/* The icon page, or the details dialog once it's ready; the whole card opens it (scripts/browser.ts). */}
     <a href={`/icons/${icon.id}`} data-details className="icon-card-title">
@@ -43,14 +39,16 @@ export default function IconCard({
   icon,
   still,
   animationData,
+  strings = islands.iconCard,
 }: {
   icon: CardIcon;
   still?: string;
   animationData?: object;
+  strings?: CardStrings;
 }) {
   if (!animationData) {
     return (
-      <Frame icon={icon}>
+      <Frame icon={icon} strings={strings}>
         <span
           aria-hidden="true"
           data-useanimations=""
@@ -66,7 +64,7 @@ export default function IconCard({
       size={SIZE}
       // Clicks open the details, so click icons don't play on the card; hover icons still do.
       render={({ onClick: _onClick, ...eventProps }, animationProps) => (
-        <Frame icon={icon} {...eventProps}>
+        <Frame icon={icon} strings={strings} {...eventProps}>
           <span {...animationProps} />
         </Frame>
       )}
diff --git a/website/src/components/IconDialog.tsx b/website/src/components/IconDialog.tsx
index 2271cfe..0d04f38 100644
--- a/website/src/components/IconDialog.tsx
+++ b/website/src/components/IconDialog.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import UseAnimations, { type Interaction } from 'react-useanimations';
+import { islands } from '../i18n/messages/en/islands';
 import { loadIconData } from '../lib/icon-data';
 import { tabFromKey } from '../lib/tabs';
 import { openIcon } from './IconCard';
@@ -16,6 +17,9 @@ export type DialogIcon = {
   durationMs: number;
 };
 
+/** The dialog's text in the page's language: t(locale).islands.iconDialog. */
+export type DialogStrings = typeof islands.iconDialog;
+
 /** Code blocks highlighted at build time, with __PLACEHOLDERS__ for the icon. */
 export type Templates = {
   react: string;
@@ -24,16 +28,9 @@ export type Templates = {
   files: string;
 };
 
-const TABS = ['React', 'shadcn', 'Files'] as const;
+// Tab keys are language-neutral: state, DOM ids and analytics (data-track-tab).
+const TABS = ['react', 'shadcn', 'files'] as const;
 const COLORS = ['', '#4b5cff', '#e5484d', '#f59e0b', '#12a594', '#a24bff'];
-const HINTS: Record<Interaction, string> = {
-  loop: 'Plays on its own',
-  'click-toggle': 'Click to toggle',
-  'click-replay': 'Click to replay',
-  hover: 'Hover to play, leave to reverse',
-  'hover-loop': 'Hover to loop',
-  'hover-replay': 'Hover to play',
-};
 
 const fill = (template: string, icon: DialogIcon) =>
   template
@@ -42,7 +39,17 @@ const fill = (template: string, icon: DialogIcon) =>
     .replaceAll('__COMPONENT__', icon.component)
     .replaceAll('__ID__', icon.id);
 
-function Code({ html, icon, code }: { html: string; icon: string; code: string }) {
+function Code({
+  html,
+  icon,
+  code,
+  label,
+}: {
+  html: string;
+  icon: string;
+  code: string;
+  label: string;
+}) {
   return (
     <div className="code-block group/code" data-copy-scope>
       <div data-code dangerouslySetInnerHTML={{ __html: html }} />
@@ -54,24 +61,42 @@ function Code({ html, icon, code }: { html: string; icon: string; code: string }
         data-track-code={code}
         className="absolute top-2 right-2 rounded-lg border border-line bg-surface px-2 py-1 text-xs text-muted opacity-0 transition group-hover/code:opacity-100 focus:opacity-100 data-[copied]:text-accent"
       >
-        <span data-copy-label>Copy</span>
+        <span data-copy-label>{label}</span>
       </button>
     </div>
   );
 }
 
+// 0.80 in the page's language (0,80 in German); the dialog's content only renders in the browser.
+const formatSeconds = (ms: number) =>
+  new Intl.NumberFormat(document.documentElement.lang || 'en', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(ms / 1000);
+
 const onClose = () => {
   const url = new URL(location.href);
   url.searchParams.delete('icon');
   history.replaceState(history.state, '', url);
 };
 
-/** The details of an icon: live preview, code and downloads. Opens on `ua:open-icon` events. */
-export default function IconDialog({ templates }: { templates: Templates }) {
+/**
+ * The details of an icon: live preview, code and downloads. Opens on `ua:open-icon` events.
+ * `categories` maps English category names to the page language's (t(locale).taxonomy.categories).
+ */
+export default function IconDialog({
+  templates,
+  strings: s = islands.iconDialog,
+  categories,
+}: {
+  templates: Templates;
+  strings?: DialogStrings;
+  categories?: Record<string, string>;
+}) {
   const dialog = useRef<HTMLDialogElement>(null);
   const [icon, setIcon] = useState<DialogIcon>();
   const [data, setData] = useState<object>();
-  const [tab, setTab] = useState<(typeof TABS)[number]>('React');
+  const [tab, setTab] = useState<(typeof TABS)[number]>('react');
   const [color, setColor] = useState('');
 
   const open = useCallback((id: string) => {
@@ -122,7 +147,7 @@ export default function IconDialog({ templates }: { templates: Templates }) {
                   key={icon.id}
                   animation={{ animationData: data, interaction: icon.interaction }}
                   size={120}
-                  aria-label={`${icon.title} preview`}
+                  aria-label={s.preview.replace('{title}', icon.title)}
                   render={(eventProps, animationProps) => (
                     <div
                       className="flex size-full cursor-pointer items-center justify-center"
@@ -136,15 +161,15 @@ export default function IconDialog({ templates }: { templates: Templates }) {
                 <span className="size-6 animate-pulse rounded-full bg-line-strong" />
               )}
               <span className="absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full bg-surface px-2.5 py-1 text-[11px] whitespace-nowrap text-muted shadow-sm">
-                {HINTS[icon.interaction]}
+                {s.hints[icon.interaction]}
               </span>
             </div>
-            <div className="mt-4 flex items-center gap-2" role="group" aria-label="Preview color">
+            <div className="mt-4 flex items-center gap-2" role="group" aria-label={s.colors}>
               {COLORS.map((value) => (
                 <button
                   key={value || 'default'}
                   type="button"
-                  aria-label={value ? `Color ${value}` : 'Text color'}
+                  aria-label={value ? s.color.replace('{color}', value) : s.textColor}
                   aria-pressed={color === value}
                   onClick={() => setColor(value)}
                   className="size-6 rounded-full border border-line-strong ring-offset-2 ring-offset-bg aria-pressed:ring-2 aria-pressed:ring-accent"
@@ -153,18 +178,18 @@ export default function IconDialog({ templates }: { templates: Templates }) {
               ))}
             </div>
             <dl className="mt-6 grid grid-cols-2 gap-y-3 text-sm">
-              <dt className="text-subtle">Interaction</dt>
+              <dt className="text-subtle">{s.interaction}</dt>
               <dd className="font-mono text-xs leading-5">{icon.interaction}</dd>
-              <dt className="text-subtle">Duration</dt>
-              <dd>{(icon.durationMs / 1000).toFixed(2)} s</dd>
-              <dt className="text-subtle">Import</dt>
+              <dt className="text-subtle">{s.duration}</dt>
+              <dd>{s.seconds.replace('{seconds}', formatSeconds(icon.durationMs))}</dd>
+              <dt className="text-subtle">{s.import}</dt>
               <dd className="font-mono text-xs leading-5">{icon.exportName}</dd>
             </dl>
           </div>
           <div className="min-w-0 p-6">
             <div className="flex items-start justify-between gap-4">
               <div>
-                <p className="text-sm text-muted">{icon.category}</p>
+                <p className="text-sm text-muted">{categories?.[icon.category] ?? icon.category}</p>
                 <h2 id="icon-dialog-title" className="text-2xl font-semibold tracking-tight">
                   {icon.title}
                 </h2>
@@ -172,7 +197,7 @@ export default function IconDialog({ templates }: { templates: Templates }) {
               <button
                 type="button"
                 onClick={() => dialog.current?.close()}
-                aria-label="Close"
+                aria-label={s.close}
                 className="rounded-full p-2 text-muted hover:bg-surface-2 hover:text-fg"
               >
                 <svg
@@ -189,7 +214,7 @@ export default function IconDialog({ templates }: { templates: Templates }) {
             </div>
             <div
               role="tablist"
-              aria-label="Code"
+              aria-label={s.code}
               className="mt-6 inline-flex rounded-full border border-line bg-surface-2 p-1"
             >
               {TABS.map((name, i) => (
@@ -203,7 +228,7 @@ export default function IconDialog({ templates }: { templates: Templates }) {
                   tabIndex={tab === name ? 0 : -1}
                   data-track="code-tab"
                   data-track-icon={icon.id}
-                  data-track-tab={name.toLowerCase()}
+                  data-track-tab={name}
                   onClick={() => setTab(name)}
                   onKeyDown={(event) => {
                     const next = tabFromKey(event.key, i, TABS.length);
@@ -213,7 +238,7 @@ export default function IconDialog({ templates }: { templates: Templates }) {
                   }}
                   className="rounded-full px-3.5 py-1.5 text-sm text-muted transition aria-selected:bg-surface aria-selected:text-fg aria-selected:shadow-sm"
                 >
-                  {name}
+                  {s.tabs[name]}
                 </button>
               ))}
             </div>
@@ -223,8 +248,13 @@ export default function IconDialog({ templates }: { templates: Templates }) {
               id="icon-tabpanel"
               aria-labelledby={`icon-tab-${tab}`}
             >
-              {tab === 'React' && (
-                <Code html={fill(templates.react, icon)} icon={icon.id} code="react" />
+              {tab === 'react' && (
+                <Code
+                  html={fill(templates.react, icon)}
+                  icon={icon.id}
+                  code="react"
+                  label={s.copy}
+                />
               )}
               {tab === 'shadcn' && (
                 <>
@@ -232,15 +262,26 @@ export default function IconDialog({ templates }: { templates: Templates }) {
                     html={fill(templates.shadcnCommand, icon)}
                     icon={icon.id}
                     code="shadcn-command"
+                    label={s.copy}
+                  />
+                  <Code
+                    html={fill(templates.shadcn, icon)}
+                    icon={icon.id}
+                    code="shadcn"
+                    label={s.copy}
                   />
-                  <Code html={fill(templates.shadcn, icon)} icon={icon.id} code="shadcn" />
                 </>
               )}
-              {tab === 'Files' && (
-                <Code html={fill(templates.files, icon)} icon={icon.id} code="files" />
+              {tab === 'files' && (
+                <Code
+                  html={fill(templates.files, icon)}
+                  icon={icon.id}
+                  code="files"
+                  label={s.copy}
+                />
               )}
             </div>
-            <h3 className="mt-8 text-sm font-medium">Download</h3>
+            <h3 className="mt-8 text-sm font-medium">{s.download}</h3>
             <div className="mt-3 flex flex-wrap gap-2">
               <a
                 href={`/icons/${icon.id}.zip`}
@@ -282,7 +323,7 @@ export default function IconDialog({ templates }: { templates: Templates }) {
                 data-track-icon={icon.id}
                 className="ml-auto self-center text-sm text-muted underline-offset-4 hover:text-fg hover:underline"
               >
-                Icon page →
+                {s.iconPage}
               </a>
             </div>
           </div>
diff --git a/website/src/components/IconPreview.tsx b/website/src/components/IconPreview.tsx
index 0cdff40..c9a1389 100644
--- a/website/src/components/IconPreview.tsx
+++ b/website/src/components/IconPreview.tsx
@@ -1,15 +1,10 @@
 import { useState } from 'react';
 import UseAnimations, { type Interaction } from 'react-useanimations';
+import { islands } from '../i18n/messages/en/islands';
 
 const COLORS = ['', '#4b5cff', '#e5484d', '#f59e0b', '#12a594', '#a24bff'];
-const HINTS: Record<Interaction, string> = {
-  loop: 'Plays on its own',
-  'click-toggle': 'Click to toggle',
-  'click-replay': 'Click to replay',
-  hover: 'Hover to play, leave to reverse',
-  'hover-loop': 'Hover to loop',
-  'hover-replay': 'Hover to play',
-};
+// Icon pages are English-only; the dialog's strings say how to play the icon.
+const { hints, colors, color: colorLabel, textColor } = islands.iconDialog;
 
 /** `lottie` is the Lottie JSON as a string. */
 type Props = { lottie: string; interaction: Interaction; title: string };
@@ -38,15 +33,15 @@ export default function IconPreview({ lottie, interaction, title }: Props) {
           )}
         />
         <span className="absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full bg-surface px-3 py-1 text-xs whitespace-nowrap text-muted shadow-sm">
-          {HINTS[interaction]}
+          {hints[interaction]}
         </span>
       </div>
-      <div className="mt-4 flex items-center gap-2" role="group" aria-label="Preview color">
+      <div className="mt-4 flex items-center gap-2" role="group" aria-label={colors}>
         {COLORS.map((value) => (
           <button
             key={value || 'default'}
             type="button"
-            aria-label={value ? `Color ${value}` : 'Text color'}
+            aria-label={value ? colorLabel.replace('{color}', value) : textColor}
             aria-pressed={color === value}
             onClick={() => setColor(value)}
             className="size-7 rounded-full border border-line-strong ring-offset-2 ring-offset-bg aria-pressed:ring-2 aria-pressed:ring-accent"
diff --git a/website/src/components/InteractionDemo.tsx b/website/src/components/InteractionDemo.tsx
index 3684d3c..89e72af 100644
--- a/website/src/components/InteractionDemo.tsx
+++ b/website/src/components/InteractionDemo.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import UseAnimations, { type Interaction } from 'react-useanimations';
+import { islands } from '../i18n/messages/en/islands';
 import { loadIconData } from '../lib/icon-data';
 
 type Props = {
@@ -9,12 +10,21 @@ type Props = {
   title: string;
   description: string;
   hint: string;
+  /** The card's text in the page's language: t(locale).islands.interactionDemo. */
+  strings?: typeof islands.interactionDemo;
 };
 
 const SIZE = 56;
 
 /** A card that plays its icon's interaction when the card itself is hovered, clicked or focused. */
-export default function InteractionDemo({ id, interaction, title, description, hint }: Props) {
+export default function InteractionDemo({
+  id,
+  interaction,
+  title,
+  description,
+  hint,
+  strings = islands.interactionDemo,
+}: Props) {
   const clickable = interaction.startsWith('click');
   const [animationData, setAnimationData] = useState<object>();
   useEffect(() => {
@@ -37,11 +47,7 @@ export default function InteractionDemo({ id, interaction, title, description, h
       <span className="mt-2 text-lg font-semibold tracking-tight text-fg">{title}</span>
       <span className="mt-1.5 text-sm leading-relaxed text-muted">{description}</span>
       <span className="mt-auto pt-5 text-xs font-medium text-subtle">
-        {clickable
-          ? 'Click the card'
-          : interaction === 'loop'
-            ? 'Plays on its own'
-            : 'Hover the card'}
+        {clickable ? strings.click : interaction === 'loop' ? strings.loop : strings.hover}
       </span>
     </button>
   );
diff --git a/website/src/components/MobileMenu.tsx b/website/src/components/MobileMenu.tsx
index aefa07b..45c0ff6 100644
--- a/website/src/components/MobileMenu.tsx
+++ b/website/src/components/MobileMenu.tsx
@@ -1,11 +1,16 @@
 import { useEffect, useState } from 'react';
 import UseAnimations from 'react-useanimations';
 import menu from '../../../icons/menu.json';
+import { islands } from '../i18n/messages/en/islands';
 
-type Props = { items: { label: string; href: string }[] };
+type Props = {
+  items: { label: string; href: string }[];
+  /** The menu's text in the page's language: t(locale).islands.mobileMenu. */
+  strings?: typeof islands.mobileMenu;
+};
 
 /** The navigation on small screens, opened by the animated menu icon. */
-export default function MobileMenu({ items }: Props) {
+export default function MobileMenu({ items, strings = islands.mobileMenu }: Props) {
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
@@ -25,7 +30,7 @@ export default function MobileMenu({ items }: Props) {
         render={(eventProps, animationProps) => (
           <button
             type="button"
-            aria-label="Menu"
+            aria-label={strings.menu}
             aria-expanded={open}
             aria-controls="mobile-menu"
             className="inline-flex size-9 items-center justify-center rounded-full text-fg hover:bg-surface-2"
@@ -37,7 +42,7 @@ export default function MobileMenu({ items }: Props) {
       />
       <nav
         id="mobile-menu"
-        aria-label="Main"
+        aria-label={strings.nav}
         hidden={!open}
         className="absolute inset-x-0 top-16 border-b border-line bg-bg px-5 pt-2 pb-5 shadow-xl"
       >
diff --git a/website/src/components/ThemeToggle.tsx b/website/src/components/ThemeToggle.tsx
index ef92a91..31682d7 100644
--- a/website/src/components/ThemeToggle.tsx
+++ b/website/src/components/ThemeToggle.tsx
@@ -2,6 +2,7 @@ import { useSyncExternalStore } from 'react';
 import UseAnimations from 'react-useanimations';
 import moon from '../../../icons/moon.json';
 import sun from '../../../icons/sun.json';
+import { islands } from '../i18n/messages/en/islands';
 
 const isDark = () => document.documentElement.classList.contains('dark');
 
@@ -13,7 +14,12 @@ const subscribe = (onChange: () => void) => {
 };
 
 /** Switches between light and dark; the choice is saved, otherwise the system theme applies. */
-export default function ThemeToggle() {
+export default function ThemeToggle({
+  strings = islands.themeToggle,
+}: {
+  /** The button's text in the page's language: t(locale).islands.themeToggle. */
+  strings?: typeof islands.themeToggle;
+}) {
   const dark = useSyncExternalStore(subscribe, isDark, () => false);
 
   const toggle = () => {
@@ -31,7 +37,7 @@ export default function ThemeToggle() {
       render={(eventProps, animationProps) => (
         <button
           type="button"
-          aria-label={dark ? 'Switch to light theme' : 'Switch to dark theme'}
+          aria-label={dark ? strings.toLight : strings.toDark}
           className="inline-flex size-9 items-center justify-center rounded-full text-muted transition-colors hover:bg-surface-2 hover:text-fg"
           {...eventProps}
         >
diff --git a/website/src/i18n/messages/en/docs.ts b/website/src/i18n/messages/en/docs.ts
index ba6b1f7..5778747 100644
--- a/website/src/i18n/messages/en/docs.ts
+++ b/website/src/i18n/messages/en/docs.ts
@@ -1,2 +1,37 @@
-// Filled in by the page conversion.
-export const docs = {};
+// The documentation page's frame. The body itself is src/content/documentation[.<code>].md.
+export const docs = {
+  title: 'Documentation — useAnimations',
+  description: (iconCount: number) =>
+    `How to use ${iconCount} animated icons in React and shadcn/ui: interactions, props, colors, files and accessibility.`,
+  /** Small label above the body's heading. */
+  badge: 'Documentation',
+  onThisPage: 'On this page',
+  viewAsMarkdown: 'View as Markdown',
+  /** JSON-LD: the article and the breadcrumb trail. */
+  headline: 'useAnimations documentation',
+  summary: 'How to use the useAnimations animated icons in React and shadcn/ui.',
+  crumb: 'Documentation',
+  /** Structured-data FAQ (not shown on the page; the body has its own FAQ section). */
+  faq: [
+    {
+      question: 'Is useAnimations free for commercial projects?',
+      answer:
+        'Yes. The icons and the React package are MIT-licensed, with no attribution required.',
+    },
+    {
+      question: 'How do I use useAnimations icons in React?',
+      answer:
+        'Install react-useanimations, import UseAnimations and an icon (e.g. react-useanimations/lib/checkmark), then render <UseAnimations animation={checkmark} size={32} />.',
+    },
+    {
+      question: 'How do I change the color of an icon?',
+      answer:
+        'Icons follow the text color. Change it with strokeColor and fillColor, CSS color, or by styling the paths.',
+    },
+    {
+      question: 'Does it work without React?',
+      answer:
+        'The package is for React. Every icon is also a standard Lottie JSON file that any Lottie player can play (lottie-web, dotLottie, lottie-react-native, lottie-ios, lottie-android, Flutter), and a static SVG. See Use without React and useanimations.com/lottie-icons.',
+    },
+  ],
+};
diff --git a/website/src/i18n/messages/en/home.ts b/website/src/i18n/messages/en/home.ts
index 4e53508..f38c867 100644
--- a/website/src/i18n/messages/en/home.ts
+++ b/website/src/i18n/messages/en/home.ts
@@ -1,2 +1,232 @@
-// Filled in by the page conversion.
-export const home = {};
+// The home page (/), its FAQ and the hub links it shares with index.md. Counts, the package
+// version and link targets come in as arguments, so each language builds whole sentences with
+// its own grammar. Strings ending in Html may contain <code> and <a> tags; keep the tags as they
+// are and translate only the text between them. Brand and tech terms (useAnimations,
+// react-useanimations, React, Lottie, shadcn/ui, SVG, JSON, ZIP, MIT, Next.js) stay as they are.
+import type { Interaction } from 'react-useanimations';
+
+/** A FAQ answer's "read more" link: the page path is filled in by the site, only `label` is text. */
+export type FaqLink = { href: string; label: string };
+export type HomeFaq = { question: string; answer: string; link?: FaqLink }[];
+
+/** Pages the FAQ links to (already in the reader's language); not translated. */
+export type FaqLinks = { serverRendering: string; licence: string; lottie: string };
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const home = {
+  /** <title> of the home page; keep it under the language's title limit (60 characters, 32 for CJK). */
+  title: 'Micro Animations & Animated Icon Library — useAnimations',
+  /** Meta description, also the page summary in search results; under 155 characters (80 for CJK). */
+  description: (count: number) =>
+    `${count} free micro animations for UI: an animated icon library for React, shadcn/ui and Lottie with hover, click and loop built in. MIT.`,
+
+  hero: {
+    /** Pill above the headline, linking to the v2 → v3 upgrade notes. */
+    badge: (count: number) => `${count} icons · zero dependencies · MIT`,
+    /**
+     * The big headline, in three parts: `accent` is drawn with a colour gradient. Use `start`
+     * and `end` to put it where your language needs it; either may be empty.
+     */
+    headline: { start: 'Icons that ', accent: 'come alive.', end: '' },
+    /** The page's H1 under the headline: what the site is, with the words people search for. */
+    h1: 'Free animated icons for React, shadcn/ui and Lottie',
+    intro: (count: number) =>
+      `${count} hand-crafted micro animations with hover, click and loop micro-interactions built in. Use them as a React component, add them with shadcn, or download SVG and Lottie JSON. MIT licensed.`,
+    /** Button that scrolls to the icon browser. */
+    browse: 'Browse icons',
+    /** Caption under the interactive field of icons in the hero. */
+    fieldHint: 'Move your pointer across the field.',
+  },
+
+  /** Row of four figures under the hero. */
+  numbers: {
+    /** Accessible name of the row (screen readers only). */
+    label: 'At a glance',
+    icons: 'animated icons',
+    interactions: 'built-in interactions',
+    /** Next to "8 kB": the size of the player. */
+    size: 'player, gzipped',
+    dependencies: 'dependencies',
+  },
+
+  /** Section with six live demo cards, one per interaction. */
+  interactions: {
+    eyebrow: 'Interactions built in',
+    title: 'Every icon knows how to move.',
+    intro:
+      'Each icon ships with the interaction it was designed for. Drop it in and it just works — or pick another one with a single prop. Try them:',
+    /** The hint under each demo card's title; the card's title is the interaction's label. */
+    demos: {
+      loop: 'Plays continuously, for loaders and ambient status.',
+      'click-toggle': 'Switches between two states: menu and close, play and pause.',
+      'click-replay': 'Replays from the start on every click, as feedback.',
+      hover: 'Plays forward on enter and back on leave.',
+      'hover-loop': 'Loops while hovered and finishes its cycle on leave.',
+      'hover-replay': 'Plays once from the start on every enter.',
+    } as Record<Interaction, string>,
+  },
+
+  /** The searchable icon library with its filter bar. */
+  browser: {
+    eyebrow: 'The library',
+    title: (count: number) => `${count} free animated icons`,
+    intro:
+      'Hover or click to play. Open an icon for its code and downloads — Lottie JSON, SVG and ZIP.',
+    /** Label of the search field (screen readers only). */
+    search: 'Search icons',
+    /** Placeholder of the search field. Icon keywords are English, so keep the example words English. */
+    searchPlaceholder: (count: number) => `Search ${count} icons — try “eye”, “bell” or “arrow”`,
+    /** Label of the interaction dropdown (screen readers only). */
+    interaction: 'Interaction',
+    allInteractions: 'All interactions',
+    /** Label of the colour swatches (screen readers only). */
+    color: 'Icon color',
+    /** Names of the colour swatches (screen readers only). `text` resets to the text colour. */
+    colors: {
+      text: 'Text color',
+      indigo: 'Indigo',
+      red: 'Red',
+      amber: 'Amber',
+      teal: 'Teal',
+      violet: 'Violet',
+    },
+    customColor: 'Custom color',
+    /** Label of the icon size slider. */
+    size: 'Size',
+    /** Label of the category buttons (screen readers only). */
+    category: 'Category',
+    /** First category button: no category filter. */
+    all: 'All',
+    /**
+     * How many icons the filters show, e.g. "12 icons". One string per plural form of your language
+     * (Intl.PluralRules: zero, one, two, few, many, other); `other` is required. `{n}` is the number.
+     * The browser picks the form, so these are templates rather than functions.
+     */
+    count: { one: '{n} icon', other: '{n} icons' } as Partial<
+      Record<Intl.LDMLPluralRule, string>
+    > & {
+      other: string;
+    },
+    noMatch: 'No icons match.',
+    /** Under "No icons match."; `href` opens a new issue on GitHub. */
+    noMatchHintHtml: (href: string) => `Try another word, or ${link(href, 'suggest an icon')}.`,
+  },
+
+  /** Section with code tabs: React, shadcn, files and agents. */
+  everywhere: {
+    eyebrow: 'Use them your way',
+    title: 'Install, import, done.',
+    intro:
+      'A React component with no dependencies, a shadcn registry, downloadable files with stable URLs, and a catalog that AI agents can read.',
+    docs: 'Read the documentation →',
+    /** Accessible name of the tab list (screen readers only). */
+    tablist: 'Platform',
+    /** Tab names; React and shadcn are names and stay as they are. */
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Files', agents: 'Agents' },
+    /** Comments inside the code examples (the code itself stays English). */
+    codeText: {
+      /** shadcn tab: what to write after adding the component. */
+      afterAdding: 'then',
+      /** Files tab: the line above the file URLs. */
+      files: 'Every icon as an SVG, as its animation (Lottie JSON) and as a ZIP of both',
+    },
+  },
+
+  /** Feature cards. */
+  features: {
+    title: 'Small, accessible and yours to style.',
+    colors: 'Follows your colors',
+    colorsHtml: `Icons use ${code('currentColor')}: they pick up text color, hover states and dark mode on their own. Override with a prop, a class or plain CSS.`,
+    tiny: 'Tiny by design',
+    /** Under the large "8 kB". */
+    tinyText: 'A built-in player, zero dependencies. Each icon is its own 2 kB module.',
+    accessible: 'Accessible by default',
+    accessibleText:
+      'Respects reduced motion, plays hover animations on keyboard focus and stays out of screen readers unless you label it.',
+    ssr: 'Server-rendering ready',
+    ssrText:
+      'A client component that renders safely in Next.js, Remix and Astro. Icons are plain data you can import anywhere.',
+    agents: 'Made for agents',
+    /** Links to the machine-readable catalog and llms.txt (English files). */
+    agentsHtml: (iconsJson: string, llmsTxt: string) =>
+      `A typed catalog with keywords for every icon, ${link(iconsJson, 'icons.json')}, ${link(llmsTxt, 'llms.txt')} and Markdown docs.`,
+  },
+
+  /** Link lists to the category, interaction and collection pages. */
+  browse: {
+    title: 'Find the right micro animation.',
+    byCategory: 'Browse by category',
+    byInteraction: 'Browse by interaction',
+    formats: 'All icons and formats',
+  },
+
+  /** Labels of the links to the collection pages (also in the Markdown home page, English only). */
+  hubs: {
+    icons: 'All animated icons',
+    categories: 'Icon categories',
+    interactions: 'Icons by interaction',
+    lottie: 'Lottie icons (JSON)',
+    shadcn: 'shadcn/ui animated icons',
+  },
+
+  /** FAQ heading. */
+  faqTitle: 'Questions',
+  /**
+   * Questions and answers, also in the page's structured data. `links` are the pages that
+   * answer in depth; keep each `link` with its question and translate only its `label`.
+   */
+  faq: (f: { version: string; links: FaqLinks }): HomeFaq => [
+    {
+      question: 'What are micro animations and animated icons?',
+      answer:
+        'Micro animations are short, single-purpose motions that answer a user action: a menu icon that turns into a close button, a heart that fills when you like a post, a bell that rings for a new notification. Animated icons are the most common kind. They make an interface feel responsive and show state changes without extra text.',
+    },
+    {
+      question: 'What is the difference between the Lottie and SVG files?',
+      answer:
+        'The Lottie JSON file holds the whole animation and plays in any Lottie player, including the one built into react-useanimations. The SVG files are still images of the icon at rest, one per state (for example eye and eye-off), for places where nothing should move: emails, documents, design tools or a no-JavaScript fallback.',
+    },
+    {
+      question: 'Does it work with Next.js and server rendering?',
+      answer:
+        "Yes. The component is marked 'use client' and draws the animation only in the browser, so it renders from server components and SSR frameworks such as Next.js, Remix and Astro without dynamic imports. Icon modules are plain data that server components can import and pass as props.",
+      link: { href: f.links.serverRendering, label: 'Next.js and server rendering' },
+    },
+    {
+      question: 'Can I use the icons in commercial projects?',
+      answer:
+        'Yes. The icons and the react-useanimations package are MIT licensed: use, modify and redistribute them in personal and commercial work. Attribution is appreciated but not required.',
+      link: { href: f.links.licence, label: 'Licencing & Terms' },
+    },
+    {
+      question: 'Can I use the icons without React?',
+      answer:
+        'Yes. Every icon is a standard Lottie JSON file, so it plays with lottie-web in plain JavaScript, Vue, Svelte, Angular or a CMS, and in Lottie players for iOS, Android and Flutter. The Lottie icons page has the file URLs and ready-made lottie-web snippets for each interaction.',
+      link: { href: f.links.lottie, label: 'Lottie icons' },
+    },
+    {
+      question: 'How much do the icons add to my bundle?',
+      answer: `The player in react-useanimations ${f.version} is about 8 kB gzipped with no dependencies, and each icon is its own module of 1 to 15 kB (2 kB median), so a bundle only includes the icons you import.`,
+    },
+  ],
+
+  /** Closing call to action. */
+  cta: {
+    /** Headline in three parts like hero.headline: `accent` is drawn with a colour gradient. */
+    title: { start: 'Give your interface a ', accent: 'pulse.', end: '' },
+    text: 'Free and MIT licensed, for personal and commercial work.',
+    start: 'Get started',
+  },
+
+  /** Structured data (schema.org) of the home page, read by search engines. */
+  schema: {
+    software: (count: number) =>
+      `React component and ${count} animated icons (Lottie) with hover, click and loop interactions built in. No dependencies.`,
+    catalogName: 'useAnimations icon catalog',
+    catalog: (count: number) =>
+      `Every one of the ${count} useAnimations icons with id, title, category, keywords, interaction, Lottie JSON, SVG and ZIP URLs, React import and shadcn command.`,
+  },
+};
diff --git a/website/src/i18n/messages/en/islands.ts b/website/src/i18n/messages/en/islands.ts
index 85c8b5a..405a2c4 100644
--- a/website/src/i18n/messages/en/islands.ts
+++ b/website/src/i18n/messages/en/islands.ts
@@ -1,2 +1,62 @@
-// Filled in by the page conversion.
-export const islands = {};
+// Text inside the React islands (components/*.tsx). Astro passes it to them as JSON props, so every
+// entry is a plain string; '{name}' placeholders are filled in by the component.
+import type { Interaction } from 'react-useanimations';
+
+export const islands = {
+  /** The badge on an icon card: how its icon plays. */
+  iconCard: {
+    hints: {
+      loop: 'Loop',
+      'click-toggle': 'Click',
+      'click-replay': 'Click',
+      hover: 'Hover',
+      'hover-loop': 'Hover',
+      'hover-replay': 'Hover',
+    } satisfies Record<Interaction, string>,
+  },
+  /** The icon details dialog on the home page. */
+  iconDialog: {
+    /** Under the live preview: how to play the icon. */
+    hints: {
+      loop: 'Plays on its own',
+      'click-toggle': 'Click to toggle',
+      'click-replay': 'Click to replay',
+      hover: 'Hover to play, leave to reverse',
+      'hover-loop': 'Hover to loop',
+      'hover-replay': 'Hover to play',
+    } satisfies Record<Interaction, string>,
+    /** Accessible name of the live preview; {title} is the icon's (English) title. */
+    preview: '{title} preview',
+    /** The color swatches: the group, one color ({color} is a hex code), the text color. */
+    colors: 'Preview color',
+    color: 'Color {color}',
+    textColor: 'Text color',
+    interaction: 'Interaction',
+    duration: 'Duration',
+    /** {seconds} is a number such as 0.80. */
+    seconds: '{seconds} s',
+    import: 'Import',
+    close: 'Close',
+    /** The code tabs and their group. */
+    code: 'Code',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Files' },
+    copy: 'Copy',
+    download: 'Download',
+    iconPage: 'Icon page →',
+  },
+  /** The interaction demo cards (home page and interaction pages): what to do with the card. */
+  interactionDemo: {
+    click: 'Click the card',
+    loop: 'Plays on its own',
+    hover: 'Hover the card',
+  },
+  /** The navigation on small screens. */
+  mobileMenu: {
+    menu: 'Menu',
+    nav: 'Main',
+  },
+  themeToggle: {
+    toLight: 'Switch to light theme',
+    toDark: 'Switch to dark theme',
+  },
+};
diff --git a/website/src/i18n/messages/en/licence.ts b/website/src/i18n/messages/en/licence.ts
index 4a33c7e..c4c0b2e 100644
--- a/website/src/i18n/messages/en/licence.ts
+++ b/website/src/i18n/messages/en/licence.ts
@@ -1,2 +1,28 @@
-// Filled in by the page conversion.
-export const licence = {};
+// The licence page (/licencing-and-terms). The LICENSE text itself is shown in English on every page.
+export const licence = {
+  title: 'Licencing & Terms — useAnimations',
+  description:
+    'useAnimations icons and the react-useanimations package are MIT licensed: free for personal and commercial use and redistribution, no attribution needed.',
+  /** Small label above the heading, the breadcrumb and the JSON-LD page name. */
+  name: 'Licencing & Terms',
+  heading: 'Free to use. MIT licensed.',
+  introHtml: (mitHref: string) =>
+    `The useAnimations icons and the <code>react-useanimations</code> package are released under the <a href="${mitHref}">MIT license</a>.`,
+  canDo: 'What you can do',
+  canDoItemsHtml: [
+    '<strong>Use</strong> the icons in personal and commercial websites, apps and products.',
+    '<strong>Modify</strong> them: change colors, sizes, timing or the motion itself.',
+    '<strong>Redistribute</strong> them, including inside icon packs, templates, themes, UI kits and component registries.',
+  ],
+  attribution: 'Attribution',
+  attributionText:
+    "Not required, but appreciated. Keep the license notice when you redistribute the files themselves, and if you'd like to credit us:",
+  /** The credit line people paste into their site; `link` is the HTML link to useAnimations. */
+  credit: (link: string) => `Animated icons by ${link}`,
+  noWarranty: 'No warranty',
+  noWarrantyText: 'The icons and the code are provided as-is, without warranty of any kind.',
+  licenseText: 'License text',
+  /** Shown above the LICENSE text on translated pages only. */
+  bindingNote:
+    'The license text below is the original English version, which is the legally binding one.',
+};
diff --git a/website/src/i18n/messages/en/pages.ts b/website/src/i18n/messages/en/pages.ts
index b8498c8..d070a25 100644
--- a/website/src/i18n/messages/en/pages.ts
+++ b/website/src/i18n/messages/en/pages.ts
@@ -1,2 +1,274 @@
-// Filled in by the page conversion.
-export const pages = {};
+// The hub pages: /icons, /categories, /interactions, /lottie-icons and /shadcn-animated-icons.
+// Sentences with counts or lists are functions that get the facts and build the whole sentence.
+// Strings ending in Html may contain <code>, <a> and <strong> tags; links are passed in.
+import type { Interaction } from 'react-useanimations';
+import type { Faq } from './hubs';
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+const strong = (text: string) => `<strong class="font-medium text-fg">${text}</strong>`;
+
+export const pages = {
+  /** /icons: every icon on one page, grouped by category. */
+  icons: {
+    /** <title> candidates, best first; the first that fits is used. */
+    titles: (count: number) => [
+      `All ${count} animated icons by category`,
+      `All ${count} animated icons`,
+    ],
+    /** Meta description candidates, best first. */
+    descriptions: (count: number, categories: number) => [
+      `Every useAnimations icon on one page: ${count} free animated icons in ${categories} categories, for React, shadcn/ui, Lottie JSON and SVG. MIT licensed.`,
+    ],
+    /** Heading. */
+    title: 'All animated icons',
+    badge: (count: number) => `${count} icons · MIT licensed`,
+    /** `browser` is the link to the searchable icon browser on the home page. */
+    introHtml: (browser: string) =>
+      `Every icon in the set, grouped by category. Open one for a live preview, its React and shadcn/ui code, and the Lottie JSON, SVG and ZIP downloads. To search by keyword and try the animations in place, use the ${link(browser, 'icon browser')}.`,
+    /** Accessible name of the row of category links. */
+    categoriesNav: 'Categories',
+    /** Before the list of interaction links. */
+    byInteraction: 'By interaction:',
+    /** Link from a category section to its page; `name` is the category name, e.g. 'Navigation'. */
+    categoryLink: (count: number, name: string) => `${count} ${name.toLowerCase()} icons →`,
+  },
+
+  /** /categories: the list of categories. */
+  categories: {
+    titles: (categories: number) => [
+      `Animated icon categories: ${categories} collections`,
+      'Animated icon categories',
+    ],
+    descriptions: (icons: number, categories: number) => [
+      `Browse ${icons} free animated icons in ${categories} categories: navigation, action, media, loading, social media and more. For React, shadcn/ui and Lottie.`,
+    ],
+    /** Heading and page name. */
+    title: 'Animated icon categories',
+    badge: (icons: number, categories: number) => `${icons} icons · ${categories} categories`,
+    /** `interactions` is the link to /interactions. */
+    introHtml: (interactions: string) =>
+      `Every useAnimations icon belongs to one category, from navigation arrows and media controls to loaders and social media logos. Open a category for all of its icons, where to use them and the code to add one, or browse by ${link(interactions, 'interaction')} instead.`,
+    /** Icon count on each category card. */
+    iconCount: (n: number) => `${n} icons`,
+  },
+
+  /** /interactions: the list of interactions (loop, click toggle, hover, ...). */
+  interactions: {
+    titles: [
+      'Micro interactions: hover, click and loop icons',
+      'Micro interactions for animated icons',
+    ],
+    descriptions: (icons: number, interactions: number) => [
+      `${icons} animated icons in ${interactions} micro interactions: loop, click toggle, click replay, hover, hover replay and hover loop. With reduced-motion support.`,
+    ],
+    /** Heading and page name. */
+    title: 'Animated icon interactions',
+    badge: (interactions: number, icons: number) => `${interactions} interactions · ${icons} icons`,
+    /** `interaction` is the name of a prop, not translated. */
+    introHtml: `Every icon ships with the micro interaction it was designed for: it loops, toggles or replays on click, or plays on hover. The React component wires it up and respects reduced motion, and the <code class="font-mono text-base text-fg">interaction</code> prop switches any icon to another one.`,
+    /** Icon count on each interaction card. */
+    iconCount: (n: number) => `${n} icons`,
+    chooseTitle: 'Choosing an interaction',
+    /** When to use each interaction; `href` links to its page. `active` is a prop name. */
+    chooseHtml: {
+      loop: (href: string) =>
+        `${strong('State that lasts')}, such as loading or an active alert: ${link(href, 'loop')}.`,
+      'click-toggle': (href: string) =>
+        `${strong('An on/off control')}, such as mute, menu or show password: ${link(href, 'click toggle')}, with ${code('active')} for controlled state.`,
+      'click-replay': (href: string) =>
+        `${strong('A one-shot action')}, such as send, save or refresh: ${link(href, 'click replay')}.`,
+      hover: (href: string) =>
+        `${strong('A hint of what a link opens')}: ${link(href, 'hover')}, which reverses when the pointer leaves.`,
+      'hover-replay': (href: string) =>
+        `${strong('Toolbars and lists people sweep across')}: ${link(href, 'hover replay')}, which finishes on its own.`,
+      'hover-loop': (href: string) =>
+        `${strong('Links that invite a longer look')}, such as social icons: ${link(href, 'hover loop')}.`,
+    } as Record<Interaction, (href: string) => string>,
+    motionTitle: 'Reduced motion',
+    motionHtml: `The React component follows ${code('prefers-reduced-motion')} and updates when the setting changes. Taps on touch screens never start hover animations.`,
+    /** What each interaction does with reduced motion preferred; shown after "<interaction>: ". */
+    reducedMotion: {
+      loop: 'the icon does not autoplay and stays on its static first frame.',
+      'click-toggle':
+        'a click switches to the other state immediately, without the animation in between.',
+      'click-replay': 'clicks still reach your handler but the animation does not play.',
+      hover: 'hovering does not play the animation.',
+      'hover-replay': 'hovering does not play the animation.',
+      'hover-loop': 'the icon stays static while hovered.',
+    } as Record<Interaction, string>,
+  },
+
+  /** /lottie-icons: the icons as Lottie JSON, with code for each Lottie player. */
+  lottie: {
+    titles: (count: number) => [
+      `Free Lottie icons: ${count} animated JSON icons`,
+      'Free Lottie icons',
+    ],
+    descriptions: (count: number) => [
+      `${count} free Lottie icons as plain Lottie JSON, MIT licensed. Copy-paste code for lottie-web, dotLottie, React, React Native, iOS, Android and Flutter.`,
+    ],
+    /** Heading and page name. */
+    title: 'Free Lottie icons',
+    /** Breadcrumb. */
+    crumb: 'Lottie icons',
+    /** Structured data for the icons.json catalog. */
+    datasetName: 'useAnimations icon catalog',
+    datasetDescription: (count: number) =>
+      `Metadata and file URLs of ${count} animated Lottie icons: id, title, category, keywords, interaction, size and duration.`,
+    badge: (count: number) => `${count} icons · Lottie JSON · MIT licensed`,
+    intro:
+      'Every useAnimations icon is a standard Lottie JSON animation, so any Lottie player can play it: lottie-web on the web, lottie-ios, lottie-android, Flutter and React Native. The files are free under the MIT license, with no sign-up, and served from stable URLs with CORS enabled, so you can load them directly or download them into your project.',
+    popular: 'Popular Lottie icons',
+    allIcons: (count: number) => `All ${count} icons →`,
+    filesTitle: 'Files and URLs',
+    filesIntroHtml: `Each icon has a page at ${code('/icons/&lt;id&gt;')} with a preview and downloads. The files themselves:`,
+    /** Comments after each URL in the list of files. */
+    files: {
+      json: 'Lottie JSON animation',
+      zip: 'the JSON and static SVGs',
+      svg: 'static SVG of each state',
+      catalog: 'catalog of every icon',
+    },
+    /** `catalog` links to icons.json; `median` is the median file size in kB. */
+    catalogHtml: (catalog: string, median: number) =>
+      `${link(catalog, 'icons.json')} lists every icon with its id, title, category, keywords, interaction, size, duration and file URLs, which makes it easy to pick icons by keyword in a script or let a coding agent choose one. Lottie files weigh ${median} kB at the median.`,
+    /** One section per player; the code examples stay English. */
+    players: {
+      web: {
+        title: 'Web: lottie-web',
+        text: 'The reference player from Airbnb. Load it from a CDN, point it at an icon URL and choose the SVG renderer, which keeps the icon sharp and lets CSS recolor it. Use the full build (lottie.min.js): the light build skips expressions.',
+        /** Label above the CSS example. */
+        cssLabel: 'Follow the text color (SVG renderer)',
+      },
+      'web-interactions': {
+        title: 'Web: hover and click interactions',
+        text: "lottie-web plays and stops, but the interactions are up to you. This is the menu icon's click toggle with reduced-motion support; every interaction follows the same pattern, and the React component below does all of it for you.",
+      },
+      dotlottie: {
+        title: 'Web: dotLottie web component',
+        text: "LottieFiles' player renders with a WebAssembly engine to a canvas and plays plain Lottie JSON as well as .lottie files. A canvas keeps the colors of the file, so the icons stay black unless you recolor the JSON.",
+        /** Label above the JavaScript example; the command stays as is. */
+        jsLabel: 'Or the JavaScript API: npm install @lottiefiles/dotlottie-web',
+      },
+      react: {
+        title: 'React: react-useanimations',
+        text: 'No Lottie player to install: the package has its own 8 kB player, plays each icon’s interaction, follows the text color and respects reduced motion. Each icon is a separate module, so you only ship the ones you import.',
+      },
+      'react-native': {
+        title: 'React Native: lottie-react-native',
+        text: 'Bundle the JSON with require() for offline use, or load it from its URL.',
+      },
+      ios: {
+        title: 'iOS: lottie-ios (SwiftUI)',
+        text: 'Add the package from https://github.com/airbnb/lottie-spm.git with Swift Package Manager, then drop the JSON into your bundle or load it from its URL.',
+      },
+      android: {
+        title: 'Android: lottie-android (Jetpack Compose)',
+        text: 'Add com.airbnb.android:lottie-compose (or com.airbnb.android:lottie for views). Put the JSON in res/raw for offline use with LottieCompositionSpec.RawRes.',
+      },
+      flutter: {
+        title: 'Flutter: lottie',
+        text: 'The lottie package is a pure Dart player for Android, iOS, web and desktop.',
+      },
+    },
+    expressionsTitle: 'Icons with expressions',
+    /** loopOut, wiggle and lottie_light are code names, not translated. */
+    expressionsHtml: (count: number) =>
+      `${count} icons use After Effects expressions (${code('loopOut')} or ${code('wiggle')}). On the web, play them with lottie-web's full build, not ${code('lottie_light')}. Native players do not evaluate expressions, so test these on iOS, Android and Flutter or pick another icon; react-useanimations plays them as designed.`,
+    /** File sizes are in kB; `expressions` are the (English) titles of icons with expressions. */
+    faq: (f: {
+      count: number;
+      minSize: number;
+      maxSize: number;
+      medianSize: number;
+      expressions: string[];
+    }): Faq => [
+      {
+        question: 'Are these Lottie icons free for commercial use?',
+        answer: `Yes. All ${f.count} Lottie icons are MIT-licensed: use, modify and redistribute them in personal and commercial projects, with no attribution required and no account to download them.`,
+      },
+      {
+        question: 'What format are the Lottie files?',
+        answer: `Standard Lottie JSON (the Bodymovin format) with shape layers only: no images, fonts or external assets. Each icon is drawn on a 24 or 32 px artboard, scales to any size and weighs ${f.minSize} kB to ${f.maxSize} kB, ${f.medianSize} kB median.`,
+      },
+      {
+        question: 'Do I need lottie-web to use the icons in React?',
+        answer:
+          'No. react-useanimations has its own 8 kB player with no dependencies, so you install one package and import the icons you need. lottie-web is only needed outside React, on plain web pages or in other frameworks.',
+      },
+      {
+        question: 'Which icons need the full lottie-web build?',
+        answer: `${f.expressions.length} icons use After Effects expressions (loopOut or wiggle): ${f.expressions.join(', ')}. On the web they need lottie-web's full build; lottie_light ignores expressions. Native players (lottie-ios, lottie-android, Flutter's lottie) do not evaluate expressions either, so these icons may move differently there.`,
+      },
+      {
+        question: 'Can I change the color of a Lottie icon?',
+        answer:
+          "On the web, lottie-web's SVG renderer writes the colors as attributes, so a CSS rule on the paths recolors the icon. Native players use their dynamic property APIs: ColorValueProvider on iOS, LottieProperty.COLOR and STROKE_COLOR on Android, and ValueDelegate.color in Flutter.",
+      },
+    ],
+    byCategory: 'Lottie icons by category',
+  },
+
+  /** /shadcn-animated-icons: the shadcn registry of the icons. */
+  shadcn: {
+    titles: (count: number) => [
+      `Animated icons for shadcn/ui: ${count} components`,
+      'Animated icons for shadcn/ui',
+    ],
+    descriptions: (count: number) => [
+      `${count} animated icons for shadcn/ui: add any icon with one shadcn CLI command. Hover, click and loop micro interactions, MIT licensed, no lottie-web.`,
+    ],
+    /** Heading and page name. */
+    title: 'Animated icons for shadcn/ui',
+    /** Breadcrumb. */
+    crumb: 'shadcn/ui',
+    /** Name of the list of popular icons in structured data. */
+    popularList: 'Popular shadcn/ui animated icons',
+    badge: (count: number) => `${count} components · shadcn registry · MIT licensed`,
+    intro:
+      'Every useAnimations icon is in a shadcn registry. One CLI command adds a typed React component to your project, with the hover, click or loop interaction it was designed for, reduced-motion support and colors that follow your theme. The code lands in your repository, like any other shadcn/ui component.',
+    addTitle: 'Add an icon',
+    addIntro: "Run the shadcn CLI with the icon's registry URL:",
+    /** "Animated" is part of the component name, not translated. */
+    namingHtml: `The component is named ${code('Animated')} + the icon id in PascalCase (${code('check-box')} → ${code('AnimatedCheckBox')}) and lands in ${code('components/animations/&lt;id&gt;.tsx')}. The CLI also adds the shared ${code('components/use-animation.tsx')} wrapper and installs ${code('react-useanimations')}, which brings its own player: no lottie-web.`,
+    namespaceTitle: 'Short names with a registry namespace',
+    namespaceHtml: `Add the registry to ${code('components.json')} once, then add icons by name, several at a time:`,
+    /** `registry` links to /r/registry.json. */
+    registryHtml: (registry: string) =>
+      `The registry index at ${link(registry, '/r/registry.json')} lists every item with its title, category and interaction.`,
+    usageTitle: 'Use it in a shadcn Button',
+    usageHtml: `The components take the same props as ${code('UseAnimations')}. For a toggle such as the menu icon, pass ${code('active')} and keep the state in your button; the icon animates whenever it changes:`,
+    /** `docs` links to the documentation. */
+    colorHtml: (docs: string) =>
+      `Icons follow the text color, so ${code('text-primary')} or ${code('text-muted-foreground')} recolor them and dark mode needs nothing extra. More props and patterns are in the ${link(docs, 'documentation')}.`,
+    /** aria-label values inside the Button example code. */
+    codeText: { closeMenu: 'Close menu', openMenu: 'Open menu' },
+    popular: 'Popular icons for shadcn/ui',
+    allIcons: (count: number) => `All ${count} icons →`,
+    popularNote: 'Every icon page shows its shadcn command.',
+    /** `version` is the react-useanimations version range, e.g. 3.1.0. */
+    faq: (f: { count: number; version: string }): Faq => [
+      {
+        question: 'Are the shadcn/ui animated icons free?',
+        answer: `Yes. All ${f.count} icons and the component code are MIT-licensed, for personal and commercial projects. The registry needs no account or API key.`,
+      },
+      {
+        question: 'What does the shadcn CLI add to my project?',
+        answer: `The icon component in components/animations/<id>.tsx, the shared UseAnimation player wrapper in components/use-animation.tsx (once, as a registry dependency) and react-useanimations@^${f.version} from npm. lottie-web is not needed: the package has its own 8 kB player.`,
+      },
+      {
+        question: 'Do the components work with Next.js server components?',
+        answer:
+          'Yes. The components are marked "use client" and draw the animation only in the browser, so you can render them from server components and pages without dynamic imports or ssr: false.',
+      },
+      {
+        question: 'Can I change how the icons look and move?',
+        answer:
+          'The code is yours, in your repository. The components take the props of UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop and speed. Icons follow the text color, so Tailwind classes such as text-primary or text-muted-foreground recolor them.',
+      },
+    ],
+    byCategory: 'Browse by category',
+  },
+};
diff --git a/website/src/lib/home.ts b/website/src/lib/home.ts
index f46b2f2..d0ae0a4 100644
--- a/website/src/lib/home.ts
+++ b/website/src/lib/home.ts
@@ -1,10 +1,14 @@
-// Copy shared by the home page and its Markdown version (index.md): the FAQ and the hub links.
+// Data shared by the home page and its Markdown version (index.md): the FAQ and the hub links.
+// Their text lives in i18n/messages/<lang>/home.ts; the exports in capitals are English.
+import { EN, type Locale, t } from '../i18n';
+import type { FaqLinks } from '../i18n/messages/en/home';
 import { icons, VERSION } from './icons';
-import type { Faq } from './seo';
 import { CATEGORY_META, iconsByCategory, iconsByInteraction, INTERACTION_META } from './taxonomy';
 
-export const HOME_TITLE = 'Micro Animations & Animated Icon Library — useAnimations';
-export const HOME_DESCRIPTION = `${icons.length} free micro animations for UI: an animated icon library for React, shadcn/ui and Lottie with hover, click and loop built in. MIT.`;
+const en = t(EN).home;
+
+export const HOME_TITLE = en.title;
+export const HOME_DESCRIPTION = en.description(icons.length);
 
 /** Indexable categories with their page path and icon count, in site order. */
 export const categoryLinks = () =>
@@ -24,50 +28,27 @@ export const interactionLinks = () =>
     count: iconsByInteraction(meta.interaction).length,
   }));
 
-/** The collection pages, for "browse" link blocks. */
-export const HUBS = [
-  { label: 'All animated icons', href: '/icons' },
-  { label: 'Icon categories', href: '/categories' },
-  { label: 'Icons by interaction', href: '/interactions' },
-  { label: 'Lottie icons (JSON)', href: '/lottie-icons' },
-  { label: 'shadcn/ui animated icons', href: '/shadcn-animated-icons' },
-];
+/** The collection pages, for "browse" link blocks; English paths, labels in the given language. */
+export const hubLinks = (locale: Locale = EN) => {
+  const labels = t(locale).home.hubs;
+  return [
+    { label: labels.icons, href: '/icons' },
+    { label: labels.categories, href: '/categories' },
+    { label: labels.interactions, href: '/interactions' },
+    { label: labels.lottie, href: '/lottie-icons' },
+    { label: labels.shadcn, href: '/shadcn-animated-icons' },
+  ];
+};
+export const HUBS = hubLinks();
+
+/** Pages the FAQ answers link to (English paths). */
+export const FAQ_LINKS: FaqLinks = {
+  serverRendering: '/documentation#nextjs-and-server-rendering',
+  licence: '/licencing-and-terms',
+  lottie: '/lottie-icons',
+};
 
-/** Questions and answers; `link` points to the page that answers in depth. */
-export const HOME_FAQ: (Faq[number] & { link?: { href: string; label: string } })[] = [
-  {
-    question: 'What are micro animations and animated icons?',
-    answer:
-      'Micro animations are short, single-purpose motions that answer a user action: a menu icon that turns into a close button, a heart that fills when you like a post, a bell that rings for a new notification. Animated icons are the most common kind. They make an interface feel responsive and show state changes without extra text.',
-  },
-  {
-    question: 'What is the difference between the Lottie and SVG files?',
-    answer:
-      'The Lottie JSON file holds the whole animation and plays in any Lottie player, including the one built into react-useanimations. The SVG files are still images of the icon at rest, one per state (for example eye and eye-off), for places where nothing should move: emails, documents, design tools or a no-JavaScript fallback.',
-  },
-  {
-    question: 'Does it work with Next.js and server rendering?',
-    answer:
-      "Yes. The component is marked 'use client' and draws the animation only in the browser, so it renders from server components and SSR frameworks such as Next.js, Remix and Astro without dynamic imports. Icon modules are plain data that server components can import and pass as props.",
-    link: {
-      href: '/documentation#nextjs-and-server-rendering',
-      label: 'Next.js and server rendering',
-    },
-  },
-  {
-    question: 'Can I use the icons in commercial projects?',
-    answer:
-      'Yes. The icons and the react-useanimations package are MIT licensed: use, modify and redistribute them in personal and commercial work. Attribution is appreciated but not required.',
-    link: { href: '/licencing-and-terms', label: 'Licencing & Terms' },
-  },
-  {
-    question: 'Can I use the icons without React?',
-    answer:
-      'Yes. Every icon is a standard Lottie JSON file, so it plays with lottie-web in plain JavaScript, Vue, Svelte, Angular or a CMS, and in Lottie players for iOS, Android and Flutter. The Lottie icons page has the file URLs and ready-made lottie-web snippets for each interaction.',
-    link: { href: '/lottie-icons', label: 'Lottie icons' },
-  },
-  {
-    question: 'How much do the icons add to my bundle?',
-    answer: `The player in react-useanimations ${VERSION} is about 8 kB gzipped with no dependencies, and each icon is its own module of 1 to 15 kB (2 kB median), so a bundle only includes the icons you import.`,
-  },
-];
+/** Questions and answers in a language; `link` points to the page that answers in depth. */
+export const homeFaq = (locale: Locale = EN, links: FaqLinks = FAQ_LINKS) =>
+  t(locale).home.faq({ version: VERSION, links });
+export const HOME_FAQ = homeFaq();
diff --git a/website/src/lib/markdown.ts b/website/src/lib/markdown.ts
index 3917f34..d797689 100644
--- a/website/src/lib/markdown.ts
+++ b/website/src/lib/markdown.ts
@@ -1,5 +1,7 @@
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
+import type { MarkdownHeading } from 'astro';
+import { type Locale, localize } from '../i18n';
 import { SITE } from './icons';
 import { withSite } from './site';
 
@@ -11,3 +13,48 @@ export const documentationMarkdown = () =>
       .replace(/^# Documentation/, '# useAnimations documentation'),
     SITE
   );
+
+type MarkdownModule = {
+  compiledContent: () => Promise<string>;
+  getHeadings: () => MarkdownHeading[];
+};
+
+const DOCUMENTATION = import.meta.glob<MarkdownModule>('../content/documentation*.md', {
+  eager: true,
+});
+
+/**
+ * The documentation body in a language: content/documentation.<code>.md, or the English one until
+ * that translation exists. Translated headings keep their English ids with `## Heading {#english-id}`
+ * (headingAttributes in astro.config.ts), so links to /documentation#props work in every language.
+ */
+export const documentationIn = async (l: Locale) => {
+  const file = l.prefix ? `documentation.${l.code}.md` : 'documentation.md';
+  let source = DOCUMENTATION[`../content/${file}`];
+  const fallback = !source;
+  if (!source) {
+    console.warn(
+      `i18n: src/content/${file} is missing; /${l.code}/documentation shows the English body.`
+    );
+    source = DOCUMENTATION['../content/documentation.md'];
+  }
+  // The file and registry URLs point at this site (SITE_URL).
+  const html = withSite(await source.compiledContent(), SITE);
+  return {
+    file: `website/src/content/${fallback ? 'documentation.md' : file}`,
+    html: l.prefix ? localizeLinks(html, l) : html,
+    headings: source.getHeadings(),
+    /** The English body stands in for a missing translation. */
+    fallback,
+  };
+};
+
+// Site paths that have a translated version; icon pages, files and anything else stay English.
+const TRANSLATED_PATH =
+  /^\/(?:|documentation|licencing-and-terms|icons|lottie-icons|shadcn-animated-icons|(?:categories|interactions)(?:\/[a-z0-9-]+)?)$/;
+
+/** Points the links of a translated body at the pages in its language: /categories -> /de/categories. */
+export const localizeLinks = (html: string, l: Locale) =>
+  html.replace(/href="(\/[^"#?]*)([^"]*)"/g, (link, path: string, rest: string) =>
+    TRANSLATED_PATH.test(path) ? `href="${localize(path + rest, l)}"` : link
+  );
diff --git a/website/src/lib/seo.ts b/website/src/lib/seo.ts
index da0aa2b..6a27596 100644
--- a/website/src/lib/seo.ts
+++ b/website/src/lib/seo.ts
@@ -3,6 +3,7 @@
 // stable hash of its id, so pages differ from each other and stay the same between builds.
 import { CATEGORIES, type Icon, icons, INTERACTIONS, SITE } from './icons';
 import { GITHUB, NPM } from './site';
+import { BUILT } from '../i18n/locales';
 import { CATEGORY_META, INTERACTION_META } from './taxonomy';
 
 export const TITLE_SUFFIX = ' — useAnimations';
@@ -558,7 +559,7 @@ export const websiteNode = () => ({
   '@id': WEBSITE_ID,
   name: 'useAnimations',
   url: `${SITE}/`,
-  inLanguage: 'en',
+  inLanguage: BUILT.length > 1 ? BUILT.map((l) => l.hreflang) : 'en',
   publisher: { '@id': ORGANIZATION_ID },
 });
 
diff --git a/website/src/lib/sitemap.ts b/website/src/lib/sitemap.ts
index 8e6a106..8547499 100644
--- a/website/src/lib/sitemap.ts
+++ b/website/src/lib/sitemap.ts
@@ -1,5 +1,8 @@
-// The sitemaps: an index (sitemap.xml) of three sitemaps for the pages, the collection hubs and the
-// icon pages. Dates come from Git (lib/git.ts) and are left out when unknown, never the build time.
+// The sitemaps: an index (sitemap.xml) of sitemaps for the pages, the collection hubs, the icon
+// pages and one per translated language. Translated pages list every language version as
+// xhtml:link alternates. Dates come from Git (lib/git.ts) and are left out when unknown, never the
+// build time.
+import { alternatesOf, type Locale, localize } from '../i18n';
 import { lastModifiedOf } from './git';
 import { icons, SITE, urls } from './icons';
 import { CATEGORY_META, INTERACTION_META } from './taxonomy';
@@ -24,38 +27,70 @@ const pageFiles = (path: string) => [
   `${PAGES}${path}.md.ts`,
 ];
 
-const LANGUAGES = { en: '/', 'zh-Hans': '/zh', 'x-default': '/' };
+const VIEWS = 'website/src/views';
+const MESSAGES = 'website/src/i18n/messages';
 
-export const pageEntries = (): Entry[] => [
-  {
-    path: '/',
-    sources: [`${PAGES}/index.astro`, 'website/src/lib/home.ts', CATALOG],
-    alternates: LANGUAGES,
-  },
-  { path: '/zh', sources: [`${PAGES}/zh.astro`, CATALOG], alternates: LANGUAGES },
-  {
-    path: '/documentation',
-    sources: [`${PAGES}/documentation.astro`, 'website/src/content/documentation.md'],
-  },
-  { path: '/licencing-and-terms', sources: [`${PAGES}/licencing-and-terms.astro`, 'LICENSE'] },
-];
+/** The English pages; all of them are translated. */
+export const pageEntries = (): Entry[] =>
+  [
+    {
+      path: '/',
+      sources: [
+        `${PAGES}/index.astro`,
+        `${VIEWS}/HomePage.astro`,
+        'website/src/lib/home.ts',
+        `${MESSAGES}/en/`,
+        CATALOG,
+      ],
+    },
+    {
+      path: '/documentation',
+      sources: [
+        `${PAGES}/documentation.astro`,
+        `${VIEWS}/DocumentationPage.astro`,
+        'website/src/content/documentation.md',
+      ],
+    },
+    {
+      path: '/licencing-and-terms',
+      sources: [`${PAGES}/licencing-and-terms.astro`, `${VIEWS}/LicencePage.astro`, 'LICENSE'],
+    },
+  ].map((entry) => ({ ...entry, alternates: alternatesOf(entry.path) }));
 
-/** Collection pages; categories that aren't indexable (e.g. Other) stay out. */
-export const hubEntries = (): Entry[] => [
-  ...['/icons', '/categories', '/interactions', '/lottie-icons', '/shadcn-animated-icons'].map(
-    (path) => ({ path, sources: [...pageFiles(path), CATALOG] })
-  ),
-  ...Object.values(CATEGORY_META)
-    .filter((meta) => meta.indexable)
-    .map((meta) => ({
-      path: `/categories/${meta.slug}`,
-      sources: [`${PAGES}/categories/`, TAXONOMY, CATALOG],
+/** Collection pages, all translated; categories that aren't indexable (e.g. Other) stay out. */
+export const hubEntries = (): Entry[] =>
+  [
+    ...['/icons', '/categories', '/interactions', '/lottie-icons', '/shadcn-animated-icons'].map(
+      (path) => ({ path, sources: [...pageFiles(path), `${VIEWS}/`, CATALOG] })
+    ),
+    ...Object.values(CATEGORY_META)
+      .filter((meta) => meta.indexable)
+      .map((meta) => ({
+        path: `/categories/${meta.slug}`,
+        sources: [`${PAGES}/categories/`, `${VIEWS}/CategoryPage.astro`, TAXONOMY, CATALOG],
+      })),
+    ...Object.values(INTERACTION_META).map((meta) => ({
+      path: `/interactions/${meta.slug}`,
+      sources: [`${PAGES}/interactions/`, `${VIEWS}/InteractionPage.astro`, TAXONOMY, CATALOG],
     })),
-  ...Object.values(INTERACTION_META).map((meta) => ({
-    path: `/interactions/${meta.slug}`,
-    sources: [`${PAGES}/interactions/`, TAXONOMY, CATALOG],
-  })),
-];
+  ].map((entry) => ({ ...entry, alternates: alternatesOf(entry.path) }));
+
+/**
+ * The pages and hubs in a translated language, dated by the English sources (layout and data) and
+ * the language's own messages and documentation.
+ */
+export const localeEntries = (l: Locale): Entry[] =>
+  [...pageEntries(), ...hubEntries()].map((entry) => ({
+    ...entry,
+    path: localize(entry.path, l),
+    sources: [
+      ...entry.sources,
+      `${MESSAGES}/${l.code}/`,
+      ...(entry.path === '/documentation'
+        ? [`website/src/content/documentation.${l.code}.md`]
+        : []),
+    ],
+  }));
 
 /** Icon pages, with their static SVGs and social card as images. */
 export const iconEntries = (): Entry[] =>
diff --git a/website/src/pages/[locale]/categories/index.astro b/website/src/pages/[locale]/categories/index.astro
new file mode 100644
index 0000000..d6d6a45
--- /dev/null
+++ b/website/src/pages/[locale]/categories/index.astro
@@ -0,0 +1,12 @@
+---
+import type { GetStaticPaths } from 'astro';
+import { type Locale, TRANSLATED } from '../../../i18n';
+import CategoryIndexPage from '../../../views/CategoryIndexPage.astro';
+
+export const getStaticPaths = (() =>
+  TRANSLATED.map((locale) => ({ params: { locale: locale.code }, props: { locale } }))) satisfies GetStaticPaths;
+
+const { locale } = Astro.props as { locale: Locale };
+---
+
+<CategoryIndexPage locale={locale} />
diff --git a/website/src/pages/[locale]/documentation.astro b/website/src/pages/[locale]/documentation.astro
new file mode 100644
index 0000000..1358515
--- /dev/null
+++ b/website/src/pages/[locale]/documentation.astro
@@ -0,0 +1,12 @@
+---
+import type { GetStaticPaths } from 'astro';
+import { type Locale, TRANSLATED } from '../../i18n';
+import DocumentationPage from '../../views/DocumentationPage.astro';
+
+export const getStaticPaths = (() =>
+  TRANSLATED.map((locale) => ({ params: { locale: locale.code }, props: { locale } }))) satisfies GetStaticPaths;
+
+const { locale } = Astro.props as { locale: Locale };
+---
+
+<DocumentationPage locale={locale} />
diff --git a/website/src/pages/[locale]/icons.astro b/website/src/pages/[locale]/icons.astro
new file mode 100644
index 0000000..3985e73
--- /dev/null
+++ b/website/src/pages/[locale]/icons.astro
@@ -0,0 +1,12 @@
+---
+import type { GetStaticPaths } from 'astro';
+import { type Locale, TRANSLATED } from '../../i18n';
+import IconIndexPage from '../../views/IconIndexPage.astro';
+
+export const getStaticPaths = (() =>
+  TRANSLATED.map((locale) => ({ params: { locale: locale.code }, props: { locale } }))) satisfies GetStaticPaths;
+
+const { locale } = Astro.props as { locale: Locale };
+---
+
+<IconIndexPage locale={locale} />
diff --git a/website/src/pages/[locale]/index.astro b/website/src/pages/[locale]/index.astro
new file mode 100644
index 0000000..3a875be
--- /dev/null
+++ b/website/src/pages/[locale]/index.astro
@@ -0,0 +1,12 @@
+---
+import type { GetStaticPaths } from 'astro';
+import { type Locale, TRANSLATED } from '../../i18n';
+import HomePage from '../../views/HomePage.astro';
+
+export const getStaticPaths = (() =>
+  TRANSLATED.map((locale) => ({ params: { locale: locale.code }, props: { locale } }))) satisfies GetStaticPaths;
+
+const { locale } = Astro.props as { locale: Locale };
+---
+
+<HomePage locale={locale} />
diff --git a/website/src/pages/[locale]/interactions/index.astro b/website/src/pages/[locale]/interactions/index.astro
new file mode 100644
index 0000000..40d83d6
--- /dev/null
+++ b/website/src/pages/[locale]/interactions/index.astro
@@ -0,0 +1,12 @@
+---
+import type { GetStaticPaths } from 'astro';
+import { type Locale, TRANSLATED } from '../../../i18n';
+import InteractionIndexPage from '../../../views/InteractionIndexPage.astro';
+
+export const getStaticPaths = (() =>
+  TRANSLATED.map((locale) => ({ params: { locale: locale.code }, props: { locale } }))) satisfies GetStaticPaths;
+
+const { locale } = Astro.props as { locale: Locale };
+---
+
+<InteractionIndexPage locale={locale} />
diff --git a/website/src/pages/[locale]/licencing-and-terms.astro b/website/src/pages/[locale]/licencing-and-terms.astro
new file mode 100644
index 0000000..44789a7
--- /dev/null
+++ b/website/src/pages/[locale]/licencing-and-terms.astro
@@ -0,0 +1,12 @@
+---
+import type { GetStaticPaths } from 'astro';
+import { type Locale, TRANSLATED } from '../../i18n';
+import LicencePage from '../../views/LicencePage.astro';
+
+export const getStaticPaths = (() =>
+  TRANSLATED.map((locale) => ({ params: { locale: locale.code }, props: { locale } }))) satisfies GetStaticPaths;
+
+const { locale } = Astro.props as { locale: Locale };
+---
+
+<LicencePage locale={locale} />
diff --git a/website/src/pages/[locale]/lottie-icons.astro b/website/src/pages/[locale]/lottie-icons.astro
new file mode 100644
index 0000000..2cd0ef5
--- /dev/null
+++ b/website/src/pages/[locale]/lottie-icons.astro
@@ -0,0 +1,12 @@
+---
+import type { GetStaticPaths } from 'astro';
+import { type Locale, TRANSLATED } from '../../i18n';
+import LottieIconsPage from '../../views/LottieIconsPage.astro';
+
+export const getStaticPaths = (() =>
+  TRANSLATED.map((locale) => ({ params: { locale: locale.code }, props: { locale } }))) satisfies GetStaticPaths;
+
+const { locale } = Astro.props as { locale: Locale };
+---
+
+<LottieIconsPage locale={locale} />
diff --git a/website/src/pages/[locale]/shadcn-animated-icons.astro b/website/src/pages/[locale]/shadcn-animated-icons.astro
new file mode 100644
index 0000000..64960b6
--- /dev/null
+++ b/website/src/pages/[locale]/shadcn-animated-icons.astro
@@ -0,0 +1,12 @@
+---
+import type { GetStaticPaths } from 'astro';
+import { type Locale, TRANSLATED } from '../../i18n';
+import ShadcnIconsPage from '../../views/ShadcnIconsPage.astro';
+
+export const getStaticPaths = (() =>
+  TRANSLATED.map((locale) => ({ params: { locale: locale.code }, props: { locale } }))) satisfies GetStaticPaths;
+
+const { locale } = Astro.props as { locale: Locale };
+---
+
+<ShadcnIconsPage locale={locale} />
diff --git a/website/src/pages/categories/index.astro b/website/src/pages/categories/index.astro
index a2ce622..71b19bd 100644
--- a/website/src/pages/categories/index.astro
+++ b/website/src/pages/categories/index.astro
@@ -1,82 +1,6 @@
 ---
-import Breadcrumbs from '../../components/Breadcrumbs.astro';
-import Layout from '../../layouts/Layout.astro';
-import { breadcrumbNode, categories, categoryPath, hubDescription, hubTitle } from '../../lib/hubs';
-import { icons, SITE } from '../../lib/icons';
-import { websiteNode, WEBSITE_ID } from '../../lib/seo';
-
-const all = categories();
-const title = hubTitle(`Animated icon categories: ${all.length} collections`, 'Animated icon categories');
-const description = hubDescription(
-  `Browse ${icons.length} free animated icons in ${all.length} categories: navigation, action, media, loading, social media and more. For React, shadcn/ui and Lottie.`
-);
-const crumbs = [
-  { name: 'Icons', path: '/icons' },
-  { name: 'Categories', path: '/categories' },
-];
-const jsonLd = {
-  '@context': 'https://schema.org',
-  '@graph': [
-    {
-      '@type': 'CollectionPage',
-      '@id': `${SITE}/categories`,
-      url: `${SITE}/categories`,
-      name: 'Animated icon categories',
-      description,
-      inLanguage: 'en',
-      isPartOf: { '@id': WEBSITE_ID },
-      mainEntity: {
-        '@type': 'ItemList',
-        numberOfItems: all.length,
-        itemListElement: all.map(({ meta }, index) => ({
-          '@type': 'ListItem',
-          position: index + 1,
-          url: `${SITE}${categoryPath(meta)}`,
-          name: meta.title,
-        })),
-      },
-    },
-    breadcrumbNode(crumbs),
-    websiteNode(),
-  ],
-};
+import { EN } from '../../i18n';
+import CategoryIndexPage from '../../views/CategoryIndexPage.astro';
 ---
 
-<Layout title={title} description={description} path="/categories" jsonLd={jsonLd}>
-  <div class="mx-auto max-w-6xl px-5 pt-10 sm:px-8">
-    <Breadcrumbs crumbs={crumbs} />
-    <header class="mt-8 max-w-3xl">
-      <p class="text-sm font-medium text-accent">{icons.length} icons · {all.length} categories</p>
-      <h1 class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">Animated icon categories</h1>
-      <p class="mt-4 text-lg leading-relaxed text-muted">
-        Every useAnimations icon belongs to one category, from navigation arrows and media controls to loaders and
-        social media logos. Open a category for all of its icons, where to use them and the code to add one, or browse
-        by <a href="/interactions" class="text-fg underline underline-offset-4">interaction</a> instead.
-      </p>
-    </header>
-
-    <ul class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-      {
-        all.map(({ meta, icons: group }) => (
-          <li>
-            <a
-              href={categoryPath(meta)}
-              class="group flex h-full flex-col rounded-3xl border border-line bg-surface p-6 transition hover:border-line-strong"
-            >
-              <span class="flex gap-2 text-fg" aria-hidden="true">
-                {group.slice(0, 5).map((icon) => (
-                  <span data-useanimations="" class="block size-8" set:html={icon.preview} />
-                ))}
-              </span>
-              <span class="mt-5 flex items-baseline justify-between gap-3">
-                <span class="text-lg font-semibold tracking-tight text-fg">{meta.name}</span>
-                <span class="text-sm text-subtle">{group.length} icons</span>
-              </span>
-              <span class="mt-2 line-clamp-3 text-sm leading-relaxed text-muted">{meta.intro}</span>
-            </a>
-          </li>
-        ))
-      }
-    </ul>
-  </div>
-</Layout>
+<CategoryIndexPage locale={EN} />
diff --git a/website/src/pages/documentation.astro b/website/src/pages/documentation.astro
index 257af01..14663df 100644
--- a/website/src/pages/documentation.astro
+++ b/website/src/pages/documentation.astro
@@ -1,115 +1,6 @@
 ---
-import { compiledContent, getHeadings } from '../content/documentation.md';
-import Layout from '../layouts/Layout.astro';
-import { lastModifiedOf } from '../lib/git';
-import { icons, SITE } from '../lib/icons';
-import { withSite } from '../lib/site';
-
-// The documentation's useanimations.com file and registry URLs point at this site (SITE_URL).
-const content = withSite(await compiledContent(), SITE);
-
-const toc = getHeadings().filter((heading) => heading.depth === 2);
-const faq = [
-  ['Is useAnimations free for commercial projects?', 'Yes. The icons and the React package are MIT-licensed, with no attribution required.'],
-  ['How do I use useAnimations icons in React?', "Install react-useanimations, import UseAnimations and an icon (e.g. react-useanimations/lib/checkmark), then render <UseAnimations animation={checkmark} size={32} />."],
-  ['How do I change the color of an icon?', 'Icons follow the text color. Change it with strokeColor and fillColor, CSS color, or by styling the paths.'],
-  ['Does it work without React?', 'The package is for React. Every icon is also a standard Lottie JSON file that any Lottie player can play (lottie-web, dotLottie, lottie-react-native, lottie-ios, lottie-android, Flutter), and a static SVG. See Use without React and useanimations.com/lottie-icons.'],
-];
-const jsonLd = {
-  '@context': 'https://schema.org',
-  '@graph': [
-    {
-      '@type': 'TechArticle',
-      headline: 'useAnimations documentation',
-      description: 'How to use the useAnimations animated icons in React and shadcn/ui.',
-      url: `${SITE}/documentation`,
-      // The last commit to the documentation, not the build date; omitted without Git history.
-      dateModified: lastModifiedOf(['website/src/content/documentation.md'])?.slice(0, 10),
-      publisher: { '@type': 'Organization', name: 'useAnimations', url: `${SITE}/` },
-    },
-    {
-      '@type': 'BreadcrumbList',
-      itemListElement: [
-        { '@type': 'ListItem', position: 1, name: 'useAnimations', item: `${SITE}/` },
-        { '@type': 'ListItem', position: 2, name: 'Documentation', item: `${SITE}/documentation` },
-      ],
-    },
-    {
-      '@type': 'FAQPage',
-      mainEntity: faq.map(([name, text]) => ({ '@type': 'Question', name, acceptedAnswer: { '@type': 'Answer', text } })),
-    },
-  ],
-};
+import { EN } from '../i18n';
+import DocumentationPage from '../views/DocumentationPage.astro';
 ---
 
-<Layout
-  title="Documentation — useAnimations"
-  description={`How to use ${icons.length} animated icons in React and shadcn/ui: interactions, props, colors, files and accessibility.`}
-  path="/documentation"
-  head={[{ rel: 'alternate', type: 'text/markdown', href: '/documentation.md', title: 'Documentation (Markdown)' }]}
-  jsonLd={jsonLd}
->
-  <div class="mx-auto grid max-w-7xl gap-12 px-5 pt-14 sm:px-8 lg:grid-cols-[14rem_minmax(0,1fr)] xl:grid-cols-[14rem_minmax(0,46rem)_1fr]">
-    <aside class="lg:sticky lg:top-24 lg:max-h-[calc(100vh-7rem)] lg:self-start lg:overflow-y-auto">
-      <details class="group rounded-2xl border border-line p-4 lg:border-0 lg:p-0" open>
-        <summary class="cursor-pointer text-sm font-medium text-fg lg:pointer-events-none lg:list-none">On this page</summary>
-        <nav aria-label="On this page" class="mt-3">
-          <ul class="space-y-0.5 border-l border-line">
-            {
-              toc.map((heading) => (
-                <li>
-                  <a
-                    href={`#${heading.slug}`}
-                    data-toc={heading.slug}
-                    class="-ml-px block border-l border-transparent py-1 pl-4 text-sm text-muted transition-colors hover:text-fg data-[active]:border-accent data-[active]:text-fg"
-                  >
-                    {heading.text}
-                  </a>
-                </li>
-              ))
-            }
-          </ul>
-        </nav>
-        <a href="/documentation.md" class="mt-6 hidden pl-4 text-xs text-subtle hover:text-fg lg:block">View as Markdown</a>
-      </details>
-    </aside>
-    <article class="prose min-w-0 pb-10">
-      <p class="mb-2 text-sm font-medium text-accent">Documentation</p>
-      <Fragment set:html={content} />
-    </article>
-  </div>
-</Layout>
-
-<script>
-  // Highlights the section being read in the table of contents.
-  const links = new Map(
-    [...document.querySelectorAll<HTMLAnchorElement>('[data-toc]')].map((link) => [link.dataset.toc!, link])
-  );
-  const headings = [...links.keys()].map((id) => document.getElementById(id)).filter(Boolean) as HTMLElement[];
-  const update = () => {
-    let current = headings[0];
-    for (const heading of headings) if (heading.getBoundingClientRect().top < 140) current = heading;
-    for (const [id, link] of links) link.toggleAttribute('data-active', id === current?.id);
-  };
-  addEventListener('scroll', update, { passive: true });
-  update();
-
-  // Copy buttons on code blocks.
-  for (const pre of document.querySelectorAll<HTMLPreElement>('.prose pre')) {
-    const wrapper = document.createElement('div');
-    wrapper.className = 'group/code relative';
-    wrapper.dataset.copyScope = '';
-    pre.replaceWith(wrapper);
-    wrapper.append(pre);
-    pre.dataset.code = '';
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.dataset.copyFrom = '[data-code]';
-    button.dataset.track = 'copy';
-    button.dataset.trackCode = pre.dataset.language ?? 'docs';
-    button.className =
-      'absolute top-2 right-2 rounded-lg border border-line bg-surface px-2 py-1 text-xs text-muted opacity-0 transition group-hover/code:opacity-100 focus:opacity-100';
-    button.innerHTML = '<span data-copy-label>Copy</span>';
-    wrapper.append(button);
-  }
-</script>
+<DocumentationPage locale={EN} />
diff --git a/website/src/pages/icons.astro b/website/src/pages/icons.astro
index f212974..4a935ea 100644
--- a/website/src/pages/icons.astro
+++ b/website/src/pages/icons.astro
@@ -1,88 +1,6 @@
 ---
-import Breadcrumbs from '../components/Breadcrumbs.astro';
-import IconGrid from '../components/IconGrid.astro';
-import Layout from '../layouts/Layout.astro';
-import {
-  breadcrumbNode,
-  categories,
-  categoryPath,
-  collectionPageNode,
-  hubDescription,
-  hubTitle,
-  interactionPath,
-  interactions,
-} from '../lib/hubs';
-import { icons, INTERACTIONS } from '../lib/icons';
-import { websiteNode } from '../lib/seo';
-
-// The index of every icon page, grouped like the home page; plain links, no scripts.
-const groups = categories();
-const title = hubTitle(`All ${icons.length} animated icons by category`, `All ${icons.length} animated icons`);
-const description = hubDescription(
-  `Every useAnimations icon on one page: ${icons.length} free animated icons in ${groups.length} categories, for React, shadcn/ui, Lottie JSON and SVG. MIT licensed.`
-);
-const crumbs = [{ name: 'Icons', path: '/icons' }];
-const jsonLd = {
-  '@context': 'https://schema.org',
-  '@graph': [
-    collectionPageNode('/icons', 'All animated icons', description, icons),
-    breadcrumbNode(crumbs),
-    websiteNode(),
-  ],
-};
+import { EN } from '../i18n';
+import IconIndexPage from '../views/IconIndexPage.astro';
 ---
 
-<Layout title={title} description={description} path="/icons" jsonLd={jsonLd}>
-  <div class="mx-auto max-w-6xl px-5 pt-10 sm:px-8">
-    <header class="max-w-3xl">
-      <Breadcrumbs crumbs={crumbs} />
-      <p class="mt-8 text-sm font-medium text-accent">{icons.length} icons · MIT licensed</p>
-      <h1 class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">All animated icons</h1>
-      <p class="mt-4 text-lg leading-relaxed text-muted">
-        Every icon in the set, grouped by category. Open one for a live preview, its React and shadcn/ui code, and
-        the Lottie JSON, SVG and ZIP downloads. To search by keyword and try the animations in place, use the{' '}
-        <a href="/#icons" class="text-fg underline underline-offset-4">icon browser</a>.
-      </p>
-    </header>
-
-    <nav aria-label="Categories" class="mt-10 flex flex-wrap gap-2">
-      {
-        groups.map(({ meta, icons: group }) => (
-          <a href={`#${meta.slug}`} class="inline-flex rounded-full border border-line px-3.5 py-1.5 text-sm text-muted transition hover:border-line-strong hover:text-fg">
-            {meta.name} <span class="ml-1.5 text-subtle">{group.length}</span>
-          </a>
-        ))
-      }
-    </nav>
-    <p class="mt-4 text-sm text-muted">
-      By interaction:{' '}
-      {
-        interactions().map(({ interaction, icons: group }, index) => (
-          <>
-            {index > 0 && ' · '}
-            <a href={interactionPath(interaction)} class="text-fg underline-offset-4 hover:underline">
-              {INTERACTIONS[interaction].label}
-            </a>{' '}
-            <span class="text-subtle">({group.length})</span>
-          </>
-        ))
-      }
-    </p>
-
-    {
-      groups.map(({ meta, icons: group }) => (
-        <section id={meta.slug} class="mt-14 scroll-mt-24" aria-labelledby={`${meta.slug}-title`}>
-          <div class="flex flex-wrap items-baseline justify-between gap-3">
-            <h2 id={`${meta.slug}-title`} class="text-2xl font-semibold tracking-tight">
-              <a href={categoryPath(meta)} class="hover:underline hover:underline-offset-4">{meta.name}</a>
-            </h2>
-            <a href={categoryPath(meta)} class="text-sm text-muted hover:text-fg">
-              {group.length} {meta.name.toLowerCase()} icons →
-            </a>
-          </div>
-          <IconGrid class="mt-4" icons={group} />
-        </section>
-      ))
-    }
-  </div>
-</Layout>
+<IconIndexPage locale={EN} />
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index a9b2dd4..8a5c2dd 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -1,654 +1,6 @@
 ---
-import CodeBlock from '../components/CodeBlock.astro';
-import IconCard from '../components/IconCard';
-import IconDialog, { type DialogIcon, type Templates } from '../components/IconDialog';
-import IconField from '../components/IconField.astro';
-import InstallCommand from '../components/InstallCommand.astro';
-import ColorRow from '../components/ColorRow';
-import InteractionDemo from '../components/InteractionDemo';
-import Layout from '../layouts/Layout.astro';
-import { highlight } from '../lib/highlight';
-import {
-  categoryLinks,
-  HOME_DESCRIPTION,
-  HOME_FAQ,
-  HOME_TITLE,
-  HUBS,
-  interactionLinks,
-} from '../lib/home';
-import {
-  CATEGORIES,
-  filesExample,
-  icons,
-  INTERACTIONS,
-  reactExample,
-  searchText,
-  shadcnExample,
-  SITE,
-  VERSION,
-} from '../lib/icons';
-import { faqNode, ORGANIZATION_ID, organizationNode, WEBSITE_ID, websiteNode } from '../lib/seo';
-import { GITHUB, NPM } from '../lib/site';
-import { CATEGORY_META } from '../lib/taxonomy';
-
-// HERO FIELD: icons whose animation starts and ends at rest, taken from every category in turn.
-const replayable = new Set(['hover-replay', 'click-replay', 'loop', 'hover-loop']);
-// Some icons start from an empty frame (their still is a later frame); the field shows only icons
-// that are visible at rest, as its live players start on the first frame.
-const pools = CATEGORIES.map((category) =>
-  icons.filter(
-    (icon) => icon.category === category && replayable.has(icon.interaction) && icon.preview === icon.firstFrame
-  )
-);
-const field: typeof icons = [];
-for (let round = 0; field.length < 72; round += 1) {
-  for (const pool of pools) if (pool[round] && field.length < 72) field.push(pool[round]);
-}
-
-const byName = (name: string) => icons.find((icon) => icon.name === name)!;
-const demos = [
-  { name: 'infinity', interaction: 'loop' as const, title: 'Loop', description: 'Plays continuously, for loaders and ambient status.' },
-  { name: 'menu', interaction: 'click-toggle' as const, title: 'Click toggle', description: 'Switches between two states: menu and close, play and pause.' },
-  { name: 'download', interaction: 'click-replay' as const, title: 'Click replay', description: 'Replays from the start on every click, as feedback.' },
-  { name: 'archive', interaction: 'hover' as const, title: 'Hover', description: 'Plays forward on enter and back on leave.' },
-  { name: 'github', interaction: 'hover-loop' as const, title: 'Hover loop', description: 'Loops while hovered and finishes its cycle on leave.' },
-  { name: 'trendingUp', interaction: 'hover-replay' as const, title: 'Hover replay', description: 'Plays once from the start on every enter.' },
-].map((demo) => ({ ...demo, id: byName(demo.name).id }));
-
-// DIALOG: metadata of every icon and the code blocks, highlighted once with placeholders.
-const index: DialogIcon[] = icons.map((icon) => ({
-  id: icon.id,
-  name: icon.name,
-  exportName: icon.exportName,
-  component: icon.component,
-  title: icon.title,
-  category: icon.category,
-  interaction: icon.interaction,
-  svg: Object.keys(icon.svgs),
-  durationMs: icon.durationMs,
-}));
-const templates: Templates = {
-  react: await highlight(reactExample('__EXPORT__', '__NAME__'), 'jsx'),
-  shadcnCommand: await highlight(`npx shadcn@latest add ${SITE}/r/__ID__.json`, 'bash'),
-  shadcn: await highlight(shadcnExample('__ID__', '__COMPONENT__'), 'tsx'),
-  files: await highlight(filesExample('__ID__'), 'bash'),
-};
-
-const COLORS = [
-  { label: 'Text color', value: '' },
-  { label: 'Indigo', value: '#4b5cff' },
-  { label: 'Red', value: '#e5484d' },
-  { label: 'Amber', value: '#f59e0b' },
-  { label: 'Teal', value: '#12a594' },
-  { label: 'Violet', value: '#a24bff' },
-];
-
-const platforms = [
-  {
-    name: 'React',
-    lang: 'jsx',
-    code: `import UseAnimations from 'react-useanimations';
-import menu from 'react-useanimations/lib/menu';
-
-export function MenuButton({ open, onToggle }) {
-  return (
-    <UseAnimations
-      animation={menu}
-      active={open}
-      onClick={onToggle}
-      size={28}
-    />
-  );
-}`,
-  },
-  {
-    name: 'shadcn',
-    lang: 'bash',
-    code: `npx shadcn@latest add ${SITE}/r/menu.json
-# then: <AnimatedMenu size={24} />`,
-  },
-  {
-    name: 'Files',
-    lang: 'bash',
-    code: `# Every icon as an SVG, as its animation (Lottie JSON) and as a ZIP of both
-${SITE}/icons/menu/menu.svg
-${filesExample('menu')}`,
-  },
-  {
-    name: 'Agents',
-    lang: 'js',
-    code: `const { icons } = await fetch('${SITE}/icons.json').then((r) => r.json());
-const icon = icons.find((i) => i.keywords.includes('hamburger'));
-icon.react.import; // "import menu from 'react-useanimations/lib/menu';"`,
-  },
-];
-
-const colorRow = ['heart', 'star', 'bookmark', 'notification', 'settings', 'zap'].map(byName);
-const colorful = ['#e5484d', '#f59e0b', '#12a594', '#4b5cff', '#a24bff', 'var(--fg)'];
-
-const categories = categoryLinks();
-const interactions = interactionLinks();
-
-const jsonLd = {
-  '@context': 'https://schema.org',
-  '@graph': [
-    websiteNode(),
-    organizationNode(),
-    {
-      '@type': 'WebPage',
-      '@id': `${SITE}/#webpage`,
-      url: `${SITE}/`,
-      name: HOME_TITLE,
-      description: HOME_DESCRIPTION,
-      inLanguage: 'en',
-      isPartOf: { '@id': WEBSITE_ID },
-      about: { '@id': `${SITE}/#software` },
-      primaryImageOfPage: `${SITE}/og.png`,
-    },
-    {
-      '@type': ['SoftwareApplication', 'SoftwareSourceCode'],
-      '@id': `${SITE}/#software`,
-      name: 'react-useanimations',
-      description: `React component and ${icons.length} animated icons (Lottie) with hover, click and loop interactions built in. No dependencies.`,
-      applicationCategory: 'DeveloperApplication',
-      operatingSystem: 'Web',
-      softwareVersion: VERSION,
-      version: VERSION,
-      downloadUrl: NPM,
-      installUrl: NPM,
-      codeRepository: GITHUB,
-      programmingLanguage: ['TypeScript', 'JavaScript'],
-      runtimePlatform: 'React',
-      license: 'https://opensource.org/license/mit/',
-      isAccessibleForFree: true,
-      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
-      author: { '@id': ORGANIZATION_ID },
-      publisher: { '@id': ORGANIZATION_ID },
-    },
-    {
-      '@type': 'Dataset',
-      '@id': `${SITE}/#catalog`,
-      name: 'useAnimations icon catalog',
-      description: `Every one of the ${icons.length} useAnimations icons with id, title, category, keywords, interaction, Lottie JSON, SVG and ZIP URLs, React import and shadcn command.`,
-      url: `${SITE}/icons.json`,
-      license: 'https://opensource.org/license/mit/',
-      isAccessibleForFree: true,
-      creator: { '@id': ORGANIZATION_ID },
-      keywords: ['animated icons', 'micro animations', 'Lottie', 'SVG', 'React', 'shadcn/ui'],
-      distribution: [
-        { '@type': 'DataDownload', encodingFormat: 'application/json', contentUrl: `${SITE}/icons.json` },
-        { '@type': 'DataDownload', encodingFormat: 'application/json', contentUrl: `${SITE}/r/registry.json` },
-      ],
-    },
-    { ...faqNode(HOME_FAQ), '@id': `${SITE}/#faq` },
-  ],
-};
+import { EN } from '../i18n';
+import HomePage from '../views/HomePage.astro';
 ---
 
-<Layout
-  title={HOME_TITLE}
-  description={HOME_DESCRIPTION}
-  path="/"
-  alternates={{ en: '/', 'zh-Hans': '/zh', 'x-default': '/' }}
-  head={[
-    { rel: 'license', href: '/licencing-and-terms' },
-    { rel: 'alternate', type: 'text/markdown', href: '/index.md', title: 'Homepage (Markdown)' },
-  ]}
-  jsonLd={jsonLd}
->
-  <!-- HERO -->
-  <section class="relative overflow-hidden">
-    <div class="hero-glow pointer-events-none absolute inset-0" aria-hidden="true"></div>
-    <div
-      class="pointer-events-none absolute inset-0 bg-grid [mask-image:radial-gradient(ellipse_at_top,black_20%,transparent_70%)] opacity-60"
-      aria-hidden="true"
-    >
-    </div>
-    <div class="relative mx-auto max-w-7xl px-5 pt-20 pb-10 text-center sm:px-8 sm:pt-28">
-      <a
-        href="/documentation#upgrading-from-v2"
-        class="group mx-auto inline-flex items-center gap-2 rounded-full border border-line bg-surface/70 py-1 pr-3 pl-1 text-xs text-muted backdrop-blur transition hover:text-fg"
-      >
-        <span class="rounded-full bg-accent px-2 py-0.5 font-medium text-accent-fg">v3</span>
-        {icons.length} icons · zero dependencies · MIT
-        <span class="transition-transform group-hover:translate-x-0.5">→</span>
-      </a>
-      <p class="mx-auto mt-8 max-w-4xl text-5xl font-semibold tracking-[-0.045em] text-balance sm:text-7xl lg:text-[5.5rem] lg:leading-[0.95]">
-        Icons that <span class="text-gradient">come alive.</span>
-      </p>
-      <h1 class="mx-auto mt-6 max-w-3xl text-xl font-semibold tracking-tight text-balance sm:text-2xl">
-        Free animated icons for React, shadcn/ui and Lottie
-      </h1>
-      <p class="mx-auto mt-4 max-w-2xl text-lg leading-relaxed text-pretty text-muted">
-        {icons.length} hand-crafted micro animations with hover, click and loop micro-interactions built in. Use them
-        as a React component, add them with shadcn, or download SVG and Lottie JSON. MIT licensed.
-      </p>
-      <div class="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
-        <a
-          href="#icons"
-          class="inline-flex items-center gap-2 rounded-full bg-fg px-6 py-3 text-sm font-medium text-bg shadow-[0_10px_30px_-12px_var(--glow)] transition hover:opacity-90"
-          >Browse icons</a
-        >
-        <InstallCommand />
-      </div>
-    </div>
-    <div class="relative mx-auto max-w-6xl px-3 pb-6 sm:px-8">
-      <div
-        class="field-stage relative h-[300px] overflow-hidden rounded-[2rem] border border-line bg-surface/60 shadow-[0_40px_120px_-60px_var(--glow)] backdrop-blur sm:h-[400px]"
-      >
-        <IconField icons={field} />
-        <div
-          class="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-bg/90 to-transparent"
-          aria-hidden="true"
-        >
-        </div>
-      </div>
-      <p class="mt-4 text-center text-xs text-subtle">Move your pointer across the field.</p>
-    </div>
-  </section>
-
-  <!-- NUMBERS -->
-  <section class="mx-auto mt-10 max-w-6xl px-5 sm:px-8" aria-label="At a glance">
-    <dl class="grid grid-cols-2 overflow-hidden rounded-3xl border border-line sm:grid-cols-4">
-      {
-        [
-          [String(icons.length), 'animated icons'],
-          ['6', 'built-in interactions'],
-          ['8 kB', 'player, gzipped'],
-          ['0', 'dependencies'],
-        ].map(([value, label]) => (
-          <div class="border-line p-6 text-center not-last:border-r max-sm:nth-[2]:border-r-0 max-sm:nth-[-n+2]:border-b">
-            <dt class="sr-only">{label}</dt>
-            <dd class="text-3xl font-semibold tracking-tight sm:text-4xl">{value}</dd>
-            <dd class="mt-1 text-sm text-muted">{label}</dd>
-          </div>
-        ))
-      }
-    </dl>
-  </section>
-
-  <!-- INTERACTIONS -->
-  <section class="mx-auto mt-32 max-w-7xl px-5 sm:px-8" aria-labelledby="interactions-title">
-    <div class="max-w-2xl">
-      <p class="text-sm font-medium text-accent">Interactions built in</p>
-      <h2 id="interactions-title" class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
-        Every icon knows how to move.
-      </h2>
-      <p class="mt-4 text-lg text-muted">
-        Each icon ships with the interaction it was designed for. Drop it in and it just works — or pick another one with
-        a single prop. Try them:
-      </p>
-    </div>
-    <div class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-      {demos.map((demo) => <InteractionDemo client:visible {...demo} hint={demo.description} />)}
-    </div>
-  </section>
-
-  <!-- ICON BROWSER -->
-  <section id="icons" class="mx-auto mt-32 max-w-7xl px-5 sm:px-8" aria-labelledby="icons-title" data-browser>
-    <div class="flex flex-wrap items-end justify-between gap-6">
-      <div class="max-w-2xl">
-        <p class="text-sm font-medium text-accent">The library</p>
-        <h2 id="icons-title" class="mt-3 text-4xl font-semibold tracking-tight sm:text-5xl">
-          {icons.length} free animated icons
-        </h2>
-        <p class="mt-4 text-lg text-muted">
-          Hover or click to play. Open an icon for its code and downloads — Lottie JSON, SVG and ZIP.
-        </p>
-      </div>
-    </div>
-
-    <div
-      data-filters
-      class="sticky top-16 z-30 -mx-5 mt-10 border-b border-line bg-bg/85 px-5 py-4 backdrop-blur-xl sm:-mx-8 sm:px-8"
-    >
-      <div class="flex flex-wrap items-center gap-3">
-        <label class="relative min-w-[16rem] flex-1">
-          <span class="sr-only">Search icons</span>
-          <svg
-            viewBox="0 0 24 24"
-            class="pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-subtle"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg
-          >
-          <input
-            data-search
-            type="search"
-            placeholder={`Search ${icons.length} icons — try “eye”, “bell” or “arrow”`}
-            autocomplete="off"
-            class="w-full rounded-full border border-line-strong bg-surface py-2.5 pr-10 pl-10 text-sm text-fg placeholder:text-subtle focus:border-accent focus:outline-none"
-          />
-          <kbd
-            class="pointer-events-none absolute top-1/2 right-3 hidden -translate-y-1/2 rounded-md border border-line px-1.5 font-mono text-[11px] text-subtle sm:block"
-            >/</kbd
-          >
-        </label>
-        <label class="relative">
-          <span class="sr-only">Interaction</span>
-          <select
-            data-interaction-filter
-            class="appearance-none rounded-full border border-line-strong bg-surface py-2.5 pr-9 pl-4 text-sm text-fg focus:border-accent focus:outline-none"
-          >
-            <option value="">All interactions</option>
-            {Object.entries(INTERACTIONS).map(([value, { label }]) => <option value={value}>{label}</option>)}
-          </select>
-          <svg
-            viewBox="0 0 24 24"
-            class="pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-subtle"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg
-          >
-        </label>
-        <div class="flex items-center gap-1.5" role="group" aria-label="Icon color">
-          {
-            COLORS.map((color) => (
-              <button
-                type="button"
-                data-color={color.value}
-                data-track="color"
-                data-track-color={color.label}
-                aria-label={color.label}
-                aria-pressed={color.value === '' ? 'true' : 'false'}
-                class="size-6 rounded-full border border-line-strong ring-offset-2 ring-offset-bg aria-pressed:ring-2 aria-pressed:ring-accent"
-                style={{ background: color.value || 'var(--fg)' }}
-              />
-            ))
-          }
-          <label class="relative size-6 cursor-pointer overflow-hidden rounded-full border border-line-strong bg-[conic-gradient(#e5484d,#f59e0b,#12a594,#4b5cff,#a24bff,#e5484d)]">
-            <span class="sr-only">Custom color</span>
-            <input data-color-input type="color" class="absolute inset-0 cursor-pointer opacity-0" />
-          </label>
-        </div>
-        <label class="flex items-center gap-2 text-xs text-muted">
-          Size
-          <input data-size type="range" min="24" max="64" value="40" class="w-24 accent-[var(--accent)]" />
-        </label>
-      </div>
-      <div class="no-scrollbar mt-4 flex gap-2 overflow-x-auto sm:flex-wrap sm:overflow-visible" role="group" aria-label="Category">
-        {
-          ['', ...CATEGORIES].map((category) => (
-            <button
-              type="button"
-              data-category-filter={category}
-              data-track="category"
-              data-track-category={category || 'All'}
-              aria-pressed={category === '' ? 'true' : 'false'}
-              class="shrink-0 rounded-full border border-line px-3.5 py-1.5 text-sm whitespace-nowrap text-muted transition hover:text-fg aria-pressed:border-fg aria-pressed:bg-fg aria-pressed:text-bg"
-            >
-              {category || 'All'}
-            </button>
-          ))
-        }
-      </div>
-    </div>
-
-    <p class="mt-6 text-sm text-subtle" aria-live="polite" data-count>{icons.length} icons</p>
-    <div data-grid class="mt-2">
-      {
-        CATEGORIES.map((category) => (
-          <section
-            data-section
-            id={category === 'Alerts' ? 'alerts' : undefined}
-            aria-label={category}
-            class="icon-section mt-8 first:mt-4"
-          >
-            <h3 class="mb-4 text-sm font-medium text-muted">
-              {CATEGORY_META[category].indexable ? (
-                <a href={`/categories/${CATEGORY_META[category].slug}`} class="transition-colors hover:text-fg">
-                  {category}
-                </a>
-              ) : (
-                category
-              )}
-            </h3>
-            <ul class="grid grid-cols-[repeat(auto-fill,minmax(7.5rem,1fr))] gap-3">
-              {icons
-                .filter((icon) => icon.category === category)
-                .map((icon) => (
-                  <li
-                    data-card
-                    data-track="icon-open"
-                    data-track-icon={icon.id}
-                    data-id={icon.id}
-                    data-title={icon.title}
-                    data-category={icon.category}
-                    data-interaction={icon.interaction}
-                    data-keywords={searchText(icon)}
-                    data-blank-start={icon.preview === icon.firstFrame ? undefined : ''}
-                  >
-                    <IconCard
-                      icon={{ id: icon.id, title: icon.title, interaction: icon.interaction }}
-                      still={icon.preview}
-                    />
-                  </li>
-                ))}
-            </ul>
-          </section>
-        ))
-      }
-      <div data-empty hidden class="rounded-3xl border border-dashed border-line-strong px-6 py-16 text-center">
-        <p class="text-lg font-medium">No icons match.</p>
-        <p class="mt-2 text-sm text-muted">
-          Try another word, or <a class="underline underline-offset-4" href={`${GITHUB}/issues`}>suggest an icon</a>.
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <!-- EVERYWHERE -->
-  <section class="mx-auto mt-32 max-w-7xl px-5 sm:px-8" aria-labelledby="everywhere-title">
-    <div class="grid items-start gap-12 lg:grid-cols-[1fr_1.3fr]">
-      <div class="lg:sticky lg:top-28">
-        <p class="text-sm font-medium text-accent">Use them your way</p>
-        <h2 id="everywhere-title" class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
-          Install, import, done.
-        </h2>
-        <p class="mt-4 text-lg text-muted">
-          A React component with no dependencies, a shadcn registry, downloadable files with stable URLs, and a
-          catalog that AI agents can read.
-        </p>
-        <a
-          href="/documentation"
-          class="mt-8 inline-flex items-center gap-2 rounded-full border border-line-strong px-5 py-2.5 text-sm font-medium transition hover:bg-surface-2"
-          >Read the documentation →</a
-        >
-      </div>
-      <div data-tabs class="min-w-0">
-        <div role="tablist" aria-label="Platform" class="no-scrollbar flex gap-1 overflow-x-auto rounded-full border border-line bg-surface-2 p-1">
-          {
-            platforms.map((platform, i) => (
-              <button
-                type="button"
-                role="tab"
-                id={`tab-${platform.name}`}
-                aria-controls={`panel-${platform.name}`}
-                aria-selected={i === 0 ? 'true' : 'false'}
-                data-track="platform-tab"
-                data-track-tab={platform.name.toLowerCase()}
-                class="shrink-0 rounded-full px-4 py-1.5 text-sm text-muted transition aria-selected:bg-surface aria-selected:text-fg aria-selected:shadow-sm"
-              >
-                {platform.name}
-              </button>
-            ))
-          }
-        </div>
-        {
-          platforms.map((platform, i) => (
-            <div
-              role="tabpanel"
-              id={`panel-${platform.name}`}
-              aria-labelledby={`tab-${platform.name}`}
-              hidden={i !== 0}
-              class="mt-4"
-            >
-              <CodeBlock code={platform.code} lang={platform.lang} track={{ code: platform.name.toLowerCase() }} />
-            </div>
-          ))
-        }
-      </div>
-    </div>
-  </section>
-
-  <!-- FEATURES -->
-  <section class="mx-auto mt-32 max-w-7xl px-5 sm:px-8" aria-labelledby="features-title">
-    <h2 id="features-title" class="max-w-2xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
-      Small, accessible and yours to style.
-    </h2>
-    <div class="mt-12 grid gap-4 md:grid-cols-6">
-      <article class="rounded-3xl border border-line bg-surface p-7 md:col-span-4">
-        <h3 class="text-lg font-semibold tracking-tight">Follows your colors</h3>
-        <p class="mt-2 max-w-md text-muted">
-          Icons use <code class="font-mono text-sm text-fg">currentColor</code>: they pick up text color, hover states and
-          dark mode on their own. Override with a prop, a class or plain CSS.
-        </p>
-        <ColorRow
-          client:visible
-          icons={colorRow.map((icon, i) => ({
-            id: icon.id,
-            title: icon.title,
-            color: colorful[i],
-            interaction: icon.interaction,
-          }))}
-        />
-      </article>
-      <article class="flex flex-col justify-between rounded-3xl border border-line bg-surface p-7 md:col-span-2">
-        <h3 class="text-lg font-semibold tracking-tight">Tiny by design</h3>
-        <p class="mt-10 text-6xl font-semibold tracking-tight">8<span class="text-3xl text-muted"> kB</span></p>
-        <p class="mt-2 text-muted">A built-in player, zero dependencies. Each icon is its own 2 kB module.</p>
-      </article>
-      <article class="rounded-3xl border border-line bg-surface p-7 md:col-span-2">
-        <h3 class="text-lg font-semibold tracking-tight">Accessible by default</h3>
-        <p class="mt-2 text-muted">
-          Respects reduced motion, plays hover animations on keyboard focus and stays out of screen readers unless you
-          label it.
-        </p>
-      </article>
-      <article class="rounded-3xl border border-line bg-surface p-7 md:col-span-2">
-        <h3 class="text-lg font-semibold tracking-tight">Server-rendering ready</h3>
-        <p class="mt-2 text-muted">
-          A client component that renders safely in Next.js, Remix and Astro. Icons are plain data you can import
-          anywhere.
-        </p>
-      </article>
-      <article class="rounded-3xl border border-line bg-surface p-7 md:col-span-2">
-        <h3 class="text-lg font-semibold tracking-tight">Made for agents</h3>
-        <p class="mt-2 text-muted">
-          A typed catalog with keywords for every icon, <a class="underline underline-offset-4" href="/icons.json"
-            >icons.json</a
-          >, <a class="underline underline-offset-4" href="/llms.txt">llms.txt</a> and Markdown docs.
-        </p>
-      </article>
-    </div>
-  </section>
-
-  <!-- BROWSE -->
-  <section class="mx-auto mt-32 max-w-7xl px-5 sm:px-8" aria-labelledby="browse-title">
-    <h2 id="browse-title" class="max-w-2xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
-      Find the right micro animation.
-    </h2>
-    <div class="mt-12 grid gap-10 lg:grid-cols-[2fr_1fr]">
-      <nav aria-labelledby="browse-categories">
-        <h3 id="browse-categories" class="text-lg font-semibold tracking-tight">Browse by category</h3>
-        <ul class="mt-4 grid gap-x-6 gap-y-2 sm:grid-cols-2 md:grid-cols-3">
-          {
-            categories.map((link) => (
-              <li>
-                <a href={link.href} class="group flex items-baseline justify-between gap-3 py-1 text-muted hover:text-fg">
-                  <span>{link.title}</span>
-                  <span class="text-xs text-subtle tabular-nums">{link.count}</span>
-                </a>
-              </li>
-            ))
-          }
-        </ul>
-      </nav>
-      <div class="grid gap-10">
-        <nav aria-labelledby="browse-interactions">
-          <h3 id="browse-interactions" class="text-lg font-semibold tracking-tight">Browse by interaction</h3>
-          <ul class="mt-4 grid gap-y-2">
-            {
-              interactions.map((link) => (
-                <li>
-                  <a href={link.href} class="flex items-baseline justify-between gap-3 py-1 text-muted hover:text-fg">
-                    <span>{link.title}</span>
-                    <span class="text-xs text-subtle tabular-nums">{link.count}</span>
-                  </a>
-                </li>
-              ))
-            }
-          </ul>
-        </nav>
-        <nav aria-labelledby="browse-formats">
-          <h3 id="browse-formats" class="text-lg font-semibold tracking-tight">All icons and formats</h3>
-          <ul class="mt-4 grid gap-y-2">
-            {
-              HUBS.map((link) => (
-                <li>
-                  <a href={link.href} class="block py-1 text-muted hover:text-fg">{link.label}</a>
-                </li>
-              ))
-            }
-          </ul>
-        </nav>
-      </div>
-    </div>
-  </section>
-
-  <!-- FAQ -->
-  <section class="mx-auto mt-32 max-w-3xl px-5 sm:px-8" aria-labelledby="faq-title">
-    <h2 id="faq-title" class="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">Questions</h2>
-    <div class="mt-10 divide-y divide-line border-y border-line">
-      {
-        HOME_FAQ.map((item) => (
-          <details class="group py-5">
-            <summary class="flex cursor-pointer list-none items-center justify-between gap-6 text-lg font-medium [&::-webkit-details-marker]:hidden">
-              <h3>{item.question}</h3>
-              <span class="text-subtle transition-transform group-open:rotate-45" aria-hidden="true">+</span>
-            </summary>
-            <p class="mt-3 leading-relaxed text-muted">
-              {item.answer}
-              {item.link && (
-                <>
-                  {' '}
-                  <a href={item.link.href} class="text-fg underline underline-offset-4">
-                    {item.link.label} →
-                  </a>
-                </>
-              )}
-            </p>
-          </details>
-        ))
-      }
-    </div>
-  </section>
-
-  <!-- CTA -->
-  <section class="mx-auto mt-32 max-w-7xl px-5 sm:px-8">
-    <div class="cta relative overflow-hidden rounded-[2.5rem] border border-line px-6 py-20 text-center sm:px-16">
-      <div class="hero-glow pointer-events-none absolute inset-0" aria-hidden="true"></div>
-      <h2 class="relative text-4xl font-semibold tracking-tight text-balance sm:text-6xl">
-        Give your interface a <span class="text-gradient">pulse.</span>
-      </h2>
-      <p class="relative mx-auto mt-4 max-w-xl text-lg text-muted">Free and MIT licensed, for personal and commercial work.</p>
-      <div class="relative mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
-        <InstallCommand />
-        <a href="/documentation" class="rounded-full bg-fg px-6 py-3 text-sm font-medium text-bg hover:opacity-90"
-          >Get started</a
-        >
-      </div>
-    </div>
-  </section>
-
-  <script type="application/json" id="icon-index" set:html={JSON.stringify(index)} />
-  <IconDialog client:idle templates={templates} />
-</Layout>
-
-<script>
-  import '../scripts/browser';
-  import '../scripts/tabs';
-</script>
+<HomePage locale={EN} />
diff --git a/website/src/pages/interactions/index.astro b/website/src/pages/interactions/index.astro
index 4d197c5..6d216ae 100644
--- a/website/src/pages/interactions/index.astro
+++ b/website/src/pages/interactions/index.astro
@@ -1,111 +1,6 @@
 ---
-import Breadcrumbs from '../../components/Breadcrumbs.astro';
-import Layout from '../../layouts/Layout.astro';
-import { breadcrumbNode, hubDescription, hubTitle, interactionPath, interactions, REDUCED_MOTION } from '../../lib/hubs';
-import { icons, INTERACTIONS, SITE } from '../../lib/icons';
-import { websiteNode, WEBSITE_ID } from '../../lib/seo';
-import { INTERACTION_META } from '../../lib/taxonomy';
-
-const all = interactions();
-const title = hubTitle('Micro interactions: hover, click and loop icons', 'Micro interactions for animated icons');
-const description = hubDescription(
-  `${icons.length} animated icons in ${all.length} micro interactions: loop, click toggle, click replay, hover, hover replay and hover loop. With reduced-motion support.`
-);
-const crumbs = [
-  { name: 'Icons', path: '/icons' },
-  { name: 'Interactions', path: '/interactions' },
-];
-const jsonLd = {
-  '@context': 'https://schema.org',
-  '@graph': [
-    {
-      '@type': 'CollectionPage',
-      '@id': `${SITE}/interactions`,
-      url: `${SITE}/interactions`,
-      name: 'Animated icon interactions',
-      description,
-      inLanguage: 'en',
-      isPartOf: { '@id': WEBSITE_ID },
-      mainEntity: {
-        '@type': 'ItemList',
-        numberOfItems: all.length,
-        itemListElement: all.map(({ interaction }, index) => ({
-          '@type': 'ListItem',
-          position: index + 1,
-          url: `${SITE}${interactionPath(interaction)}`,
-          name: INTERACTION_META[interaction].title,
-        })),
-      },
-    },
-    breadcrumbNode(crumbs),
-    websiteNode(),
-  ],
-};
+import { EN } from '../../i18n';
+import InteractionIndexPage from '../../views/InteractionIndexPage.astro';
 ---
 
-<Layout title={title} description={description} path="/interactions" jsonLd={jsonLd}>
-  <div class="mx-auto max-w-6xl px-5 pt-10 sm:px-8">
-    <Breadcrumbs crumbs={crumbs} />
-    <header class="mt-8 max-w-3xl">
-      <p class="text-sm font-medium text-accent">{all.length} interactions · {icons.length} icons</p>
-      <h1 class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">Animated icon interactions</h1>
-      <p class="mt-4 text-lg leading-relaxed text-muted">
-        Every icon ships with the micro interaction it was designed for: it loops, toggles or replays on click, or plays
-        on hover. The React component wires it up and respects reduced motion, and the{' '}
-        <code class="font-mono text-base text-fg">interaction</code> prop switches any icon to another one.
-      </p>
-    </header>
-
-    <ul class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-      {
-        all.map(({ interaction, icons: group }) => (
-          <li>
-            <a
-              href={interactionPath(interaction)}
-              class="group flex h-full flex-col rounded-3xl border border-line bg-surface p-6 transition hover:border-line-strong"
-            >
-              <span class="flex gap-2 text-fg" aria-hidden="true">
-                {group.slice(0, 5).map((icon) => (
-                  <span data-useanimations="" class="block size-8" set:html={icon.preview} />
-                ))}
-              </span>
-              <span class="mt-5 font-mono text-xs text-accent">interaction="{interaction}"</span>
-              <span class="mt-2 flex items-baseline justify-between gap-3">
-                <span class="text-lg font-semibold tracking-tight text-fg">{INTERACTION_META[interaction].title}</span>
-                <span class="shrink-0 text-sm text-subtle">{group.length} icons</span>
-              </span>
-              <span class="mt-2 text-sm leading-relaxed text-muted">{INTERACTIONS[interaction].description}</span>
-              <span class="mt-2 text-sm leading-relaxed text-subtle">{INTERACTION_META[interaction].example}</span>
-            </a>
-          </li>
-        ))
-      }
-    </ul>
-
-    <div class="mt-16 grid max-w-5xl gap-12 lg:grid-cols-2">
-      <section aria-labelledby="choose-title">
-        <h2 id="choose-title" class="text-2xl font-semibold tracking-tight">Choosing an interaction</h2>
-        <ul class="mt-4 list-disc space-y-2 pl-5 leading-relaxed text-muted marker:text-subtle">
-          <li><strong class="font-medium text-fg">State that lasts</strong>, such as loading or an active alert: <a class="text-fg underline underline-offset-4" href={interactionPath('loop')}>loop</a>.</li>
-          <li><strong class="font-medium text-fg">An on/off control</strong>, such as mute, menu or show password: <a class="text-fg underline underline-offset-4" href={interactionPath('click-toggle')}>click toggle</a>, with <code class="font-mono text-sm text-fg">active</code> for controlled state.</li>
-          <li><strong class="font-medium text-fg">A one-shot action</strong>, such as send, save or refresh: <a class="text-fg underline underline-offset-4" href={interactionPath('click-replay')}>click replay</a>.</li>
-          <li><strong class="font-medium text-fg">A hint of what a link opens</strong>: <a class="text-fg underline underline-offset-4" href={interactionPath('hover')}>hover</a>, which reverses when the pointer leaves.</li>
-          <li><strong class="font-medium text-fg">Toolbars and lists people sweep across</strong>: <a class="text-fg underline underline-offset-4" href={interactionPath('hover-replay')}>hover replay</a>, which finishes on its own.</li>
-          <li><strong class="font-medium text-fg">Links that invite a longer look</strong>, such as social icons: <a class="text-fg underline underline-offset-4" href={interactionPath('hover-loop')}>hover loop</a>.</li>
-        </ul>
-      </section>
-      <section aria-labelledby="motion-title">
-        <h2 id="motion-title" class="text-2xl font-semibold tracking-tight">Reduced motion</h2>
-        <p class="mt-4 leading-relaxed text-muted">
-          The React component follows <code class="font-mono text-sm text-fg">prefers-reduced-motion</code> and updates
-          when the setting changes. Taps on touch screens never start hover animations.
-        </p>
-        <ul class="mt-4 space-y-2 text-sm leading-relaxed text-muted">
-          {all.map(({ interaction }) => (
-            <li><code class="font-mono text-fg">{interaction}</code>: {REDUCED_MOTION[interaction].replace('With reduced motion preferred, ', '')}</li>
-          ))}
-        </ul>
-      </section>
-    </div>
-  </div>
-</Layout>
+<InteractionIndexPage locale={EN} />
diff --git a/website/src/pages/licencing-and-terms.astro b/website/src/pages/licencing-and-terms.astro
index abd5563..057d7c3 100644
--- a/website/src/pages/licencing-and-terms.astro
+++ b/website/src/pages/licencing-and-terms.astro
@@ -1,56 +1,6 @@
 ---
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-import Layout from '../layouts/Layout.astro';
-import { SITE } from '../lib/icons';
-
-const license = readFileSync(join(import.meta.env.REPO_DIR, 'LICENSE'), 'utf8');
-const jsonLd = {
-  '@context': 'https://schema.org',
-  '@graph': [
-    { '@type': 'WebPage', name: 'Licencing & Terms', url: `${SITE}/licencing-and-terms`, license: 'https://opensource.org/license/mit/' },
-    {
-      '@type': 'BreadcrumbList',
-      itemListElement: [
-        { '@type': 'ListItem', position: 1, name: 'useAnimations', item: `${SITE}/` },
-        { '@type': 'ListItem', position: 2, name: 'Licencing & Terms', item: `${SITE}/licencing-and-terms` },
-      ],
-    },
-  ],
-};
+import { EN } from '../i18n';
+import LicencePage from '../views/LicencePage.astro';
 ---
 
-<Layout
-  title="Licencing & Terms — useAnimations"
-  description="useAnimations icons and the react-useanimations package are MIT licensed: free for personal and commercial use and redistribution, no attribution needed."
-  path="/licencing-and-terms"
-  jsonLd={jsonLd}
-  head={[{ rel: 'alternate', type: 'text/markdown', href: '/licencing-and-terms.md', title: 'Licencing & Terms (Markdown)' }]}
->
-  <article class="prose mx-auto max-w-3xl px-5 pt-16 sm:px-8">
-    <p class="mb-2 text-sm font-medium text-accent">Licencing & Terms</p>
-    <h1>Free to use. MIT licensed.</h1>
-    <p class="text-lg">
-      The useAnimations icons and the <code>react-useanimations</code> package are released under the
-      <a href="https://opensource.org/license/mit/">MIT license</a>.
-    </p>
-    <h2>What you can do</h2>
-    <ul>
-      <li><strong>Use</strong> the icons in personal and commercial websites, apps and products.</li>
-      <li><strong>Modify</strong> them: change colors, sizes, timing or the motion itself.</li>
-      <li>
-        <strong>Redistribute</strong> them, including inside icon packs, templates, themes, UI kits and component registries.
-      </li>
-    </ul>
-    <h2>Attribution</h2>
-    <p>
-      Not required, but appreciated. Keep the license notice when you redistribute the files themselves, and if you'd
-      like to credit us:
-    </p>
-    <pre><code>Animated icons by &lt;a href="https://useanimations.com"&gt;useAnimations&lt;/a&gt;</code></pre>
-    <h2>No warranty</h2>
-    <p>The icons and the code are provided as-is, without warranty of any kind.</p>
-    <h2>License text</h2>
-    <pre class="whitespace-pre-wrap"><code>{license}</code></pre>
-  </article>
-</Layout>
+<LicencePage locale={EN} />
diff --git a/website/src/pages/lottie-icons.astro b/website/src/pages/lottie-icons.astro
index 375b577..680f728 100644
--- a/website/src/pages/lottie-icons.astro
+++ b/website/src/pages/lottie-icons.astro
@@ -1,337 +1,6 @@
 ---
-import Breadcrumbs from '../components/Breadcrumbs.astro';
-import CodeBlock from '../components/CodeBlock.astro';
-import FaqList from '../components/FaqList.astro';
-import IconGrid from '../components/IconGrid.astro';
-import Layout from '../layouts/Layout.astro';
-import { breadcrumbNode, categories, categoryPath, expressionIcons, hubDescription, hubTitle, itemListNode, pickIcons } from '../lib/hubs';
-import { iconById, icons, lottieSnippet, SITE } from '../lib/icons';
-import { type Faq, faqNode, websiteNode, WEBSITE_ID } from '../lib/seo';
-
-const popular = pickIcons([
-  'menu', 'refresh', 'notification', 'heart', 'visibility', 'trash', 'settings', 'search-to-x',
-  'play-pause', 'volume', 'download', 'check-box', 'toggle', 'scroll-down', 'arrow-right', 'bookmark',
-  'star', 'send', 'github', 'sun', 'infinity', 'alert-triangle', 'microphone', 'shopping-cart',
-]);
-const expressions = expressionIcons();
-const sizes = icons.map((icon) => Buffer.byteLength(icon.lottie)).toSorted((a, b) => a - b);
-const kb = (bytes: number) => `${Math.round(bytes / 1024)} kB`;
-const median = kb(sizes[Math.floor(sizes.length / 2)]);
-const loop = `${SITE}/icons/loading.json`;
-const menu = iconById.get('menu')!;
-
-const players = [
-  {
-    id: 'web',
-    title: 'Web: lottie-web',
-    text: 'The reference player from Airbnb. Load it from a CDN, point it at an icon URL and choose the SVG renderer, which keeps the icon sharp and lets CSS recolor it. Use the full build (lottie.min.js): the light build skips expressions.',
-    blocks: [
-      {
-        lang: 'html',
-        code: `<div id="icon" style="width: 48px; height: 48px"></div>
-
-<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
-<script>
-  lottie.loadAnimation({
-    container: document.getElementById('icon'),
-    renderer: 'svg',
-    loop: true,
-    autoplay: true,
-    path: '${loop}',
-  });
-</script>`,
-      },
-      {
-        lang: 'css',
-        label: 'Follow the text color (SVG renderer)',
-        code: `#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) { stroke: currentColor; }
-#icon path[fill='rgb(0,0,0)'] { fill: currentColor; }`,
-      },
-    ],
-  },
-  {
-    id: 'web-interactions',
-    title: 'Web: hover and click interactions',
-    text: `lottie-web plays and stops, but the interactions are up to you. This is the menu icon's click toggle with reduced-motion support; every interaction follows the same pattern, and the React component below does all of it for you.`,
-    blocks: [
-      {
-        lang: 'js',
-        code: `import lottie from 'lottie-web'; // npm install lottie-web
-
-const el = document.querySelector('#menu-button');
-${lottieSnippet(menu)}`,
-      },
-    ],
-  },
-  {
-    id: 'dotlottie',
-    title: 'Web: dotLottie web component',
-    text: "LottieFiles' player renders with a WebAssembly engine to a canvas and plays plain Lottie JSON as well as .lottie files. A canvas keeps the colors of the file, so the icons stay black unless you recolor the JSON.",
-    blocks: [
-      {
-        lang: 'html',
-        code: `<script type="module" src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc@0.10.0/dist/dotlottie-wc.js"></script>
-
-<dotlottie-wc src="${loop}" autoplay loop style="width: 48px; height: 48px"></dotlottie-wc>`,
-      },
-      {
-        lang: 'js',
-        label: 'Or the JavaScript API: npm install @lottiefiles/dotlottie-web',
-        code: `import { DotLottie } from '@lottiefiles/dotlottie-web';
-
-new DotLottie({
-  canvas: document.querySelector('#icon-canvas'),
-  src: '${loop}',
-  autoplay: true,
-  loop: true,
-});`,
-      },
-    ],
-  },
-  {
-    id: 'react',
-    title: 'React: react-useanimations',
-    text: 'No Lottie player to install: the package has its own 8 kB player, plays each icon’s interaction, follows the text color and respects reduced motion. Each icon is a separate module, so you only ship the ones you import.',
-    blocks: [
-      {
-        lang: 'jsx',
-        code: `// npm install react-useanimations
-import UseAnimations from 'react-useanimations';
-import loading from 'react-useanimations/lib/loading';
-
-<UseAnimations animation={loading} size={48} />`,
-      },
-    ],
-  },
-  {
-    id: 'react-native',
-    title: 'React Native: lottie-react-native',
-    text: 'Bundle the JSON with require() for offline use, or load it from its URL.',
-    blocks: [
-      {
-        lang: 'jsx',
-        code: `// npm install lottie-react-native
-import LottieView from 'lottie-react-native';
-
-<LottieView
-  source={{ uri: '${loop}' }} // or require('./loading.json')
-  autoPlay
-  loop
-  style={{ width: 48, height: 48 }}
-/>`,
-      },
-    ],
-  },
-  {
-    id: 'ios',
-    title: 'iOS: lottie-ios (SwiftUI)',
-    text: 'Add the package from https://github.com/airbnb/lottie-spm.git with Swift Package Manager, then drop the JSON into your bundle or load it from its URL.',
-    blocks: [
-      {
-        lang: 'swift',
-        code: `import Lottie
-import SwiftUI
-
-struct LoadingIcon: View {
-  var body: some View {
-    // Bundled file: LottieView(animation: .named("loading"))
-    LottieView {
-      await LottieAnimation.loadedFrom(url: URL(string: "${loop}")!)
-    }
-    .looping()
-    .frame(width: 48, height: 48)
-  }
-}`,
-      },
-    ],
-  },
-  {
-    id: 'android',
-    title: 'Android: lottie-android (Jetpack Compose)',
-    text: 'Add com.airbnb.android:lottie-compose (or com.airbnb.android:lottie for views). Put the JSON in res/raw for offline use with LottieCompositionSpec.RawRes.',
-    blocks: [
-      {
-        lang: 'kotlin',
-        code: `// build.gradle.kts: implementation("com.airbnb.android:lottie-compose:6.7.1")
-@Composable
-fun LoadingIcon() {
-  val composition by rememberLottieComposition(
-    LottieCompositionSpec.Url("${loop}")
-  )
-  LottieAnimation(
-    composition = composition,
-    iterations = LottieConstants.IterateForever,
-    modifier = Modifier.size(48.dp),
-  )
-}`,
-      },
-    ],
-  },
-  {
-    id: 'flutter',
-    title: 'Flutter: lottie',
-    text: 'The lottie package is a pure Dart player for Android, iOS, web and desktop.',
-    blocks: [
-      {
-        lang: 'dart',
-        code: `// pubspec.yaml: lottie: ^3.6.1
-import 'package:lottie/lottie.dart';
-
-Lottie.network(
-  '${loop}',
-  width: 48,
-  height: 48,
-) // or Lottie.asset('assets/loading.json')`,
-      },
-    ],
-  },
-];
-
-const faq: Faq = [
-  {
-    question: 'Are these Lottie icons free for commercial use?',
-    answer: `Yes. All ${icons.length} Lottie icons are MIT-licensed: use, modify and redistribute them in personal and commercial projects, with no attribution required and no account to download them.`,
-  },
-  {
-    question: 'What format are the Lottie files?',
-    answer: `Standard Lottie JSON (the Bodymovin format) with shape layers only: no images, fonts or external assets. Each icon is drawn on a 24 or 32 px artboard, scales to any size and weighs ${kb(sizes[0])} to ${kb(sizes.at(-1)!)}, ${median} median.`,
-  },
-  {
-    question: 'Do I need lottie-web to use the icons in React?',
-    answer: 'No. react-useanimations has its own 8 kB player with no dependencies, so you install one package and import the icons you need. lottie-web is only needed outside React, on plain web pages or in other frameworks.',
-  },
-  {
-    question: 'Which icons need the full lottie-web build?',
-    answer: `${expressions.length} icons use After Effects expressions (loopOut or wiggle): ${expressions.map((icon) => icon.title).join(', ')}. On the web they need lottie-web's full build; lottie_light ignores expressions. Native players (lottie-ios, lottie-android, Flutter's lottie) do not evaluate expressions either, so these icons may move differently there.`,
-  },
-  {
-    question: 'Can I change the color of a Lottie icon?',
-    answer: "On the web, lottie-web's SVG renderer writes the colors as attributes, so a CSS rule on the paths recolors the icon. Native players use their dynamic property APIs: ColorValueProvider on iOS, LottieProperty.COLOR and STROKE_COLOR on Android, and ValueDelegate.color in Flutter.",
-  },
-];
-
-const title = hubTitle(`Free Lottie icons: ${icons.length} animated JSON icons`, 'Free Lottie icons');
-const description = hubDescription(
-  `${icons.length} free Lottie icons as plain Lottie JSON, MIT licensed. Copy-paste code for lottie-web, dotLottie, React, React Native, iOS, Android and Flutter.`
-);
-const crumbs = [
-  { name: 'Icons', path: '/icons' },
-  { name: 'Lottie icons', path: '/lottie-icons' },
-];
-const jsonLd = {
-  '@context': 'https://schema.org',
-  '@graph': [
-    {
-      '@type': 'CollectionPage',
-      '@id': `${SITE}/lottie-icons`,
-      url: `${SITE}/lottie-icons`,
-      name: 'Free Lottie icons',
-      description,
-      inLanguage: 'en',
-      isPartOf: { '@id': WEBSITE_ID },
-      mainEntity: itemListNode(popular, 'Popular Lottie icons'),
-    },
-    {
-      '@type': 'Dataset',
-      name: 'useAnimations icon catalog',
-      description: `Metadata and file URLs of ${icons.length} animated Lottie icons: id, title, category, keywords, interaction, size and duration.`,
-      url: `${SITE}/lottie-icons`,
-      license: 'https://opensource.org/license/mit/',
-      creator: { '@type': 'Organization', name: 'useAnimations', url: `${SITE}/` },
-      distribution: [{ '@type': 'DataDownload', encodingFormat: 'application/json', contentUrl: `${SITE}/icons.json` }],
-    },
-    breadcrumbNode(crumbs),
-    faqNode(faq),
-    websiteNode(),
-  ],
-};
+import { EN } from '../i18n';
+import LottieIconsPage from '../views/LottieIconsPage.astro';
 ---
 
-<Layout title={title} description={description} path="/lottie-icons" jsonLd={jsonLd}>
-  <div class="mx-auto max-w-6xl px-5 pt-10 sm:px-8">
-    <Breadcrumbs crumbs={crumbs} />
-
-    <header class="mt-8 max-w-3xl">
-      <p class="text-sm font-medium text-accent">{icons.length} icons · Lottie JSON · MIT licensed</p>
-      <h1 class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">Free Lottie icons</h1>
-      <p class="mt-4 text-lg leading-relaxed text-muted">
-        Every useAnimations icon is a standard Lottie JSON animation, so any Lottie player can play it: lottie-web on
-        the web, lottie-ios, lottie-android, Flutter and React Native. The files are free under the MIT license, with
-        no sign-up, and served from stable URLs with CORS enabled, so you can load them directly or download them into
-        your project.
-      </p>
-    </header>
-
-    <section class="mt-12" aria-labelledby="popular-title">
-      <div class="flex flex-wrap items-baseline justify-between gap-3">
-        <h2 id="popular-title" class="text-lg font-semibold">Popular Lottie icons</h2>
-        <a href="/icons" class="text-sm text-muted hover:text-fg">All {icons.length} icons →</a>
-      </div>
-      <IconGrid class="mt-4" icons={popular} />
-    </section>
-
-    <div class="mt-16 max-w-3xl">
-      <section aria-labelledby="files-title">
-        <h2 id="files-title" class="text-2xl font-semibold tracking-tight">Files and URLs</h2>
-        <p class="mt-3 leading-relaxed text-muted">
-          Each icon has a page at <code class="font-mono text-sm text-fg">/icons/&lt;id&gt;</code> with a preview and
-          downloads. The files themselves:
-        </p>
-        <CodeBlock
-          class="mt-4"
-          lang="bash"
-          code={`${SITE}/icons/<id>.json          # Lottie JSON animation
-${SITE}/icons/<id>.zip           # the JSON and static SVGs
-${SITE}/icons/<id>/<state>.svg   # static SVG of each state
-${SITE}/icons.json               # catalog of every icon`}
-          track={{ code: 'files' }}
-        />
-        <p class="mt-4 leading-relaxed text-muted">
-          <a href="/icons.json" class="text-fg underline underline-offset-4">icons.json</a> lists every icon with its id,
-          title, category, keywords, interaction, size, duration and file URLs, which makes it easy to pick icons by
-          keyword in a script or let a coding agent choose one. Lottie files weigh {median} at the median.
-        </p>
-      </section>
-
-      {
-        players.map((player) => (
-          <section id={player.id} class="mt-14 scroll-mt-24" aria-labelledby={`${player.id}-title`}>
-            <h2 id={`${player.id}-title`} class="text-2xl font-semibold tracking-tight">{player.title}</h2>
-            <p class="mt-3 leading-relaxed text-muted">{player.text}</p>
-            {player.blocks.map((block) => (
-              <CodeBlock class="mt-4" lang={block.lang} label={block.label} code={block.code} track={{ code: `lottie-${player.id}` }} />
-            ))}
-          </section>
-        ))
-      }
-
-      <section id="expressions" class="mt-14 scroll-mt-24" aria-labelledby="expressions-title">
-        <h2 id="expressions-title" class="text-2xl font-semibold tracking-tight">Icons with expressions</h2>
-        <p class="mt-3 leading-relaxed text-muted">
-          {expressions.length} icons use After Effects expressions
-          (<code class="font-mono text-sm text-fg">loopOut</code> or <code class="font-mono text-sm text-fg">wiggle</code>). On the web, play them with lottie-web's full build,
-          not <code class="font-mono text-sm text-fg">lottie_light</code>. Native players do not evaluate expressions, so
-          test these on iOS, Android and Flutter or pick another icon; react-useanimations plays them as designed.
-        </p>
-        <IconGrid class="mt-4" icons={expressions} />
-      </section>
-    </div>
-
-    <FaqList class="mt-16" faq={faq} />
-
-    <nav aria-labelledby="more-title" class="mt-16 border-t border-line pt-8">
-      <h2 id="more-title" class="text-lg font-semibold">Lottie icons by category</h2>
-      <ul class="mt-4 flex flex-wrap gap-2">
-        {
-          categories().map(({ meta, icons: group }) => (
-            <li>
-              <a href={categoryPath(meta)} class="inline-flex rounded-full border border-line px-3.5 py-1.5 text-sm text-muted transition hover:border-line-strong hover:text-fg">
-                {meta.name} <span class="ml-1.5 text-subtle">{group.length}</span>
-              </a>
-            </li>
-          ))
-        }
-      </ul>
-    </nav>
-  </div>
-</Layout>
+<LottieIconsPage locale={EN} />
diff --git a/website/src/pages/shadcn-animated-icons.astro b/website/src/pages/shadcn-animated-icons.astro
index 85ea0b9..7f95b05 100644
--- a/website/src/pages/shadcn-animated-icons.astro
+++ b/website/src/pages/shadcn-animated-icons.astro
@@ -1,179 +1,6 @@
 ---
-import Breadcrumbs from '../components/Breadcrumbs.astro';
-import CodeBlock from '../components/CodeBlock.astro';
-import FaqList from '../components/FaqList.astro';
-import IconGrid from '../components/IconGrid.astro';
-import Layout from '../layouts/Layout.astro';
-import { breadcrumbNode, categories, categoryPath, hubDescription, hubTitle, itemListNode, pickIcons } from '../lib/hubs';
-import { iconById, icons, shadcnCommand, shadcnExample, SITE, VERSION } from '../lib/icons';
-import { type Faq, faqNode, websiteNode, WEBSITE_ID } from '../lib/seo';
-
-const popular = pickIcons([
-  'menu', 'check-box', 'toggle', 'visibility', 'heart', 'bookmark', 'star', 'trash',
-  'copy', 'download', 'search-to-x', 'settings', 'notification', 'refresh', 'send', 'sun',
-  'play-pause', 'volume', 'shopping-cart', 'alert-circle', 'arrow-right', 'external-link', 'github', 'plus-to-x',
-]);
-const menu = iconById.get('menu')!;
-const checkmark = iconById.get('checkmark')!;
-
-const componentsJson = `{
-  "registries": {
-    "@useanimations": "${SITE}/r/{name}.json"
-  }
-}`;
-const toggleExample = `"use client"
-
-import { useState } from "react"
-import { AnimatedMenu } from "@/components/animations/menu"
-import { Button } from "@/components/ui/button"
-
-export function MenuToggle() {
-  const [open, setOpen] = useState(false)
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      aria-label={open ? "Close menu" : "Open menu"}
-      aria-expanded={open}
-      onClick={() => setOpen(!open)}
-    >
-      <AnimatedMenu size={20} active={open} />
-    </Button>
-  )
-}`;
-
-const faq: Faq = [
-  {
-    question: 'Are the shadcn/ui animated icons free?',
-    answer: `Yes. All ${icons.length} icons and the component code are MIT-licensed, for personal and commercial projects. The registry needs no account or API key.`,
-  },
-  {
-    question: 'What does the shadcn CLI add to my project?',
-    answer: `The icon component in components/animations/<id>.tsx, the shared UseAnimation player wrapper in components/use-animation.tsx (once, as a registry dependency) and react-useanimations@^${VERSION} from npm. lottie-web is not needed: the package has its own 8 kB player.`,
-  },
-  {
-    question: 'Do the components work with Next.js server components?',
-    answer: 'Yes. The components are marked "use client" and draw the animation only in the browser, so you can render them from server components and pages without dynamic imports or ssr: false.',
-  },
-  {
-    question: 'Can I change how the icons look and move?',
-    answer: 'The code is yours, in your repository. The components take the props of UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop and speed. Icons follow the text color, so Tailwind classes such as text-primary or text-muted-foreground recolor them.',
-  },
-];
-
-const title = hubTitle(`Animated icons for shadcn/ui: ${icons.length} components`, 'Animated icons for shadcn/ui');
-const description = hubDescription(
-  `${icons.length} animated icons for shadcn/ui: add any icon with one shadcn CLI command. Hover, click and loop micro interactions, MIT licensed, no lottie-web.`
-);
-const crumbs = [
-  { name: 'Icons', path: '/icons' },
-  { name: 'shadcn/ui', path: '/shadcn-animated-icons' },
-];
-const jsonLd = {
-  '@context': 'https://schema.org',
-  '@graph': [
-    {
-      '@type': 'CollectionPage',
-      '@id': `${SITE}/shadcn-animated-icons`,
-      url: `${SITE}/shadcn-animated-icons`,
-      name: 'Animated icons for shadcn/ui',
-      description,
-      inLanguage: 'en',
-      isPartOf: { '@id': WEBSITE_ID },
-      mainEntity: itemListNode(popular, 'Popular shadcn/ui animated icons'),
-    },
-    breadcrumbNode(crumbs),
-    faqNode(faq),
-    websiteNode(),
-  ],
-};
+import { EN } from '../i18n';
+import ShadcnIconsPage from '../views/ShadcnIconsPage.astro';
 ---
 
-<Layout title={title} description={description} path="/shadcn-animated-icons" jsonLd={jsonLd}>
-  <div class="mx-auto max-w-6xl px-5 pt-10 sm:px-8">
-    <Breadcrumbs crumbs={crumbs} />
-
-    <header class="mt-8 max-w-3xl">
-      <p class="text-sm font-medium text-accent">{icons.length} components · shadcn registry · MIT licensed</p>
-      <h1 class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">Animated icons for shadcn/ui</h1>
-      <p class="mt-4 text-lg leading-relaxed text-muted">
-        Every useAnimations icon is in a shadcn registry. One CLI command adds a typed React component to your
-        project, with the hover, click or loop interaction it was designed for, reduced-motion support and colors that
-        follow your theme. The code lands in your repository, like any other shadcn/ui component.
-      </p>
-    </header>
-
-    <div class="mt-12 max-w-3xl">
-      <section aria-labelledby="add-title">
-        <h2 id="add-title" class="text-2xl font-semibold tracking-tight">Add an icon</h2>
-        <p class="mt-3 leading-relaxed text-muted">Run the shadcn CLI with the icon's registry URL:</p>
-        <CodeBlock class="mt-4" lang="bash" code={shadcnCommand(checkmark)} track={{ icon: checkmark.id, code: 'shadcn-command' }} />
-        <CodeBlock class="mt-3" lang="tsx" code={shadcnExample(checkmark.id, checkmark.component)} track={{ icon: checkmark.id, code: 'shadcn' }} />
-        <p class="mt-4 leading-relaxed text-muted">
-          The component is named <code class="font-mono text-sm text-fg">Animated</code> + the icon id in PascalCase
-          (<code class="font-mono text-sm text-fg">check-box</code> → <code class="font-mono text-sm text-fg">AnimatedCheckBox</code>)
-          and lands in <code class="font-mono text-sm text-fg">components/animations/&lt;id&gt;.tsx</code>. The CLI also
-          adds the shared <code class="font-mono text-sm text-fg">components/use-animation.tsx</code> wrapper and installs{' '}
-          <code class="font-mono text-sm text-fg">react-useanimations</code>, which brings its own player: no lottie-web.
-        </p>
-      </section>
-
-      <section class="mt-14" aria-labelledby="namespace-title">
-        <h2 id="namespace-title" class="text-2xl font-semibold tracking-tight">Short names with a registry namespace</h2>
-        <p class="mt-3 leading-relaxed text-muted">
-          Add the registry to <code class="font-mono text-sm text-fg">components.json</code> once, then add icons by
-          name, several at a time:
-        </p>
-        <CodeBlock class="mt-4" lang="json" code={componentsJson} track={{ code: 'components-json' }} />
-        <CodeBlock class="mt-3" lang="bash" code="npx shadcn@latest add @useanimations/menu @useanimations/heart @useanimations/loading" track={{ code: 'shadcn-namespace' }} />
-        <p class="mt-4 leading-relaxed text-muted">
-          The registry index at <a href="/r/registry.json" class="text-fg underline underline-offset-4">/r/registry.json</a>{' '}
-          lists every item with its title, category and interaction.
-        </p>
-      </section>
-
-      <section class="mt-14" aria-labelledby="usage-title">
-        <h2 id="usage-title" class="text-2xl font-semibold tracking-tight">Use it in a shadcn Button</h2>
-        <p class="mt-3 leading-relaxed text-muted">
-          The components take the same props as <code class="font-mono text-sm text-fg">UseAnimations</code>. For a
-          toggle such as the menu icon, pass <code class="font-mono text-sm text-fg">active</code> and keep the state in
-          your button; the icon animates whenever it changes:
-        </p>
-        <CodeBlock class="mt-3" lang="bash" code={shadcnCommand(menu)} track={{ icon: menu.id, code: 'shadcn-command' }} />
-        <CodeBlock class="mt-3" lang="tsx" code={toggleExample} track={{ icon: menu.id, code: 'shadcn' }} />
-        <p class="mt-4 leading-relaxed text-muted">
-          Icons follow the text color, so <code class="font-mono text-sm text-fg">text-primary</code> or{' '}
-          <code class="font-mono text-sm text-fg">text-muted-foreground</code> recolor them and dark mode needs nothing
-          extra. More props and patterns are in the{' '}
-          <a href="/documentation#shadcn" class="text-fg underline underline-offset-4">documentation</a>.
-        </p>
-      </section>
-    </div>
-
-    <section class="mt-16" aria-labelledby="popular-title">
-      <div class="flex flex-wrap items-baseline justify-between gap-3">
-        <h2 id="popular-title" class="text-lg font-semibold">Popular icons for shadcn/ui</h2>
-        <a href="/icons" class="text-sm text-muted hover:text-fg">All {icons.length} icons →</a>
-      </div>
-      <p class="mt-2 text-sm text-muted">Every icon page shows its shadcn command.</p>
-      <IconGrid class="mt-4" icons={popular} />
-    </section>
-
-    <FaqList class="mt-16" faq={faq} />
-
-    <nav aria-labelledby="more-title" class="mt-16 border-t border-line pt-8">
-      <h2 id="more-title" class="text-lg font-semibold">Browse by category</h2>
-      <ul class="mt-4 flex flex-wrap gap-2">
-        {
-          categories().map(({ meta, icons: group }) => (
-            <li>
-              <a href={categoryPath(meta)} class="inline-flex rounded-full border border-line px-3.5 py-1.5 text-sm text-muted transition hover:border-line-strong hover:text-fg">
-                {meta.name} <span class="ml-1.5 text-subtle">{group.length}</span>
-              </a>
-            </li>
-          ))
-        }
-      </ul>
-    </nav>
-  </div>
-</Layout>
+<ShadcnIconsPage locale={EN} />
diff --git a/website/src/pages/sitemap-[locale].xml.ts b/website/src/pages/sitemap-[locale].xml.ts
new file mode 100644
index 0000000..be4be2e
--- /dev/null
+++ b/website/src/pages/sitemap-[locale].xml.ts
@@ -0,0 +1,14 @@
+import type { GetStaticPaths } from 'astro';
+import { type Locale, TRANSLATED } from '../i18n';
+import { text } from '../lib/http';
+import { localeEntries, urlset } from '../lib/sitemap';
+
+// One sitemap per translated language, so Search Console reports indexing per language.
+export const getStaticPaths = (() =>
+  TRANSLATED.map((locale) => ({
+    params: { locale: locale.code },
+    props: { locale },
+  }))) satisfies GetStaticPaths;
+
+export const GET = ({ props }: { props: { locale: Locale } }) =>
+  text(urlset(localeEntries(props.locale)), 'application/xml');
diff --git a/website/src/pages/sitemap.xml.ts b/website/src/pages/sitemap.xml.ts
index 2127b5b..1d0594f 100644
--- a/website/src/pages/sitemap.xml.ts
+++ b/website/src/pages/sitemap.xml.ts
@@ -1,6 +1,7 @@
 import { text } from '../lib/http';
 import { seoLint } from '../lib/seo';
-import { hubEntries, iconEntries, pageEntries, sitemapIndex } from '../lib/sitemap';
+import { TRANSLATED } from '../i18n';
+import { hubEntries, iconEntries, localeEntries, pageEntries, sitemapIndex } from '../lib/sitemap';
 
 // Duplicate or over-long icon titles and descriptions, logged once per build.
 const issues = seoLint();
@@ -16,6 +17,7 @@ export const GET = () =>
       { path: '/sitemap-pages.xml', entries: pageEntries() },
       { path: '/sitemap-hubs.xml', entries: hubEntries() },
       { path: '/sitemap-icons.xml', entries: iconEntries() },
+      ...TRANSLATED.map((l) => ({ path: `/sitemap-${l.code}.xml`, entries: localeEntries(l) })),
     ]),
     'application/xml'
   );
diff --git a/website/src/pages/zh.astro b/website/src/pages/zh.astro
deleted file mode 100644
index 8e7685e..0000000
--- a/website/src/pages/zh.astro
+++ /dev/null
@@ -1,280 +0,0 @@
----
-import CodeBlock from '../components/CodeBlock.astro';
-import InstallCommand from '../components/InstallCommand.astro';
-import Layout from '../layouts/Layout.astro';
-import { categoryLinks, interactionLinks } from '../lib/home';
-import { icons, SITE, VERSION } from '../lib/icons';
-import { faqNode, WEBSITE_ID } from '../lib/seo';
-
-const preview = ['heart', 'menu', 'github', 'download', 'settings', 'star', 'notification', 'visibility']
-  .map((name) => icons.find((icon) => icon.name === name)!);
-
-const perks = [
-  ['零依赖，体积小', `内置播放器压缩后约 8 kB，没有任何第三方依赖；每个图标都是独立模块（中位数约 2 kB），只打包您实际引入的图标。`],
-  ['交互内置', '每个图标都自带设计好的交互：循环、点击切换、点击重播、悬停、悬停重播或悬停循环，放进页面即可使用，也可以用一个属性换成其他交互。'],
-  ['跟随颜色与主题', '图标使用 currentColor，自动继承文字颜色、悬停状态和深色模式；也可以通过属性、类名或普通 CSS 修改颜色和线条粗细。'],
-  ['默认无障碍', '尊重系统的“减少动态效果”设置，键盘聚焦时同样播放悬停动画，并且在您添加标签之前不会干扰屏幕阅读器。'],
-  ['支持服务端渲染', '组件标记为 use client，只在浏览器中绘制动画，可以直接用于 Next.js、Remix 和 Astro 等框架，无需动态导入。'],
-  ['完全免费', 'MIT 许可证：个人和商业项目均可免费使用、修改和再分发，无需署名。'],
-];
-
-// Category names as on the English pages, in Chinese.
-const CATEGORY_ZH: Record<string, string> = {
-  Alerts: '警告提示',
-  Notifications: '通知铃铛',
-  Navigation: '导航与箭头',
-  Action: '操作按钮',
-  Content: '文件、文件夹与用户',
-  Form: '表单控件',
-  Media: '媒体播放',
-  'Text editing': '文本编辑',
-  Communication: '沟通交流',
-  Devices: '设备',
-  Weather: '天气',
-  'Maps & location': '地图与位置',
-  Commerce: '电子商务',
-  Charts: '图表',
-  Development: '开发者',
-  'Design & layout': '设计与布局',
-  'Shapes & math': '形状与数学',
-  Loading: '加载动画',
-  'Social media': '社交媒体',
-  Other: '其他',
-};
-
-const INTERACTION_ZH: Record<string, [string, string]> = {
-  loop: ['循环', '持续播放，适合加载中、警告等持续状态。'],
-  'click-toggle': ['点击切换', '每次点击在两个状态之间切换，例如菜单与关闭、播放与暂停、静音与取消静音。'],
-  'click-replay': ['点击重播', '每次点击都从头播放一次，用来确认发送、保存、下载等操作已经完成。'],
-  hover: ['悬停', '指针移入时正向播放，移出时反向播放，动画始终跟随光标。'],
-  'hover-replay': ['悬停重播', '指针移入时播放一次并自然结束，快速划过工具栏时也不会抖动。'],
-  'hover-loop': ['悬停循环', '悬停期间循环播放，离开后播放完当前一轮再停止。'],
-};
-
-const faq = [
-  {
-    question: '什么是微动画和动态图标？',
-    answer:
-      '微动画是响应用户操作的简短动效，例如菜单图标变成关闭按钮、点赞时爱心被填满、有新消息时铃铛摇动。动态图标是最常见的微动画，它让界面反馈更及时，不需要额外的文字就能表达状态变化。',
-  },
-  {
-    question: 'Lottie 文件和 SVG 文件有什么区别？',
-    answer:
-      'Lottie JSON 文件包含完整的动画，可以在任何 Lottie 播放器中播放，包括 react-useanimations 内置的播放器。SVG 文件是图标静止时的图片，每个状态一张（例如 eye 和 eye-off），适合邮件、文档、设计工具或不运行 JavaScript 的场景。',
-  },
-  {
-    question: '可以在 Next.js 和服务端渲染中使用吗？',
-    answer:
-      '可以。组件标记为 use client，只在浏览器中绘制动画，因此可以在服务端组件以及 Next.js、Remix、Astro 等 SSR 框架中直接渲染，不需要 dynamic(…, { ssr: false })。图标模块是普通数据，服务端组件可以直接导入并作为属性传递。',
-  },
-  {
-    question: '可以用于商业项目吗？',
-    answer:
-      '可以。图标和 react-useanimations 软件包都采用 MIT 许可证，可以在个人和商业作品中使用、修改和再分发。署名不是必需的，但我们很欢迎。',
-  },
-  {
-    question: '不使用 React 也能用吗？',
-    answer:
-      '可以。每个图标都是标准的 Lottie JSON 文件，可以通过 lottie-web 在原生 JavaScript、Vue、Svelte、Angular 或 CMS 中播放，也可以在 iOS、Android 和 Flutter 的 Lottie 播放器中使用。',
-  },
-  {
-    question: '会让打包体积增加多少？',
-    answer: `react-useanimations ${VERSION} 的播放器压缩后约 8 kB，没有依赖；每个图标是 1 到 15 kB 的独立模块（中位数 2 kB），最终只打包您导入的图标。`,
-  },
-];
-
-const jsonLd = {
-  '@context': 'https://schema.org',
-  '@graph': [
-    {
-      '@type': 'WebPage',
-      '@id': `${SITE}/zh#webpage`,
-      name: 'useAnimations — 免费动态图标库',
-      url: `${SITE}/zh`,
-      inLanguage: 'zh-Hans',
-      isPartOf: { '@id': WEBSITE_ID },
-    },
-    { ...faqNode(faq), inLanguage: 'zh-Hans' },
-  ],
-};
-
-const reactCode = `import UseAnimations from 'react-useanimations';
-import menu from 'react-useanimations/lib/menu';
-
-export function MenuButton({ open, onToggle }) {
-  return (
-    <UseAnimations
-      animation={menu}
-      active={open}
-      onClick={onToggle}
-      size={28}
-    />
-  );
-}`;
-const categories = categoryLinks();
-const interactions = interactionLinks();
-const link = 'underline decoration-line-strong underline-offset-4 hover:decoration-accent';
----
-
-<Layout
-  title="useAnimations — 免费动态图标库：React 动画图标与 Lottie 微动画"
-  description={`${icons.length} 个免费动态图标（微动画），内置悬停、点击与循环交互，支持 React、shadcn/ui 和 Lottie，提供 SVG 与 JSON 下载，MIT 许可。`}
-  path="/zh"
-  lang="zh-Hans"
-  alternates={{ en: '/', 'zh-Hans': '/zh', 'x-default': '/' }}
-  jsonLd={jsonLd}
->
-  <section class="relative overflow-hidden">
-    <div class="hero-glow pointer-events-none absolute inset-0" aria-hidden="true"></div>
-    <div class="relative mx-auto max-w-4xl px-5 pt-24 pb-16 text-center sm:px-8">
-      <p class="text-sm font-medium text-accent">微动画图标库 · {icons.length} 个图标 · MIT</p>
-      <p class="mt-5 text-5xl font-semibold tracking-tight sm:text-7xl">
-        让图标<span class="text-gradient">动起来</span>
-      </p>
-      <h1 class="mx-auto mt-6 max-w-3xl text-xl font-semibold tracking-tight text-balance sm:text-2xl">
-        免费动态图标库：适用于 React、shadcn/ui 和 Lottie 的动画图标
-      </h1>
-      <p class="mx-auto mt-4 max-w-2xl text-lg leading-relaxed text-muted">
-        useAnimations 提供 {icons.length} 个手工制作的动态图标，每个图标都内置悬停、点击或循环交互。您可以把它们作为 React
-        组件使用，通过 shadcn 一条命令添加到项目中，或者直接下载 SVG 和 Lottie JSON 文件。全部免费，采用 MIT 许可证。
-      </p>
-      <div class="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
-        <a href="/#icons" class="rounded-full bg-fg px-6 py-3 text-sm font-medium text-bg hover:opacity-90">浏览全部图标</a>
-        <InstallCommand />
-      </div>
-      <div class="mx-auto mt-14 flex max-w-2xl flex-wrap justify-center gap-3" aria-hidden="true">
-        {
-          preview.map((icon) => (
-            <span class="flex size-16 items-center justify-center rounded-2xl border border-line bg-surface">
-              <span data-useanimations="" class="block size-8" set:html={icon.preview} />
-            </span>
-          ))
-        }
-      </div>
-    </div>
-  </section>
-
-  <section class="mx-auto max-w-5xl px-5 sm:px-8" aria-labelledby="perks-title">
-    <h2 id="perks-title" class="text-3xl font-semibold tracking-tight sm:text-4xl">为什么选择 useAnimations</h2>
-    <div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-      {
-        perks.map(([title, text]) => (
-          <article class="rounded-3xl border border-line bg-surface p-7">
-            <h3 class="text-lg font-semibold">{title}</h3>
-            <p class="mt-2 text-muted">{text}</p>
-          </article>
-        ))
-      }
-    </div>
-  </section>
-
-  <section class="mx-auto mt-24 max-w-5xl px-5 sm:px-8" aria-labelledby="install-title">
-    <h2 id="install-title" class="text-3xl font-semibold tracking-tight sm:text-4xl">安装与使用</h2>
-    <div class="mt-8 grid gap-10 lg:grid-cols-2">
-      <div class="min-w-0">
-        <h3 class="text-lg font-semibold">React</h3>
-        <p class="mt-2 text-muted">
-          先安装软件包，再从 <code class="font-mono text-sm text-fg">react-useanimations/lib/&lt;名称&gt;</code>
-          导入需要的图标。下面的菜单按钮在打开和关闭之间切换，<code class="font-mono text-sm text-fg">active</code>
-          属性让图标与您的状态保持同步：
-        </p>
-        <CodeBlock code="npm install react-useanimations" lang="bash" class="mt-4" />
-        <CodeBlock code={reactCode} lang="jsx" class="mt-3" />
-      </div>
-      <div class="min-w-0">
-        <h3 class="text-lg font-semibold">shadcn/ui</h3>
-        <p class="mt-2 text-muted">
-          每个图标也在 shadcn 注册表中。CLI 会在 <code class="font-mono text-sm text-fg">components/animations/</code>
-          下生成一个现成的组件，并自动安装依赖：
-        </p>
-        <CodeBlock code={`npx shadcn@latest add ${SITE}/r/menu.json`} lang="bash" class="mt-4" />
-        <h3 class="mt-8 text-lg font-semibold">Lottie、SVG 与 ZIP 文件</h3>
-        <p class="mt-2 text-muted">
-          不使用 React 时，可以直接下载文件：每个图标都有 Lottie JSON 动画、每个状态一张静态 SVG，以及包含全部文件的 ZIP
-          压缩包。所有文件都有固定网址并支持跨域访问，可用于 lottie-web、Vue、Svelte、移动应用或设计工具。
-        </p>
-        <CodeBlock
-          code={`${SITE}/icons/menu.json      # Lottie JSON\n${SITE}/icons/menu/menu.svg  # 静态 SVG\n${SITE}/icons/menu.zip       # 全部文件`}
-          lang="bash"
-          class="mt-4"
-        />
-      </div>
-    </div>
-    <p class="mt-8 text-muted">
-      完整的属性说明、受控切换、颜色与尺寸、服务端渲染和从 v2 升级的步骤，请参阅<a class={link} href="/documentation"
-        >英文文档</a
-      >。
-    </p>
-  </section>
-
-  <section class="mx-auto mt-24 max-w-5xl px-5 sm:px-8" aria-labelledby="interactions-title">
-    <h2 id="interactions-title" class="text-3xl font-semibold tracking-tight sm:text-4xl">六种内置交互</h2>
-    <p class="mt-4 text-muted">
-      每个图标都带有为它设计的交互，放进页面就能正确播放；需要时也可以通过 <code class="font-mono text-sm text-fg"
-        >interaction</code
-      > 属性改成其他方式。
-    </p>
-    <ul class="mt-8 grid gap-4 sm:grid-cols-2">
-      {
-        interactions.map((item) => (
-          <li class="rounded-3xl border border-line bg-surface p-6">
-            <a href={item.href} class="text-lg font-semibold hover:text-accent">
-              {INTERACTION_ZH[item.interaction][0]}
-              <span class="ml-2 font-mono text-xs font-normal text-subtle">{item.interaction}</span>
-            </a>
-            <p class="mt-2 text-muted">
-              {INTERACTION_ZH[item.interaction][1]}（{item.count} 个图标）
-            </p>
-          </li>
-        ))
-      }
-    </ul>
-  </section>
-
-  <section class="mx-auto mt-24 max-w-5xl px-5 sm:px-8" aria-labelledby="categories-title">
-    <h2 id="categories-title" class="text-3xl font-semibold tracking-tight sm:text-4xl">按类别浏览</h2>
-    <p class="mt-4 text-muted">
-      图标按用途分为 {categories.length} 个类别，从导航菜单、通知铃铛、媒体播放到电子商务和开发者工具。类别页面目前为英文，包含每个图标的预览和用法。
-    </p>
-    <ul class="mt-8 grid gap-x-6 gap-y-2 sm:grid-cols-2 md:grid-cols-3">
-      {
-        categories.map((item) => (
-          <li>
-            <a href={item.href} class="flex items-baseline justify-between gap-3 py-1 text-muted hover:text-fg">
-              <span>
-                {CATEGORY_ZH[item.name] ?? item.name}
-                <span class="ml-1.5 text-xs text-subtle" lang="en">{item.name}</span>
-              </span>
-              <span class="text-xs text-subtle tabular-nums">{item.count}</span>
-            </a>
-          </li>
-        ))
-      }
-    </ul>
-    <p class="mt-6 text-muted">
-      也可以查看<a class={link} href="/icons">全部动画图标</a>、<a class={link} href="/lottie-icons">Lottie 图标</a
-      >和<a class={link} href="/shadcn-animated-icons">shadcn/ui 动画图标</a>。
-    </p>
-  </section>
-
-  <section class="mx-auto mt-24 max-w-3xl px-5 sm:px-8" aria-labelledby="faq-title">
-    <h2 id="faq-title" class="text-3xl font-semibold tracking-tight sm:text-4xl">常见问题</h2>
-    <div class="mt-8 divide-y divide-line border-y border-line">
-      {
-        faq.map((item) => (
-          <details class="group py-5">
-            <summary class="flex cursor-pointer list-none items-center justify-between gap-6 text-lg font-medium [&::-webkit-details-marker]:hidden">
-              <h3>{item.question}</h3>
-              <span class="text-subtle transition-transform group-open:rotate-45" aria-hidden="true">+</span>
-            </summary>
-            <p class="mt-3 leading-relaxed text-muted">{item.answer}</p>
-          </details>
-        ))
-      }
-    </div>
-    <p class="mt-8 text-center text-sm text-muted">
-      <a class={link} href="/#icons">全部图标</a> · <a class={link} href="/documentation">文档</a> ·
-      <a class={link} href="/licencing-and-terms">许可与条款</a> · <a class={link} href="/" hreflang="en">English</a>
-    </p>
-  </section>
-</Layout>
diff --git a/website/src/scripts/browser.ts b/website/src/scripts/browser.ts
index 5bc4f9d..00af3ca 100644
--- a/website/src/scripts/browser.ts
+++ b/website/src/scripts/browser.ts
@@ -1,7 +1,7 @@
 // The icon browser on the home page: search, filters, customization, and live icons.
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
-import IconCard, { type CardIcon, openIcon } from '../components/IconCard';
+import IconCard, { type CardIcon, type CardStrings, openIcon } from '../components/IconCard';
 import { loadIconData } from '../lib/icon-data';
 import { track } from './analytics';
 
@@ -21,6 +21,12 @@ if (browser) {
   const sizeInput = browser.querySelector<HTMLInputElement>('[data-size]')!;
   const swatches = [...browser.querySelectorAll<HTMLButtonElement>('[data-color]')];
   const colorInput = browser.querySelector<HTMLInputElement>('[data-color-input]')!;
+  const cardStrings = JSON.parse(browser.dataset.cardStrings!) as CardStrings;
+  // "<n> icons" in the page's language: plural forms with {n}, rendered by the page.
+  const countForms = JSON.parse(count.dataset.countForms!) as Record<string, string>;
+  const plurals = new Intl.PluralRules(document.documentElement.lang);
+  const countText = (n: number) =>
+    (countForms[plurals.select(n)] ?? countForms.other).replace('{n}', String(n));
 
   const params = new URLSearchParams(location.search);
   let category = params.get('category') ?? '';
@@ -46,7 +52,7 @@ if (browser) {
     for (const button of categoryButtons) {
       button.setAttribute('aria-pressed', String(button.dataset.categoryFilter === category));
     }
-    count.textContent = `${shown} ${shown === 1 ? 'icon' : 'icons'}`;
+    count.textContent = countText(shown);
     empty.hidden = shown > 0;
     const next = new URLSearchParams(location.search);
     for (const [key, value] of [
@@ -157,7 +163,9 @@ if (browser) {
           interaction: card.dataset.interaction as CardIcon['interaction'],
         };
         void loadIconData(icon.id).then((data) => {
-          createRoot(card).render(createElement(IconCard, { icon, animationData: data }));
+          createRoot(card).render(
+            createElement(IconCard, { icon, animationData: data, strings: cardStrings })
+          );
         });
       }
     },
diff --git a/website/src/views/CategoryIndexPage.astro b/website/src/views/CategoryIndexPage.astro
new file mode 100644
index 0000000..613a84c
--- /dev/null
+++ b/website/src/views/CategoryIndexPage.astro
@@ -0,0 +1,87 @@
+---
+// The list of categories (/categories) in any language; src/pages routes render it.
+import Breadcrumbs from '../components/Breadcrumbs.astro';
+import { alternatesOf, type Locale, localize, t } from '../i18n';
+import Layout from '../layouts/Layout.astro';
+import { breadcrumbNode, categories, categoryPath, localDescription, localTitle } from '../lib/hubs';
+import { icons, SITE } from '../lib/icons';
+import { websiteNode, WEBSITE_ID } from '../lib/seo';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+const m = t(locale);
+const p = m.pages.categories;
+const href = (path: string) => localize(path, locale);
+const path = '/categories';
+const all = categories();
+const title = localTitle(locale, p.titles(all.length));
+const description = localDescription(locale, p.descriptions(icons.length, all.length));
+const crumbs = [
+  { name: m.common.crumbs.icons, path: href('/icons') },
+  { name: m.common.crumbs.categories, path: href(path) },
+];
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@graph': [
+    {
+      '@type': 'CollectionPage',
+      '@id': `${SITE}${href(path)}`,
+      url: `${SITE}${href(path)}`,
+      name: p.title,
+      description,
+      inLanguage: locale.hreflang,
+      isPartOf: { '@id': WEBSITE_ID },
+      mainEntity: {
+        '@type': 'ItemList',
+        numberOfItems: all.length,
+        itemListElement: all.map(({ meta }, index) => ({
+          '@type': 'ListItem',
+          position: index + 1,
+          url: `${SITE}${href(categoryPath(meta))}`,
+          name: m.taxonomy.categories[meta.name].title,
+        })),
+      },
+    },
+    breadcrumbNode(crumbs),
+    websiteNode(),
+  ],
+};
+---
+
+<Layout title={title} description={description} path={href(path)} locale={locale} alternates={alternatesOf(path)} jsonLd={jsonLd}>
+  <div class="mx-auto max-w-6xl px-5 pt-10 sm:px-8">
+    <Breadcrumbs crumbs={crumbs} label={m.common.breadcrumb} />
+    <header class="mt-8 max-w-3xl">
+      <p class="text-sm font-medium text-accent">{p.badge(icons.length, all.length)}</p>
+      <h1 class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">{p.title}</h1>
+      <p class="mt-4 text-lg leading-relaxed text-muted" set:html={p.introHtml(href('/interactions'))} />
+    </header>
+
+    <ul class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {
+        all.map(({ meta, icons: group }) => (
+          <li>
+            <a
+              href={href(categoryPath(meta))}
+              class="group flex h-full flex-col rounded-3xl border border-line bg-surface p-6 transition hover:border-line-strong"
+            >
+              <span class="flex gap-2 text-fg" aria-hidden="true">
+                {group.slice(0, 5).map((icon) => (
+                  <span data-useanimations="" class="block size-8" set:html={icon.preview} />
+                ))}
+              </span>
+              <span class="mt-5 flex items-baseline justify-between gap-3">
+                <span class="text-lg font-semibold tracking-tight text-fg">{m.taxonomy.categories[meta.name].name}</span>
+                <span class="text-sm text-subtle">{p.iconCount(group.length)}</span>
+              </span>
+              <span class="mt-2 line-clamp-3 text-sm leading-relaxed text-muted">{m.taxonomy.categories[meta.name].intro}</span>
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</Layout>
diff --git a/website/src/views/DocumentationPage.astro b/website/src/views/DocumentationPage.astro
new file mode 100644
index 0000000..b36b25d
--- /dev/null
+++ b/website/src/views/DocumentationPage.astro
@@ -0,0 +1,122 @@
+---
+// The documentation (/documentation) in any language; src/pages routes render it.
+import { alternatesOf, type Locale, localize, t } from '../i18n';
+import Layout from '../layouts/Layout.astro';
+import { lastModifiedOf } from '../lib/git';
+import { icons, SITE } from '../lib/icons';
+import { documentationIn } from '../lib/markdown';
+import { faqNode } from '../lib/seo';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+const m = t(locale);
+const path = '/documentation';
+const href = (p: string) => localize(p, locale);
+const body = await documentationIn(locale);
+const toc = body.headings.filter((heading) => heading.depth === 2);
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@graph': [
+    {
+      '@type': 'TechArticle',
+      headline: m.docs.headline,
+      description: m.docs.summary,
+      url: `${SITE}${href(path)}`,
+      inLanguage: body.fallback ? 'en' : locale.hreflang,
+      // The last commit to the documentation, not the build date; omitted without Git history.
+      dateModified: lastModifiedOf([body.file])?.slice(0, 10),
+      publisher: { '@type': 'Organization', name: 'useAnimations', url: `${SITE}/` },
+    },
+    {
+      '@type': 'BreadcrumbList',
+      itemListElement: [
+        { '@type': 'ListItem', position: 1, name: 'useAnimations', item: `${SITE}${href('/')}` },
+        { '@type': 'ListItem', position: 2, name: m.docs.crumb, item: `${SITE}${href(path)}` },
+      ],
+    },
+    faqNode(m.docs.faq),
+  ],
+};
+const markdown = locale.prefix ? [] : [{ rel: 'alternate', type: 'text/markdown', href: '/documentation.md', title: 'Documentation (Markdown)' }];
+---
+
+
+<Layout
+  title={m.docs.title}
+  description={m.docs.description(icons.length)}
+  path={href(path)}
+  locale={locale}
+  alternates={alternatesOf(path)}
+  head={markdown}
+  jsonLd={jsonLd}
+>
+  <div class="mx-auto grid max-w-7xl gap-12 px-5 pt-14 sm:px-8 lg:grid-cols-[14rem_minmax(0,1fr)] xl:grid-cols-[14rem_minmax(0,46rem)_1fr]">
+    <aside class="lg:sticky lg:top-24 lg:max-h-[calc(100vh-7rem)] lg:self-start lg:overflow-y-auto">
+      <details class="group rounded-2xl border border-line p-4 lg:border-0 lg:p-0" open>
+        <summary class="cursor-pointer text-sm font-medium text-fg lg:pointer-events-none lg:list-none">{m.docs.onThisPage}</summary>
+        <nav aria-label={m.docs.onThisPage} class="mt-3">
+          <ul class="space-y-0.5 border-l border-line">
+            {
+              toc.map((heading) => (
+                <li>
+                  <a
+                    href={`#${heading.slug}`}
+                    data-toc={heading.slug}
+                    class="-ml-px block border-l border-transparent py-1 pl-4 text-sm text-muted transition-colors hover:text-fg data-[active]:border-accent data-[active]:text-fg"
+                  >
+                    {heading.text}
+                  </a>
+                </li>
+              ))
+            }
+          </ul>
+        </nav>
+        {!locale.prefix && <a href="/documentation.md" class="mt-6 hidden pl-4 text-xs text-subtle hover:text-fg lg:block">{m.docs.viewAsMarkdown}</a>}
+      </details>
+    </aside>
+    <article class="prose min-w-0 pb-10" data-copy-text={m.common.copy}>
+      <p class="mb-2 text-sm font-medium text-accent">{m.docs.badge}</p>
+      {body.fallback ? <div lang="en" set:html={body.html} /> : <Fragment set:html={body.html} />}
+    </article>
+  </div>
+</Layout>
+
+<script>
+  // Highlights the section being read in the table of contents.
+  const links = new Map(
+    [...document.querySelectorAll<HTMLAnchorElement>('[data-toc]')].map((link) => [link.dataset.toc!, link])
+  );
+  const headings = [...links.keys()].map((id) => document.getElementById(id)).filter(Boolean) as HTMLElement[];
+  const update = () => {
+    let current = headings[0];
+    for (const heading of headings) if (heading.getBoundingClientRect().top < 140) current = heading;
+    for (const [id, link] of links) link.toggleAttribute('data-active', id === current?.id);
+  };
+  addEventListener('scroll', update, { passive: true });
+  update();
+
+  // Copy buttons on code blocks.
+  for (const pre of document.querySelectorAll<HTMLPreElement>('.prose pre')) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'group/code relative';
+    wrapper.dataset.copyScope = '';
+    pre.replaceWith(wrapper);
+    wrapper.append(pre);
+    pre.dataset.code = '';
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.dataset.copyFrom = '[data-code]';
+    button.dataset.track = 'copy';
+    button.dataset.trackCode = pre.dataset.language ?? 'docs';
+    button.className =
+      'absolute top-2 right-2 rounded-lg border border-line bg-surface px-2 py-1 text-xs text-muted opacity-0 transition group-hover/code:opacity-100 focus:opacity-100';
+    const label = document.createElement('span');
+    label.dataset.copyLabel = '';
+    label.textContent = pre.closest<HTMLElement>('[data-copy-text]')?.dataset.copyText ?? 'Copy';
+    button.append(label);
+    wrapper.append(button);
+  }
+</script>
diff --git a/website/src/views/HomePage.astro b/website/src/views/HomePage.astro
new file mode 100644
index 0000000..2eecaf6
--- /dev/null
+++ b/website/src/views/HomePage.astro
@@ -0,0 +1,685 @@
+---
+// The home page (/) in any language; src/pages routes render it.
+import type { Interaction } from 'react-useanimations';
+import CodeBlock from '../components/CodeBlock.astro';
+import ColorRow from '../components/ColorRow';
+import IconCard from '../components/IconCard';
+import IconDialog, { type DialogIcon, type Templates } from '../components/IconDialog';
+import IconField from '../components/IconField.astro';
+import InstallCommand from '../components/InstallCommand.astro';
+import InteractionDemo from '../components/InteractionDemo';
+import { alternatesOf, EN, type Locale, localize, t } from '../i18n';
+import Layout from '../layouts/Layout.astro';
+import { highlight } from '../lib/highlight';
+import { categoryLinks, FAQ_LINKS, homeFaq, hubLinks, interactionLinks } from '../lib/home';
+import {
+  CATEGORIES,
+  filesExample,
+  type Icon,
+  icons,
+  INTERACTIONS,
+  reactExample,
+  searchText,
+  shadcnExample,
+  SITE,
+  VERSION,
+} from '../lib/icons';
+import { faqNode, ORGANIZATION_ID, organizationNode, WEBSITE_ID, websiteNode } from '../lib/seo';
+import { GITHUB, NPM } from '../lib/site';
+import { CATEGORY_META } from '../lib/taxonomy';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+const m = t(locale);
+const h = m.home;
+const b = h.browser;
+const e = h.everywhere;
+const f = h.features;
+const href = (p: string) => localize(p, locale);
+const description = h.description(icons.length);
+const faq = homeFaq(
+  locale,
+  Object.fromEntries(Object.entries(FAQ_LINKS).map(([key, path]) => [key, href(path)])) as typeof FAQ_LINKS
+);
+
+// "<n> icons" in the language's plural form; the browser script picks from the same forms.
+const countText = (n: number) =>
+  (b.count[new Intl.PluralRules(locale.hreflang).select(n)] ?? b.count.other).replace('{n}', String(n));
+// Search matches the English keywords, plus the category's name in the page's language.
+const keywords = (icon: Icon) =>
+  locale.prefix
+    ? `${searchText(icon)} ${m.taxonomy.categories[icon.category].name.toLowerCase()}`
+    : searchText(icon);
+
+// HERO FIELD: icons whose animation starts and ends at rest, taken from every category in turn.
+const replayable = new Set(['hover-replay', 'click-replay', 'loop', 'hover-loop']);
+// Some icons start from an empty frame (their still is a later frame); the field shows only icons
+// that are visible at rest, as its live players start on the first frame.
+const pools = CATEGORIES.map((category) =>
+  icons.filter(
+    (icon) => icon.category === category && replayable.has(icon.interaction) && icon.preview === icon.firstFrame
+  )
+);
+const field: typeof icons = [];
+for (let round = 0; field.length < 72; round += 1) {
+  for (const pool of pools) if (pool[round] && field.length < 72) field.push(pool[round]);
+}
+
+const byName = (name: string) => icons.find((icon) => icon.name === name)!;
+const demos = (
+  [
+    ['infinity', 'loop'],
+    ['menu', 'click-toggle'],
+    ['download', 'click-replay'],
+    ['archive', 'hover'],
+    ['github', 'hover-loop'],
+    ['trendingUp', 'hover-replay'],
+  ] as [string, Interaction][]
+).map(([name, interaction]) => ({
+  name,
+  interaction,
+  title: m.taxonomy.interactions[interaction].label,
+  description: h.interactions.demos[interaction],
+  id: byName(name).id,
+}));
+
+// DIALOG: metadata of every icon and the code blocks, highlighted once with placeholders.
+const index: DialogIcon[] = icons.map((icon) => ({
+  id: icon.id,
+  name: icon.name,
+  exportName: icon.exportName,
+  component: icon.component,
+  title: icon.title,
+  category: icon.category,
+  interaction: icon.interaction,
+  svg: Object.keys(icon.svgs),
+  durationMs: icon.durationMs,
+}));
+const templates: Templates = {
+  react: await highlight(reactExample('__EXPORT__', '__NAME__'), 'jsx'),
+  shadcnCommand: await highlight(`npx shadcn@latest add ${SITE}/r/__ID__.json`, 'bash'),
+  shadcn: await highlight(shadcnExample('__ID__', '__COMPONENT__'), 'tsx'),
+  files: await highlight(filesExample('__ID__'), 'bash'),
+};
+
+const COLORS = [
+  { key: 'text', value: '' },
+  { key: 'indigo', value: '#4b5cff' },
+  { key: 'red', value: '#e5484d' },
+  { key: 'amber', value: '#f59e0b' },
+  { key: 'teal', value: '#12a594' },
+  { key: 'violet', value: '#a24bff' },
+] as const;
+
+const platforms = [
+  {
+    id: 'React',
+    name: e.tabs.react,
+    lang: 'jsx',
+    code: `import UseAnimations from 'react-useanimations';
+import menu from 'react-useanimations/lib/menu';
+
+export function MenuButton({ open, onToggle }) {
+  return (
+    <UseAnimations
+      animation={menu}
+      active={open}
+      onClick={onToggle}
+      size={28}
+    />
+  );
+}`,
+  },
+  {
+    id: 'shadcn',
+    name: e.tabs.shadcn,
+    lang: 'bash',
+    code: `npx shadcn@latest add ${SITE}/r/menu.json
+# ${e.codeText.afterAdding}: <AnimatedMenu size={24} />`,
+  },
+  {
+    id: 'Files',
+    name: e.tabs.files,
+    lang: 'bash',
+    code: `# ${e.codeText.files}
+${SITE}/icons/menu/menu.svg
+${filesExample('menu')}`,
+  },
+  {
+    id: 'Agents',
+    name: e.tabs.agents,
+    lang: 'js',
+    code: `const { icons } = await fetch('${SITE}/icons.json').then((r) => r.json());
+const icon = icons.find((i) => i.keywords.includes('hamburger'));
+icon.react.import; // "import menu from 'react-useanimations/lib/menu';"`,
+  },
+];
+
+const colorRow = ['heart', 'star', 'bookmark', 'notification', 'settings', 'zap'].map(byName);
+const colorful = ['#e5484d', '#f59e0b', '#12a594', '#4b5cff', '#a24bff', 'var(--fg)'];
+
+const categories = categoryLinks();
+const interactions = interactionLinks();
+
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@graph': [
+    websiteNode(),
+    organizationNode(),
+    {
+      '@type': 'WebPage',
+      '@id': `${new URL(href('/'), SITE).href}#webpage`,
+      url: new URL(href('/'), SITE).href,
+      name: h.title,
+      description,
+      inLanguage: locale.hreflang,
+      isPartOf: { '@id': WEBSITE_ID },
+      about: { '@id': `${SITE}/#software` },
+      primaryImageOfPage: `${SITE}/og.png`,
+    },
+    // The package and the catalog are described once, on the English page; translations point to them.
+    ...(locale.prefix ? [] : [{
+      '@type': ['SoftwareApplication', 'SoftwareSourceCode'],
+      '@id': `${SITE}/#software`,
+      name: 'react-useanimations',
+      description: h.schema.software(icons.length),
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Web',
+      softwareVersion: VERSION,
+      version: VERSION,
+      downloadUrl: NPM,
+      installUrl: NPM,
+      codeRepository: GITHUB,
+      programmingLanguage: ['TypeScript', 'JavaScript'],
+      runtimePlatform: 'React',
+      license: 'https://opensource.org/license/mit/',
+      isAccessibleForFree: true,
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+      author: { '@id': ORGANIZATION_ID },
+      publisher: { '@id': ORGANIZATION_ID },
+    },
+    {
+      '@type': 'Dataset',
+      '@id': `${SITE}/#catalog`,
+      name: h.schema.catalogName,
+      description: h.schema.catalog(icons.length),
+      url: `${SITE}/icons.json`,
+      license: 'https://opensource.org/license/mit/',
+      isAccessibleForFree: true,
+      creator: { '@id': ORGANIZATION_ID },
+      keywords: ['animated icons', 'micro animations', 'Lottie', 'SVG', 'React', 'shadcn/ui'],
+      distribution: [
+        { '@type': 'DataDownload', encodingFormat: 'application/json', contentUrl: `${SITE}/icons.json` },
+        { '@type': 'DataDownload', encodingFormat: 'application/json', contentUrl: `${SITE}/r/registry.json` },
+      ],
+    }]),
+    { ...faqNode(faq), '@id': `${new URL(href('/'), SITE).href}#faq` },
+  ],
+};---
+
+
+<Layout
+  title={h.title}
+  description={description}
+  path={href('/')}
+  locale={locale}
+  alternates={alternatesOf('/')}
+  head={[
+    { rel: 'license', href: href('/licencing-and-terms') },
+    ...(locale.prefix ? [] : [{ rel: 'alternate', type: 'text/markdown', href: '/index.md', title: 'Homepage (Markdown)' }]),
+  ]}
+  jsonLd={jsonLd}
+>
+  <!-- HERO -->
+  <section class="relative overflow-hidden">
+    <div class="hero-glow pointer-events-none absolute inset-0" aria-hidden="true"></div>
+    <div
+      class="pointer-events-none absolute inset-0 bg-grid [mask-image:radial-gradient(ellipse_at_top,black_20%,transparent_70%)] opacity-60"
+      aria-hidden="true"
+    >
+    </div>
+    <div class="relative mx-auto max-w-7xl px-5 pt-20 pb-10 text-center sm:px-8 sm:pt-28">
+      <a
+        href={href('/documentation#upgrading-from-v2')}
+        class="group mx-auto inline-flex items-center gap-2 rounded-full border border-line bg-surface/70 py-1 pr-3 pl-1 text-xs text-muted backdrop-blur transition hover:text-fg"
+      >
+        <span class="rounded-full bg-accent px-2 py-0.5 font-medium text-accent-fg">v3</span>
+        {h.hero.badge(icons.length)}
+        <span class="transition-transform group-hover:translate-x-0.5">→</span>
+      </a>
+      <p class="mx-auto mt-8 max-w-4xl text-5xl font-semibold tracking-[-0.045em] text-balance sm:text-7xl lg:text-[5.5rem] lg:leading-[0.95]">
+        {h.hero.headline.start}<span class="text-gradient">{h.hero.headline.accent}</span>{h.hero.headline.end}
+      </p>
+      <h1 class="mx-auto mt-6 max-w-3xl text-xl font-semibold tracking-tight text-balance sm:text-2xl">
+        {h.hero.h1}
+      </h1>
+      <p class="mx-auto mt-4 max-w-2xl text-lg leading-relaxed text-pretty text-muted">
+        {h.hero.intro(icons.length)}
+      </p>
+      <div class="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
+        <a
+          href="#icons"
+          class="inline-flex items-center gap-2 rounded-full bg-fg px-6 py-3 text-sm font-medium text-bg shadow-[0_10px_30px_-12px_var(--glow)] transition hover:opacity-90"
+          >{h.hero.browse}</a
+        >
+        <InstallCommand locale={locale} />
+      </div>
+    </div>
+    <div class="relative mx-auto max-w-6xl px-3 pb-6 sm:px-8">
+      <div
+        class="field-stage relative h-[300px] overflow-hidden rounded-[2rem] border border-line bg-surface/60 shadow-[0_40px_120px_-60px_var(--glow)] backdrop-blur sm:h-[400px]"
+      >
+        <IconField icons={field} />
+        <div
+          class="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-bg/90 to-transparent"
+          aria-hidden="true"
+        >
+        </div>
+      </div>
+      <p class="mt-4 text-center text-xs text-subtle">{h.hero.fieldHint}</p>
+    </div>
+  </section>
+
+  <!-- NUMBERS -->
+  <section class="mx-auto mt-10 max-w-6xl px-5 sm:px-8" aria-label={h.numbers.label}>
+    <dl class="grid grid-cols-2 overflow-hidden rounded-3xl border border-line sm:grid-cols-4">
+      {
+        [
+          [String(icons.length), h.numbers.icons],
+          ['6', h.numbers.interactions],
+          ['8 kB', h.numbers.size],
+          ['0', h.numbers.dependencies],
+        ].map(([value, label]) => (
+          <div class="border-line p-6 text-center not-last:border-r max-sm:nth-[2]:border-r-0 max-sm:nth-[-n+2]:border-b">
+            <dt class="sr-only">{label}</dt>
+            <dd class="text-3xl font-semibold tracking-tight sm:text-4xl">{value}</dd>
+            <dd class="mt-1 text-sm text-muted">{label}</dd>
+          </div>
+        ))
+      }
+    </dl>
+  </section>
+
+  <!-- INTERACTIONS -->
+  <section class="mx-auto mt-32 max-w-7xl px-5 sm:px-8" aria-labelledby="interactions-title">
+    <div class="max-w-2xl">
+      <p class="text-sm font-medium text-accent">{h.interactions.eyebrow}</p>
+      <h2 id="interactions-title" class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+        {h.interactions.title}
+      </h2>
+      <p class="mt-4 text-lg text-muted">
+        {h.interactions.intro}
+      </p>
+    </div>
+    <div class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {demos.map((demo) => <InteractionDemo client:visible {...demo} hint={demo.description} strings={m.islands.interactionDemo} />)}
+    </div>
+  </section>
+
+  <!-- ICON BROWSER -->
+  <section id="icons" class="mx-auto mt-32 max-w-7xl px-5 sm:px-8" aria-labelledby="icons-title" data-browser data-card-strings={JSON.stringify(m.islands.iconCard)}>
+    <div class="flex flex-wrap items-end justify-between gap-6">
+      <div class="max-w-2xl">
+        <p class="text-sm font-medium text-accent">{h.browser.eyebrow}</p>
+        <h2 id="icons-title" class="mt-3 text-4xl font-semibold tracking-tight sm:text-5xl">
+          {b.title(icons.length)}
+        </h2>
+        <p class="mt-4 text-lg text-muted">
+          {b.intro}
+        </p>
+      </div>
+    </div>
+
+    <div
+      data-filters
+      class="sticky top-16 z-30 -mx-5 mt-10 border-b border-line bg-bg/85 px-5 py-4 backdrop-blur-xl sm:-mx-8 sm:px-8"
+    >
+      <div class="flex flex-wrap items-center gap-3">
+        <label class="relative min-w-[16rem] flex-1">
+          <span class="sr-only">{b.search}</span>
+          <svg
+            viewBox="0 0 24 24"
+            class="pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-subtle"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg
+          >
+          <input
+            data-search
+            type="search"
+            placeholder={b.searchPlaceholder(icons.length)}
+            autocomplete="off"
+            class="w-full rounded-full border border-line-strong bg-surface py-2.5 pr-10 pl-10 text-sm text-fg placeholder:text-subtle focus:border-accent focus:outline-none"
+          />
+          <kbd
+            class="pointer-events-none absolute top-1/2 right-3 hidden -translate-y-1/2 rounded-md border border-line px-1.5 font-mono text-[11px] text-subtle sm:block"
+            >/</kbd
+          >
+        </label>
+        <label class="relative">
+          <span class="sr-only">{b.interaction}</span>
+          <select
+            data-interaction-filter
+            class="appearance-none rounded-full border border-line-strong bg-surface py-2.5 pr-9 pl-4 text-sm text-fg focus:border-accent focus:outline-none"
+          >
+            <option value="">{b.allInteractions}</option>
+            {(Object.keys(INTERACTIONS) as Interaction[]).map((value) => <option value={value}>{m.taxonomy.interactions[value].label}</option>)}
+          </select>
+          <svg
+            viewBox="0 0 24 24"
+            class="pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-subtle"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg
+          >
+        </label>
+        <div class="flex items-center gap-1.5" role="group" aria-label={b.color}>
+          {
+            COLORS.map((color) => (
+              <button
+                type="button"
+                data-color={color.value}
+                data-track="color"
+                data-track-color={t(EN).home.browser.colors[color.key]}
+                aria-label={b.colors[color.key]}
+                aria-pressed={color.value === '' ? 'true' : 'false'}
+                class="size-6 rounded-full border border-line-strong ring-offset-2 ring-offset-bg aria-pressed:ring-2 aria-pressed:ring-accent"
+                style={{ background: color.value || 'var(--fg)' }}
+              />
+            ))
+          }
+          <label class="relative size-6 cursor-pointer overflow-hidden rounded-full border border-line-strong bg-[conic-gradient(#e5484d,#f59e0b,#12a594,#4b5cff,#a24bff,#e5484d)]">
+            <span class="sr-only">{b.customColor}</span>
+            <input data-color-input type="color" class="absolute inset-0 cursor-pointer opacity-0" />
+          </label>
+        </div>
+        <label class="flex items-center gap-2 text-xs text-muted">
+          {b.size}
+          <input data-size type="range" min="24" max="64" value="40" class="w-24 accent-[var(--accent)]" />
+        </label>
+      </div>
+      <div class="no-scrollbar mt-4 flex gap-2 overflow-x-auto sm:flex-wrap sm:overflow-visible" role="group" aria-label={b.category}>
+        {
+          ['', ...CATEGORIES].map((category) => (
+            <button
+              type="button"
+              data-category-filter={category}
+              data-track="category"
+              data-track-category={category || 'All'}
+              aria-pressed={category === '' ? 'true' : 'false'}
+              class="shrink-0 rounded-full border border-line px-3.5 py-1.5 text-sm whitespace-nowrap text-muted transition hover:text-fg aria-pressed:border-fg aria-pressed:bg-fg aria-pressed:text-bg"
+            >
+              {category ? m.taxonomy.categories[category].name : b.all}
+            </button>
+          ))
+        }
+      </div>
+    </div>
+
+    <p class="mt-6 text-sm text-subtle" aria-live="polite" data-count data-count-forms={JSON.stringify(b.count)}>
+      {countText(icons.length)}
+    </p>
+    <div data-grid class="mt-2">
+      {
+        CATEGORIES.map((category) => (
+          <section
+            data-section
+            id={category === 'Alerts' ? 'alerts' : undefined}
+            aria-label={m.taxonomy.categories[category].name}
+            class="icon-section mt-8 first:mt-4"
+          >
+            <h3 class="mb-4 text-sm font-medium text-muted">
+              {CATEGORY_META[category].indexable ? (
+                <a href={href(`/categories/${CATEGORY_META[category].slug}`)} class="transition-colors hover:text-fg">
+                  {m.taxonomy.categories[category].name}
+                </a>
+              ) : (
+                m.taxonomy.categories[category].name
+              )}
+            </h3>
+            <ul class="grid grid-cols-[repeat(auto-fill,minmax(7.5rem,1fr))] gap-3">
+              {icons
+                .filter((icon) => icon.category === category)
+                .map((icon) => (
+                  <li
+                    data-card
+                    data-track="icon-open"
+                    data-track-icon={icon.id}
+                    data-id={icon.id}
+                    data-title={icon.title}
+                    data-category={icon.category}
+                    data-interaction={icon.interaction}
+                    data-keywords={keywords(icon)}
+                    data-blank-start={icon.preview === icon.firstFrame ? undefined : ''}
+                  >
+                    <IconCard
+                      icon={{ id: icon.id, title: icon.title, interaction: icon.interaction }}
+                      still={icon.preview}
+                      strings={m.islands.iconCard}
+                    />
+                  </li>
+                ))}
+            </ul>
+          </section>
+        ))
+      }
+      <div data-empty hidden class="rounded-3xl border border-dashed border-line-strong px-6 py-16 text-center">
+        <p class="text-lg font-medium">{b.noMatch}</p>
+        <p class="mt-2 text-sm text-muted" set:html={b.noMatchHintHtml(`${GITHUB}/issues`)} />
+      </div>
+    </div>
+  </section>
+
+  <!-- EVERYWHERE -->
+  <section class="mx-auto mt-32 max-w-7xl px-5 sm:px-8" aria-labelledby="everywhere-title">
+    <div class="grid items-start gap-12 lg:grid-cols-[1fr_1.3fr]">
+      <div class="lg:sticky lg:top-28">
+        <p class="text-sm font-medium text-accent">{e.eyebrow}</p>
+        <h2 id="everywhere-title" class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+          {e.title}
+        </h2>
+        <p class="mt-4 text-lg text-muted">
+          {e.intro}
+        </p>
+        <a
+          href={href('/documentation')}
+          class="mt-8 inline-flex items-center gap-2 rounded-full border border-line-strong px-5 py-2.5 text-sm font-medium transition hover:bg-surface-2"
+          >{e.docs}</a
+        >
+      </div>
+      <div data-tabs class="min-w-0">
+        <div role="tablist" aria-label={e.tablist} class="no-scrollbar flex gap-1 overflow-x-auto rounded-full border border-line bg-surface-2 p-1">
+          {
+            platforms.map((platform, i) => (
+              <button
+                type="button"
+                role="tab"
+                id={`tab-${platform.id}`}
+                aria-controls={`panel-${platform.id}`}
+                aria-selected={i === 0 ? 'true' : 'false'}
+                data-track="platform-tab"
+                data-track-tab={platform.id.toLowerCase()}
+                class="shrink-0 rounded-full px-4 py-1.5 text-sm text-muted transition aria-selected:bg-surface aria-selected:text-fg aria-selected:shadow-sm"
+              >
+                {platform.name}
+              </button>
+            ))
+          }
+        </div>
+        {
+          platforms.map((platform, i) => (
+            <div
+              role="tabpanel"
+              id={`panel-${platform.id}`}
+              aria-labelledby={`tab-${platform.id}`}
+              hidden={i !== 0}
+              class="mt-4"
+            >
+              <CodeBlock code={platform.code} lang={platform.lang} track={{ code: platform.id.toLowerCase() }} locale={locale} />
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES -->
+  <section class="mx-auto mt-32 max-w-7xl px-5 sm:px-8" aria-labelledby="features-title">
+    <h2 id="features-title" class="max-w-2xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+      {f.title}
+    </h2>
+    <div class="mt-12 grid gap-4 md:grid-cols-6">
+      <article class="rounded-3xl border border-line bg-surface p-7 md:col-span-4">
+        <h3 class="text-lg font-semibold tracking-tight">{f.colors}</h3>
+        <p class="mt-2 max-w-md text-muted" set:html={f.colorsHtml} />
+        <ColorRow
+          client:visible
+          icons={colorRow.map((icon, i) => ({
+            id: icon.id,
+            title: icon.title,
+            color: colorful[i],
+            interaction: icon.interaction,
+          }))}
+        />
+      </article>
+      <article class="flex flex-col justify-between rounded-3xl border border-line bg-surface p-7 md:col-span-2">
+        <h3 class="text-lg font-semibold tracking-tight">{f.tiny}</h3>
+        <p class="mt-10 text-6xl font-semibold tracking-tight">8<span class="text-3xl text-muted"> kB</span></p>
+        <p class="mt-2 text-muted">{f.tinyText}</p>
+      </article>
+      <article class="rounded-3xl border border-line bg-surface p-7 md:col-span-2">
+        <h3 class="text-lg font-semibold tracking-tight">{f.accessible}</h3>
+        <p class="mt-2 text-muted">
+          {f.accessibleText}
+        </p>
+      </article>
+      <article class="rounded-3xl border border-line bg-surface p-7 md:col-span-2">
+        <h3 class="text-lg font-semibold tracking-tight">{f.ssr}</h3>
+        <p class="mt-2 text-muted">
+          {f.ssrText}
+        </p>
+      </article>
+      <article class="rounded-3xl border border-line bg-surface p-7 md:col-span-2">
+        <h3 class="text-lg font-semibold tracking-tight">{f.agents}</h3>
+        <p class="mt-2 text-muted" set:html={f.agentsHtml('/icons.json', '/llms.txt')} />
+      </article>
+    </div>
+  </section>
+
+  <!-- BROWSE -->
+  <section class="mx-auto mt-32 max-w-7xl px-5 sm:px-8" aria-labelledby="browse-title">
+    <h2 id="browse-title" class="max-w-2xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+      {h.browse.title}
+    </h2>
+    <div class="mt-12 grid gap-10 lg:grid-cols-[2fr_1fr]">
+      <nav aria-labelledby="browse-categories">
+        <h3 id="browse-categories" class="text-lg font-semibold tracking-tight">{h.browse.byCategory}</h3>
+        <ul class="mt-4 grid gap-x-6 gap-y-2 sm:grid-cols-2 md:grid-cols-3">
+          {
+            categories.map((link) => (
+              <li>
+                <a href={href(link.href)} class="group flex items-baseline justify-between gap-3 py-1 text-muted hover:text-fg">
+                  <span>{m.taxonomy.categories[link.name].title}</span>
+                  <span class="text-xs text-subtle tabular-nums">{link.count}</span>
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </nav>
+      <div class="grid gap-10">
+        <nav aria-labelledby="browse-interactions">
+          <h3 id="browse-interactions" class="text-lg font-semibold tracking-tight">{h.browse.byInteraction}</h3>
+          <ul class="mt-4 grid gap-y-2">
+            {
+              interactions.map((link) => (
+                <li>
+                  <a href={href(link.href)} class="flex items-baseline justify-between gap-3 py-1 text-muted hover:text-fg">
+                    <span>{m.taxonomy.interactions[link.interaction].title}</span>
+                    <span class="text-xs text-subtle tabular-nums">{link.count}</span>
+                  </a>
+                </li>
+              ))
+            }
+          </ul>
+        </nav>
+        <nav aria-labelledby="browse-formats">
+          <h3 id="browse-formats" class="text-lg font-semibold tracking-tight">{h.browse.formats}</h3>
+          <ul class="mt-4 grid gap-y-2">
+            {
+              hubLinks(locale).map((link) => (
+                <li>
+                  <a href={href(link.href)} class="block py-1 text-muted hover:text-fg">{link.label}</a>
+                </li>
+              ))
+            }
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </section>
+
+  <!-- FAQ -->
+  <section class="mx-auto mt-32 max-w-3xl px-5 sm:px-8" aria-labelledby="faq-title">
+    <h2 id="faq-title" class="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">{h.faqTitle}</h2>
+    <div class="mt-10 divide-y divide-line border-y border-line">
+      {
+        faq.map((item) => (
+          <details class="group py-5">
+            <summary class="flex cursor-pointer list-none items-center justify-between gap-6 text-lg font-medium [&::-webkit-details-marker]:hidden">
+              <h3>{item.question}</h3>
+              <span class="text-subtle transition-transform group-open:rotate-45" aria-hidden="true">+</span>
+            </summary>
+            <p class="mt-3 leading-relaxed text-muted">
+              {item.answer}
+              {item.link && (
+                <>
+                  {' '}
+                  <a href={item.link.href} class="text-fg underline underline-offset-4">
+                    {item.link.label} →
+                  </a>
+                </>
+              )}
+            </p>
+          </details>
+        ))
+      }
+    </div>
+  </section>
+
+  <!-- CTA -->
+  <section class="mx-auto mt-32 max-w-7xl px-5 sm:px-8">
+    <div class="cta relative overflow-hidden rounded-[2.5rem] border border-line px-6 py-20 text-center sm:px-16">
+      <div class="hero-glow pointer-events-none absolute inset-0" aria-hidden="true"></div>
+      <h2 class="relative text-4xl font-semibold tracking-tight text-balance sm:text-6xl">
+        {h.cta.title.start}<span class="text-gradient">{h.cta.title.accent}</span>{h.cta.title.end}
+      </h2>
+      <p class="relative mx-auto mt-4 max-w-xl text-lg text-muted">{h.cta.text}</p>
+      <div class="relative mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
+        <InstallCommand locale={locale} />
+        <a href={href('/documentation')} class="rounded-full bg-fg px-6 py-3 text-sm font-medium text-bg hover:opacity-90"
+          >{h.cta.start}</a
+        >
+      </div>
+    </div>
+  </section>
+
+  <script type="application/json" id="icon-index" set:html={JSON.stringify(index)} />
+  <IconDialog
+    client:idle
+    templates={templates}
+    strings={m.islands.iconDialog}
+    categories={locale.prefix ? Object.fromEntries(Object.entries(m.taxonomy.categories).map(([name, text]) => [name, text.name])) : undefined}
+  />
+</Layout>
+
+<script>
+  import '../scripts/browser';
+  import '../scripts/tabs';
+</script>
diff --git a/website/src/views/IconIndexPage.astro b/website/src/views/IconIndexPage.astro
new file mode 100644
index 0000000..5bb63dc
--- /dev/null
+++ b/website/src/views/IconIndexPage.astro
@@ -0,0 +1,92 @@
+---
+// The index of every icon page (/icons) in any language, grouped like the home page; plain links, no scripts.
+import Breadcrumbs from '../components/Breadcrumbs.astro';
+import IconGrid from '../components/IconGrid.astro';
+import { alternatesOf, type Locale, localize, t } from '../i18n';
+import Layout from '../layouts/Layout.astro';
+import {
+  breadcrumbNode,
+  categories,
+  categoryPath,
+  collectionPageNode,
+  interactionPath,
+  interactions,
+  localDescription,
+  localTitle,
+} from '../lib/hubs';
+import { icons } from '../lib/icons';
+import { websiteNode } from '../lib/seo';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+const m = t(locale);
+const p = m.pages.icons;
+const href = (path: string) => localize(path, locale);
+const path = '/icons';
+const groups = categories();
+const title = localTitle(locale, p.titles(icons.length));
+const description = localDescription(locale, p.descriptions(icons.length, groups.length));
+const crumbs = [{ name: m.common.crumbs.icons, path: href(path) }];
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@graph': [
+    collectionPageNode(href(path), p.title, description, icons, locale),
+    breadcrumbNode(crumbs),
+    websiteNode(),
+  ],
+};
+---
+
+<Layout title={title} description={description} path={href(path)} locale={locale} alternates={alternatesOf(path)} jsonLd={jsonLd}>
+  <div class="mx-auto max-w-6xl px-5 pt-10 sm:px-8">
+    <header class="max-w-3xl">
+      <Breadcrumbs crumbs={crumbs} label={m.common.breadcrumb} />
+      <p class="mt-8 text-sm font-medium text-accent">{p.badge(icons.length)}</p>
+      <h1 class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">{p.title}</h1>
+      <p class="mt-4 text-lg leading-relaxed text-muted" set:html={p.introHtml(href('/#icons'))} />
+    </header>
+
+    <nav aria-label={p.categoriesNav} class="mt-10 flex flex-wrap gap-2">
+      {
+        groups.map(({ meta, icons: group }) => (
+          <a href={`#${meta.slug}`} class="inline-flex rounded-full border border-line px-3.5 py-1.5 text-sm text-muted transition hover:border-line-strong hover:text-fg">
+            {m.taxonomy.categories[meta.name].name} <span class="ml-1.5 text-subtle">{group.length}</span>
+          </a>
+        ))
+      }
+    </nav>
+    <p class="mt-4 text-sm text-muted">
+      {p.byInteraction}{' '}
+      {
+        interactions().map(({ interaction, icons: group }, index) => (
+          <>
+            {index > 0 && ' · '}
+            <a href={href(interactionPath(interaction))} class="text-fg underline-offset-4 hover:underline">
+              {m.taxonomy.interactions[interaction].label}
+            </a>{' '}
+            <span class="text-subtle">({group.length})</span>
+          </>
+        ))
+      }
+    </p>
+
+    {
+      groups.map(({ meta, icons: group }) => (
+        <section id={meta.slug} class="mt-14 scroll-mt-24" aria-labelledby={`${meta.slug}-title`}>
+          <div class="flex flex-wrap items-baseline justify-between gap-3">
+            <h2 id={`${meta.slug}-title`} class="text-2xl font-semibold tracking-tight">
+              <a href={href(categoryPath(meta))} class="hover:underline hover:underline-offset-4">{m.taxonomy.categories[meta.name].name}</a>
+            </h2>
+            <a href={href(categoryPath(meta))} class="text-sm text-muted hover:text-fg">
+              {p.categoryLink(group.length, m.taxonomy.categories[meta.name].name)}
+            </a>
+          </div>
+          <IconGrid class="mt-4" icons={group} locale={locale} />
+        </section>
+      ))
+    }
+  </div>
+</Layout>
diff --git a/website/src/views/InteractionIndexPage.astro b/website/src/views/InteractionIndexPage.astro
new file mode 100644
index 0000000..b7417fd
--- /dev/null
+++ b/website/src/views/InteractionIndexPage.astro
@@ -0,0 +1,107 @@
+---
+// The list of interactions (/interactions) in any language; src/pages routes render it.
+import Breadcrumbs from '../components/Breadcrumbs.astro';
+import { alternatesOf, type Locale, localize, t } from '../i18n';
+import Layout from '../layouts/Layout.astro';
+import { breadcrumbNode, interactionPath, interactions, localDescription, localTitle } from '../lib/hubs';
+import { icons, SITE } from '../lib/icons';
+import { websiteNode, WEBSITE_ID } from '../lib/seo';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+const m = t(locale);
+const p = m.pages.interactions;
+const href = (path: string) => localize(path, locale);
+const path = '/interactions';
+const all = interactions();
+const title = localTitle(locale, p.titles);
+const description = localDescription(locale, p.descriptions(icons.length, all.length));
+const crumbs = [
+  { name: m.common.crumbs.icons, path: href('/icons') },
+  { name: m.common.crumbs.interactions, path: href(path) },
+];
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@graph': [
+    {
+      '@type': 'CollectionPage',
+      '@id': `${SITE}${href(path)}`,
+      url: `${SITE}${href(path)}`,
+      name: p.title,
+      description,
+      inLanguage: locale.hreflang,
+      isPartOf: { '@id': WEBSITE_ID },
+      mainEntity: {
+        '@type': 'ItemList',
+        numberOfItems: all.length,
+        itemListElement: all.map(({ interaction }, index) => ({
+          '@type': 'ListItem',
+          position: index + 1,
+          url: `${SITE}${href(interactionPath(interaction))}`,
+          name: m.taxonomy.interactions[interaction].title,
+        })),
+      },
+    },
+    breadcrumbNode(crumbs),
+    websiteNode(),
+  ],
+};
+---
+
+<Layout title={title} description={description} path={href(path)} locale={locale} alternates={alternatesOf(path)} jsonLd={jsonLd}>
+  <div class="mx-auto max-w-6xl px-5 pt-10 sm:px-8">
+    <Breadcrumbs crumbs={crumbs} label={m.common.breadcrumb} />
+    <header class="mt-8 max-w-3xl">
+      <p class="text-sm font-medium text-accent">{p.badge(all.length, icons.length)}</p>
+      <h1 class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">{p.title}</h1>
+      <p class="mt-4 text-lg leading-relaxed text-muted" set:html={p.introHtml} />
+    </header>
+
+    <ul class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {
+        all.map(({ interaction, icons: group }) => (
+          <li>
+            <a
+              href={href(interactionPath(interaction))}
+              class="group flex h-full flex-col rounded-3xl border border-line bg-surface p-6 transition hover:border-line-strong"
+            >
+              <span class="flex gap-2 text-fg" aria-hidden="true">
+                {group.slice(0, 5).map((icon) => (
+                  <span data-useanimations="" class="block size-8" set:html={icon.preview} />
+                ))}
+              </span>
+              <span class="mt-5 font-mono text-xs text-accent">interaction="{interaction}"</span>
+              <span class="mt-2 flex items-baseline justify-between gap-3">
+                <span class="text-lg font-semibold tracking-tight text-fg">{m.taxonomy.interactions[interaction].title}</span>
+                <span class="shrink-0 text-sm text-subtle">{p.iconCount(group.length)}</span>
+              </span>
+              <span class="mt-2 text-sm leading-relaxed text-muted">{m.taxonomy.interactions[interaction].description}</span>
+              <span class="mt-2 text-sm leading-relaxed text-subtle">{m.taxonomy.interactions[interaction].example}</span>
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+
+    <div class="mt-16 grid max-w-5xl gap-12 lg:grid-cols-2">
+      <section aria-labelledby="choose-title">
+        <h2 id="choose-title" class="text-2xl font-semibold tracking-tight">{p.chooseTitle}</h2>
+        <ul class="mt-4 list-disc space-y-2 pl-5 leading-relaxed text-muted marker:text-subtle">
+          {all.map(({ interaction }) => <li set:html={p.chooseHtml[interaction](href(interactionPath(interaction)))} />)}
+        </ul>
+      </section>
+      <section aria-labelledby="motion-title">
+        <h2 id="motion-title" class="text-2xl font-semibold tracking-tight">{p.motionTitle}</h2>
+        <p class="mt-4 leading-relaxed text-muted" set:html={p.motionHtml} />
+        <ul class="mt-4 space-y-2 text-sm leading-relaxed text-muted">
+          {all.map(({ interaction }) => (
+            <li><code class="font-mono text-fg">{interaction}</code>: {p.reducedMotion[interaction]}</li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  </div>
+</Layout>
diff --git a/website/src/views/InteractionPage.astro b/website/src/views/InteractionPage.astro
index 9700989..55154c1 100644
--- a/website/src/views/InteractionPage.astro
+++ b/website/src/views/InteractionPage.astro
@@ -150,6 +150,7 @@ const jsonLd = {
         title={ex.title}
         description={info.description}
         hint={info.description}
+        strings={m.islands.interactionDemo}
       />
     </div>
 
diff --git a/website/src/views/LicencePage.astro b/website/src/views/LicencePage.astro
new file mode 100644
index 0000000..e11463a
--- /dev/null
+++ b/website/src/views/LicencePage.astro
@@ -0,0 +1,54 @@
+---
+// The licence page (/licencing-and-terms) in any language; src/pages routes render it.
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { alternatesOf, type Locale, localize, t } from '../i18n';
+import Layout from '../layouts/Layout.astro';
+import { SITE } from '../lib/icons';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+const m = t(locale).licence;
+const path = '/licencing-and-terms';
+const href = (p: string) => localize(p, locale);
+const mit = 'https://opensource.org/license/mit/';
+// The legal text stays English in every language.
+const license = readFileSync(join(import.meta.env.REPO_DIR, 'LICENSE'), 'utf8');
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@graph': [
+    { '@type': 'WebPage', name: m.name, url: `${SITE}${href(path)}`, inLanguage: locale.hreflang, license: mit },
+    {
+      '@type': 'BreadcrumbList',
+      itemListElement: [
+        { '@type': 'ListItem', position: 1, name: 'useAnimations', item: `${SITE}${href('/')}` },
+        { '@type': 'ListItem', position: 2, name: m.name, item: `${SITE}${href(path)}` },
+      ],
+    },
+  ],
+};
+const markdown = locale.prefix ? [] : [{ rel: 'alternate', type: 'text/markdown', href: '/licencing-and-terms.md', title: 'Licencing & Terms (Markdown)' }];
+---
+
+<Layout title={m.title} description={m.description} path={href(path)} locale={locale} alternates={alternatesOf(path)} jsonLd={jsonLd} head={markdown}>
+  <article class="prose mx-auto max-w-3xl px-5 pt-16 sm:px-8">
+    <p class="mb-2 text-sm font-medium text-accent">{m.name}</p>
+    <h1>{m.heading}</h1>
+    <p class="text-lg" set:html={m.introHtml(mit)} />
+    <h2>{m.canDo}</h2>
+    <ul>
+      {m.canDoItemsHtml.map((item) => <li set:html={item} />)}
+    </ul>
+    <h2>{m.attribution}</h2>
+    <p>{m.attributionText}</p>
+    <pre><code>{m.credit('<a href="https://useanimations.com">useAnimations</a>')}</code></pre>
+    <h2>{m.noWarranty}</h2>
+    <p>{m.noWarrantyText}</p>
+    <h2>{m.licenseText}</h2>
+    {locale.prefix && <p>{m.bindingNote}</p>}
+    <pre class="whitespace-pre-wrap" lang={locale.prefix ? 'en' : undefined}><code>{license}</code></pre>
+  </article>
+</Layout>
diff --git a/website/src/views/LottieIconsPage.astro b/website/src/views/LottieIconsPage.astro
new file mode 100644
index 0000000..5fac26a
--- /dev/null
+++ b/website/src/views/LottieIconsPage.astro
@@ -0,0 +1,311 @@
+---
+// The Lottie hub (/lottie-icons) in any language: the files and code for each Lottie player.
+// The code examples stay English.
+import Breadcrumbs from '../components/Breadcrumbs.astro';
+import CodeBlock from '../components/CodeBlock.astro';
+import FaqList from '../components/FaqList.astro';
+import IconGrid from '../components/IconGrid.astro';
+import { alternatesOf, type Locale, localize, t } from '../i18n';
+import Layout from '../layouts/Layout.astro';
+import {
+  breadcrumbNode,
+  categories,
+  categoryPath,
+  expressionIcons,
+  itemListNode,
+  localDescription,
+  localTitle,
+  pickIcons,
+} from '../lib/hubs';
+import { iconById, icons, lottieSnippet, SITE } from '../lib/icons';
+import { faqNode, websiteNode, WEBSITE_ID } from '../lib/seo';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+const m = t(locale);
+const p = m.pages.lottie;
+const href = (path: string) => localize(path, locale);
+const path = '/lottie-icons';
+
+const popular = pickIcons([
+  'menu', 'refresh', 'notification', 'heart', 'visibility', 'trash', 'settings', 'search-to-x',
+  'play-pause', 'volume', 'download', 'check-box', 'toggle', 'scroll-down', 'arrow-right', 'bookmark',
+  'star', 'send', 'github', 'sun', 'infinity', 'alert-triangle', 'microphone', 'shopping-cart',
+]);
+const expressions = expressionIcons();
+const sizes = icons.map((icon) => Buffer.byteLength(icon.lottie)).toSorted((a, b) => a - b);
+const kb = (bytes: number) => Math.round(bytes / 1024);
+const median = kb(sizes[Math.floor(sizes.length / 2)]);
+const loop = `${SITE}/icons/loading.json`;
+const menu = iconById.get('menu')!;
+
+const players: { id: keyof typeof p.players; blocks: { lang: string; label?: string; code: string }[] }[] = [
+  {
+    id: 'web',
+    blocks: [
+      {
+        lang: 'html',
+        code: `<div id="icon" style="width: 48px; height: 48px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
+<script>
+  lottie.loadAnimation({
+    container: document.getElementById('icon'),
+    renderer: 'svg',
+    loop: true,
+    autoplay: true,
+    path: '${loop}',
+  });
+</script>`,
+      },
+      {
+        lang: 'css',
+        label: p.players.web.cssLabel,
+        code: `#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) { stroke: currentColor; }
+#icon path[fill='rgb(0,0,0)'] { fill: currentColor; }`,
+      },
+    ],
+  },
+  {
+    id: 'web-interactions',
+    blocks: [
+      {
+        lang: 'js',
+        code: `import lottie from 'lottie-web'; // npm install lottie-web
+
+const el = document.querySelector('#menu-button');
+${lottieSnippet(menu)}`,
+      },
+    ],
+  },
+  {
+    id: 'dotlottie',
+    blocks: [
+      {
+        lang: 'html',
+        code: `<script type="module" src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc@0.10.0/dist/dotlottie-wc.js"></script>
+
+<dotlottie-wc src="${loop}" autoplay loop style="width: 48px; height: 48px"></dotlottie-wc>`,
+      },
+      {
+        lang: 'js',
+        label: p.players.dotlottie.jsLabel,
+        code: `import { DotLottie } from '@lottiefiles/dotlottie-web';
+
+new DotLottie({
+  canvas: document.querySelector('#icon-canvas'),
+  src: '${loop}',
+  autoplay: true,
+  loop: true,
+});`,
+      },
+    ],
+  },
+  {
+    id: 'react',
+    blocks: [
+      {
+        lang: 'jsx',
+        code: `// npm install react-useanimations
+import UseAnimations from 'react-useanimations';
+import loading from 'react-useanimations/lib/loading';
+
+<UseAnimations animation={loading} size={48} />`,
+      },
+    ],
+  },
+  {
+    id: 'react-native',
+    blocks: [
+      {
+        lang: 'jsx',
+        code: `// npm install lottie-react-native
+import LottieView from 'lottie-react-native';
+
+<LottieView
+  source={{ uri: '${loop}' }} // or require('./loading.json')
+  autoPlay
+  loop
+  style={{ width: 48, height: 48 }}
+/>`,
+      },
+    ],
+  },
+  {
+    id: 'ios',
+    blocks: [
+      {
+        lang: 'swift',
+        code: `import Lottie
+import SwiftUI
+
+struct LoadingIcon: View {
+  var body: some View {
+    // Bundled file: LottieView(animation: .named("loading"))
+    LottieView {
+      await LottieAnimation.loadedFrom(url: URL(string: "${loop}")!)
+    }
+    .looping()
+    .frame(width: 48, height: 48)
+  }
+}`,
+      },
+    ],
+  },
+  {
+    id: 'android',
+    blocks: [
+      {
+        lang: 'kotlin',
+        code: `// build.gradle.kts: implementation("com.airbnb.android:lottie-compose:6.7.1")
+@Composable
+fun LoadingIcon() {
+  val composition by rememberLottieComposition(
+    LottieCompositionSpec.Url("${loop}")
+  )
+  LottieAnimation(
+    composition = composition,
+    iterations = LottieConstants.IterateForever,
+    modifier = Modifier.size(48.dp),
+  )
+}`,
+      },
+    ],
+  },
+  {
+    id: 'flutter',
+    blocks: [
+      {
+        lang: 'dart',
+        code: `// pubspec.yaml: lottie: ^3.6.1
+import 'package:lottie/lottie.dart';
+
+Lottie.network(
+  '${loop}',
+  width: 48,
+  height: 48,
+) // or Lottie.asset('assets/loading.json')`,
+      },
+    ],
+  },
+];
+
+const faq = p.faq({
+  count: icons.length,
+  minSize: kb(sizes[0]),
+  maxSize: kb(sizes.at(-1)!),
+  medianSize: median,
+  expressions: expressions.map((icon) => icon.title),
+});
+
+const title = localTitle(locale, p.titles(icons.length));
+const description = localDescription(locale, p.descriptions(icons.length));
+const crumbs = [
+  { name: m.common.crumbs.icons, path: href('/icons') },
+  { name: p.crumb, path: href(path) },
+];
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@graph': [
+    {
+      '@type': 'CollectionPage',
+      '@id': `${SITE}${href(path)}`,
+      url: `${SITE}${href(path)}`,
+      name: p.title,
+      description,
+      inLanguage: locale.hreflang,
+      isPartOf: { '@id': WEBSITE_ID },
+      mainEntity: itemListNode(popular, p.popular),
+    },
+    // The Dataset is described once, on the English page.
+    ...(locale.prefix ? [] : [{
+      '@type': 'Dataset',
+      name: p.datasetName,
+      description: p.datasetDescription(icons.length),
+      url: `${SITE}${href(path)}`,
+      license: 'https://opensource.org/license/mit/',
+      creator: { '@type': 'Organization', name: 'useAnimations', url: `${SITE}/` },
+      distribution: [{ '@type': 'DataDownload', encodingFormat: 'application/json', contentUrl: `${SITE}/icons.json` }],
+    }]),
+    breadcrumbNode(crumbs),
+    faqNode(faq),
+    websiteNode(),
+  ],
+};
+---
+
+<Layout title={title} description={description} path={href(path)} locale={locale} alternates={alternatesOf(path)} jsonLd={jsonLd}>
+  <div class="mx-auto max-w-6xl px-5 pt-10 sm:px-8">
+    <Breadcrumbs crumbs={crumbs} label={m.common.breadcrumb} />
+
+    <header class="mt-8 max-w-3xl">
+      <p class="text-sm font-medium text-accent">{p.badge(icons.length)}</p>
+      <h1 class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">{p.title}</h1>
+      <p class="mt-4 text-lg leading-relaxed text-muted">{p.intro}</p>
+    </header>
+
+    <section class="mt-12" aria-labelledby="popular-title">
+      <div class="flex flex-wrap items-baseline justify-between gap-3">
+        <h2 id="popular-title" class="text-lg font-semibold">{p.popular}</h2>
+        <a href={href('/icons')} class="text-sm text-muted hover:text-fg">{p.allIcons(icons.length)}</a>
+      </div>
+      <IconGrid class="mt-4" icons={popular} locale={locale} />
+    </section>
+
+    <div class="mt-16 max-w-3xl">
+      <section aria-labelledby="files-title">
+        <h2 id="files-title" class="text-2xl font-semibold tracking-tight">{p.filesTitle}</h2>
+        <p class="mt-3 leading-relaxed text-muted" set:html={p.filesIntroHtml} />
+        <CodeBlock
+          class="mt-4"
+          lang="bash"
+          code={`${SITE}/icons/<id>.json          # ${p.files.json}
+${SITE}/icons/<id>.zip           # ${p.files.zip}
+${SITE}/icons/<id>/<state>.svg   # ${p.files.svg}
+${SITE}/icons.json               # ${p.files.catalog}`}
+          track={{ code: 'files' }}
+          locale={locale}
+        />
+        <p class="mt-4 leading-relaxed text-muted" set:html={p.catalogHtml('/icons.json', median)} />
+      </section>
+
+      {
+        players.map((player) => (
+          <section id={player.id} class="mt-14 scroll-mt-24" aria-labelledby={`${player.id}-title`}>
+            <h2 id={`${player.id}-title`} class="text-2xl font-semibold tracking-tight">{p.players[player.id].title}</h2>
+            <p class="mt-3 leading-relaxed text-muted">{p.players[player.id].text}</p>
+            {player.blocks.map((block) => (
+              <CodeBlock class="mt-4" lang={block.lang} label={block.label} code={block.code} track={{ code: `lottie-${player.id}` }} locale={locale} />
+            ))}
+          </section>
+        ))
+      }
+
+      <section id="expressions" class="mt-14 scroll-mt-24" aria-labelledby="expressions-title">
+        <h2 id="expressions-title" class="text-2xl font-semibold tracking-tight">{p.expressionsTitle}</h2>
+        <p class="mt-3 leading-relaxed text-muted" set:html={p.expressionsHtml(expressions.length)} />
+        <IconGrid class="mt-4" icons={expressions} locale={locale} />
+      </section>
+    </div>
+
+    <FaqList class="mt-16" faq={faq} title={m.common.faq} />
+
+    <nav aria-labelledby="more-title" class="mt-16 border-t border-line pt-8">
+      <h2 id="more-title" class="text-lg font-semibold">{p.byCategory}</h2>
+      <ul class="mt-4 flex flex-wrap gap-2">
+        {
+          categories().map(({ meta, icons: group }) => (
+            <li>
+              <a href={href(categoryPath(meta))} class="inline-flex rounded-full border border-line px-3.5 py-1.5 text-sm text-muted transition hover:border-line-strong hover:text-fg">
+                {m.taxonomy.categories[meta.name].name} <span class="ml-1.5 text-subtle">{group.length}</span>
+              </a>
+            </li>
+          ))
+        }
+      </ul>
+    </nav>
+  </div>
+</Layout>
diff --git a/website/src/views/ShadcnIconsPage.astro b/website/src/views/ShadcnIconsPage.astro
new file mode 100644
index 0000000..8233849
--- /dev/null
+++ b/website/src/views/ShadcnIconsPage.astro
@@ -0,0 +1,155 @@
+---
+// The shadcn/ui hub (/shadcn-animated-icons) in any language. The code examples stay English.
+import Breadcrumbs from '../components/Breadcrumbs.astro';
+import CodeBlock from '../components/CodeBlock.astro';
+import FaqList from '../components/FaqList.astro';
+import IconGrid from '../components/IconGrid.astro';
+import { alternatesOf, type Locale, localize, t } from '../i18n';
+import Layout from '../layouts/Layout.astro';
+import {
+  breadcrumbNode,
+  categories,
+  categoryPath,
+  itemListNode,
+  localDescription,
+  localTitle,
+  pickIcons,
+} from '../lib/hubs';
+import { iconById, icons, shadcnCommand, shadcnExample, SITE, VERSION } from '../lib/icons';
+import { faqNode, websiteNode, WEBSITE_ID } from '../lib/seo';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+const m = t(locale);
+const p = m.pages.shadcn;
+const href = (path: string) => localize(path, locale);
+const path = '/shadcn-animated-icons';
+
+const popular = pickIcons([
+  'menu', 'check-box', 'toggle', 'visibility', 'heart', 'bookmark', 'star', 'trash',
+  'copy', 'download', 'search-to-x', 'settings', 'notification', 'refresh', 'send', 'sun',
+  'play-pause', 'volume', 'shopping-cart', 'alert-circle', 'arrow-right', 'external-link', 'github', 'plus-to-x',
+]);
+const menu = iconById.get('menu')!;
+const checkmark = iconById.get('checkmark')!;
+
+const componentsJson = `{
+  "registries": {
+    "@useanimations": "${SITE}/r/{name}.json"
+  }
+}`;
+const toggleExample = `"use client"
+
+import { useState } from "react"
+import { AnimatedMenu } from "@/components/animations/menu"
+import { Button } from "@/components/ui/button"
+
+export function MenuToggle() {
+  const [open, setOpen] = useState(false)
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      aria-label={open ? ${JSON.stringify(p.codeText.closeMenu)} : ${JSON.stringify(p.codeText.openMenu)}}
+      aria-expanded={open}
+      onClick={() => setOpen(!open)}
+    >
+      <AnimatedMenu size={20} active={open} />
+    </Button>
+  )
+}`;
+
+const faq = p.faq({ count: icons.length, version: VERSION });
+
+const title = localTitle(locale, p.titles(icons.length));
+const description = localDescription(locale, p.descriptions(icons.length));
+const crumbs = [
+  { name: m.common.crumbs.icons, path: href('/icons') },
+  { name: p.crumb, path: href(path) },
+];
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@graph': [
+    {
+      '@type': 'CollectionPage',
+      '@id': `${SITE}${href(path)}`,
+      url: `${SITE}${href(path)}`,
+      name: p.title,
+      description,
+      inLanguage: locale.hreflang,
+      isPartOf: { '@id': WEBSITE_ID },
+      mainEntity: itemListNode(popular, p.popularList),
+    },
+    breadcrumbNode(crumbs),
+    faqNode(faq),
+    websiteNode(),
+  ],
+};
+---
+
+<Layout title={title} description={description} path={href(path)} locale={locale} alternates={alternatesOf(path)} jsonLd={jsonLd}>
+  <div class="mx-auto max-w-6xl px-5 pt-10 sm:px-8">
+    <Breadcrumbs crumbs={crumbs} label={m.common.breadcrumb} />
+
+    <header class="mt-8 max-w-3xl">
+      <p class="text-sm font-medium text-accent">{p.badge(icons.length)}</p>
+      <h1 class="mt-3 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">{p.title}</h1>
+      <p class="mt-4 text-lg leading-relaxed text-muted">{p.intro}</p>
+    </header>
+
+    <div class="mt-12 max-w-3xl">
+      <section aria-labelledby="add-title">
+        <h2 id="add-title" class="text-2xl font-semibold tracking-tight">{p.addTitle}</h2>
+        <p class="mt-3 leading-relaxed text-muted">{p.addIntro}</p>
+        <CodeBlock class="mt-4" lang="bash" code={shadcnCommand(checkmark)} track={{ icon: checkmark.id, code: 'shadcn-command' }} locale={locale} />
+        <CodeBlock class="mt-3" lang="tsx" code={shadcnExample(checkmark.id, checkmark.component)} track={{ icon: checkmark.id, code: 'shadcn' }} locale={locale} />
+        <p class="mt-4 leading-relaxed text-muted" set:html={p.namingHtml} />
+      </section>
+
+      <section class="mt-14" aria-labelledby="namespace-title">
+        <h2 id="namespace-title" class="text-2xl font-semibold tracking-tight">{p.namespaceTitle}</h2>
+        <p class="mt-3 leading-relaxed text-muted" set:html={p.namespaceHtml} />
+        <CodeBlock class="mt-4" lang="json" code={componentsJson} track={{ code: 'components-json' }} locale={locale} />
+        <CodeBlock class="mt-3" lang="bash" code="npx shadcn@latest add @useanimations/menu @useanimations/heart @useanimations/loading" track={{ code: 'shadcn-namespace' }} locale={locale} />
+        <p class="mt-4 leading-relaxed text-muted" set:html={p.registryHtml('/r/registry.json')} />
+      </section>
+
+      <section class="mt-14" aria-labelledby="usage-title">
+        <h2 id="usage-title" class="text-2xl font-semibold tracking-tight">{p.usageTitle}</h2>
+        <p class="mt-3 leading-relaxed text-muted" set:html={p.usageHtml} />
+        <CodeBlock class="mt-3" lang="bash" code={shadcnCommand(menu)} track={{ icon: menu.id, code: 'shadcn-command' }} locale={locale} />
+        <CodeBlock class="mt-3" lang="tsx" code={toggleExample} track={{ icon: menu.id, code: 'shadcn' }} locale={locale} />
+        <p class="mt-4 leading-relaxed text-muted" set:html={p.colorHtml(href('/documentation#shadcn'))} />
+      </section>
+    </div>
+
+    <section class="mt-16" aria-labelledby="popular-title">
+      <div class="flex flex-wrap items-baseline justify-between gap-3">
+        <h2 id="popular-title" class="text-lg font-semibold">{p.popular}</h2>
+        <a href={href('/icons')} class="text-sm text-muted hover:text-fg">{p.allIcons(icons.length)}</a>
+      </div>
+      <p class="mt-2 text-sm text-muted">{p.popularNote}</p>
+      <IconGrid class="mt-4" icons={popular} locale={locale} />
+    </section>
+
+    <FaqList class="mt-16" faq={faq} title={m.common.faq} />
+
+    <nav aria-labelledby="more-title" class="mt-16 border-t border-line pt-8">
+      <h2 id="more-title" class="text-lg font-semibold">{p.byCategory}</h2>
+      <ul class="mt-4 flex flex-wrap gap-2">
+        {
+          categories().map(({ meta, icons: group }) => (
+            <li>
+              <a href={href(categoryPath(meta))} class="inline-flex rounded-full border border-line px-3.5 py-1.5 text-sm text-muted transition hover:border-line-strong hover:text-fg">
+                {m.taxonomy.categories[meta.name].name} <span class="ml-1.5 text-subtle">{group.length}</span>
+              </a>
+            </li>
+          ))
+        }
+      </ul>
+    </nav>
+  </div>
+</Layout>

From 0de7caa27cccef073aeaba1837c38d0891ffab54 Mon Sep 17 00:00:00 2001
From: Tuan Phung <16448321+tuanphungcz@users.noreply.github.com>
Date: Tue, 13 Oct 2026 21:19:27 +0900
Subject: [PATCH 4/9] Website: load only built languages; I18N_PREVIEW takes
 language codes

---
 website/src/i18n/index.ts   | 23 +++++++++++++++--------
 website/src/i18n/locales.ts | 11 +++++++----
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/website/src/i18n/index.ts b/website/src/i18n/index.ts
index 1e52979..ef7ab9b 100644
--- a/website/src/i18n/index.ts
+++ b/website/src/i18n/index.ts
@@ -1,18 +1,25 @@
-// Messages of a language: t(locale).hubs.category.title, etc.
-import { type Locale, localeOf } from './locales';
+// Messages of a language: t(locale).hubs.category.title, etc. Only built languages are loaded.
+import { BUILT, type Locale, localeOf } from './locales';
 import type { Messages } from './messages/en';
 
 export type { Messages };
 export * from './locales';
 
-const MESSAGES = import.meta.glob<Messages>('./messages/*/index.ts', {
-  eager: true,
-  import: 'messages',
-});
+const LOADERS = import.meta.glob<Messages>('./messages/*/index.ts', { import: 'messages' });
+
+const MESSAGES = new Map<string, Messages>(
+  await Promise.all(
+    BUILT.map(async (l): Promise<[string, Messages]> => {
+      const load = LOADERS[`./messages/${l.code}/index.ts`];
+      if (!load) throw new Error(`i18n: no messages for "${l.code}"`);
+      return [l.code, await load()];
+    })
+  )
+);
 
 export const t = (locale: Locale | string): Messages => {
   const code = typeof locale === 'string' ? locale : locale.code;
-  const messages = MESSAGES[`./messages/${localeOf(code).code}/index.ts`];
-  if (!messages) throw new Error(`i18n: no messages for "${code}"`);
+  const messages = MESSAGES.get(localeOf(code).code);
+  if (!messages) throw new Error(`i18n: "${code}" is not built`);
   return messages;
 };
diff --git a/website/src/i18n/locales.ts b/website/src/i18n/locales.ts
index ba4a71b..dec2a59 100644
--- a/website/src/i18n/locales.ts
+++ b/website/src/i18n/locales.ts
@@ -1,7 +1,7 @@
 // The languages of the site. English lives at the root; every other language has a path prefix
 // and translates the home page, the documentation, the licence page and the collection hubs. Icon
 // pages stay English. A language is built only when it's live, so an unfinished translation never
-// reaches a sitemap, an hreflang link or Google; I18N_PREVIEW=1 builds them all (PR previews).
+// reaches a sitemap, an hreflang link or Google; I18N_PREVIEW previews them (see BUILT).
 
 export type LocaleCode =
   | 'en'
@@ -72,10 +72,13 @@ export const LOCALES: Locale[] = [
   locale('ru', 'ru', 'Русский', 'ru_RU', 3, false),
 ];
 
-const preview = process.env.I18N_PREVIEW === '1';
+// I18N_PREVIEW=1 builds every language, I18N_PREVIEW=de,cs the live ones plus those.
+const preview = (process.env.I18N_PREVIEW ?? '').split(',').filter(Boolean);
 
-/** Languages that are built: the live ones, or all of them for a preview. */
-export const BUILT = LOCALES.filter((l) => l.live || preview);
+/** Languages that are built: the live ones plus any previewed. */
+export const BUILT = LOCALES.filter(
+  (l) => l.live || preview.includes('1') || preview.includes(l.code)
+);
 /** Built languages other than English: the [locale] routes. */
 export const TRANSLATED = BUILT.filter((l) => l.code !== 'en');
 

From b93ec15d1cf6b7c0f15c83b82f47c156a629954f Mon Sep 17 00:00:00 2001
From: Tuan Phung <16448321+tuanphungcz@users.noreply.github.com>
Date: Tue, 13 Oct 2026 21:19:59 +0900
Subject: [PATCH 5/9] CI: website previews build every language

---
 .github/workflows/ci.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9ac30c2..67518d4 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -133,7 +133,10 @@ jobs:
           node-version: 24
           cache: npm
       - run: npm ci
+      # Previews build every language, including those not live yet (website/src/i18n/locales.ts).
       - run: npm run website:build
+        env:
+          I18N_PREVIEW: '1'
       # Keep previews out of search engines.
       - run: |
           printf '\n/*\n  X-Robots-Tag: noindex\n' >> website/dist/_headers

From 9c0f86820175fd3c01bf50477e2c73c3cce07caf Mon Sep 17 00:00:00 2001
From: Tuan Phung <16448321+tuanphungcz@users.noreply.github.com>
Date: Tue, 13 Oct 2026 21:38:37 +0900
Subject: [PATCH 6/9] Website: translations for zh, es, pt-BR, de, fr, ja, ko,
 cs, vi, id, tr and ru

---
 website/src/content/documentation.cs.md     | 454 ++++++++++++++++++++
 website/src/content/documentation.de.md     | 454 ++++++++++++++++++++
 website/src/content/documentation.es.md     | 454 ++++++++++++++++++++
 website/src/content/documentation.fr.md     | 454 ++++++++++++++++++++
 website/src/content/documentation.id.md     | 454 ++++++++++++++++++++
 website/src/content/documentation.ja.md     | 454 ++++++++++++++++++++
 website/src/content/documentation.ko.md     | 454 ++++++++++++++++++++
 website/src/content/documentation.pt-br.md  | 454 ++++++++++++++++++++
 website/src/content/documentation.ru.md     | 454 ++++++++++++++++++++
 website/src/content/documentation.tr.md     | 454 ++++++++++++++++++++
 website/src/content/documentation.vi.md     | 454 ++++++++++++++++++++
 website/src/content/documentation.zh.md     | 454 ++++++++++++++++++++
 website/src/i18n/locales.ts                 |   3 +
 website/src/i18n/messages/cs/common.ts      |  46 ++
 website/src/i18n/messages/cs/docs.ts        |  37 ++
 website/src/i18n/messages/cs/home.ts        | 185 ++++++++
 website/src/i18n/messages/cs/hubs.ts        | 192 +++++++++
 website/src/i18n/messages/cs/index.ts       |  11 +
 website/src/i18n/messages/cs/islands.ts     |  51 +++
 website/src/i18n/messages/cs/licence.ts     |  25 ++
 website/src/i18n/messages/cs/pages.ts       | 253 +++++++++++
 website/src/i18n/messages/cs/taxonomy.ts    | 415 ++++++++++++++++++
 website/src/i18n/messages/de/common.ts      |  46 ++
 website/src/i18n/messages/de/docs.ts        |  35 ++
 website/src/i18n/messages/de/home.ts        | 171 ++++++++
 website/src/i18n/messages/de/hubs.ts        | 202 +++++++++
 website/src/i18n/messages/de/index.ts       |  12 +
 website/src/i18n/messages/de/islands.ts     |  51 +++
 website/src/i18n/messages/de/licence.ts     |  27 ++
 website/src/i18n/messages/de/pages.ts       | 242 +++++++++++
 website/src/i18n/messages/de/taxonomy.ts    | 385 +++++++++++++++++
 website/src/i18n/messages/es/common.ts      |  47 ++
 website/src/i18n/messages/es/docs.ts        |  35 ++
 website/src/i18n/messages/es/home.ts        | 172 ++++++++
 website/src/i18n/messages/es/hubs.ts        | 191 ++++++++
 website/src/i18n/messages/es/index.ts       |  12 +
 website/src/i18n/messages/es/islands.ts     |  52 +++
 website/src/i18n/messages/es/licence.ts     |  27 ++
 website/src/i18n/messages/es/pages.ts       | 244 +++++++++++
 website/src/i18n/messages/es/taxonomy.ts    | 387 +++++++++++++++++
 website/src/i18n/messages/fr/common.ts      |  46 ++
 website/src/i18n/messages/fr/docs.ts        |  35 ++
 website/src/i18n/messages/fr/home.ts        | 170 ++++++++
 website/src/i18n/messages/fr/hubs.ts        | 179 ++++++++
 website/src/i18n/messages/fr/index.ts       |  11 +
 website/src/i18n/messages/fr/islands.ts     |  51 +++
 website/src/i18n/messages/fr/licence.ts     |  26 ++
 website/src/i18n/messages/fr/pages.ts       | 245 +++++++++++
 website/src/i18n/messages/fr/taxonomy.ts    | 391 +++++++++++++++++
 website/src/i18n/messages/id/common.ts      |  45 ++
 website/src/i18n/messages/id/docs.ts        |  34 ++
 website/src/i18n/messages/id/home.ts        | 172 ++++++++
 website/src/i18n/messages/id/hubs.ts        | 162 +++++++
 website/src/i18n/messages/id/index.ts       |  12 +
 website/src/i18n/messages/id/islands.ts     |  51 +++
 website/src/i18n/messages/id/licence.ts     |  26 ++
 website/src/i18n/messages/id/pages.ts       | 234 ++++++++++
 website/src/i18n/messages/id/taxonomy.ts    | 385 +++++++++++++++++
 website/src/i18n/messages/ja/common.ts      |  45 ++
 website/src/i18n/messages/ja/docs.ts        |  35 ++
 website/src/i18n/messages/ja/home.ts        | 171 ++++++++
 website/src/i18n/messages/ja/hubs.ts        | 161 +++++++
 website/src/i18n/messages/ja/index.ts       |  11 +
 website/src/i18n/messages/ja/islands.ts     |  51 +++
 website/src/i18n/messages/ja/licence.ts     |  25 ++
 website/src/i18n/messages/ja/pages.ts       | 242 +++++++++++
 website/src/i18n/messages/ja/taxonomy.ts    | 385 +++++++++++++++++
 website/src/i18n/messages/ko/common.ts      |  46 ++
 website/src/i18n/messages/ko/docs.ts        |  35 ++
 website/src/i18n/messages/ko/home.ts        | 174 ++++++++
 website/src/i18n/messages/ko/hubs.ts        | 182 ++++++++
 website/src/i18n/messages/ko/index.ts       |  11 +
 website/src/i18n/messages/ko/islands.ts     |  52 +++
 website/src/i18n/messages/ko/licence.ts     |  26 ++
 website/src/i18n/messages/ko/pages.ts       | 239 +++++++++++
 website/src/i18n/messages/ko/taxonomy.ts    | 385 +++++++++++++++++
 website/src/i18n/messages/pt-br/common.ts   |  45 ++
 website/src/i18n/messages/pt-br/docs.ts     |  34 ++
 website/src/i18n/messages/pt-br/home.ts     | 169 ++++++++
 website/src/i18n/messages/pt-br/hubs.ts     | 179 ++++++++
 website/src/i18n/messages/pt-br/index.ts    |  11 +
 website/src/i18n/messages/pt-br/islands.ts  |  51 +++
 website/src/i18n/messages/pt-br/licence.ts  |  27 ++
 website/src/i18n/messages/pt-br/pages.ts    | 243 +++++++++++
 website/src/i18n/messages/pt-br/taxonomy.ts | 402 +++++++++++++++++
 website/src/i18n/messages/ru/common.ts      |  46 ++
 website/src/i18n/messages/ru/docs.ts        |  44 ++
 website/src/i18n/messages/ru/home.ts        | 174 ++++++++
 website/src/i18n/messages/ru/hubs.ts        | 192 +++++++++
 website/src/i18n/messages/ru/index.ts       |  12 +
 website/src/i18n/messages/ru/islands.ts     |  51 +++
 website/src/i18n/messages/ru/licence.ts     |  26 ++
 website/src/i18n/messages/ru/pages.ts       | 278 ++++++++++++
 website/src/i18n/messages/ru/taxonomy.ts    | 407 ++++++++++++++++++
 website/src/i18n/messages/tr/common.ts      |  46 ++
 website/src/i18n/messages/tr/docs.ts        |  34 ++
 website/src/i18n/messages/tr/home.ts        | 170 ++++++++
 website/src/i18n/messages/tr/hubs.ts        | 168 ++++++++
 website/src/i18n/messages/tr/index.ts       |  12 +
 website/src/i18n/messages/tr/islands.ts     |  51 +++
 website/src/i18n/messages/tr/licence.ts     |  25 ++
 website/src/i18n/messages/tr/pages.ts       | 239 +++++++++++
 website/src/i18n/messages/tr/taxonomy.ts    | 385 +++++++++++++++++
 website/src/i18n/messages/vi/common.ts      |  46 ++
 website/src/i18n/messages/vi/docs.ts        |  35 ++
 website/src/i18n/messages/vi/home.ts        | 170 ++++++++
 website/src/i18n/messages/vi/hubs.ts        | 160 +++++++
 website/src/i18n/messages/vi/index.ts       |  12 +
 website/src/i18n/messages/vi/islands.ts     |  52 +++
 website/src/i18n/messages/vi/licence.ts     |  28 ++
 website/src/i18n/messages/vi/pages.ts       | 233 ++++++++++
 website/src/i18n/messages/vi/taxonomy.ts    | 387 +++++++++++++++++
 website/src/i18n/messages/zh/common.ts      |  46 ++
 website/src/i18n/messages/zh/docs.ts        |  35 ++
 website/src/i18n/messages/zh/home.ts        | 168 ++++++++
 website/src/i18n/messages/zh/hubs.ts        | 154 +++++++
 website/src/i18n/messages/zh/index.ts       |  14 +-
 website/src/i18n/messages/zh/islands.ts     |  52 +++
 website/src/i18n/messages/zh/licence.ts     |  26 ++
 website/src/i18n/messages/zh/pages.ts       | 224 ++++++++++
 website/src/i18n/messages/zh/taxonomy.ts    | 374 ++++++++++++++++
 website/src/views/CategoryPage.astro        |   2 +-
 website/src/views/InteractionPage.astro     |   2 +-
 123 files changed, 19292 insertions(+), 4 deletions(-)
 create mode 100644 website/src/content/documentation.cs.md
 create mode 100644 website/src/content/documentation.de.md
 create mode 100644 website/src/content/documentation.es.md
 create mode 100644 website/src/content/documentation.fr.md
 create mode 100644 website/src/content/documentation.id.md
 create mode 100644 website/src/content/documentation.ja.md
 create mode 100644 website/src/content/documentation.ko.md
 create mode 100644 website/src/content/documentation.pt-br.md
 create mode 100644 website/src/content/documentation.ru.md
 create mode 100644 website/src/content/documentation.tr.md
 create mode 100644 website/src/content/documentation.vi.md
 create mode 100644 website/src/content/documentation.zh.md
 create mode 100644 website/src/i18n/messages/cs/common.ts
 create mode 100644 website/src/i18n/messages/cs/docs.ts
 create mode 100644 website/src/i18n/messages/cs/home.ts
 create mode 100644 website/src/i18n/messages/cs/hubs.ts
 create mode 100644 website/src/i18n/messages/cs/index.ts
 create mode 100644 website/src/i18n/messages/cs/islands.ts
 create mode 100644 website/src/i18n/messages/cs/licence.ts
 create mode 100644 website/src/i18n/messages/cs/pages.ts
 create mode 100644 website/src/i18n/messages/cs/taxonomy.ts
 create mode 100644 website/src/i18n/messages/de/common.ts
 create mode 100644 website/src/i18n/messages/de/docs.ts
 create mode 100644 website/src/i18n/messages/de/home.ts
 create mode 100644 website/src/i18n/messages/de/hubs.ts
 create mode 100644 website/src/i18n/messages/de/index.ts
 create mode 100644 website/src/i18n/messages/de/islands.ts
 create mode 100644 website/src/i18n/messages/de/licence.ts
 create mode 100644 website/src/i18n/messages/de/pages.ts
 create mode 100644 website/src/i18n/messages/de/taxonomy.ts
 create mode 100644 website/src/i18n/messages/es/common.ts
 create mode 100644 website/src/i18n/messages/es/docs.ts
 create mode 100644 website/src/i18n/messages/es/home.ts
 create mode 100644 website/src/i18n/messages/es/hubs.ts
 create mode 100644 website/src/i18n/messages/es/index.ts
 create mode 100644 website/src/i18n/messages/es/islands.ts
 create mode 100644 website/src/i18n/messages/es/licence.ts
 create mode 100644 website/src/i18n/messages/es/pages.ts
 create mode 100644 website/src/i18n/messages/es/taxonomy.ts
 create mode 100644 website/src/i18n/messages/fr/common.ts
 create mode 100644 website/src/i18n/messages/fr/docs.ts
 create mode 100644 website/src/i18n/messages/fr/home.ts
 create mode 100644 website/src/i18n/messages/fr/hubs.ts
 create mode 100644 website/src/i18n/messages/fr/index.ts
 create mode 100644 website/src/i18n/messages/fr/islands.ts
 create mode 100644 website/src/i18n/messages/fr/licence.ts
 create mode 100644 website/src/i18n/messages/fr/pages.ts
 create mode 100644 website/src/i18n/messages/fr/taxonomy.ts
 create mode 100644 website/src/i18n/messages/id/common.ts
 create mode 100644 website/src/i18n/messages/id/docs.ts
 create mode 100644 website/src/i18n/messages/id/home.ts
 create mode 100644 website/src/i18n/messages/id/hubs.ts
 create mode 100644 website/src/i18n/messages/id/index.ts
 create mode 100644 website/src/i18n/messages/id/islands.ts
 create mode 100644 website/src/i18n/messages/id/licence.ts
 create mode 100644 website/src/i18n/messages/id/pages.ts
 create mode 100644 website/src/i18n/messages/id/taxonomy.ts
 create mode 100644 website/src/i18n/messages/ja/common.ts
 create mode 100644 website/src/i18n/messages/ja/docs.ts
 create mode 100644 website/src/i18n/messages/ja/home.ts
 create mode 100644 website/src/i18n/messages/ja/hubs.ts
 create mode 100644 website/src/i18n/messages/ja/index.ts
 create mode 100644 website/src/i18n/messages/ja/islands.ts
 create mode 100644 website/src/i18n/messages/ja/licence.ts
 create mode 100644 website/src/i18n/messages/ja/pages.ts
 create mode 100644 website/src/i18n/messages/ja/taxonomy.ts
 create mode 100644 website/src/i18n/messages/ko/common.ts
 create mode 100644 website/src/i18n/messages/ko/docs.ts
 create mode 100644 website/src/i18n/messages/ko/home.ts
 create mode 100644 website/src/i18n/messages/ko/hubs.ts
 create mode 100644 website/src/i18n/messages/ko/index.ts
 create mode 100644 website/src/i18n/messages/ko/islands.ts
 create mode 100644 website/src/i18n/messages/ko/licence.ts
 create mode 100644 website/src/i18n/messages/ko/pages.ts
 create mode 100644 website/src/i18n/messages/ko/taxonomy.ts
 create mode 100644 website/src/i18n/messages/pt-br/common.ts
 create mode 100644 website/src/i18n/messages/pt-br/docs.ts
 create mode 100644 website/src/i18n/messages/pt-br/home.ts
 create mode 100644 website/src/i18n/messages/pt-br/hubs.ts
 create mode 100644 website/src/i18n/messages/pt-br/index.ts
 create mode 100644 website/src/i18n/messages/pt-br/islands.ts
 create mode 100644 website/src/i18n/messages/pt-br/licence.ts
 create mode 100644 website/src/i18n/messages/pt-br/pages.ts
 create mode 100644 website/src/i18n/messages/pt-br/taxonomy.ts
 create mode 100644 website/src/i18n/messages/ru/common.ts
 create mode 100644 website/src/i18n/messages/ru/docs.ts
 create mode 100644 website/src/i18n/messages/ru/home.ts
 create mode 100644 website/src/i18n/messages/ru/hubs.ts
 create mode 100644 website/src/i18n/messages/ru/index.ts
 create mode 100644 website/src/i18n/messages/ru/islands.ts
 create mode 100644 website/src/i18n/messages/ru/licence.ts
 create mode 100644 website/src/i18n/messages/ru/pages.ts
 create mode 100644 website/src/i18n/messages/ru/taxonomy.ts
 create mode 100644 website/src/i18n/messages/tr/common.ts
 create mode 100644 website/src/i18n/messages/tr/docs.ts
 create mode 100644 website/src/i18n/messages/tr/home.ts
 create mode 100644 website/src/i18n/messages/tr/hubs.ts
 create mode 100644 website/src/i18n/messages/tr/index.ts
 create mode 100644 website/src/i18n/messages/tr/islands.ts
 create mode 100644 website/src/i18n/messages/tr/licence.ts
 create mode 100644 website/src/i18n/messages/tr/pages.ts
 create mode 100644 website/src/i18n/messages/tr/taxonomy.ts
 create mode 100644 website/src/i18n/messages/vi/common.ts
 create mode 100644 website/src/i18n/messages/vi/docs.ts
 create mode 100644 website/src/i18n/messages/vi/home.ts
 create mode 100644 website/src/i18n/messages/vi/hubs.ts
 create mode 100644 website/src/i18n/messages/vi/index.ts
 create mode 100644 website/src/i18n/messages/vi/islands.ts
 create mode 100644 website/src/i18n/messages/vi/licence.ts
 create mode 100644 website/src/i18n/messages/vi/pages.ts
 create mode 100644 website/src/i18n/messages/vi/taxonomy.ts
 create mode 100644 website/src/i18n/messages/zh/common.ts
 create mode 100644 website/src/i18n/messages/zh/docs.ts
 create mode 100644 website/src/i18n/messages/zh/home.ts
 create mode 100644 website/src/i18n/messages/zh/hubs.ts
 create mode 100644 website/src/i18n/messages/zh/islands.ts
 create mode 100644 website/src/i18n/messages/zh/licence.ts
 create mode 100644 website/src/i18n/messages/zh/pages.ts
 create mode 100644 website/src/i18n/messages/zh/taxonomy.ts

diff --git a/website/src/content/documentation.cs.md b/website/src/content/documentation.cs.md
new file mode 100644
index 0000000..7472d7d
--- /dev/null
+++ b/website/src/content/documentation.cs.md
@@ -0,0 +1,454 @@
+# Dokumentace {#documentation}
+
+useAnimations je bezplatná knihovna 300 animovaných ikon pro React pod licencí MIT. Každá ikona má vestavěnou interakci: běží ve smyčce, přehraje se po kliknutí nebo při najetí myší. Používat je můžete přes balíček `react-useanimations`, nebo si je přidat pomocí shadcn CLI.
+
+<div id="quick-start-react"></div>
+
+## Rychlý start {#quick-start}
+
+```bash
+npm install react-useanimations
+```
+
+```jsx
+import UseAnimations from 'react-useanimations';
+import github from 'react-useanimations/lib/github';
+
+export default function Header() {
+  return <UseAnimations animation={github} size={32} />;
+}
+```
+
+Ikona přebírá barvu textu a přehrává svou vlastní interakci: `github` běží ve smyčce, dokud je na ní kurzor. Balíček nemá žádné závislosti; ikony kreslí jako SVG vestavěný přehrávač (8 kB po gzipu) a každá ikona je samostatný modul, takže bundle obsahuje jen ikony, které naimportujete.
+
+## Interakce {#interactions}
+
+Každá ikona má interakci, pro kterou byla navržena. Změníte ji propem `interaction`.
+
+| Interakce      | Co dělá                                                             | Příklady ikon                        |
+| -------------- | ------------------------------------------------------------------- | ------------------------------------ |
+| `loop`         | Přehrává se nepřetržitě.                                            | `loading`, `activity`, `alertCircle` |
+| `click-toggle` | Kliknutím se přepíná mezi dvěma stavy (dopředu, pak pozpátku).      | `menu`, `checkBox`, `playPause`      |
+| `click-replay` | Při každém kliknutí se přehraje od začátku.                         | `download`, `refresh`, `send`        |
+| `hover`        | Při najetí myší se přehraje dopředu, při odjetí pozpátku.           | `archive`, `settings`, `trash`       |
+| `hover-loop`   | Při hoveru běží ve smyčce a po odjetí myši dokončí aktuální cyklus. | `github`, `twitter`, `dribbble`      |
+| `hover-replay` | Při najetí myší se jednou přehraje od začátku.                      | `arrowRight`, `bluetooth`, `zap`     |
+
+Když uživatel preferuje omezený pohyb, ikony zůstanou v klidu: smyčky ukážou svůj první snímek, animace při hoveru a po kliknutí se nepřehrají a přepínače přejdou do nového stavu okamžitě.
+
+<div id="react"></div>
+
+## Props {#props}
+
+```jsx
+<UseAnimations animation={github} size={56} strokeColor="#4b5cff" style={{ padding: 8 }} />
+```
+
+| Prop          | Výchozí hodnota  | Popis                                                                                                                       |
+| ------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `animation`   | —                | Ikona naimportovaná z `react-useanimations/lib/<name>`, nebo `{ animationData, interaction }` pro vlastní animaci.          |
+| `size`        | `24`             | Šířka a výška; čísla jsou pixely, řetězce jakákoli CSS délka, například `'1.5em'`.                                          |
+| `strokeColor` | `'currentColor'` | Barva tahů. Ve výchozím stavu ikona přebírá barvu textu.                                                                    |
+| `fillColor`   | `strokeColor`    | Barva vyplněných částí, např. srdce po lajknutí.                                                                            |
+| `interaction` | podle ikony      | `'loop'`, `'click-toggle'`, `'click-replay'`, `'hover'`, `'hover-loop'` nebo `'hover-replay'`.                              |
+| `active`      | —                | Pro ikony `click-toggle`: `true` zobrazí koncový stav. Řízený režim: nastavujte ho v `onClick`, kliknutí ho sama nepřepnou. |
+| `autoplay`    | podle ikony      | `true` pro ikony `loop`, pokud uživatel nepreferuje omezený pohyb.                                                          |
+| `loop`        | podle ikony      | `true` pro ikony `loop` a `hover-loop`.                                                                                     |
+| `speed`       | `1`              | Rychlost přehrávání.                                                                                                        |
+| `render`      | —                | Render prop pro vlastní obal, viz [Ikona ve skutečném tlačítku](#wrap-the-icon-in-a-real-button).                           |
+
+Všechny ostatní props (`className`, `aria-label`, `onClick`, …) dostane obalový `<span>`. Vaše event handlery se spustí před handlery animace; voláním `event.preventDefault()` animaci přeskočíte.
+
+## Import ikon {#importing-icons}
+
+Každou ikonu importujte z `react-useanimations/lib/<name>`, nebo jich naimportujte víc najednou z `react-useanimations/icons`:
+
+```jsx
+import { github, heart, menu } from 'react-useanimations/icons';
+```
+
+Produkční build v obou případech obsahuje jen ikony, které používáte. Dev servery a test runnery ale tree-shaking nedělají, takže tam `react-useanimations/icons` načte všechny ikony; pokud vám na tom záleží, dejte přednost `lib/<name>`. `delete` a `package` jsou rezervovaná slova: importujte je jako `deleteIcon` a `packageIcon`.
+
+## Řízený přepínač {#controlled-toggle}
+
+```jsx
+import { useState } from 'react';
+import UseAnimations from 'react-useanimations';
+import menu from 'react-useanimations/lib/menu';
+
+export function MenuButton() {
+  const [open, setOpen] = useState(false);
+  return (
+    <UseAnimations
+      animation={menu}
+      size={40}
+      active={open} // animuje se i tehdy, když se `open` změní jinde
+      onClick={() => setOpen(!open)}
+    />
+  );
+}
+```
+
+## Ikona ve skutečném tlačítku {#wrap-the-icon-in-a-real-button}
+
+U klikatelných ikon dejte kolem ikony pomocí propu `render` fokusovatelný prvek: `eventProps` patří na váš prvek a `animationProps` na `<span>` uvnitř něj. Animace na hover se pak přehrají i ve chvíli, kdy tlačítko získá fokus z klávesnice.
+
+```jsx
+import heart from 'react-useanimations/lib/heart';
+
+<UseAnimations
+  animation={heart}
+  size={32}
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Add to favorites" {...eventProps}>
+      <span {...animationProps} />
+    </button>
+  )}
+/>;
+```
+
+<div id="customize"></div>
+
+## Velikost a barva {#size--color}
+
+Ikony jsou lineární, nakreslené na plátně 24 nebo 32 px, a zůstanou ostré v jakékoli velikosti: `size` nastavte na počet pixelů nebo na libovolnou CSS délku.
+
+Tahy používají `currentColor`, takže ikony samy převezmou barvu textu, hover stavy i tmavý režim. Barvu změníte pomocí `strokeColor` a `fillColor`, přes CSS `color`, nebo nastylujte přímo cesty (paths): vestavěné pravidlo má nulovou specificitu, takže vaše CSS vždy vyhraje.
+
+Některé ikony mají v sobě vyříznutou mezeru (lomítko u `visibility`, `microphone`, `video`, `volume` a `notification`, fajfka u `download`, kroužek kolem odznaku u `notification3`). Mezera přebírá pozadí stránky: na světlých stránkách je bílá, na stránkách s `color-scheme: dark` tmavá. Pro jiná pozadí ji nastavte CSS proměnnou `--ua-knockout`, např. `body { --ua-knockout: #0f172a; }`.
+
+```jsx
+// Tailwind: barva a tloušťka tahu
+<UseAnimations animation={github} className="text-indigo-500 [&_path]:stroke-[3]" />
+```
+
+## Next.js a vykreslování na serveru {#nextjs-and-server-rendering}
+
+Komponenta je označená `'use client'` a animaci kreslí až v prohlížeči, takže ji můžete vykreslit ze server komponent i v SSR frameworcích (Next.js, Remix, Astro) bez `dynamic(…, { ssr: false })`. Moduly ikon jsou obyčejná data, takže je server komponenty mohou importovat a předávat jako props.
+
+<div id="shadcn"></div>
+
+## shadcn/ui {#shadcnui}
+
+Všechny ikony jsou také v [registru shadcn](https://ui.shadcn.com/docs/registry). CLI přidá hotovou komponentu a nainstaluje `react-useanimations`:
+
+```bash
+npx shadcn@latest add https://useanimations.com/r/checkmark.json
+```
+
+```tsx
+import { AnimatedCheckmark } from '@/components/animations/checkmark';
+
+<AnimatedCheckmark size={24} />;
+```
+
+Komponenta se jmenuje `Animated` + id ikony v PascalCase (`check-box` → `AnimatedCheckBox`), uloží se do `components/animations/<id>.tsx` a přijímá stejné props jako `UseAnimations`. Index registru najdete na [/r/registry.json](/r/registry.json). Pokud chcete používat krátký zápis `npx shadcn@latest add @useanimations/checkmark`, přidejte registr do `components.json`:
+
+```json
+{
+  "registries": {
+    "@useanimations": "https://useanimations.com/r/{name}.json"
+  }
+}
+```
+
+## Vlastní animace {#your-own-animation}
+
+```jsx
+import animationData from './my-animation.json';
+
+<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
+```
+
+Vaše animace musí být Lottie JSON soubor, tedy stejný formát, jaký používají ikony. Přehrávač podporuje to, co ikony potřebují: tvarové vrstvy, prekompozice, null vrstvy a parenting, cesty, obdélníky, elipsy, tahy, výplně, trim paths, masky, klíčové snímky s easingem, hold klíčové snímky a pohybové cesty a výrazy (expressions) `loopOut()` a `wiggle()`. Nic dalšího, například přechody, textové a obrázkové vrstvy, efekty a matte, se nevykreslí; na nepodporované vrstvy, tvary a výrazy upozorní konzole.
+
+<div id="direct-urls"></div><div id="download"></div>
+
+## Soubory a icons.json {#files--iconsjson}
+
+Každou ikonu si můžete také stáhnout, a to z její stránky (v angličtině) nebo ze stálých URL s povoleným CORS:
+
+| Soubor                     | URL                                                |
+| -------------------------- | -------------------------------------------------- |
+| Animace (Lottie JSON)      | `https://useanimations.com/icons/<id>.json`        |
+| Statické SVG každého stavu | `https://useanimations.com/icons/<id>/<state>.svg` |
+| ZIP s JSON a SVG soubory   | `https://useanimations.com/icons/<id>.zip`         |
+| Stránka ikony              | `https://useanimations.com/icons/<id>`             |
+| Katalog všech ikon         | `https://useanimations.com/icons.json`             |
+
+[icons.json](/icons.json) obsahuje všechny ikony s jejich id, názvem, kategorií, klíčovými slovy pro hledání, interakcí, URL souborů, velikostí a délkou, importem z `react-useanimations` a příkazem pro shadcn. Stejná data obsahuje i npm balíček: `react-useanimations/catalog.json` (metadata), `react-useanimations/icons` (animace) a `react-useanimations/svg.json` (statická SVG).
+
+<div id="without-react"></div>
+
+## Použití bez Reactu {#use-without-react}
+
+Ikony jsou standardní Lottie JSON, takže je přehraje jakýkoli Lottie přehrávač, ať už z `https://useanimations.com/icons/<id>.json`, nebo z kopie ve vašem projektu. Mimo React si interakci musíte zapojit sami. Další přehrávače a příklady najdete na stránce [Lottie ikony](/lottie-icons).
+
+Některé ikony používají výrazy (expressions) z After Effects (`loopOut()`, `wiggle()`); v [icons.json](/icons.json) je označuje `requiresFullPlayer`. Na webu potřebují plný build lottie-web, ne `lottie_light`, a nativní přehrávače výrazy nevyhodnocují.
+
+<div id="html"></div><div id="interactions-web"></div>
+
+### HTML a JavaScript {#html-and-javascript}
+
+```html
+<div id="icon" style="width: 48px; height: 48px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
+<script>
+  const el = document.getElementById('icon');
+  const animation = lottie.loadAnimation({
+    container: el,
+    renderer: 'svg',
+    loop: false,
+    autoplay: false,
+    path: 'https://useanimations.com/icons/archive.json',
+  });
+  // hover: dopředu při najetí, pozpátku při odjetí
+  el.addEventListener('mouseenter', () => {
+    animation.setDirection(1);
+    animation.play();
+  });
+  el.addEventListener('mouseleave', () => {
+    animation.setDirection(-1);
+    animation.play();
+  });
+</script>
+```
+
+Se SVG rendererem může ikona přebírat barvu textu stejně jako React komponenta:
+
+```css
+#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) {
+  stroke: currentColor;
+}
+#icon path[fill='rgb(0,0,0)'] {
+  fill: currentColor;
+}
+```
+
+<div id="vue"></div>
+
+### Vue {#vue}
+
+```vue
+<script setup>
+import lottie from 'lottie-web';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+const el = ref(null);
+let animation;
+onMounted(() => {
+  animation = lottie.loadAnimation({
+    container: el.value,
+    renderer: 'svg',
+    loop: true,
+    autoplay: true,
+    path: 'https://useanimations.com/icons/loading.json',
+  });
+});
+onBeforeUnmount(() => animation?.destroy());
+</script>
+
+<template>
+  <div ref="el" style="width: 48px; height: 48px" />
+</template>
+```
+
+### React Native {#react-native}
+
+```jsx
+import LottieView from 'lottie-react-native';
+
+<LottieView source={require('./loading.json')} autoPlay loop style={{ width: 48, height: 48 }} />;
+```
+
+<div id="ios"></div>
+
+### iOS {#ios}
+
+S knihovnou [lottie-ios](https://github.com/airbnb/lottie-ios) a JSON souborem v bundlu aplikace:
+
+```swift
+import Lottie
+import SwiftUI
+
+LottieView(animation: .named("loading"))
+  .looping()
+  .frame(width: 48, height: 48)
+```
+
+<div id="android"></div>
+
+### Android {#android}
+
+S knihovnou [lottie-android](https://github.com/airbnb/lottie-android) v Jetpack Compose a JSON souborem v `res/raw`:
+
+```kotlin
+val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
+LottieAnimation(composition, iterations = LottieConstants.IterateForever, modifier = Modifier.size(48.dp))
+```
+
+### Flutter {#flutter}
+
+S balíčkem [lottie](https://pub.dev/packages/lottie):
+
+```dart
+Lottie.asset('assets/loading.json', width: 48, height: 48)
+```
+
+<div id="performance"></div><div id="accessibility"></div>
+
+## Výkon a přístupnost {#performance--accessibility}
+
+- **Malá velikost:** přehrávač má po gzipu 8 kB a žádné závislosti, ikona má 1 až 15 kB (medián 2 kB).
+- **Líné vykreslování:** animace se kreslí až v prohlížeči, po vykreslení stránky; automaticky spuštěné smyčky se pozastaví, když je odscrollujete mimo obrazovku, a při unmountu se vše uklidí.
+- **Ve výchozím stavu dekorativní:** ikony jsou před čtečkami obrazovky skryté (`aria-hidden`), dokud nepředáte `aria-label`, se kterým je čtečka ohlásí jako obrázek. U ovládacích prvků, které obsahují jen ikonu, použijte skutečný `<button>` s `aria-label` (viz [výše](#wrap-the-icon-in-a-real-button)) a stav přepínače vyjádřete pomocí `aria-pressed` nebo `aria-expanded`.
+- **Omezený pohyb a dotyk:** ikony respektují `prefers-reduced-motion` a klepnutí na dotykové obrazovce hover animace nespouštějí.
+
+<div id="agents"></div>
+
+## AI agenti pro programování {#ai-coding-agents}
+
+Agenti mohou vybírat ikony podle klíčového slova nebo interakce z [icons.json](/icons.json), případně z `react-useanimations/catalog.json` uvnitř balíčku, a použít import nebo příkaz pro shadcn, který tam najdou. Typové definice každého importu ikony navíc obsahují její název, klíčová slova, interakci a náhled. Tato dokumentace je k dispozici také jako Markdown na [/documentation.md](/documentation.md) (v angličtině) a [/llms.txt](/llms.txt) obsahuje rejstřík celého webu.
+
+## Přechod z v2 {#upgrading-from-v2}
+
+Pro většinu aplikací znamená upgrade jen instalaci v3: komponenta, importy `react-useanimations/lib/<name>` i všech 79 ikon z v2 zůstávají stejné. Projděte kroky níže, které se týkají vašeho kódu.
+
+### 1. Instalace v3 {#1-install-v3}
+
+v3 vyžaduje React 18 nebo novější a nemá žádné závislosti. Odinstalujte i lottie-web, pokud ho ve vaší aplikaci nepoužívá nic jiného.
+
+```bash
+npm install react-useanimations@3
+npm uninstall lottie-web
+```
+
+### 2. `reverse` nahraďte `active` {#2-replace-reverse-with-active}
+
+`active` je plně řízený: ikona se animuje, když se `active` změní, a samotné kliknutí ji nepřepne, takže hodnotu měňte v `onClick`. `reverse` funguje dál stejně jako ve v2 (nastaví počáteční stav a kliknutí ikonu přepínají), je ale zastaralý. Oba platí jen pro ikony `click-toggle`: čtyři šipky v kruhu se teď po kliknutí přehrají znovu (viz [krok 6](#6-check-the-icons-whose-interaction-changed)).
+
+```diff
+- <UseAnimations animation={checkBox} reverse={checked} onClick={toggle} />
++ <UseAnimations animation={checkBox} active={checked} onClick={toggle} />
+```
+
+### 3. Zkontrolujte barvy {#3-check-the-colors}
+
+Ikony ve v2 byly černé, pokud jste nenastavili `strokeColor`. Ikony ve v3 přebírají barvu textu (`currentColor`) a `fillColor` má výchozí hodnotu `strokeColor`. Ikony uvnitř barevného textu nebo odkazů tak změní barvu spolu s nimi; pokud mají zůstat černé, nastavte barvu sami:
+
+```jsx
+<UseAnimations animation={github} strokeColor="#000" />
+```
+
+### 4. Nahraďte `wrapperStyle`, `pathCss` a `options` {#4-move-wrapperstyle-pathcss-and-options}
+
+- **`wrapperStyle`** je zastaralý: použijte `style`.
+- **`pathCss`** byl odstraněn: cesty nastylujte pomocí třídy.
+- **`options`** (nastavení lottie-web) zmizel spolu s lottie-web. Použijte props `loop`, `autoplay` a `speed`; ostatní volby lottie-web nemají náhradu.
+
+Pokud `pathCss` nebo `options` přesto předáte, jednou se zaloguje varování a budou ignorovány.
+
+```diff
+- <UseAnimations animation={github} wrapperStyle={{ margin: 8 }} pathCss="stroke-width: 3px;" options={{ loop: true }} />
++ <UseAnimations animation={github} style={{ margin: 8 }} className="thick" loop />
+```
+
+```css
+.thick path {
+  stroke-width: 3px;
+}
+```
+
+### 5. Zkontrolujte obalový prvek {#5-check-the-wrapper-element}
+
+Obal je teď inline-block `<span>` místo `<div>`, takže je validní uvnitř tlačítek a odkazů a sedí na řádku textu. Upravte CSS, které cílí na obal jako na `div`, a v propu `render` rozbalte `animationProps` na `<span>`:
+
+```diff
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Like" {...eventProps}>
+-     <div {...animationProps} />
++     <span {...animationProps} />
+    </button>
+  )}
+```
+
+Ikony jsou teď před čtečkami obrazovky skryté (`aria-hidden`), dokud nepředáte `aria-label`; přidejte ho ikonám, které samy o sobě nesou význam.
+
+### 6. Zkontrolujte ikony se změněnou interakcí {#6-check-the-icons-whose-interaction-changed}
+
+Interakce teď odpovídají webu useanimations.com. Pokud se má ikona chovat jako ve v2, předejte jí její původní interakci:
+
+| Ikony                                                                                              | v2               | v3             |
+| -------------------------------------------------------------------------------------------------- | ---------------- | -------------- |
+| `arrowDownCircle`, `arrowLeftCircle`, `arrowRightCircle`, `arrowUpCircle`                          | `click-toggle`   | `click-replay` |
+| `calendar`, `folder`, `home`, `instagram`, `userMinus`, `userPlus`, `userX`, `youtube`, `youtube2` | `hover-replay`\* | `hover`        |
+| `behance`, `codepen`, `facebook`, `github`, `linkedin`, `pocket`, `twitter`                        | `hover-replay`\* | `hover-loop`   |
+| `copy`, `edit`, `mail`                                                                             | `click-replay`   | `hover`        |
+| `dribbble`                                                                                         | `hover`          | `hover-loop`   |
+| `zoomIn`, `zoomOut`                                                                                | `loop`           | `hover`        |
+
+\* Ve v2 se tyto ikony při najetí myší jednou přehrály a při odjetí skočily zpět na začátek; nejblíže tomu je `hover-replay`.
+
+```jsx
+<UseAnimations animation={zoomIn} interaction="loop" />
+```
+
+### 7. Aktualizujte importy {#7-update-imports}
+
+Ikony importujte jen jako `react-useanimations/lib/<name>` nebo z `react-useanimations/icons`. Interní cesty k souborům z v2, jako `react-useanimations/lib/github/index` nebo `react-useanimations/lib/github/github.json`, už nefungují; Lottie JSON najdete v `animationData` ikony:
+
+```diff
+- import githubJson from 'react-useanimations/lib/github/github.json';
++ import github from 'react-useanimations/lib/github';
++ const githubJson = github.animationData;
+```
+
+Cesty `react-useanimations/utils` byly odstraněny. Typy importujte přímo z balíčku:
+
+```diff
+- import type { Animation, AnimationKey } from 'react-useanimations/utils';
++ import type { Animation, AnimationKey, Interaction, UseAnimationsProps } from 'react-useanimations';
+```
+
+`Animation` je teď `{ animationData, interaction }`; pole `animationKey` z v2 zmizelo, takže objekty, které si sestavujete sami, používají místo něj `interaction`.
+
+### Co je ještě nového {#what-else-is-new}
+
+O 221 ikon víc (celkem 300), import více ikon najednou z `react-useanimations/icons`, podpora omezeného pohybu, hover při fokusu z klávesnice, žádné zaseknuté hover animace na dotykových obrazovkách, vykreslování na serveru bez obezliček a [registr shadcn](#shadcnui).
+
+## Licence {#license}
+
+Ikony i kód jsou vydané pod [licencí MIT](https://opensource.org/license/mit/): můžete je používat, upravovat a dále šířit v osobních i komerčních projektech. Uvedení autora není povinné, ale potěší nás:
+
+```html
+Animated icons by <a href="https://useanimations.com">useAnimations</a>
+```
+
+Úplné podmínky: [Licence a podmínky](/licencing-and-terms).
+
+## Časté dotazy {#faq}
+
+<details><summary>Je useAnimations zdarma i pro komerční projekty?</summary>
+
+Ano. Ikony i balíček jsou pod licencí MIT a uvádět autora nemusíte.
+
+</details>
+
+<details><summary>Jak změnit barvu ikony?</summary>
+
+Ikony přebírají barvu textu. Změníte ji pomocí `strokeColor` a `fillColor`, CSS vlastnosti `color` nebo stylováním cest (paths). Viz [Velikost a barva](#size--color).
+
+</details>
+
+<details><summary>Funguje to i bez Reactu?</summary>
+
+Balíček je určený pro React. Každá ikona je ale zároveň Lottie JSON soubor, který přehraje lottie-web, lottie-ios, lottie-android, Flutter i React Native, a statické SVG. Viz [Použití bez Reactu](#use-without-react) a [Lottie ikony](/lottie-icons).
+
+</details>
+
+<details><summary>Mohou useAnimations používat AI agenti pro programování?</summary>
+
+Ano. Odkažte je na [icons.json](/icons.json) a [/documentation.md](/documentation.md); samotný balíček obsahuje `catalog.json` a zdokumentované typy pro každou ikonu.
+
+</details>
diff --git a/website/src/content/documentation.de.md b/website/src/content/documentation.de.md
new file mode 100644
index 0000000..c63a633
--- /dev/null
+++ b/website/src/content/documentation.de.md
@@ -0,0 +1,454 @@
+# Dokumentation {#documentation}
+
+useAnimations ist eine kostenlose, MIT-lizenzierte Bibliothek mit 300 animierten Icons für React. Jedes Icon bringt eine eingebaute Interaktion mit: Es läuft in Schleife, spielt per Klick ab oder spielt bei Hover ab. Sie nutzen die Icons über das Paket `react-useanimations` oder fügen sie mit der shadcn CLI hinzu.
+
+<div id="quick-start-react"></div>
+
+## Schnellstart {#quick-start}
+
+```bash
+npm install react-useanimations
+```
+
+```jsx
+import UseAnimations from 'react-useanimations';
+import github from 'react-useanimations/lib/github';
+
+export default function Header() {
+  return <UseAnimations animation={github} size={32} />;
+}
+```
+
+Das Icon übernimmt die Textfarbe und spielt seine eigene Interaktion ab: `github` läuft in Schleife, solange der Mauszeiger darauf liegt. Das Paket hat keine Abhängigkeiten. Ein eingebauter Player (8 kB gzip-komprimiert) zeichnet die Icons als SVG, und jedes Icon ist ein eigenes Modul, sodass Ihr Bundle nur die Icons enthält, die Sie importieren.
+
+## Interaktionen {#interactions}
+
+Jedes Icon kommt mit der Interaktion, für die es gestaltet wurde. Mit dem Prop `interaction` überschreiben Sie sie.
+
+| Interaktion    | Was sie macht                                                                          | Beispiel-Icons                       |
+| -------------- | -------------------------------------------------------------------------------------- | ------------------------------------ |
+| `loop`         | Läuft ununterbrochen.                                                                  | `loading`, `activity`, `alertCircle` |
+| `click-toggle` | Wechselt per Klick zwischen zwei Zuständen (vorwärts, dann rückwärts).                 | `menu`, `checkBox`, `playPause`      |
+| `click-replay` | Spielt bei jedem Klick von vorn ab.                                                    | `download`, `refresh`, `send`        |
+| `hover`        | Spielt beim Betreten mit der Maus vorwärts und beim Verlassen rückwärts.               | `archive`, `settings`, `trash`       |
+| `hover-loop`   | Läuft bei Hover in Schleife und spielt beim Verlassen den aktuellen Durchlauf zu Ende. | `github`, `twitter`, `dribbble`      |
+| `hover-replay` | Spielt beim Betreten mit der Maus einmal von vorn ab.                                  | `arrowRight`, `bluetooth`, `zap`     |
+
+Ist beim Nutzer reduzierte Bewegung eingestellt, bleiben die Icons still: Loops zeigen ihren ersten Frame, Hover- und Replay-Animationen spielen nicht ab, und Toggles springen sofort in ihren neuen Zustand.
+
+<div id="react"></div>
+
+## Props {#props}
+
+```jsx
+<UseAnimations animation={github} size={56} strokeColor="#4b5cff" style={{ padding: 8 }} />
+```
+
+| Prop          | Standardwert     | Beschreibung                                                                                                               |
+| ------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `animation`   | —                | Icon, importiert aus `react-useanimations/lib/<name>`, oder `{ animationData, interaction }` für eine eigene Animation.    |
+| `size`        | `24`             | Breite und Höhe; Zahlen sind Pixel, Strings jede CSS-Länge wie `'1.5em'`.                                                  |
+| `strokeColor` | `'currentColor'` | Farbe der Linien. Standardmäßig übernimmt das Icon die Textfarbe.                                                          |
+| `fillColor`   | `strokeColor`    | Farbe gefüllter Flächen, z. B. eines gelikten Herzens.                                                                     |
+| `interaction` | je nach Icon     | `'loop'`, `'click-toggle'`, `'click-replay'`, `'hover'`, `'hover-loop'` oder `'hover-replay'`.                             |
+| `active`      | —                | Für `click-toggle`-Icons: `true` zeigt den Endzustand. Kontrolliert: in `onClick` setzen, Klicks allein schalten nicht um. |
+| `autoplay`    | je nach Icon     | `true` für `loop`-Icons, außer bei eingestellter reduzierter Bewegung.                                                     |
+| `loop`        | je nach Icon     | `true` für `loop`- und `hover-loop`-Icons.                                                                                 |
+| `speed`       | `1`              | Wiedergabegeschwindigkeit.                                                                                                 |
+| `render`      | —                | Render-Prop für einen eigenen Wrapper, siehe [Das Icon in einen echten Button setzen](#wrap-the-icon-in-a-real-button).    |
+
+Alle anderen Props (`className`, `aria-label`, `onClick`, …) landen auf dem Wrapper-`<span>`. Ihre Event-Handler laufen vor denen der Animation; mit `event.preventDefault()` lassen Sie die Animation aus.
+
+## Icons importieren {#importing-icons}
+
+Importieren Sie jedes Icon aus `react-useanimations/lib/<name>` oder mehrere auf einmal aus `react-useanimations/icons`:
+
+```jsx
+import { github, heart, menu } from 'react-useanimations/icons';
+```
+
+Produktions-Builds enthalten in beiden Fällen nur die Icons, die Sie verwenden. Dev-Server und Test-Runner machen kein Tree-Shaking, dort lädt `react-useanimations/icons` also alle Icons; ist das relevant, nehmen Sie lieber `lib/<name>`. `delete` und `package` sind reservierte Wörter: Importieren Sie sie als `deleteIcon` und `packageIcon`.
+
+## Kontrollierter Toggle {#controlled-toggle}
+
+```jsx
+import { useState } from 'react';
+import UseAnimations from 'react-useanimations';
+import menu from 'react-useanimations/lib/menu';
+
+export function MenuButton() {
+  const [open, setOpen] = useState(false);
+  return (
+    <UseAnimations
+      animation={menu}
+      size={40}
+      active={open} // animiert auch, wenn sich `open` an anderer Stelle ändert
+      onClick={() => setOpen(!open)}
+    />
+  );
+}
+```
+
+## Das Icon in einen echten Button setzen {#wrap-the-icon-in-a-real-button}
+
+Bei anklickbaren Icons legen Sie mit dem Prop `render` ein fokussierbares Element um das Icon: `eventProps` kommen auf Ihr Element, `animationProps` auf ein `<span>` darin. Hover-Animationen spielen dann auch ab, wenn der Button den Tastaturfokus erhält.
+
+```jsx
+import heart from 'react-useanimations/lib/heart';
+
+<UseAnimations
+  animation={heart}
+  size={32}
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Add to favorites" {...eventProps}>
+      <span {...animationProps} />
+    </button>
+  )}
+/>;
+```
+
+<div id="customize"></div>
+
+## Größe & Farbe {#size--color}
+
+Die Icons sind Linien-Icons auf einer Zeichenfläche von 24 oder 32 px und bleiben in jeder Größe scharf: Setzen Sie `size` auf eine Pixelzahl oder eine beliebige CSS-Länge.
+
+Die Linien folgen `currentColor`, die Icons übernehmen also Textfarbe, Hover-Zustände und Dark Mode von selbst. Ändern lässt sich das mit `strokeColor` und `fillColor`, mit der CSS-Eigenschaft `color` oder über Styles für die Pfade: Die eingebaute Regel hat die Spezifität null, Ihr CSS gewinnt also immer.
+
+Manche Icons schneiden eine Lücke in sich selbst (der Schrägstrich in `visibility`, `microphone`, `video`, `volume` und `notification`, der Haken in `download`, der Ring um das Badge von `notification3`). Die Lücke nimmt den Seitenhintergrund an: weiß auf hellen Seiten und dunkel auf Seiten mit `color-scheme: dark`. Auf anderen Hintergründen setzen Sie sie mit der CSS-Variablen `--ua-knockout`, z. B. `body { --ua-knockout: #0f172a; }`.
+
+```jsx
+// Tailwind: Farbe und Linienstärke
+<UseAnimations animation={github} className="text-indigo-500 [&_path]:stroke-[3]" />
+```
+
+## Next.js und Server-Rendering {#nextjs-and-server-rendering}
+
+Die Komponente ist mit `'use client'` markiert und zeichnet die Animation nur im Browser. Sie können sie daher aus Server Components und SSR-Frameworks (Next.js, Remix, Astro) rendern, ohne `dynamic(…, { ssr: false })`. Icon-Module sind reine Daten, Server Components können sie also importieren und als Props weitergeben.
+
+<div id="shadcn"></div>
+
+## shadcn/ui {#shadcnui}
+
+Jedes Icon steht auch in einer [shadcn-Registry](https://ui.shadcn.com/docs/registry). Die CLI fügt eine fertige Komponente hinzu und installiert `react-useanimations`:
+
+```bash
+npx shadcn@latest add https://useanimations.com/r/checkmark.json
+```
+
+```tsx
+import { AnimatedCheckmark } from '@/components/animations/checkmark';
+
+<AnimatedCheckmark size={24} />;
+```
+
+Die Komponente heißt `Animated` + die Icon-ID in PascalCase (`check-box` → `AnimatedCheckBox`), landet in `components/animations/<id>.tsx` und nimmt dieselben Props wie `UseAnimations`. Der Registry-Index liegt unter [/r/registry.json](/r/registry.json). Für die Kurzform `npx shadcn@latest add @useanimations/checkmark` tragen Sie die Registry in `components.json` ein:
+
+```json
+{
+  "registries": {
+    "@useanimations": "https://useanimations.com/r/{name}.json"
+  }
+}
+```
+
+## Eigene Animation {#your-own-animation}
+
+```jsx
+import animationData from './my-animation.json';
+
+<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
+```
+
+Ihre Animation muss eine Lottie-JSON-Datei sein, also im selben Format wie die Icons vorliegen. Der Player unterstützt alles, was die Icons brauchen: Formebenen, Präkompositionen, Null-Ebenen und Parenting, Pfade, Rechtecke, Ellipsen, Konturen, Füllungen, Trim Paths, Masken, Keyframes mit Easing, Hold-Keyframes und Bewegungspfade sowie die Expressions `loopOut()` und `wiggle()`. Alles andere, etwa Verläufe, Text- oder Bildebenen, Effekte und Matten, wird nicht gezeichnet; die Konsole warnt bei nicht unterstützten Ebenen, Formen und Expressions.
+
+<div id="direct-urls"></div><div id="download"></div>
+
+## Dateien & icons.json {#files--iconsjson}
+
+Jedes Icon lässt sich auch herunterladen, von seiner Seite oder über stabile URLs mit aktiviertem CORS:
+
+| Datei                     | URL                                                |
+| ------------------------- | -------------------------------------------------- |
+| Animation (Lottie JSON)   | `https://useanimations.com/icons/<id>.json`        |
+| Statisches SVG je Zustand | `https://useanimations.com/icons/<id>/<state>.svg` |
+| ZIP mit JSON und SVGs     | `https://useanimations.com/icons/<id>.zip`         |
+| Icon-Seite (nur Englisch) | `https://useanimations.com/icons/<id>`             |
+| Katalog aller Icons       | `https://useanimations.com/icons.json`             |
+
+[icons.json](/icons.json) listet jedes Icon mit ID, Titel, Kategorie, Suchbegriffen, Interaktion, Datei-URLs, Größe und Dauer sowie seinem `react-useanimations`-Import und dem shadcn-Befehl auf. Das npm-Paket liefert dieselben Daten mit: `react-useanimations/catalog.json` (Metadaten), `react-useanimations/icons` (die Animationen) und `react-useanimations/svg.json` (die statischen SVGs).
+
+<div id="without-react"></div>
+
+## Ohne React verwenden {#use-without-react}
+
+Die Icons sind Standard-Lottie-JSON, jeder Lottie-Player kann sie also von `https://useanimations.com/icons/<id>.json` oder aus einer Kopie in Ihrem Projekt abspielen. Außerhalb von React verdrahten Sie die Interaktion selbst. Weitere Player und Beispiele finden Sie unter [Lottie-Icons](/lottie-icons).
+
+Einige Icons nutzen After-Effects-Expressions (`loopOut()`, `wiggle()`); in [icons.json](/icons.json) sind sie mit `requiresFullPlayer` gekennzeichnet. Im Web brauchen sie den vollständigen Build von lottie-web, nicht `lottie_light`, und native Player werten keine Expressions aus.
+
+<div id="html"></div><div id="interactions-web"></div>
+
+### HTML und JavaScript {#html-and-javascript}
+
+```html
+<div id="icon" style="width: 48px; height: 48px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
+<script>
+  const el = document.getElementById('icon');
+  const animation = lottie.loadAnimation({
+    container: el,
+    renderer: 'svg',
+    loop: false,
+    autoplay: false,
+    path: 'https://useanimations.com/icons/archive.json',
+  });
+  // Hover: vorwärts beim Betreten, rückwärts beim Verlassen
+  el.addEventListener('mouseenter', () => {
+    animation.setDirection(1);
+    animation.play();
+  });
+  el.addEventListener('mouseleave', () => {
+    animation.setDirection(-1);
+    animation.play();
+  });
+</script>
+```
+
+Mit dem SVG-Renderer kann das Icon wie die React-Komponente die Textfarbe übernehmen:
+
+```css
+#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) {
+  stroke: currentColor;
+}
+#icon path[fill='rgb(0,0,0)'] {
+  fill: currentColor;
+}
+```
+
+<div id="vue"></div>
+
+### Vue {#vue}
+
+```vue
+<script setup>
+import lottie from 'lottie-web';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+const el = ref(null);
+let animation;
+onMounted(() => {
+  animation = lottie.loadAnimation({
+    container: el.value,
+    renderer: 'svg',
+    loop: true,
+    autoplay: true,
+    path: 'https://useanimations.com/icons/loading.json',
+  });
+});
+onBeforeUnmount(() => animation?.destroy());
+</script>
+
+<template>
+  <div ref="el" style="width: 48px; height: 48px" />
+</template>
+```
+
+### React Native {#react-native}
+
+```jsx
+import LottieView from 'lottie-react-native';
+
+<LottieView source={require('./loading.json')} autoPlay loop style={{ width: 48, height: 48 }} />;
+```
+
+<div id="ios"></div>
+
+### iOS {#ios}
+
+Mit [lottie-ios](https://github.com/airbnb/lottie-ios) und dem JSON in Ihrem App-Bundle:
+
+```swift
+import Lottie
+import SwiftUI
+
+LottieView(animation: .named("loading"))
+  .looping()
+  .frame(width: 48, height: 48)
+```
+
+<div id="android"></div>
+
+### Android {#android}
+
+Mit [lottie-android](https://github.com/airbnb/lottie-android) in Jetpack Compose und dem JSON in `res/raw`:
+
+```kotlin
+val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
+LottieAnimation(composition, iterations = LottieConstants.IterateForever, modifier = Modifier.size(48.dp))
+```
+
+### Flutter {#flutter}
+
+Mit dem Paket [lottie](https://pub.dev/packages/lottie):
+
+```dart
+Lottie.asset('assets/loading.json', width: 48, height: 48)
+```
+
+<div id="performance"></div><div id="accessibility"></div>
+
+## Performance & Barrierefreiheit {#performance--accessibility}
+
+- **Klein:** Der Player ist gzip-komprimiert 8 kB groß und hat keine Abhängigkeiten; ein Icon hat 1 bis 15 kB (Median 2 kB).
+- **Lazy:** Animationen werden nur im Browser gezeichnet, nachdem die Seite gerendert ist. Automatisch startende Loops pausieren, solange sie aus dem sichtbaren Bereich gescrollt sind, und beim Unmount wird alles aufgeräumt.
+- **Standardmäßig dekorativ:** Icons sind für Screenreader verborgen (`aria-hidden`), solange Sie kein `aria-label` übergeben; mit Label werden sie als Bild angesagt. Für Bedienelemente, die nur aus einem Icon bestehen, nutzen Sie einen echten `<button>` mit `aria-label` (siehe [oben](#wrap-the-icon-in-a-real-button)) und geben den Toggle-Zustand mit `aria-pressed` oder `aria-expanded` wieder.
+- **Reduzierte Bewegung und Touch:** Die Icons berücksichtigen `prefers-reduced-motion`, und Tippen auf Touchscreens löst keine Hover-Animationen aus.
+
+<div id="agents"></div>
+
+## KI-Coding-Agenten {#ai-coding-agents}
+
+Agenten können Icons per Stichwort oder Interaktion aus [icons.json](/icons.json) oder aus `react-useanimations/catalog.json` im Paket auswählen und die dort angegebene Importzeile oder den shadcn-Befehl verwenden. Auch die Typdefinitionen jedes Icon-Imports enthalten Titel, Keywords, Interaktion und Vorschau. Diese Dokumentation gibt es als Markdown unter [/documentation.md](/documentation.md), und [/llms.txt](/llms.txt) indexiert die Website.
+
+## Upgrade von v2 {#upgrading-from-v2}
+
+Für die meisten Apps bedeutet das Upgrade nur, v3 zu installieren: Die Komponente, die Imports aus `react-useanimations/lib/<name>` und alle 79 Icons aus v2 bleiben gleich. Arbeiten Sie die folgenden Schritte ab, soweit sie Ihren Code betreffen.
+
+### 1. v3 installieren {#1-install-v3}
+
+v3 braucht React 18 oder neuer und hat keine Abhängigkeiten. Entfernen Sie auch lottie-web, sofern nichts anderes in Ihrer App es nutzt.
+
+```bash
+npm install react-useanimations@3
+npm uninstall lottie-web
+```
+
+### 2. `reverse` durch `active` ersetzen {#2-replace-reverse-with-active}
+
+`active` ist vollständig kontrolliert: Das Icon animiert, wenn sich `active` ändert, und ein Klick allein schaltet es nicht um. Aktualisieren Sie den Wert also in `onClick`. `reverse` funktioniert weiterhin wie in v2 (es legt den Startzustand fest, und Klicks schalten das Icon um), ist aber veraltet. Beide wirken nur bei `click-toggle`-Icons: Die vier Pfeilkreise spielen jetzt per Klick erneut ab (siehe [Schritt 6](#6-check-the-icons-whose-interaction-changed)).
+
+```diff
+- <UseAnimations animation={checkBox} reverse={checked} onClick={toggle} />
++ <UseAnimations animation={checkBox} active={checked} onClick={toggle} />
+```
+
+### 3. Farben prüfen {#3-check-the-colors}
+
+In v2 waren die Icons schwarz, solange Sie kein `strokeColor` gesetzt hatten. In v3 übernehmen sie die Textfarbe (`currentColor`), und `fillColor` ist standardmäßig gleich `strokeColor`. Icons in farbigem Text oder in Links ändern ihre Farbe also mit; sollen sie schwarz bleiben, setzen Sie die Farbe selbst:
+
+```jsx
+<UseAnimations animation={github} strokeColor="#000" />
+```
+
+### 4. `wrapperStyle`, `pathCss` und `options` ersetzen {#4-move-wrapperstyle-pathcss-and-options}
+
+- **`wrapperStyle`** ist veraltet: Nutzen Sie `style`.
+- **`pathCss`** wurde entfernt: Stylen Sie die Pfade über eine Klasse.
+- **`options`** (Einstellungen für lottie-web) wurde zusammen mit lottie-web entfernt. Nutzen Sie die Props `loop`, `autoplay` und `speed`; für andere lottie-web-Optionen gibt es keine Entsprechung.
+
+Werden `pathCss` oder `options` trotzdem übergeben, erscheint einmalig eine Warnung; die Werte werden ignoriert.
+
+```diff
+- <UseAnimations animation={github} wrapperStyle={{ margin: 8 }} pathCss="stroke-width: 3px;" options={{ loop: true }} />
++ <UseAnimations animation={github} style={{ margin: 8 }} className="thick" loop />
+```
+
+```css
+.thick path {
+  stroke-width: 3px;
+}
+```
+
+### 5. Wrapper-Element prüfen {#5-check-the-wrapper-element}
+
+Der Wrapper ist jetzt ein `<span>` mit `inline-block` statt eines `<div>`. Er ist damit innerhalb von Buttons und Links gültig und sitzt auf der Textzeile. Passen Sie CSS an, das den Wrapper als `div` anspricht, und verteilen Sie `animationProps` im Prop `render` auf ein `<span>`:
+
+```diff
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Like" {...eventProps}>
+-     <div {...animationProps} />
++     <span {...animationProps} />
+    </button>
+  )}
+```
+
+Icons sind jetzt für Screenreader verborgen (`aria-hidden`), solange Sie kein `aria-label` übergeben; ergänzen Sie eines bei Icons, die für sich allein eine Bedeutung tragen.
+
+### 6. Icons mit geänderter Interaktion prüfen {#6-check-the-icons-whose-interaction-changed}
+
+Die Interaktionen entsprechen jetzt denen auf useanimations.com. Soll sich ein Icon wie in v2 verhalten, übergeben Sie seine alte Interaktion:
+
+| Icons                                                                                              | v2               | v3             |
+| -------------------------------------------------------------------------------------------------- | ---------------- | -------------- |
+| `arrowDownCircle`, `arrowLeftCircle`, `arrowRightCircle`, `arrowUpCircle`                          | `click-toggle`   | `click-replay` |
+| `calendar`, `folder`, `home`, `instagram`, `userMinus`, `userPlus`, `userX`, `youtube`, `youtube2` | `hover-replay`\* | `hover`        |
+| `behance`, `codepen`, `facebook`, `github`, `linkedin`, `pocket`, `twitter`                        | `hover-replay`\* | `hover-loop`   |
+| `copy`, `edit`, `mail`                                                                             | `click-replay`   | `hover`        |
+| `dribbble`                                                                                         | `hover`          | `hover-loop`   |
+| `zoomIn`, `zoomOut`                                                                                | `loop`           | `hover`        |
+
+\* In v2 spielten diese Icons beim Betreten mit der Maus einmal ab und sprangen beim Verlassen an den Anfang zurück; `hover-replay` kommt dem am nächsten.
+
+```jsx
+<UseAnimations animation={zoomIn} interaction="loop" />
+```
+
+### 7. Imports aktualisieren {#7-update-imports}
+
+Importieren Sie Icons nur noch als `react-useanimations/lib/<name>` oder aus `react-useanimations/icons`. Interne Dateipfade aus v2 wie `react-useanimations/lib/github/index` oder `react-useanimations/lib/github/github.json` lassen sich nicht mehr auflösen; das Lottie JSON ist die `animationData` des Icons:
+
+```diff
+- import githubJson from 'react-useanimations/lib/github/github.json';
++ import github from 'react-useanimations/lib/github';
++ const githubJson = github.animationData;
+```
+
+Die Pfade unter `react-useanimations/utils` wurden entfernt. Importieren Sie die Typen aus dem Paket:
+
+```diff
+- import type { Animation, AnimationKey } from 'react-useanimations/utils';
++ import type { Animation, AnimationKey, Interaction, UseAnimationsProps } from 'react-useanimations';
+```
+
+`Animation` ist jetzt `{ animationData, interaction }`; das Feld `animationKey` aus v2 gibt es nicht mehr. Selbst gebaute Objekte verwenden stattdessen `interaction`.
+
+### Was sonst neu ist {#what-else-is-new}
+
+221 zusätzliche Icons (300 insgesamt), mehrere Icons auf einmal aus `react-useanimations/icons`, Unterstützung für reduzierte Bewegung, Hover per Tastaturfokus, keine hängenbleibenden Hover-Animationen auf Touchscreens, Server-Rendering ohne Workarounds und eine [shadcn-Registry](#shadcnui).
+
+## Lizenz {#license}
+
+Die Icons und der Code stehen unter der [MIT-Lizenz](https://opensource.org/license/mit/): Sie dürfen sie in privaten und kommerziellen Projekten nutzen, verändern und weitergeben. Eine Namensnennung ist nicht erforderlich, freut uns aber:
+
+```html
+Animated icons by <a href="https://useanimations.com">useAnimations</a>
+```
+
+Alle Bedingungen: [Lizenz & Nutzungsbedingungen](/licencing-and-terms).
+
+## Häufige Fragen {#faq}
+
+<details><summary>Ist useAnimations für kommerzielle Projekte kostenlos?</summary>
+
+Ja. Die Icons und das Paket stehen unter der MIT-Lizenz, eine Namensnennung ist nicht erforderlich.
+
+</details>
+
+<details><summary>Wie ändere ich die Farbe eines Icons?</summary>
+
+Icons übernehmen die Textfarbe. Ändern lässt sie sich mit `strokeColor` und `fillColor`, mit der CSS-Eigenschaft `color` oder über Styles für die Pfade. Siehe [Größe & Farbe](#size--color).
+
+</details>
+
+<details><summary>Funktioniert es auch ohne React?</summary>
+
+Das Paket ist für React gedacht. Jedes Icon gibt es aber auch als Lottie-JSON-Datei, die lottie-web, lottie-ios, lottie-android, Flutter und React Native abspielen können, und als statisches SVG. Siehe [Ohne React verwenden](#use-without-react) und [Lottie-Icons](/lottie-icons).
+
+</details>
+
+<details><summary>Können KI-Coding-Agenten useAnimations nutzen?</summary>
+
+Ja. Verweisen Sie sie auf [icons.json](/icons.json) und [/documentation.md](/documentation.md); das Paket selbst liefert `catalog.json` und dokumentierte Typen für jedes Icon mit.
+
+</details>
diff --git a/website/src/content/documentation.es.md b/website/src/content/documentation.es.md
new file mode 100644
index 0000000..941aac6
--- /dev/null
+++ b/website/src/content/documentation.es.md
@@ -0,0 +1,454 @@
+# Documentación {#documentation}
+
+useAnimations es una biblioteca gratuita, con licencia MIT, de 300 iconos animados para React. Cada icono trae una interacción integrada: se repite en bucle, se reproduce al hacer clic o se reproduce con hover. Úsalos con el paquete `react-useanimations` o añádelos con la CLI de shadcn.
+
+<div id="quick-start-react"></div>
+
+## Inicio rápido {#quick-start}
+
+```bash
+npm install react-useanimations
+```
+
+```jsx
+import UseAnimations from 'react-useanimations';
+import github from 'react-useanimations/lib/github';
+
+export default function Header() {
+  return <UseAnimations animation={github} size={32} />;
+}
+```
+
+El icono sigue el color del texto y reproduce su propia interacción: `github` se repite en bucle mientras tienes el cursor encima. El paquete no tiene dependencias; un reproductor integrado (8 kB con gzip) dibuja los iconos como SVG, y cada icono es un módulo independiente, así que tu bundle solo incluye los iconos que importas.
+
+## Interacciones {#interactions}
+
+Cada icono viene con la interacción para la que fue diseñado. Puedes cambiarla con la prop `interaction`.
+
+| Interacción    | Qué hace                                                                     | Iconos de ejemplo                    |
+| -------------- | ---------------------------------------------------------------------------- | ------------------------------------ |
+| `loop`         | Se reproduce sin parar.                                                      | `loading`, `activity`, `alertCircle` |
+| `click-toggle` | Alterna entre dos estados al hacer clic (hacia delante y luego hacia atrás). | `menu`, `checkBox`, `playPause`      |
+| `click-replay` | Se repite desde el principio con cada clic.                                  | `download`, `refresh`, `send`        |
+| `hover`        | Avanza cuando entra el cursor y retrocede cuando sale.                       | `archive`, `settings`, `trash`       |
+| `hover-loop`   | Se repite en bucle durante el hover y termina el ciclo en curso al salir.    | `github`, `twitter`, `dribbble`      |
+| `hover-replay` | Se reproduce una vez desde el principio cuando entra el cursor.              | `arrowRight`, `bluetooth`, `zap`     |
+
+Cuando el usuario prefiere movimiento reducido, los iconos se quedan quietos: los bucles muestran su primer fotograma, las animaciones de hover y de repetición no se reproducen y los toggles cambian a su nuevo estado de inmediato.
+
+<div id="react"></div>
+
+## Props {#props}
+
+```jsx
+<UseAnimations animation={github} size={56} strokeColor="#4b5cff" style={{ padding: 8 }} />
+```
+
+| Prop          | Valor por defecto | Descripción                                                                                                                 |
+| ------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `animation`   | —                 | Icono importado de `react-useanimations/lib/<name>`, o `{ animationData, interaction }` para tu propia animación.           |
+| `size`        | `24`              | Ancho y alto; los números son píxeles y las cadenas, cualquier longitud CSS, como `'1.5em'`.                                |
+| `strokeColor` | `'currentColor'`  | Color de los trazos. Por defecto, el icono sigue el color del texto.                                                        |
+| `fillColor`   | `strokeColor`     | Color de las partes rellenas, por ejemplo, un corazón con me gusta.                                                         |
+| `interaction` | según el icono    | `'loop'`, `'click-toggle'`, `'click-replay'`, `'hover'`, `'hover-loop'` o `'hover-replay'`.                                 |
+| `active`      | —                 | Para iconos `click-toggle`: `true` muestra el estado final. Controlado: actualízalo en `onClick`; los clics no lo alternan. |
+| `autoplay`    | según el icono    | `true` para los iconos `loop`, salvo que se prefiera movimiento reducido.                                                   |
+| `loop`        | según el icono    | `true` para los iconos `loop` y `hover-loop`.                                                                               |
+| `speed`       | `1`               | Velocidad de reproducción.                                                                                                  |
+| `render`      | —                 | Render prop para un wrapper personalizado; consulta [Envolver el icono en un botón real](#wrap-the-icon-in-a-real-button).  |
+
+Cualquier otra prop (`className`, `aria-label`, `onClick`, …) va al `<span>` que envuelve el icono. Tus manejadores de eventos se ejecutan antes que los de la animación; llama a `event.preventDefault()` para omitir la animación.
+
+## Importar iconos {#importing-icons}
+
+Importa cada icono desde `react-useanimations/lib/<name>`, o varios a la vez desde `react-useanimations/icons`:
+
+```jsx
+import { github, heart, menu } from 'react-useanimations/icons';
+```
+
+En ambos casos, los builds de producción incluyen solo los iconos que usas. Los servidores de desarrollo y los test runners no hacen tree shaking, así que ahí `react-useanimations/icons` carga todos los iconos; si eso te importa, usa `lib/<name>`. `delete` y `package` son palabras reservadas: impórtalos como `deleteIcon` y `packageIcon`.
+
+## Toggle controlado {#controlled-toggle}
+
+```jsx
+import { useState } from 'react';
+import UseAnimations from 'react-useanimations';
+import menu from 'react-useanimations/lib/menu';
+
+export function MenuButton() {
+  const [open, setOpen] = useState(false);
+  return (
+    <UseAnimations
+      animation={menu}
+      size={40}
+      active={open} // también se anima cuando `open` cambia en otro lugar
+      onClick={() => setOpen(!open)}
+    />
+  );
+}
+```
+
+## Envolver el icono en un botón real {#wrap-the-icon-in-a-real-button}
+
+Para los iconos en los que se hace clic, rodea el icono con un elemento que pueda recibir el foco usando la prop `render`: `eventProps` va en tu elemento y `animationProps`, en un `<span>` dentro de él. Así, las animaciones de hover también se reproducen cuando el botón recibe el foco del teclado.
+
+```jsx
+import heart from 'react-useanimations/lib/heart';
+
+<UseAnimations
+  animation={heart}
+  size={32}
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Añadir a favoritos" {...eventProps}>
+      <span {...animationProps} />
+    </button>
+  )}
+/>;
+```
+
+<div id="customize"></div>
+
+## Tamaño y color {#size--color}
+
+Los iconos son iconos de línea dibujados en una mesa de trabajo de 24 o 32 px y se mantienen nítidos a cualquier tamaño: asigna a `size` un número de píxeles o cualquier longitud CSS.
+
+Los trazos siguen `currentColor`, así que los iconos adoptan por sí solos el color del texto, los estados de hover y el modo oscuro. Cámbialos con `strokeColor` y `fillColor`, con la propiedad `color` de CSS o aplicando estilos a los trazados: la regla integrada tiene especificidad cero, así que tu CSS siempre gana.
+
+Algunos iconos recortan un hueco en su propio dibujo (la barra de `visibility`, `microphone`, `video`, `volume` y `notification`, la marca de `download`, el anillo alrededor del indicador de `notification3`). El hueco toma el fondo de la página: blanco en páginas claras y oscuro en páginas con `color-scheme: dark`. Sobre otros fondos, defínelo con la variable CSS `--ua-knockout`, por ejemplo, `body { --ua-knockout: #0f172a; }`.
+
+```jsx
+// Tailwind: color y grosor del trazo
+<UseAnimations animation={github} className="text-indigo-500 [&_path]:stroke-[3]" />
+```
+
+## Next.js y renderizado en servidor {#nextjs-and-server-rendering}
+
+El componente está marcado con `'use client'` y dibuja la animación solo en el navegador, así que puedes renderizarlo desde server components y frameworks con SSR (Next.js, Remix, Astro) sin `dynamic(…, { ssr: false })`. Los módulos de los iconos son datos simples, así que los server components pueden importarlos y pasarlos como props.
+
+<div id="shadcn"></div>
+
+## shadcn/ui {#shadcnui}
+
+Cada icono está también en un [registro de shadcn](https://ui.shadcn.com/docs/registry). La CLI añade un componente listo para usar e instala `react-useanimations`:
+
+```bash
+npx shadcn@latest add https://useanimations.com/r/checkmark.json
+```
+
+```tsx
+import { AnimatedCheckmark } from '@/components/animations/checkmark';
+
+<AnimatedCheckmark size={24} />;
+```
+
+El componente se llama `Animated` + el id del icono en PascalCase (`check-box` → `AnimatedCheckBox`), se guarda en `components/animations/<id>.tsx` y acepta las mismas props que `UseAnimations`. El índice del registro es [/r/registry.json](/r/registry.json). Para usar la forma corta `npx shadcn@latest add @useanimations/checkmark`, añade el registro a `components.json`:
+
+```json
+{
+  "registries": {
+    "@useanimations": "https://useanimations.com/r/{name}.json"
+  }
+}
+```
+
+## Tu propia animación {#your-own-animation}
+
+```jsx
+import animationData from './my-animation.json';
+
+<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
+```
+
+Tu animación debe ser un archivo Lottie JSON, el mismo formato que usan los iconos. El reproductor admite lo que necesitan los iconos: capas de forma, precomposiciones, capas nulas y emparentamiento, trazados, rectángulos, elipses, trazos, rellenos, recorte de trazados, máscaras, fotogramas clave con easing, holds y trayectorias de movimiento, y las expresiones `loopOut()` y `wiggle()`. Todo lo demás, como degradados, capas de texto o de imagen, efectos y mates, no se dibuja; la consola avisa de las capas, formas y expresiones no compatibles.
+
+<div id="direct-urls"></div><div id="download"></div>
+
+## Archivos e icons.json {#files--iconsjson}
+
+Cada icono también se puede descargar, desde su página o desde URL estables con CORS habilitado:
+
+| Archivo                      | URL                                                |
+| ---------------------------- | -------------------------------------------------- |
+| Animación (Lottie JSON)      | `https://useanimations.com/icons/<id>.json`        |
+| SVG estático de cada estado  | `https://useanimations.com/icons/<id>/<state>.svg` |
+| ZIP con el JSON y los SVG    | `https://useanimations.com/icons/<id>.zip`         |
+| Página del icono (en inglés) | `https://useanimations.com/icons/<id>`             |
+| Catálogo de todos los iconos | `https://useanimations.com/icons.json`             |
+
+[icons.json](/icons.json) recoge cada icono con su id, título, categoría, palabras clave de búsqueda, interacción, URL de los archivos, tamaño y duración, su import de `react-useanimations` y el comando de shadcn. El paquete de npm incluye los mismos datos: `react-useanimations/catalog.json` (metadatos), `react-useanimations/icons` (las animaciones) y `react-useanimations/svg.json` (los SVG estáticos).
+
+<div id="without-react"></div>
+
+## Uso sin React {#use-without-react}
+
+Los iconos son Lottie JSON estándar, así que cualquier reproductor de Lottie puede reproducirlos desde `https://useanimations.com/icons/<id>.json` o desde una copia en tu proyecto. Fuera de React, la interacción la conectas tú. En [Iconos Lottie](/lottie-icons) encontrarás más reproductores y ejemplos.
+
+Algunos iconos usan expresiones de After Effects (`loopOut()`, `wiggle()`); `requiresFullPlayer` los marca en [icons.json](/icons.json). En la web necesitan la versión completa de lottie-web, no `lottie_light`, y los reproductores nativos no evalúan expresiones.
+
+<div id="html"></div><div id="interactions-web"></div>
+
+### HTML y JavaScript {#html-and-javascript}
+
+```html
+<div id="icon" style="width: 48px; height: 48px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
+<script>
+  const el = document.getElementById('icon');
+  const animation = lottie.loadAnimation({
+    container: el,
+    renderer: 'svg',
+    loop: false,
+    autoplay: false,
+    path: 'https://useanimations.com/icons/archive.json',
+  });
+  // hover: hacia delante al entrar, hacia atrás al salir
+  el.addEventListener('mouseenter', () => {
+    animation.setDirection(1);
+    animation.play();
+  });
+  el.addEventListener('mouseleave', () => {
+    animation.setDirection(-1);
+    animation.play();
+  });
+</script>
+```
+
+Con el renderizador SVG, el icono puede seguir el color del texto igual que el componente de React:
+
+```css
+#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) {
+  stroke: currentColor;
+}
+#icon path[fill='rgb(0,0,0)'] {
+  fill: currentColor;
+}
+```
+
+<div id="vue"></div>
+
+### Vue {#vue}
+
+```vue
+<script setup>
+import lottie from 'lottie-web';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+const el = ref(null);
+let animation;
+onMounted(() => {
+  animation = lottie.loadAnimation({
+    container: el.value,
+    renderer: 'svg',
+    loop: true,
+    autoplay: true,
+    path: 'https://useanimations.com/icons/loading.json',
+  });
+});
+onBeforeUnmount(() => animation?.destroy());
+</script>
+
+<template>
+  <div ref="el" style="width: 48px; height: 48px" />
+</template>
+```
+
+### React Native {#react-native}
+
+```jsx
+import LottieView from 'lottie-react-native';
+
+<LottieView source={require('./loading.json')} autoPlay loop style={{ width: 48, height: 48 }} />;
+```
+
+<div id="ios"></div>
+
+### iOS {#ios}
+
+Con [lottie-ios](https://github.com/airbnb/lottie-ios) y el JSON en el bundle de tu app:
+
+```swift
+import Lottie
+import SwiftUI
+
+LottieView(animation: .named("loading"))
+  .looping()
+  .frame(width: 48, height: 48)
+```
+
+<div id="android"></div>
+
+### Android {#android}
+
+Con [lottie-android](https://github.com/airbnb/lottie-android) en Jetpack Compose y el JSON en `res/raw`:
+
+```kotlin
+val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
+LottieAnimation(composition, iterations = LottieConstants.IterateForever, modifier = Modifier.size(48.dp))
+```
+
+### Flutter {#flutter}
+
+Con el paquete [lottie](https://pub.dev/packages/lottie):
+
+```dart
+Lottie.asset('assets/loading.json', width: 48, height: 48)
+```
+
+<div id="performance"></div><div id="accessibility"></div>
+
+## Rendimiento y accesibilidad {#performance--accessibility}
+
+- **Ligero:** el reproductor ocupa 8 kB con gzip y no tiene dependencias, y un icono ocupa de 1 a 15 kB (2 kB de mediana).
+- **Diferido:** las animaciones se dibujan solo en el navegador, después de que se renderiza la página; los bucles con reproducción automática se pausan mientras quedan fuera de la vista, y todo se limpia al desmontar el componente.
+- **Decorativos por defecto:** los iconos se ocultan a los lectores de pantalla (`aria-hidden`) salvo que pases `aria-label`, que hace que se anuncien como imagen. En controles que solo tienen un icono, usa un `<button>` real con `aria-label` (consulta [más arriba](#wrap-the-icon-in-a-real-button)) y refleja el estado del toggle con `aria-pressed` o `aria-expanded`.
+- **Movimiento reducido y pantallas táctiles:** los iconos respetan `prefers-reduced-motion`, y los toques en pantallas táctiles no activan las animaciones de hover.
+
+<div id="agents"></div>
+
+## Agentes de programación con IA {#ai-coding-agents}
+
+Los agentes pueden elegir iconos por palabra clave o por interacción a partir de [icons.json](/icons.json), o de `react-useanimations/catalog.json` dentro del paquete, y usar la línea de import o el comando de shadcn que aparece ahí. Las definiciones de tipos de cada import de icono también incluyen su título, palabras clave, interacción y vista previa. Esta documentación está disponible en Markdown en [/documentation.md](/documentation.md), y [/llms.txt](/llms.txt) indexa el sitio.
+
+## Actualizar desde la v2 {#upgrading-from-v2}
+
+En la mayoría de las apps, actualizar consiste en instalar la v3: el componente, los imports `react-useanimations/lib/<name>` y los 79 iconos de la v2 siguen igual. Sigue los pasos de abajo que apliquen a tu código.
+
+### 1. Instala la v3 {#1-install-v3}
+
+La v3 necesita React 18 o posterior y no tiene dependencias. Desinstala también lottie-web, salvo que otra parte de tu app lo use.
+
+```bash
+npm install react-useanimations@3
+npm uninstall lottie-web
+```
+
+### 2. Sustituye `reverse` por `active` {#2-replace-reverse-with-active}
+
+`active` es totalmente controlado: el icono se anima cuando `active` cambia, y un clic por sí solo no lo alterna, así que actualízalo en `onClick`. `reverse` sigue funcionando como en la v2 (define el estado inicial y los clics alternan el icono), pero está obsoleto. Ambos se aplican solo a los iconos `click-toggle`: los cuatro círculos con flecha ahora se repiten al hacer clic (consulta el [paso 6](#6-check-the-icons-whose-interaction-changed)).
+
+```diff
+- <UseAnimations animation={checkBox} reverse={checked} onClick={toggle} />
++ <UseAnimations animation={checkBox} active={checked} onClick={toggle} />
+```
+
+### 3. Revisa los colores {#3-check-the-colors}
+
+Los iconos de la v2 eran negros salvo que definieras `strokeColor`. Los de la v3 siguen el color del texto (`currentColor`), y `fillColor` toma por defecto el valor de `strokeColor`. Los iconos dentro de texto o enlaces de color cambian de color con ellos; para mantenerlos en negro, define tú el color:
+
+```jsx
+<UseAnimations animation={github} strokeColor="#000" />
+```
+
+### 4. Migra `wrapperStyle`, `pathCss` y `options` {#4-move-wrapperstyle-pathcss-and-options}
+
+- **`wrapperStyle`** está obsoleto: usa `style`.
+- **`pathCss`** se eliminó: aplica estilos a los trazados con una clase.
+- **`options`** (los ajustes de lottie-web) se eliminó junto con lottie-web. Usa las props `loop`, `autoplay` y `speed`; el resto de opciones de lottie-web no tienen equivalente.
+
+Si aun así pasas `pathCss` u `options`, se muestra un aviso una sola vez y se ignoran.
+
+```diff
+- <UseAnimations animation={github} wrapperStyle={{ margin: 8 }} pathCss="stroke-width: 3px;" options={{ loop: true }} />
++ <UseAnimations animation={github} style={{ margin: 8 }} className="thick" loop />
+```
+
+```css
+.thick path {
+  stroke-width: 3px;
+}
+```
+
+### 5. Revisa el elemento contenedor {#5-check-the-wrapper-element}
+
+El contenedor ahora es un `<span>` inline-block en lugar de un `<div>`, así que es válido dentro de botones y enlaces y se coloca en la línea de texto. Actualiza el CSS que apunte al contenedor como `div`, y en la prop `render` aplica `animationProps` a un `<span>`:
+
+```diff
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Like" {...eventProps}>
+-     <div {...animationProps} />
++     <span {...animationProps} />
+    </button>
+  )}
+```
+
+Los iconos ahora se ocultan a los lectores de pantalla (`aria-hidden`) salvo que pases `aria-label`; añádelo a los iconos que transmiten significado por sí solos.
+
+### 6. Revisa los iconos cuya interacción cambió {#6-check-the-icons-whose-interaction-changed}
+
+Las interacciones ahora coinciden con las de useanimations.com. Si quieres que un icono se comporte como en la v2, pásale su interacción anterior:
+
+| Iconos                                                                                             | v2               | v3             |
+| -------------------------------------------------------------------------------------------------- | ---------------- | -------------- |
+| `arrowDownCircle`, `arrowLeftCircle`, `arrowRightCircle`, `arrowUpCircle`                          | `click-toggle`   | `click-replay` |
+| `calendar`, `folder`, `home`, `instagram`, `userMinus`, `userPlus`, `userX`, `youtube`, `youtube2` | `hover-replay`\* | `hover`        |
+| `behance`, `codepen`, `facebook`, `github`, `linkedin`, `pocket`, `twitter`                        | `hover-replay`\* | `hover-loop`   |
+| `copy`, `edit`, `mail`                                                                             | `click-replay`   | `hover`        |
+| `dribbble`                                                                                         | `hover`          | `hover-loop`   |
+| `zoomIn`, `zoomOut`                                                                                | `loop`           | `hover`        |
+
+\* La v2 los reproducía una vez al entrar el cursor y volvía de golpe al principio al salir; `hover-replay` es lo más parecido.
+
+```jsx
+<UseAnimations animation={zoomIn} interaction="loop" />
+```
+
+### 7. Actualiza los imports {#7-update-imports}
+
+Importa los iconos solo como `react-useanimations/lib/<name>` o desde `react-useanimations/icons`. Las rutas internas de la v2, como `react-useanimations/lib/github/index` o `react-useanimations/lib/github/github.json`, ya no se resuelven; el Lottie JSON es el `animationData` del icono:
+
+```diff
+- import githubJson from 'react-useanimations/lib/github/github.json';
++ import github from 'react-useanimations/lib/github';
++ const githubJson = github.animationData;
+```
+
+Las rutas `react-useanimations/utils` se eliminaron. Importa los tipos desde el paquete:
+
+```diff
+- import type { Animation, AnimationKey } from 'react-useanimations/utils';
++ import type { Animation, AnimationKey, Interaction, UseAnimationsProps } from 'react-useanimations';
+```
+
+`Animation` ahora es `{ animationData, interaction }`; el campo `animationKey` de la v2 ya no existe, así que los objetos que construyas tú deben usar `interaction` en su lugar.
+
+### Otras novedades {#what-else-is-new}
+
+221 iconos más (300 en total), varios iconos a la vez desde `react-useanimations/icons`, soporte para movimiento reducido, hover con el foco del teclado, animaciones de hover que ya no se quedan atascadas en pantallas táctiles, renderizado en servidor sin trucos y un [registro de shadcn](#shadcnui).
+
+## Licencia {#license}
+
+Los iconos y el código se publican bajo la [licencia MIT](https://opensource.org/license/mit/): úsalos, modifícalos y redistribúyelos en trabajos personales y comerciales. La atribución no es obligatoria, pero se agradece:
+
+```html
+Animated icons by <a href="https://useanimations.com">useAnimations</a>
+```
+
+Condiciones completas: [Licencia y condiciones](/licencing-and-terms).
+
+## Preguntas frecuentes {#faq}
+
+<details><summary>¿useAnimations es gratis para proyectos comerciales?</summary>
+
+Sí. Los iconos y el paquete tienen licencia MIT y no requieren atribución.
+
+</details>
+
+<details><summary>¿Cómo cambio el color de un icono?</summary>
+
+Los iconos siguen el color del texto. Puedes cambiarlo con `strokeColor` y `fillColor`, con la propiedad `color` de CSS o aplicando estilos a los trazados. Consulta [Tamaño y color](#size--color).
+
+</details>
+
+<details><summary>¿Funciona sin React?</summary>
+
+El paquete es para React. Cada icono es también un archivo Lottie JSON que pueden reproducir lottie-web, lottie-ios, lottie-android, Flutter y React Native, además de un SVG estático. Consulta [Uso sin React](#use-without-react) e [Iconos Lottie](/lottie-icons).
+
+</details>
+
+<details><summary>¿Pueden los agentes de programación con IA usar useAnimations?</summary>
+
+Sí. Indícales [icons.json](/icons.json) y [/documentation.md](/documentation.md); el propio paquete incluye `catalog.json` y tipos documentados para cada icono.
+
+</details>
diff --git a/website/src/content/documentation.fr.md b/website/src/content/documentation.fr.md
new file mode 100644
index 0000000..9daa8a2
--- /dev/null
+++ b/website/src/content/documentation.fr.md
@@ -0,0 +1,454 @@
+# Documentation {#documentation}
+
+useAnimations est une bibliothèque gratuite, sous licence MIT, de 300 icônes animées pour React. Chaque icône a une interaction intégrée : elle boucle, se joue au clic ou se joue au survol. Utilisez-les avec le package `react-useanimations` ou ajoutez-les avec la CLI shadcn.
+
+<div id="quick-start-react"></div>
+
+## Démarrage rapide {#quick-start}
+
+```bash
+npm install react-useanimations
+```
+
+```jsx
+import UseAnimations from 'react-useanimations';
+import github from 'react-useanimations/lib/github';
+
+export default function Header() {
+  return <UseAnimations animation={github} size={32} />;
+}
+```
+
+L’icône suit la couleur du texte et joue sa propre interaction : `github` boucle tant que vous la survolez. Le package n’a aucune dépendance ; un lecteur intégré (8 kB gzippé) dessine les icônes en SVG, et chaque icône est un module distinct : votre bundle ne contient que les icônes que vous importez.
+
+## Interactions {#interactions}
+
+Chaque icône est livrée avec l’interaction pour laquelle elle a été conçue. Vous pouvez la remplacer avec la prop `interaction`.
+
+| Interaction    | Ce qu’elle fait                                                         | Exemples d’icônes                    |
+| -------------- | ----------------------------------------------------------------------- | ------------------------------------ |
+| `loop`         | Se joue en continu.                                                     | `loading`, `activity`, `alertCircle` |
+| `click-toggle` | Bascule entre deux états au clic (vers l’avant, puis en arrière).       | `menu`, `checkBox`, `playPause`      |
+| `click-replay` | Rejoue l’animation depuis le début à chaque clic.                       | `download`, `refresh`, `send`        |
+| `hover`        | Se joue vers l’avant à l’entrée de la souris et en arrière à sa sortie. | `archive`, `settings`, `trash`       |
+| `hover-loop`   | Boucle pendant le survol et termine le cycle en cours à la sortie.      | `github`, `twitter`, `dribbble`      |
+| `hover-replay` | Se joue une fois depuis le début à l’entrée de la souris.               | `arrowRight`, `bluetooth`, `zap`     |
+
+Quand l’utilisateur a activé la réduction des animations, les icônes restent immobiles : les boucles affichent leur première image, les animations au survol et de relecture ne se jouent pas, et les bascules passent immédiatement à leur nouvel état.
+
+<div id="react"></div>
+
+## Props {#props}
+
+```jsx
+<UseAnimations animation={github} size={56} strokeColor="#4b5cff" style={{ padding: 8 }} />
+```
+
+| Prop          | Valeur par défaut | Description                                                                                                                                   |
+| ------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `animation`   | —                 | Icône importée depuis `react-useanimations/lib/<name>`, ou `{ animationData, interaction }` pour votre propre animation.                      |
+| `size`        | `24`              | Largeur et hauteur ; un nombre est exprimé en pixels, une chaîne peut être n’importe quelle longueur CSS, comme `'1.5em'`.                    |
+| `strokeColor` | `'currentColor'`  | Couleur des traits. Par défaut, l’icône suit la couleur du texte.                                                                             |
+| `fillColor`   | `strokeColor`     | Couleur des parties pleines, par exemple un cœur « aimé ».                                                                                    |
+| `interaction` | selon l’icône     | `'loop'`, `'click-toggle'`, `'click-replay'`, `'hover'`, `'hover-loop'` ou `'hover-replay'`.                                                  |
+| `active`      | —                 | Pour les icônes `click-toggle` : `true` affiche l’état final. Contrôlée : mettez-la à jour dans `onClick`, les clics ne la font pas basculer. |
+| `autoplay`    | selon l’icône     | `true` pour les icônes `loop`, sauf si la réduction des animations est activée.                                                               |
+| `loop`        | selon l’icône     | `true` pour les icônes `loop` et `hover-loop`.                                                                                                |
+| `speed`       | `1`               | Vitesse de lecture.                                                                                                                           |
+| `render`      | —                 | Render prop pour un wrapper personnalisé, voir [Placer l’icône dans un vrai bouton](#wrap-the-icon-in-a-real-button).                         |
+
+Toute autre prop (`className`, `aria-label`, `onClick`, …) est transmise au `<span>` qui enveloppe l’icône. Vos gestionnaires d’événements s’exécutent avant ceux de l’animation ; appelez `event.preventDefault()` pour sauter l’animation.
+
+## Importer les icônes {#importing-icons}
+
+Importez chaque icône depuis `react-useanimations/lib/<name>`, ou plusieurs à la fois depuis `react-useanimations/icons` :
+
+```jsx
+import { github, heart, menu } from 'react-useanimations/icons';
+```
+
+Dans les deux cas, les builds de production n’incluent que les icônes utilisées. Les serveurs de développement et les lanceurs de tests ne font pas de tree-shaking : `react-useanimations/icons` y charge donc toutes les icônes ; préférez `lib/<name>` si cela compte pour vous. `delete` et `package` sont des mots réservés : importez-les sous les noms `deleteIcon` et `packageIcon`.
+
+## Bascule contrôlée {#controlled-toggle}
+
+```jsx
+import { useState } from 'react';
+import UseAnimations from 'react-useanimations';
+import menu from 'react-useanimations/lib/menu';
+
+export function MenuButton() {
+  const [open, setOpen] = useState(false);
+  return (
+    <UseAnimations
+      animation={menu}
+      size={40}
+      active={open} // s’anime aussi quand `open` change ailleurs
+      onClick={() => setOpen(!open)}
+    />
+  );
+}
+```
+
+## Placer l’icône dans un vrai bouton {#wrap-the-icon-in-a-real-button}
+
+Pour les icônes cliquables, entourez l’icône d’un élément focusable grâce à la prop `render` : `eventProps` va sur votre élément et `animationProps` sur un `<span>` à l’intérieur. Les animations au survol se jouent alors aussi quand le bouton reçoit le focus clavier.
+
+```jsx
+import heart from 'react-useanimations/lib/heart';
+
+<UseAnimations
+  animation={heart}
+  size={32}
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Add to favorites" {...eventProps}>
+      <span {...animationProps} />
+    </button>
+  )}
+/>;
+```
+
+<div id="customize"></div>
+
+## Taille et couleur {#size--color}
+
+Les icônes sont des icônes au trait, dessinées sur un plan de travail de 24 ou 32 px, et restent nettes à toutes les tailles : donnez à `size` un nombre de pixels ou n’importe quelle longueur CSS.
+
+Les traits suivent `currentColor` : les icônes reprennent d’elles-mêmes la couleur du texte, les états de survol et le mode sombre. Changez-les avec `strokeColor` et `fillColor`, avec la propriété CSS `color`, ou stylez directement les tracés : la règle intégrée a une spécificité nulle, donc votre CSS l’emporte toujours.
+
+Certaines icônes sont évidées par endroits (la barre oblique de `visibility`, `microphone`, `video`, `volume` et `notification`, la coche de `download`, l’anneau autour du badge de `notification3`). Cet évidement prend la couleur de fond de la page : blanc sur les pages claires, sombre sur les pages en `color-scheme: dark`. Sur d’autres fonds, définissez-la avec la variable CSS `--ua-knockout`, par exemple `body { --ua-knockout: #0f172a; }`.
+
+```jsx
+// Tailwind : couleur et épaisseur du trait
+<UseAnimations animation={github} className="text-indigo-500 [&_path]:stroke-[3]" />
+```
+
+## Next.js et rendu côté serveur {#nextjs-and-server-rendering}
+
+Le composant est marqué `'use client'` et ne dessine l’animation que dans le navigateur : vous pouvez donc l’afficher depuis des server components et des frameworks SSR (Next.js, Remix, Astro) sans `dynamic(…, { ssr: false })`. Les modules d’icônes sont de simples données : les server components peuvent les importer et les transmettre en props.
+
+<div id="shadcn"></div>
+
+## shadcn/ui {#shadcnui}
+
+Chaque icône est aussi disponible dans un [registre shadcn](https://ui.shadcn.com/docs/registry). La CLI ajoute un composant prêt à l’emploi et installe `react-useanimations` :
+
+```bash
+npx shadcn@latest add https://useanimations.com/r/checkmark.json
+```
+
+```tsx
+import { AnimatedCheckmark } from '@/components/animations/checkmark';
+
+<AnimatedCheckmark size={24} />;
+```
+
+Le composant s’appelle `Animated` + l’id de l’icône en PascalCase (`check-box` → `AnimatedCheckBox`), se place dans `components/animations/<id>.tsx` et accepte les mêmes props que `UseAnimations`. L’index du registre se trouve à l’adresse [/r/registry.json](/r/registry.json). Pour utiliser la forme courte `npx shadcn@latest add @useanimations/checkmark`, ajoutez le registre à `components.json` :
+
+```json
+{
+  "registries": {
+    "@useanimations": "https://useanimations.com/r/{name}.json"
+  }
+}
+```
+
+## Votre propre animation {#your-own-animation}
+
+```jsx
+import animationData from './my-animation.json';
+
+<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
+```
+
+Votre animation doit être un fichier Lottie JSON, le format utilisé par les icônes. Le lecteur prend en charge ce dont les icônes ont besoin : calques de forme, précompositions, calques nuls et parentage, tracés, rectangles, ellipses, contours, remplissages, raccourcissement de tracés (trim paths), masques, images clés avec easing, maintiens et trajectoires de mouvement, ainsi que les expressions `loopOut()` et `wiggle()`. Le reste (dégradés, calques de texte ou d’image, effets, caches) n’est pas dessiné ; la console signale les calques, formes et expressions non pris en charge.
+
+<div id="direct-urls"></div><div id="download"></div>
+
+## Fichiers et icons.json {#files--iconsjson}
+
+Chaque icône peut aussi être téléchargée, depuis sa page ou depuis des URL stables avec CORS activé :
+
+| Fichier                        | URL                                                |
+| ------------------------------ | -------------------------------------------------- |
+| Animation (Lottie JSON)        | `https://useanimations.com/icons/<id>.json`        |
+| SVG statique de chaque état    | `https://useanimations.com/icons/<id>/<state>.svg` |
+| ZIP avec le JSON et les SVG    | `https://useanimations.com/icons/<id>.zip`         |
+| Page de l’icône                | `https://useanimations.com/icons/<id>`             |
+| Catalogue de toutes les icônes | `https://useanimations.com/icons.json`             |
+
+[icons.json](/icons.json) liste chaque icône avec son id, son titre, sa catégorie, ses mots-clés de recherche, son interaction, les URL de ses fichiers, sa taille et sa durée, son import `react-useanimations` et la commande shadcn. Le package npm contient les mêmes données : `react-useanimations/catalog.json` (métadonnées), `react-useanimations/icons` (les animations) et `react-useanimations/svg.json` (les SVG statiques).
+
+<div id="without-react"></div>
+
+## Utiliser sans React {#use-without-react}
+
+Les icônes sont du Lottie JSON standard : n’importe quel lecteur Lottie peut les jouer depuis `https://useanimations.com/icons/<id>.json` ou depuis une copie dans votre projet. En dehors de React, c’est à vous de câbler l’interaction. La page [Icônes Lottie](/lottie-icons) présente d’autres lecteurs et exemples.
+
+Certaines icônes utilisent des expressions After Effects (`loopOut()`, `wiggle()`) ; `requiresFullPlayer` les signale dans [icons.json](/icons.json). Sur le web, elles ont besoin de la version complète de lottie-web, pas de `lottie_light`, et les lecteurs natifs n’évaluent pas les expressions.
+
+<div id="html"></div><div id="interactions-web"></div>
+
+### HTML et JavaScript {#html-and-javascript}
+
+```html
+<div id="icon" style="width: 48px; height: 48px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
+<script>
+  const el = document.getElementById('icon');
+  const animation = lottie.loadAnimation({
+    container: el,
+    renderer: 'svg',
+    loop: false,
+    autoplay: false,
+    path: 'https://useanimations.com/icons/archive.json',
+  });
+  // survol : vers l’avant à l’entrée, en arrière à la sortie
+  el.addEventListener('mouseenter', () => {
+    animation.setDirection(1);
+    animation.play();
+  });
+  el.addEventListener('mouseleave', () => {
+    animation.setDirection(-1);
+    animation.play();
+  });
+</script>
+```
+
+Avec le moteur de rendu SVG, l’icône peut suivre la couleur du texte, comme avec le composant React :
+
+```css
+#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) {
+  stroke: currentColor;
+}
+#icon path[fill='rgb(0,0,0)'] {
+  fill: currentColor;
+}
+```
+
+<div id="vue"></div>
+
+### Vue {#vue}
+
+```vue
+<script setup>
+import lottie from 'lottie-web';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+const el = ref(null);
+let animation;
+onMounted(() => {
+  animation = lottie.loadAnimation({
+    container: el.value,
+    renderer: 'svg',
+    loop: true,
+    autoplay: true,
+    path: 'https://useanimations.com/icons/loading.json',
+  });
+});
+onBeforeUnmount(() => animation?.destroy());
+</script>
+
+<template>
+  <div ref="el" style="width: 48px; height: 48px" />
+</template>
+```
+
+### React Native {#react-native}
+
+```jsx
+import LottieView from 'lottie-react-native';
+
+<LottieView source={require('./loading.json')} autoPlay loop style={{ width: 48, height: 48 }} />;
+```
+
+<div id="ios"></div>
+
+### iOS {#ios}
+
+Avec [lottie-ios](https://github.com/airbnb/lottie-ios) et le JSON dans le bundle de votre app :
+
+```swift
+import Lottie
+import SwiftUI
+
+LottieView(animation: .named("loading"))
+  .looping()
+  .frame(width: 48, height: 48)
+```
+
+<div id="android"></div>
+
+### Android {#android}
+
+Avec [lottie-android](https://github.com/airbnb/lottie-android) dans Jetpack Compose et le JSON dans `res/raw` :
+
+```kotlin
+val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
+LottieAnimation(composition, iterations = LottieConstants.IterateForever, modifier = Modifier.size(48.dp))
+```
+
+### Flutter {#flutter}
+
+Avec le package [lottie](https://pub.dev/packages/lottie) :
+
+```dart
+Lottie.asset('assets/loading.json', width: 48, height: 48)
+```
+
+<div id="performance"></div><div id="accessibility"></div>
+
+## Performances et accessibilité {#performance--accessibility}
+
+- **Léger :** le lecteur pèse 8 kB gzippé, sans dépendance, et une icône de 1 à 15 kB (2 kB en médiane).
+- **Différé :** les animations ne sont dessinées que dans le navigateur, après le rendu de la page ; les boucles en lecture automatique se mettent en pause quand elles sortent de l’écran, et tout est nettoyé au démontage.
+- **Décoratives par défaut :** les icônes sont masquées aux lecteurs d’écran (`aria-hidden`), sauf si vous passez `aria-label`, qui les annonce comme une image. Pour les contrôles composés uniquement d’une icône, utilisez un vrai `<button>` avec un `aria-label` (voir [plus haut](#wrap-the-icon-in-a-real-button)) et reflétez l’état de la bascule avec `aria-pressed` ou `aria-expanded`.
+- **Réduction des animations et écrans tactiles :** les icônes respectent `prefers-reduced-motion`, et un tap sur écran tactile ne déclenche pas les animations au survol.
+
+<div id="agents"></div>
+
+## Agents de code IA {#ai-coding-agents}
+
+Les agents peuvent choisir des icônes par mot-clé ou par interaction dans [icons.json](/icons.json), ou dans `react-useanimations/catalog.json` à l’intérieur du package, puis utiliser la ligne d’import ou la commande shadcn indiquée. Les définitions de types de chaque import d’icône contiennent aussi son titre, ses mots-clés, son interaction et un aperçu. Cette documentation est disponible en Markdown (en anglais) à l’adresse [/documentation.md](/documentation.md), et [/llms.txt](/llms.txt) indexe le site.
+
+## Migrer depuis la v2 {#upgrading-from-v2}
+
+Pour la plupart des apps, migrer revient à installer la v3 : le composant, les imports `react-useanimations/lib/<name>` et les 79 icônes de la v2 restent identiques. Suivez les étapes ci-dessous qui concernent votre code.
+
+### 1. Installer la v3 {#1-install-v3}
+
+La v3 nécessite React 18 ou plus récent et n’a aucune dépendance. Désinstallez aussi lottie-web, sauf si une autre partie de votre app l’utilise.
+
+```bash
+npm install react-useanimations@3
+npm uninstall lottie-web
+```
+
+### 2. Remplacer `reverse` par `active` {#2-replace-reverse-with-active}
+
+`active` est entièrement contrôlée : l’icône s’anime quand `active` change, et un clic seul ne la fait pas basculer ; mettez-la donc à jour dans `onClick`. `reverse` fonctionne toujours comme en v2 (elle définit l’état de départ et les clics font basculer l’icône), mais elle est dépréciée. Les deux ne s’appliquent qu’aux icônes `click-toggle` : les quatre flèches dans un cercle se rejouent désormais au clic (voir l’[étape 6](#6-check-the-icons-whose-interaction-changed)).
+
+```diff
+- <UseAnimations animation={checkBox} reverse={checked} onClick={toggle} />
++ <UseAnimations animation={checkBox} active={checked} onClick={toggle} />
+```
+
+### 3. Vérifier les couleurs {#3-check-the-colors}
+
+Les icônes de la v2 étaient noires, sauf si vous définissiez `strokeColor`. Celles de la v3 suivent la couleur du texte (`currentColor`), et `fillColor` vaut par défaut `strokeColor`. Les icônes placées dans un texte ou un lien coloré changent de couleur avec lui ; pour les garder noires, définissez la couleur vous-même :
+
+```jsx
+<UseAnimations animation={github} strokeColor="#000" />
+```
+
+### 4. Remplacer `wrapperStyle`, `pathCss` et `options` {#4-move-wrapperstyle-pathcss-and-options}
+
+- **`wrapperStyle`** est dépréciée : utilisez `style`.
+- **`pathCss`** a été supprimée : stylez les tracés avec une classe.
+- **`options`** (les réglages de lottie-web) a été supprimée avec lottie-web. Utilisez les props `loop`, `autoplay` et `speed` ; les autres options de lottie-web n’ont pas d’équivalent.
+
+Si vous passez quand même `pathCss` ou `options`, un avertissement s’affiche une fois ; elles sont ignorées.
+
+```diff
+- <UseAnimations animation={github} wrapperStyle={{ margin: 8 }} pathCss="stroke-width: 3px;" options={{ loop: true }} />
++ <UseAnimations animation={github} style={{ margin: 8 }} className="thick" loop />
+```
+
+```css
+.thick path {
+  stroke-width: 3px;
+}
+```
+
+### 5. Vérifier l’élément wrapper {#5-check-the-wrapper-element}
+
+Le wrapper est désormais un `<span>` en inline-block et non plus une `<div>` : il est donc valide dans les boutons et les liens et s’aligne sur la ligne de texte. Mettez à jour le CSS qui cible le wrapper en tant que `div`, et dans la prop `render`, appliquez `animationProps` à un `<span>` :
+
+```diff
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Like" {...eventProps}>
+-     <div {...animationProps} />
++     <span {...animationProps} />
+    </button>
+  )}
+```
+
+Les icônes sont désormais masquées aux lecteurs d’écran (`aria-hidden`), sauf si vous passez `aria-label` ; ajoutez-en un aux icônes qui ont un sens par elles-mêmes.
+
+### 6. Vérifier les icônes dont l’interaction a changé {#6-check-the-icons-whose-interaction-changed}
+
+Les interactions correspondent désormais à celles de useanimations.com. Si une icône doit se comporter comme en v2, passez-lui son ancienne interaction :
+
+| Icônes                                                                                             | v2               | v3             |
+| -------------------------------------------------------------------------------------------------- | ---------------- | -------------- |
+| `arrowDownCircle`, `arrowLeftCircle`, `arrowRightCircle`, `arrowUpCircle`                          | `click-toggle`   | `click-replay` |
+| `calendar`, `folder`, `home`, `instagram`, `userMinus`, `userPlus`, `userX`, `youtube`, `youtube2` | `hover-replay`\* | `hover`        |
+| `behance`, `codepen`, `facebook`, `github`, `linkedin`, `pocket`, `twitter`                        | `hover-replay`\* | `hover-loop`   |
+| `copy`, `edit`, `mail`                                                                             | `click-replay`   | `hover`        |
+| `dribbble`                                                                                         | `hover`          | `hover-loop`   |
+| `zoomIn`, `zoomOut`                                                                                | `loop`           | `hover`        |
+
+\* La v2 les jouait une fois à l’entrée de la souris et revenait brusquement au début à la sortie ; `hover-replay` est l’interaction la plus proche.
+
+```jsx
+<UseAnimations animation={zoomIn} interaction="loop" />
+```
+
+### 7. Mettre à jour les imports {#7-update-imports}
+
+Importez les icônes uniquement sous la forme `react-useanimations/lib/<name>` ou depuis `react-useanimations/icons`. Les chemins de fichiers internes de la v2, comme `react-useanimations/lib/github/index` ou `react-useanimations/lib/github/github.json`, ne sont plus résolus ; le Lottie JSON correspond à l’`animationData` de l’icône :
+
+```diff
+- import githubJson from 'react-useanimations/lib/github/github.json';
++ import github from 'react-useanimations/lib/github';
++ const githubJson = github.animationData;
+```
+
+Les chemins `react-useanimations/utils` ont été supprimés. Importez les types depuis le package :
+
+```diff
+- import type { Animation, AnimationKey } from 'react-useanimations/utils';
++ import type { Animation, AnimationKey, Interaction, UseAnimationsProps } from 'react-useanimations';
+```
+
+`Animation` vaut désormais `{ animationData, interaction }` ; le champ `animationKey` de la v2 a disparu : les objets que vous construisez vous-même utilisent `interaction` à la place.
+
+### Les autres nouveautés {#what-else-is-new}
+
+221 icônes supplémentaires (300 au total), plusieurs icônes importables d’un coup depuis `react-useanimations/icons`, la prise en charge de la réduction des animations, le survol au focus clavier, plus d’animations au survol bloquées sur écran tactile, le rendu côté serveur sans contournement, et un [registre shadcn](#shadcnui).
+
+## Licence {#license}
+
+Les icônes et le code sont publiés sous [licence MIT](https://opensource.org/license/mit/) : utilisez-les, modifiez-les et redistribuez-les dans vos projets personnels et commerciaux. L’attribution n’est pas obligatoire, mais elle est appréciée :
+
+```html
+Animated icons by <a href="https://useanimations.com">useAnimations</a>
+```
+
+Conditions complètes : [Licence et conditions](/licencing-and-terms).
+
+## Questions fréquentes {#faq}
+
+<details><summary>useAnimations est-il gratuit pour les projets commerciaux ?</summary>
+
+Oui. Les icônes et le package sont sous licence MIT, sans attribution obligatoire.
+
+</details>
+
+<details><summary>Comment changer la couleur d’une icône ?</summary>
+
+Les icônes suivent la couleur du texte. Changez-la avec `strokeColor` et `fillColor`, avec la propriété CSS `color` ou en stylant les tracés. Voir [Taille et couleur](#size--color).
+
+</details>
+
+<details><summary>Est-ce que ça fonctionne sans React ?</summary>
+
+Le package est destiné à React. Chaque icône existe aussi en fichier Lottie JSON, lisible par lottie-web, lottie-ios, lottie-android, Flutter et React Native, et en SVG statique. Voir [Utiliser sans React](#use-without-react) et [Icônes Lottie](/lottie-icons).
+
+</details>
+
+<details><summary>Les agents de code IA peuvent-ils utiliser useAnimations ?</summary>
+
+Oui. Indiquez-leur [icons.json](/icons.json) et [/documentation.md](/documentation.md) ; le package lui-même fournit `catalog.json` et des types documentés pour chaque icône.
+
+</details>
diff --git a/website/src/content/documentation.id.md b/website/src/content/documentation.id.md
new file mode 100644
index 0000000..66d5acb
--- /dev/null
+++ b/website/src/content/documentation.id.md
@@ -0,0 +1,454 @@
+# Dokumentasi {#documentation}
+
+useAnimations adalah pustaka 300 ikon animasi untuk React yang gratis dan berlisensi MIT. Setiap ikon sudah punya interaksi bawaan: berputar terus (loop), diputar saat diklik, atau diputar saat di-hover. Pakai lewat paket `react-useanimations` atau tambahkan dengan CLI shadcn.
+
+<div id="quick-start-react"></div>
+
+## Mulai cepat {#quick-start}
+
+```bash
+npm install react-useanimations
+```
+
+```jsx
+import UseAnimations from 'react-useanimations';
+import github from 'react-useanimations/lib/github';
+
+export default function Header() {
+  return <UseAnimations animation={github} size={32} />;
+}
+```
+
+Ikon mengikuti warna teks dan menjalankan interaksinya sendiri: `github` berputar berulang selama di-hover. Paket ini tanpa dependensi; player bawaan (8 kB setelah gzip) menggambar ikon sebagai SVG, dan setiap ikon adalah modul terpisah, jadi bundle Anda hanya berisi ikon yang Anda import.
+
+## Interaksi {#interactions}
+
+Setiap ikon hadir dengan interaksi yang dirancang untuknya. Ganti dengan prop `interaction`.
+
+| Interaksi      | Yang terjadi                                                               | Contoh ikon                          |
+| -------------- | -------------------------------------------------------------------------- | ------------------------------------ |
+| `loop`         | Berputar terus-menerus.                                                    | `loading`, `activity`, `alertCircle` |
+| `click-toggle` | Beralih antara dua keadaan saat diklik (maju, lalu mundur).                | `menu`, `checkBox`, `playPause`      |
+| `click-replay` | Diputar ulang dari awal setiap kali diklik.                                | `download`, `refresh`, `send`        |
+| `hover`        | Diputar maju saat kursor masuk dan mundur saat kursor keluar.              | `archive`, `settings`, `trash`       |
+| `hover-loop`   | Berputar berulang selama di-hover dan menyelesaikan siklusnya saat keluar. | `github`, `twitter`, `dribbble`      |
+| `hover-replay` | Diputar sekali dari awal saat kursor masuk.                                | `arrowRight`, `bluetooth`, `zap`     |
+
+Jika pengguna memilih reduced motion, ikon tetap diam: loop menampilkan frame pertamanya, animasi hover dan replay tidak diputar, dan toggle langsung berpindah ke keadaan barunya.
+
+<div id="react"></div>
+
+## Props {#props}
+
+```jsx
+<UseAnimations animation={github} size={56} strokeColor="#4b5cff" style={{ padding: 8 }} />
+```
+
+| Prop          | Default          | Keterangan                                                                                                                   |
+| ------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `animation`   | —                | Ikon yang di-import dari `react-useanimations/lib/<name>`, atau `{ animationData, interaction }` untuk animasi Anda sendiri. |
+| `size`        | `24`             | Lebar dan tinggi; angka berarti piksel, string bisa berupa panjang CSS apa pun seperti `'1.5em'`.                            |
+| `strokeColor` | `'currentColor'` | Warna garis (stroke). Secara default ikon mengikuti warna teks.                                                              |
+| `fillColor`   | `strokeColor`    | Warna bagian yang terisi, misalnya hati yang disukai.                                                                        |
+| `interaction` | per ikon         | `'loop'`, `'click-toggle'`, `'click-replay'`, `'hover'`, `'hover-loop'`, atau `'hover-replay'`.                              |
+| `active`      | —                | Untuk ikon `click-toggle`: `true` menampilkan keadaan akhir. Dikendalikan: atur di `onClick`, klik tidak men-toggle-nya.     |
+| `autoplay`    | per ikon         | `true` untuk ikon `loop`, kecuali pengguna memilih reduced motion.                                                           |
+| `loop`        | per ikon         | `true` untuk ikon `loop` dan `hover-loop`.                                                                                   |
+| `speed`       | `1`              | Kecepatan pemutaran.                                                                                                         |
+| `render`      | —                | Render prop untuk wrapper kustom, lihat [Bungkus ikon dengan tombol sungguhan](#wrap-the-icon-in-a-real-button).             |
+
+Prop lainnya (`className`, `aria-label`, `onClick`, …) diteruskan ke `<span>` pembungkus. Event handler Anda dijalankan sebelum handler animasi; panggil `event.preventDefault()` untuk melewati animasinya.
+
+## Meng-import ikon {#importing-icons}
+
+Import setiap ikon dari `react-useanimations/lib/<name>`, atau beberapa sekaligus dari `react-useanimations/icons`:
+
+```jsx
+import { github, heart, menu } from 'react-useanimations/icons';
+```
+
+Dengan cara mana pun, build produksi hanya menyertakan ikon yang Anda pakai. Dev server dan test runner tidak melakukan tree-shaking, jadi di sana `react-useanimations/icons` memuat semua ikon; pakai `lib/<name>` jika hal itu berpengaruh. `delete` dan `package` adalah kata yang dicadangkan: import keduanya sebagai `deleteIcon` dan `packageIcon`.
+
+## Toggle yang dikendalikan {#controlled-toggle}
+
+```jsx
+import { useState } from 'react';
+import UseAnimations from 'react-useanimations';
+import menu from 'react-useanimations/lib/menu';
+
+export function MenuButton() {
+  const [open, setOpen] = useState(false);
+  return (
+    <UseAnimations
+      animation={menu}
+      size={40}
+      active={open} // juga beranimasi saat `open` diubah dari tempat lain
+      onClick={() => setOpen(!open)}
+    />
+  );
+}
+```
+
+## Bungkus ikon dengan tombol sungguhan {#wrap-the-icon-in-a-real-button}
+
+Untuk ikon yang bisa diklik, bungkus ikon dengan elemen yang bisa difokus melalui prop `render`: `eventProps` dipasang di elemen Anda dan `animationProps` di `<span>` di dalamnya. Dengan begitu, animasi hover juga diputar saat tombol mendapat fokus keyboard.
+
+```jsx
+import heart from 'react-useanimations/lib/heart';
+
+<UseAnimations
+  animation={heart}
+  size={32}
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Add to favorites" {...eventProps}>
+      <span {...animationProps} />
+    </button>
+  )}
+/>;
+```
+
+<div id="customize"></div>
+
+## Ukuran & warna {#size--color}
+
+Ikon-ikon ini adalah ikon garis yang digambar di artboard 24 atau 32 px dan tetap tajam di ukuran berapa pun: atur `size` dengan angka dalam piksel atau panjang CSS apa pun.
+
+Garisnya mengikuti `currentColor`, jadi ikon otomatis mengikuti warna teks, keadaan hover, dan dark mode. Ubah dengan `strokeColor` dan `fillColor`, dengan properti CSS `color`, atau beri style langsung pada path-nya: aturan bawaannya punya specificity nol, jadi CSS Anda selalu menang.
+
+Beberapa ikon punya celah yang memotong bentuknya sendiri (garis miring pada `visibility`, `microphone`, `video`, `volume`, dan `notification`, tanda centang pada `download`, cincin di sekitar badge `notification3`). Celah ini mengambil warna latar halaman: putih di halaman terang dan gelap di halaman dengan `color-scheme: dark`. Untuk latar lain, atur dengan variabel CSS `--ua-knockout`, misalnya `body { --ua-knockout: #0f172a; }`.
+
+```jsx
+// Tailwind: warna dan ketebalan garis
+<UseAnimations animation={github} className="text-indigo-500 [&_path]:stroke-[3]" />
+```
+
+## Next.js dan server rendering {#nextjs-and-server-rendering}
+
+Komponen ini ditandai `'use client'` dan hanya menggambar animasi di browser, jadi Anda bisa me-render-nya dari server component dan framework SSR (Next.js, Remix, Astro) tanpa `dynamic(…, { ssr: false })`. Modul ikon hanyalah data biasa, sehingga server component bisa meng-import-nya dan meneruskannya sebagai props.
+
+<div id="shadcn"></div>
+
+## shadcn/ui {#shadcnui}
+
+Setiap ikon juga tersedia di [registry shadcn](https://ui.shadcn.com/docs/registry). CLI-nya menambahkan komponen siap pakai dan memasang `react-useanimations`:
+
+```bash
+npx shadcn@latest add https://useanimations.com/r/checkmark.json
+```
+
+```tsx
+import { AnimatedCheckmark } from '@/components/animations/checkmark';
+
+<AnimatedCheckmark size={24} />;
+```
+
+Nama komponennya adalah `Animated` + id ikon dalam PascalCase (`check-box` → `AnimatedCheckBox`), file-nya ditempatkan di `components/animations/<id>.tsx`, dan komponennya menerima props yang sama dengan `UseAnimations`. Indeks registry ada di [/r/registry.json](/r/registry.json). Untuk bentuk singkat `npx shadcn@latest add @useanimations/checkmark`, tambahkan registry ke `components.json`:
+
+```json
+{
+  "registries": {
+    "@useanimations": "https://useanimations.com/r/{name}.json"
+  }
+}
+```
+
+## Animasi Anda sendiri {#your-own-animation}
+
+```jsx
+import animationData from './my-animation.json';
+
+<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
+```
+
+Animasi Anda harus berupa file Lottie JSON, format yang sama dengan ikon-ikon ini. Player-nya mendukung apa yang dibutuhkan ikon: shape layer, precomposition, null layer dan parenting, path, persegi panjang, elips, stroke, fill, trim path, mask, keyframe dengan easing, hold, dan motion path, serta expression `loopOut()` dan `wiggle()`. Selain itu, misalnya gradien, text layer atau image layer, efek, dan matte, tidak digambar; console akan memberi peringatan tentang layer, shape, dan expression yang tidak didukung.
+
+<div id="direct-urls"></div><div id="download"></div>
+
+## File & icons.json {#files--iconsjson}
+
+Setiap ikon juga bisa diunduh, dari halaman ikonnya (dalam bahasa Inggris) atau dari URL tetap dengan CORS aktif:
+
+| File                            | URL                                                |
+| ------------------------------- | -------------------------------------------------- |
+| Animasi (Lottie JSON)           | `https://useanimations.com/icons/<id>.json`        |
+| SVG statis untuk setiap keadaan | `https://useanimations.com/icons/<id>/<state>.svg` |
+| ZIP berisi JSON dan SVG         | `https://useanimations.com/icons/<id>.zip`         |
+| Halaman ikon                    | `https://useanimations.com/icons/<id>`             |
+| Katalog semua ikon              | `https://useanimations.com/icons.json`             |
+
+[icons.json](/icons.json) memuat daftar semua ikon beserta id, judul, kategori, kata kunci pencarian, interaksi, URL file, ukuran dan durasi, baris import `react-useanimations`, serta perintah shadcn-nya. Paket npm juga menyertakan data yang sama: `react-useanimations/catalog.json` (metadata), `react-useanimations/icons` (animasinya), dan `react-useanimations/svg.json` (SVG statisnya).
+
+<div id="without-react"></div>
+
+## Memakai tanpa React {#use-without-react}
+
+Ikon-ikon ini adalah Lottie JSON standar, jadi Lottie player mana pun bisa memutarnya dari `https://useanimations.com/icons/<id>.json` atau dari salinan di proyek Anda. Di luar React, interaksinya Anda pasang sendiri. Halaman [Ikon Lottie](/lottie-icons) berisi lebih banyak player dan contoh.
+
+Beberapa ikon memakai expression After Effects (`loopOut()`, `wiggle()`); `requiresFullPlayer` menandainya di [icons.json](/icons.json). Di web, ikon-ikon ini memerlukan build lengkap lottie-web, bukan `lottie_light`, dan player native tidak mengevaluasi expression.
+
+<div id="html"></div><div id="interactions-web"></div>
+
+### HTML dan JavaScript {#html-and-javascript}
+
+```html
+<div id="icon" style="width: 48px; height: 48px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
+<script>
+  const el = document.getElementById('icon');
+  const animation = lottie.loadAnimation({
+    container: el,
+    renderer: 'svg',
+    loop: false,
+    autoplay: false,
+    path: 'https://useanimations.com/icons/archive.json',
+  });
+  // hover: maju saat kursor masuk, mundur saat keluar
+  el.addEventListener('mouseenter', () => {
+    animation.setDirection(1);
+    animation.play();
+  });
+  el.addEventListener('mouseleave', () => {
+    animation.setDirection(-1);
+    animation.play();
+  });
+</script>
+```
+
+Dengan renderer SVG, ikon bisa mengikuti warna teks seperti komponen React:
+
+```css
+#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) {
+  stroke: currentColor;
+}
+#icon path[fill='rgb(0,0,0)'] {
+  fill: currentColor;
+}
+```
+
+<div id="vue"></div>
+
+### Vue {#vue}
+
+```vue
+<script setup>
+import lottie from 'lottie-web';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+const el = ref(null);
+let animation;
+onMounted(() => {
+  animation = lottie.loadAnimation({
+    container: el.value,
+    renderer: 'svg',
+    loop: true,
+    autoplay: true,
+    path: 'https://useanimations.com/icons/loading.json',
+  });
+});
+onBeforeUnmount(() => animation?.destroy());
+</script>
+
+<template>
+  <div ref="el" style="width: 48px; height: 48px" />
+</template>
+```
+
+### React Native {#react-native}
+
+```jsx
+import LottieView from 'lottie-react-native';
+
+<LottieView source={require('./loading.json')} autoPlay loop style={{ width: 48, height: 48 }} />;
+```
+
+<div id="ios"></div>
+
+### iOS {#ios}
+
+Dengan [lottie-ios](https://github.com/airbnb/lottie-ios) dan file JSON di dalam bundle aplikasi Anda:
+
+```swift
+import Lottie
+import SwiftUI
+
+LottieView(animation: .named("loading"))
+  .looping()
+  .frame(width: 48, height: 48)
+```
+
+<div id="android"></div>
+
+### Android {#android}
+
+Dengan [lottie-android](https://github.com/airbnb/lottie-android) di Jetpack Compose dan file JSON di `res/raw`:
+
+```kotlin
+val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
+LottieAnimation(composition, iterations = LottieConstants.IterateForever, modifier = Modifier.size(48.dp))
+```
+
+### Flutter {#flutter}
+
+Dengan paket [lottie](https://pub.dev/packages/lottie):
+
+```dart
+Lottie.asset('assets/loading.json', width: 48, height: 48)
+```
+
+<div id="performance"></div><div id="accessibility"></div>
+
+## Performa & aksesibilitas {#performance--accessibility}
+
+- **Kecil:** player-nya berukuran 8 kB setelah gzip tanpa dependensi, dan satu ikon berukuran 1 sampai 15 kB (median 2 kB).
+- **Lazy:** animasi hanya digambar di browser, setelah halaman selesai di-render; loop yang berputar otomatis berhenti sementara saat digulir keluar dari layar, dan semuanya dibersihkan saat unmount.
+- **Dekoratif secara default:** ikon disembunyikan dari pembaca layar (`aria-hidden`) kecuali Anda memberikan `aria-label`, yang membuatnya dibacakan sebagai gambar. Untuk kontrol yang hanya berisi ikon, pakai `<button>` sungguhan dengan `aria-label` (lihat [di atas](#wrap-the-icon-in-a-real-button)) dan tunjukkan keadaan toggle dengan `aria-pressed` atau `aria-expanded`.
+- **Reduced motion dan layar sentuh:** ikon menghormati `prefers-reduced-motion`, dan ketukan di layar sentuh tidak memicu animasi hover.
+
+<div id="agents"></div>
+
+## Coding agent AI {#ai-coding-agents}
+
+Agen bisa memilih ikon berdasarkan kata kunci atau interaksi dari [icons.json](/icons.json), atau dari `react-useanimations/catalog.json` di dalam paket, lalu memakai baris import atau perintah shadcn yang tercantum di sana. Definisi tipe setiap import ikon juga memuat judul, kata kunci, interaksi, dan pratinjaunya. Dokumentasi ini tersedia dalam format Markdown di [/documentation.md](/documentation.md), dan [/llms.txt](/llms.txt) berisi indeks situs.
+
+## Upgrade dari v2 {#upgrading-from-v2}
+
+Bagi kebanyakan aplikasi, upgrade cukup dengan memasang v3: komponennya, import `react-useanimations/lib/<name>`, dan ke-79 ikon v2 tetap sama. Ikuti langkah-langkah di bawah yang relevan dengan kode Anda.
+
+### 1. Pasang v3 {#1-install-v3}
+
+v3 memerlukan React 18 atau yang lebih baru dan tidak punya dependensi. Hapus juga lottie-web, kecuali masih dipakai bagian lain di aplikasi Anda.
+
+```bash
+npm install react-useanimations@3
+npm uninstall lottie-web
+```
+
+### 2. Ganti `reverse` dengan `active` {#2-replace-reverse-with-active}
+
+`active` sepenuhnya dikendalikan: ikon beranimasi saat `active` berubah, dan klik saja tidak men-toggle-nya, jadi perbarui nilainya di `onClick`. `reverse` masih bekerja seperti di v2 (menentukan keadaan awal, dan klik men-toggle ikon), tetapi sudah deprecated. Keduanya hanya berlaku untuk ikon `click-toggle`: keempat ikon lingkaran panah kini diputar ulang saat diklik (lihat [langkah 6](#6-check-the-icons-whose-interaction-changed)).
+
+```diff
+- <UseAnimations animation={checkBox} reverse={checked} onClick={toggle} />
++ <UseAnimations animation={checkBox} active={checked} onClick={toggle} />
+```
+
+### 3. Periksa warnanya {#3-check-the-colors}
+
+Ikon v2 berwarna hitam kecuali Anda mengatur `strokeColor`. Ikon v3 mengikuti warna teks (`currentColor`), dan `fillColor` secara default sama dengan `strokeColor`. Ikon di dalam teks atau tautan berwarna akan ikut berubah warna; agar tetap hitam, atur warnanya sendiri:
+
+```jsx
+<UseAnimations animation={github} strokeColor="#000" />
+```
+
+### 4. Pindahkan `wrapperStyle`, `pathCss`, dan `options` {#4-move-wrapperstyle-pathcss-and-options}
+
+- **`wrapperStyle`** sudah deprecated: pakai `style`.
+- **`pathCss`** sudah dihapus: beri style pada path-nya dengan class.
+- **`options`** (pengaturan lottie-web) dihapus bersama lottie-web. Pakai props `loop`, `autoplay`, dan `speed`; opsi lottie-web lainnya tidak punya padanan.
+
+Jika `pathCss` atau `options` tetap diberikan, akan muncul satu kali peringatan di console; keduanya diabaikan.
+
+```diff
+- <UseAnimations animation={github} wrapperStyle={{ margin: 8 }} pathCss="stroke-width: 3px;" options={{ loop: true }} />
++ <UseAnimations animation={github} style={{ margin: 8 }} className="thick" loop />
+```
+
+```css
+.thick path {
+  stroke-width: 3px;
+}
+```
+
+### 5. Periksa elemen pembungkus {#5-check-the-wrapper-element}
+
+Pembungkusnya kini berupa `<span>` inline-block, bukan `<div>`, sehingga valid di dalam tombol dan tautan dan berada sejajar dengan baris teks. Perbarui CSS yang menargetkan pembungkus sebagai `div`, dan sebarkan `animationProps` ke `<span>` di dalam prop `render`:
+
+```diff
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Like" {...eventProps}>
+-     <div {...animationProps} />
++     <span {...animationProps} />
+    </button>
+  )}
+```
+
+Ikon kini disembunyikan dari pembaca layar (`aria-hidden`) kecuali Anda memberikan `aria-label`; tambahkan label pada ikon yang punya makna sendiri.
+
+### 6. Periksa ikon yang interaksinya berubah {#6-check-the-icons-whose-interaction-changed}
+
+Interaksi kini sama dengan yang ada di useanimations.com. Jika sebuah ikon harus berperilaku seperti di v2, berikan interaksi lamanya:
+
+| Ikon                                                                                               | v2               | v3             |
+| -------------------------------------------------------------------------------------------------- | ---------------- | -------------- |
+| `arrowDownCircle`, `arrowLeftCircle`, `arrowRightCircle`, `arrowUpCircle`                          | `click-toggle`   | `click-replay` |
+| `calendar`, `folder`, `home`, `instagram`, `userMinus`, `userPlus`, `userX`, `youtube`, `youtube2` | `hover-replay`\* | `hover`        |
+| `behance`, `codepen`, `facebook`, `github`, `linkedin`, `pocket`, `twitter`                        | `hover-replay`\* | `hover-loop`   |
+| `copy`, `edit`, `mail`                                                                             | `click-replay`   | `hover`        |
+| `dribbble`                                                                                         | `hover`          | `hover-loop`   |
+| `zoomIn`, `zoomOut`                                                                                | `loop`           | `hover`        |
+
+\* v2 memutar ikon-ikon ini sekali saat kursor masuk dan melompat kembali ke awal saat kursor keluar; `hover-replay` adalah yang paling mendekati.
+
+```jsx
+<UseAnimations animation={zoomIn} interaction="loop" />
+```
+
+### 7. Perbarui import {#7-update-imports}
+
+Import ikon hanya sebagai `react-useanimations/lib/<name>` atau dari `react-useanimations/icons`. Path file internal v2 seperti `react-useanimations/lib/github/index` atau `react-useanimations/lib/github/github.json` tidak bisa di-resolve lagi; Lottie JSON-nya kini ada di `animationData` milik ikon:
+
+```diff
+- import githubJson from 'react-useanimations/lib/github/github.json';
++ import github from 'react-useanimations/lib/github';
++ const githubJson = github.animationData;
+```
+
+Path `react-useanimations/utils` sudah dihapus. Import tipenya dari paket utama:
+
+```diff
+- import type { Animation, AnimationKey } from 'react-useanimations/utils';
++ import type { Animation, AnimationKey, Interaction, UseAnimationsProps } from 'react-useanimations';
+```
+
+`Animation` kini berbentuk `{ animationData, interaction }`; field `animationKey` dari v2 sudah tidak ada, jadi objek yang Anda buat sendiri memakai `interaction` sebagai gantinya.
+
+### Apa lagi yang baru {#what-else-is-new}
+
+221 ikon tambahan (total 300), import beberapa ikon sekaligus dari `react-useanimations/icons`, dukungan reduced motion, hover saat fokus keyboard, tidak ada lagi animasi hover yang macet di layar sentuh, server rendering tanpa trik tambahan, dan [registry shadcn](#shadcnui).
+
+## Lisensi {#license}
+
+Ikon dan kodenya dirilis di bawah [lisensi MIT](https://opensource.org/license/mit/): Anda bebas memakai, mengubah, dan mendistribusikannya ulang untuk proyek pribadi maupun komersial. Atribusi tidak wajib, tetapi kami hargai:
+
+```html
+Animated icons by <a href="https://useanimations.com">useAnimations</a>
+```
+
+Ketentuan lengkap: [Lisensi & Ketentuan](/licencing-and-terms).
+
+## FAQ {#faq}
+
+<details><summary>Apakah useAnimations gratis untuk proyek komersial?</summary>
+
+Ya. Ikon dan paketnya berlisensi MIT, tanpa kewajiban atribusi.
+
+</details>
+
+<details><summary>Bagaimana cara mengubah warna ikon?</summary>
+
+Ikon mengikuti warna teks. Ubah dengan `strokeColor` dan `fillColor`, properti CSS `color`, atau dengan memberi style pada path-nya. Lihat [Ukuran & warna](#size--color).
+
+</details>
+
+<details><summary>Apakah bisa dipakai tanpa React?</summary>
+
+Paketnya khusus untuk React. Namun setiap ikon juga tersedia sebagai file Lottie JSON yang bisa diputar oleh lottie-web, lottie-ios, lottie-android, Flutter, dan React Native, serta sebagai SVG statis. Lihat [Memakai tanpa React](#use-without-react) dan [Ikon Lottie](/lottie-icons).
+
+</details>
+
+<details><summary>Bisakah coding agent AI memakai useAnimations?</summary>
+
+Bisa. Arahkan agen ke [icons.json](/icons.json) dan [/documentation.md](/documentation.md); paketnya sendiri menyertakan `catalog.json` dan tipe yang terdokumentasi untuk setiap ikon.
+
+</details>
diff --git a/website/src/content/documentation.ja.md b/website/src/content/documentation.ja.md
new file mode 100644
index 0000000..32052f7
--- /dev/null
+++ b/website/src/content/documentation.ja.md
@@ -0,0 +1,454 @@
+# ドキュメント {#documentation}
+
+useAnimations は、React 向けの 300 個のアニメーションアイコンをまとめた、無料で MIT ライセンスのライブラリです。どのアイコンにもインタラクションが組み込まれていて、ループする、クリックで再生する、ホバーで再生する、のいずれかの動きをします。`react-useanimations` パッケージで使うことも、shadcn CLI で追加することもできます。
+
+<div id="quick-start-react"></div>
+
+## クイックスタート {#quick-start}
+
+```bash
+npm install react-useanimations
+```
+
+```jsx
+import UseAnimations from 'react-useanimations';
+import github from 'react-useanimations/lib/github';
+
+export default function Header() {
+  return <UseAnimations animation={github} size={32} />;
+}
+```
+
+アイコンはテキストの色に追従し、それぞれ決まったインタラクションで再生されます。`github` はホバーしている間ループします。パッケージに依存関係はなく、内蔵のプレーヤー（gzip 圧縮後 8 kB）がアイコンを SVG として描画します。アイコンはそれぞれ独立したモジュールなので、バンドルに含まれるのはインポートしたアイコンだけです。
+
+## インタラクション {#interactions}
+
+どのアイコンにも、デザイン時に想定したインタラクションが付いています。`interaction` prop で上書きできます。
+
+| インタラクション | 動作                                                           | アイコンの例                         |
+| ---------------- | -------------------------------------------------------------- | ------------------------------------ |
+| `loop`           | 再生し続けます。                                               | `loading`、`activity`、`alertCircle` |
+| `click-toggle`   | クリックで 2 つの状態を切り替えます（順方向、次に逆方向）。    | `menu`、`checkBox`、`playPause`      |
+| `click-replay`   | クリックのたびに最初から再生します。                           | `download`、`refresh`、`send`        |
+| `hover`          | ポインターが乗ると順方向に、離れると逆方向に再生します。       | `archive`、`settings`、`trash`       |
+| `hover-loop`     | ホバー中はループし、離れると今のサイクルを最後まで再生します。 | `github`、`twitter`、`dribbble`      |
+| `hover-replay`   | ポインターが乗ると最初から 1 回再生します。                    | `arrowRight`、`bluetooth`、`zap`     |
+
+ユーザーがモーション軽減を設定している場合、アイコンは動きません。ループは最初のフレームを表示し、ホバーやリプレイのアニメーションは再生されず、トグルはすぐに新しい状態に切り替わります。
+
+<div id="react"></div>
+
+## Props {#props}
+
+```jsx
+<UseAnimations animation={github} size={56} strokeColor="#4b5cff" style={{ padding: 8 }} />
+```
+
+| Prop          | デフォルト       | 説明                                                                                                                                  |
+| ------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `animation`   | —                | `react-useanimations/lib/<name>` からインポートしたアイコン。独自のアニメーションなら `{ animationData, interaction }`。              |
+| `size`        | `24`             | 幅と高さ。数値はピクセル、文字列は `'1.5em'` などの任意の CSS の長さです。                                                            |
+| `strokeColor` | `'currentColor'` | 線の色。デフォルトではテキストの色に追従します。                                                                                      |
+| `fillColor`   | `strokeColor`    | 塗りつぶし部分の色（いいね済みのハートなど）。                                                                                        |
+| `interaction` | アイコンごと     | `'loop'`、`'click-toggle'`、`'click-replay'`、`'hover'`、`'hover-loop'`、`'hover-replay'` のいずれか。                                |
+| `active`      | —                | `click-toggle` のアイコン用。`true` で終了状態を表示します。制御型なので `onClick` で更新してください。クリックでは切り替わりません。 |
+| `autoplay`    | アイコンごと     | `loop` のアイコンでは `true`（モーション軽減が有効な場合を除く）。                                                                    |
+| `loop`        | アイコンごと     | `loop` と `hover-loop` のアイコンでは `true`。                                                                                        |
+| `speed`       | `1`              | 再生速度。                                                                                                                            |
+| `render`      | —                | 独自のラッパーを使うための render prop。[アイコンを本物のボタンで包む](#wrap-the-icon-in-a-real-button)を参照してください。           |
+
+それ以外の prop（`className`、`aria-label`、`onClick` など）はラッパーの `<span>` に渡されます。イベントハンドラーはアニメーションの処理より先に実行され、`event.preventDefault()` を呼ぶとアニメーションをスキップできます。
+
+## アイコンのインポート {#importing-icons}
+
+アイコンは 1 つずつ `react-useanimations/lib/<name>` からインポートするか、`react-useanimations/icons` から複数まとめてインポートします：
+
+```jsx
+import { github, heart, menu } from 'react-useanimations/icons';
+```
+
+どちらの方法でも、本番ビルドには使ったアイコンだけが含まれます。ただし開発サーバーやテストランナーはツリーシェイキングを行わないため、`react-useanimations/icons` を使うと全アイコンが読み込まれます。それが気になる場合は `lib/<name>` を使ってください。`delete` と `package` は予約語なので、`deleteIcon` と `packageIcon` としてインポートします。
+
+## 制御型のトグル {#controlled-toggle}
+
+```jsx
+import { useState } from 'react';
+import UseAnimations from 'react-useanimations';
+import menu from 'react-useanimations/lib/menu';
+
+export function MenuButton() {
+  const [open, setOpen] = useState(false);
+  return (
+    <UseAnimations
+      animation={menu}
+      size={40}
+      active={open} // `open` がほかの場所で変わったときもアニメーションする
+      onClick={() => setOpen(!open)}
+    />
+  );
+}
+```
+
+## アイコンを本物のボタンで包む {#wrap-the-icon-in-a-real-button}
+
+クリックできるアイコンは、`render` prop を使ってフォーカス可能な要素で包みましょう。`eventProps` は自分の要素に、`animationProps` はその中の `<span>` に渡します。こうすると、ボタンがキーボードフォーカスを受けたときにもホバーアニメーションが再生されます。
+
+```jsx
+import heart from 'react-useanimations/lib/heart';
+
+<UseAnimations
+  animation={heart}
+  size={32}
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Add to favorites" {...eventProps}>
+      <span {...animationProps} />
+    </button>
+  )}
+/>;
+```
+
+<div id="customize"></div>
+
+## サイズと色 {#size--color}
+
+アイコンは 24 px または 32 px のアートボードに描かれたラインアイコンで、どのサイズでもくっきり表示されます。`size` にはピクセル数か任意の CSS の長さを指定します。
+
+線は `currentColor` に追従するので、アイコンはテキストの色、ホバー時の色、ダークモードに自動で合わせます。色は `strokeColor` と `fillColor`、CSS の `color`、またはパスへのスタイル指定で変更できます。組み込みのルールは詳細度がゼロなので、自分で書いた CSS が必ず優先されます。
+
+一部のアイコンは、自身の形に切り欠きを入れています（`visibility`、`microphone`、`video`、`volume`、`notification` の斜線、`download` のチェック、`notification3` のバッジを囲むリング）。この切り欠きはページの背景色になり、明るいページでは白、`color-scheme: dark` のページでは暗い色になります。それ以外の背景では、`--ua-knockout` CSS 変数で指定してください（例：`body { --ua-knockout: #0f172a; }`）。
+
+```jsx
+// Tailwind：色と線の太さ
+<UseAnimations animation={github} className="text-indigo-500 [&_path]:stroke-[3]" />
+```
+
+## Next.js とサーバーサイドレンダリング {#nextjs-and-server-rendering}
+
+コンポーネントには `'use client'` が付いていて、アニメーションはブラウザーでのみ描画されます。そのため、サーバーコンポーネントや SSR フレームワーク（Next.js、Remix、Astro）から、`dynamic(…, { ssr: false })` なしでレンダリングできます。アイコンのモジュールはただのデータなので、サーバーコンポーネントでインポートして props として渡せます。
+
+<div id="shadcn"></div>
+
+## shadcn/ui {#shadcnui}
+
+どのアイコンも [shadcn レジストリ](https://ui.shadcn.com/docs/registry)に登録されています。CLI がすぐに使えるコンポーネントを追加し、`react-useanimations` をインストールします：
+
+```bash
+npx shadcn@latest add https://useanimations.com/r/checkmark.json
+```
+
+```tsx
+import { AnimatedCheckmark } from '@/components/animations/checkmark';
+
+<AnimatedCheckmark size={24} />;
+```
+
+コンポーネント名は `Animated` + PascalCase にしたアイコン ID（`check-box` → `AnimatedCheckBox`）で、`components/animations/<id>.tsx` に追加され、`UseAnimations` と同じ props を受け取ります。レジストリのインデックスは [/r/registry.json](/r/registry.json) です。`npx shadcn@latest add @useanimations/checkmark` のように短く書くには、`components.json` にレジストリを追加します：
+
+```json
+{
+  "registries": {
+    "@useanimations": "https://useanimations.com/r/{name}.json"
+  }
+}
+```
+
+## 独自のアニメーション {#your-own-animation}
+
+```jsx
+import animationData from './my-animation.json';
+
+<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
+```
+
+独自のアニメーションは、アイコンと同じ Lottie JSON 形式である必要があります。プレーヤーが対応しているのはアイコンに必要な機能です。シェイプレイヤー、プリコンポジション、ヌルレイヤーと親子関係、パス、長方形、楕円、線、塗り、パスのトリミング、マスク、イージング付きのキーフレーム、停止キーフレーム、モーションパス、そして `loopOut()` と `wiggle()` のエクスプレッションです。グラデーション、テキストレイヤーや画像レイヤー、エフェクト、マットなどそれ以外のものは描画されず、未対応のレイヤー、シェイプ、エクスプレッションについてはコンソールに警告が出ます。
+
+<div id="direct-urls"></div><div id="download"></div>
+
+## ファイルと icons.json {#files--iconsjson}
+
+どのアイコンも、各アイコンのページから、または CORS を有効にした固定の URL からダウンロードできます：
+
+| ファイル                      | URL                                                |
+| ----------------------------- | -------------------------------------------------- |
+| アニメーション（Lottie JSON） | `https://useanimations.com/icons/<id>.json`        |
+| 各状態の静的 SVG              | `https://useanimations.com/icons/<id>/<state>.svg` |
+| JSON と SVG をまとめた ZIP    | `https://useanimations.com/icons/<id>.zip`         |
+| アイコンのページ（英語）      | `https://useanimations.com/icons/<id>`             |
+| 全アイコンのカタログ          | `https://useanimations.com/icons.json`             |
+
+[icons.json](/icons.json) には、すべてのアイコンの ID、タイトル、カテゴリ、検索キーワード、インタラクション、ファイル URL、サイズ、再生時間、`react-useanimations` のインポート文、shadcn のコマンドが載っています。npm パッケージにも同じデータが入っています。`react-useanimations/catalog.json`（メタデータ）、`react-useanimations/icons`（アニメーション）、`react-useanimations/svg.json`（静的 SVG）です。
+
+<div id="without-react"></div>
+
+## React なしで使う {#use-without-react}
+
+アイコンは標準的な Lottie JSON なので、どの Lottie プレーヤーでも `https://useanimations.com/icons/<id>.json` から、またはプロジェクトにコピーしたファイルから再生できます。React 以外では、インタラクションは自分で組む必要があります。ほかのプレーヤーや例は [Lottie アイコン](/lottie-icons)にまとめています。
+
+一部のアイコンは After Effects のエクスプレッション（`loopOut()`、`wiggle()`）を使っていて、[icons.json](/icons.json) では `requiresFullPlayer` で示されています。Web では `lottie_light` ではなく lottie-web のフルビルドが必要で、ネイティブのプレーヤーはエクスプレッションを評価しません。
+
+<div id="html"></div><div id="interactions-web"></div>
+
+### HTML と JavaScript {#html-and-javascript}
+
+```html
+<div id="icon" style="width: 48px; height: 48px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
+<script>
+  const el = document.getElementById('icon');
+  const animation = lottie.loadAnimation({
+    container: el,
+    renderer: 'svg',
+    loop: false,
+    autoplay: false,
+    path: 'https://useanimations.com/icons/archive.json',
+  });
+  // ホバー：乗ると順方向、離れると逆方向
+  el.addEventListener('mouseenter', () => {
+    animation.setDirection(1);
+    animation.play();
+  });
+  el.addEventListener('mouseleave', () => {
+    animation.setDirection(-1);
+    animation.play();
+  });
+</script>
+```
+
+SVG レンダラーを使えば、React コンポーネントと同じようにアイコンをテキストの色に追従させられます：
+
+```css
+#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) {
+  stroke: currentColor;
+}
+#icon path[fill='rgb(0,0,0)'] {
+  fill: currentColor;
+}
+```
+
+<div id="vue"></div>
+
+### Vue {#vue}
+
+```vue
+<script setup>
+import lottie from 'lottie-web';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+const el = ref(null);
+let animation;
+onMounted(() => {
+  animation = lottie.loadAnimation({
+    container: el.value,
+    renderer: 'svg',
+    loop: true,
+    autoplay: true,
+    path: 'https://useanimations.com/icons/loading.json',
+  });
+});
+onBeforeUnmount(() => animation?.destroy());
+</script>
+
+<template>
+  <div ref="el" style="width: 48px; height: 48px" />
+</template>
+```
+
+### React Native {#react-native}
+
+```jsx
+import LottieView from 'lottie-react-native';
+
+<LottieView source={require('./loading.json')} autoPlay loop style={{ width: 48, height: 48 }} />;
+```
+
+<div id="ios"></div>
+
+### iOS {#ios}
+
+[lottie-ios](https://github.com/airbnb/lottie-ios) を使い、JSON をアプリのバンドルに入れた場合：
+
+```swift
+import Lottie
+import SwiftUI
+
+LottieView(animation: .named("loading"))
+  .looping()
+  .frame(width: 48, height: 48)
+```
+
+<div id="android"></div>
+
+### Android {#android}
+
+Jetpack Compose で [lottie-android](https://github.com/airbnb/lottie-android) を使い、JSON を `res/raw` に置いた場合：
+
+```kotlin
+val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
+LottieAnimation(composition, iterations = LottieConstants.IterateForever, modifier = Modifier.size(48.dp))
+```
+
+### Flutter {#flutter}
+
+[lottie](https://pub.dev/packages/lottie) パッケージを使う場合：
+
+```dart
+Lottie.asset('assets/loading.json', width: 48, height: 48)
+```
+
+<div id="performance"></div><div id="accessibility"></div>
+
+## パフォーマンスとアクセシビリティ {#performance--accessibility}
+
+- **軽量：** プレーヤーは gzip 圧縮後 8 kB で依存関係はなく、アイコン 1 個は 1〜15 kB（中央値 2 kB）です。
+- **遅延描画：** アニメーションはページのレンダリング後、ブラウザーでのみ描画されます。自動再生のループは画面外にスクロールされている間は一時停止し、アンマウント時にはすべてクリーンアップされます。
+- **デフォルトは装飾扱い：** `aria-label` を渡さない限り、アイコンはスクリーンリーダーから隠されます（`aria-hidden`）。`aria-label` を渡すと画像として読み上げられます。アイコンだけのコントロールには、`aria-label` を付けた本物の `<button>` を使い（[前述](#wrap-the-icon-in-a-real-button)を参照）、トグルの状態は `aria-pressed` や `aria-expanded` で伝えてください。
+- **モーション軽減とタッチ操作：** アイコンは `prefers-reduced-motion` を尊重し、タッチスクリーンでのタップではホバーアニメーションは始まりません。
+
+<div id="agents"></div>
+
+## AI コーディングエージェント {#ai-coding-agents}
+
+エージェントは [icons.json](/icons.json) またはパッケージ内の `react-useanimations/catalog.json` から、キーワードやインタラクションでアイコンを選び、そこに載っているインポート文や shadcn のコマンドを使えます。各アイコンのインポートの型定義にも、タイトル、キーワード、インタラクション、プレビューが含まれています。このドキュメントは Markdown 版を [/documentation.md](/documentation.md) で公開していて、[/llms.txt](/llms.txt) がサイト全体の索引になっています。
+
+## v2 からのアップグレード {#upgrading-from-v2}
+
+ほとんどのアプリでは、v3 をインストールするだけでアップグレードは完了します。コンポーネント、`react-useanimations/lib/<name>` のインポート、v2 の 79 個のアイコンはすべてそのままです。以下の手順のうち、自分のコードに当てはまるものを進めてください。
+
+### 1. v3 をインストールする {#1-install-v3}
+
+v3 は React 18 以降が必要で、依存関係はありません。アプリのほかの部分で使っていなければ、lottie-web も削除してください。
+
+```bash
+npm install react-useanimations@3
+npm uninstall lottie-web
+```
+
+### 2. `reverse` を `active` に置き換える {#2-replace-reverse-with-active}
+
+`active` は完全な制御型です。`active` が変わるとアイコンがアニメーションし、クリックだけでは切り替わらないので、`onClick` で更新してください。`reverse` は v2 と同じように動きます（開始時の状態を決め、クリックでアイコンが切り替わる）が、非推奨です。どちらも `click-toggle` のアイコンにだけ効きます。4 つの円形矢印アイコンは、クリックで再生する動きに変わりました（[手順 6](#6-check-the-icons-whose-interaction-changed) を参照）。
+
+```diff
+- <UseAnimations animation={checkBox} reverse={checked} onClick={toggle} />
++ <UseAnimations animation={checkBox} active={checked} onClick={toggle} />
+```
+
+### 3. 色を確認する {#3-check-the-colors}
+
+v2 のアイコンは、`strokeColor` を指定しない限り黒でした。v3 のアイコンはテキストの色（`currentColor`）に追従し、`fillColor` のデフォルトは `strokeColor` です。色付きのテキストやリンクの中にあるアイコンはその色に変わります。黒のままにしたい場合は、自分で色を指定してください：
+
+```jsx
+<UseAnimations animation={github} strokeColor="#000" />
+```
+
+### 4. `wrapperStyle`、`pathCss`、`options` を移行する {#4-move-wrapperstyle-pathcss-and-options}
+
+- **`wrapperStyle`** は非推奨です。`style` を使ってください。
+- **`pathCss`** は削除されました。クラスを使ってパスにスタイルを当ててください。
+- **`options`**（lottie-web の設定）は lottie-web とともに削除されました。`loop`、`autoplay`、`speed` の props を使ってください。それ以外の lottie-web のオプションに相当するものはありません。
+
+それでも `pathCss` や `options` を渡すと、警告が 1 回だけ出力され、値は無視されます。
+
+```diff
+- <UseAnimations animation={github} wrapperStyle={{ margin: 8 }} pathCss="stroke-width: 3px;" options={{ loop: true }} />
++ <UseAnimations animation={github} style={{ margin: 8 }} className="thick" loop />
+```
+
+```css
+.thick path {
+  stroke-width: 3px;
+}
+```
+
+### 5. ラッパー要素を確認する {#5-check-the-wrapper-element}
+
+ラッパーは `<div>` から inline-block の `<span>` に変わりました。これにより、ボタンやリンクの中に置いても有効な HTML になり、テキストの行内に収まります。ラッパーを `div` として指定している CSS を更新し、`render` prop では `animationProps` を `<span>` に展開してください：
+
+```diff
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Like" {...eventProps}>
+-     <div {...animationProps} />
++     <span {...animationProps} />
+    </button>
+  )}
+```
+
+また、`aria-label` を渡さない限り、アイコンはスクリーンリーダーから隠される（`aria-hidden`）ようになりました。単体で意味を持つアイコンには `aria-label` を付けてください。
+
+### 6. インタラクションが変わったアイコンを確認する {#6-check-the-icons-whose-interaction-changed}
+
+インタラクションは useanimations.com の表示と一致するようになりました。v2 と同じ動きにしたいアイコンには、以前のインタラクションを渡してください：
+
+| アイコン                                                                                           | v2               | v3             |
+| -------------------------------------------------------------------------------------------------- | ---------------- | -------------- |
+| `arrowDownCircle`、`arrowLeftCircle`、`arrowRightCircle`、`arrowUpCircle`                          | `click-toggle`   | `click-replay` |
+| `calendar`、`folder`、`home`、`instagram`、`userMinus`、`userPlus`、`userX`、`youtube`、`youtube2` | `hover-replay`\* | `hover`        |
+| `behance`、`codepen`、`facebook`、`github`、`linkedin`、`pocket`、`twitter`                        | `hover-replay`\* | `hover-loop`   |
+| `copy`、`edit`、`mail`                                                                             | `click-replay`   | `hover`        |
+| `dribbble`                                                                                         | `hover`          | `hover-loop`   |
+| `zoomIn`、`zoomOut`                                                                                | `loop`           | `hover`        |
+
+\* v2 ではポインターが乗ると 1 回再生し、離れると最初に戻っていました。いちばん近いのは `hover-replay` です。
+
+```jsx
+<UseAnimations animation={zoomIn} interaction="loop" />
+```
+
+### 7. インポートを更新する {#7-update-imports}
+
+アイコンのインポートは `react-useanimations/lib/<name>` か `react-useanimations/icons` からに限られます。`react-useanimations/lib/github/index` や `react-useanimations/lib/github/github.json` のような v2 の内部ファイルパスは解決できなくなりました。Lottie JSON はアイコンの `animationData` で取得できます：
+
+```diff
+- import githubJson from 'react-useanimations/lib/github/github.json';
++ import github from 'react-useanimations/lib/github';
++ const githubJson = github.animationData;
+```
+
+`react-useanimations/utils` のパスは削除されました。型はパッケージからインポートしてください：
+
+```diff
+- import type { Animation, AnimationKey } from 'react-useanimations/utils';
++ import type { Animation, AnimationKey, Interaction, UseAnimationsProps } from 'react-useanimations';
+```
+
+`Animation` は `{ animationData, interaction }` になりました。v2 の `animationKey` フィールドはなくなったので、自分で組み立てたオブジェクトでは代わりに `interaction` を使ってください。
+
+### そのほかの新機能 {#what-else-is-new}
+
+221 個のアイコンの追加（合計 300 個）、`react-useanimations/icons` からの複数アイコンの一括インポート、モーション軽減への対応、キーボードフォーカスでのホバー再生、タッチスクリーンでホバーアニメーションが止まったままにならない動作、回避策なしのサーバーサイドレンダリング、そして [shadcn レジストリ](#shadcnui)。
+
+## ライセンス {#license}
+
+アイコンとコードは [MIT ライセンス](https://opensource.org/license/mit/)で公開しています。個人・商用を問わず、使用、改変、再配布ができます。クレジット表記は必須ではありませんが、入れていただけるとうれしいです：
+
+```html
+Animated icons by <a href="https://useanimations.com">useAnimations</a>
+```
+
+詳しい条件は[ライセンスと利用規約](/licencing-and-terms)を参照してください。
+
+## よくある質問 {#faq}
+
+<details><summary>useAnimations は商用プロジェクトでも無料で使えますか？</summary>
+
+はい。アイコンとパッケージは MIT ライセンスで、クレジット表記も必要ありません。
+
+</details>
+
+<details><summary>アイコンの色を変えるには？</summary>
+
+アイコンはテキストの色に追従します。`strokeColor` と `fillColor`、CSS の `color`、またはパスへのスタイル指定で変更できます。詳しくは[サイズと色](#size--color)を参照してください。
+
+</details>
+
+<details><summary>React なしでも使えますか？</summary>
+
+パッケージは React 向けです。ただし、どのアイコンも Lottie JSON ファイルとして lottie-web、lottie-ios、lottie-android、Flutter、React Native で再生でき、静的 SVG も用意しています。[React なしで使う](#use-without-react)と [Lottie アイコン](/lottie-icons)を参照してください。
+
+</details>
+
+<details><summary>AI コーディングエージェントで useAnimations を使えますか？</summary>
+
+はい。[icons.json](/icons.json) と [/documentation.md](/documentation.md) をエージェントに渡してください。パッケージ自体にも `catalog.json` と、全アイコンのドキュメント付きの型が含まれています。
+
+</details>
diff --git a/website/src/content/documentation.ko.md b/website/src/content/documentation.ko.md
new file mode 100644
index 0000000..8e2b4fd
--- /dev/null
+++ b/website/src/content/documentation.ko.md
@@ -0,0 +1,454 @@
+# 문서 {#documentation}
+
+useAnimations는 React용 애니메이션 아이콘 300개를 담은 무료 MIT 라이선스 라이브러리입니다. 모든 아이콘에는 인터랙션이 내장되어 있어서 반복 재생되거나, 클릭하면 재생되거나, 호버하면 재생됩니다. `react-useanimations` 패키지로 쓰거나 shadcn CLI로 추가하세요.
+
+<div id="quick-start-react"></div>
+
+## 빠른 시작 {#quick-start}
+
+```bash
+npm install react-useanimations
+```
+
+```jsx
+import UseAnimations from 'react-useanimations';
+import github from 'react-useanimations/lib/github';
+
+export default function Header() {
+  return <UseAnimations animation={github} size={32} />;
+}
+```
+
+아이콘은 텍스트 색상을 따라가고 자기 인터랙션대로 재생됩니다. `github`는 호버하는 동안 반복 재생됩니다. 패키지에는 의존성이 없습니다. 내장 플레이어(gzip 기준 8 kB)가 아이콘을 SVG로 그리고, 아이콘마다 별도 모듈이라 번들에는 가져온 아이콘만 포함됩니다.
+
+## 인터랙션 {#interactions}
+
+모든 아이콘에는 디자인할 때 정한 인터랙션이 있습니다. `interaction` prop으로 바꿀 수 있습니다.
+
+| 인터랙션       | 동작                                                                      | 예시 아이콘                          |
+| -------------- | ------------------------------------------------------------------------- | ------------------------------------ |
+| `loop`         | 계속 재생됩니다.                                                          | `loading`, `activity`, `alertCircle` |
+| `click-toggle` | 클릭하면 두 상태 사이를 전환합니다(정방향, 그다음 역방향).                | `menu`, `checkBox`, `playPause`      |
+| `click-replay` | 클릭할 때마다 처음부터 다시 재생됩니다.                                   | `download`, `refresh`, `send`        |
+| `hover`        | 마우스가 들어오면 정방향으로, 나가면 역방향으로 재생됩니다.               | `archive`, `settings`, `trash`       |
+| `hover-loop`   | 호버하는 동안 반복 재생되고, 마우스가 나가면 현재 사이클을 마저 끝냅니다. | `github`, `twitter`, `dribbble`      |
+| `hover-replay` | 마우스가 들어오면 처음부터 한 번 재생됩니다.                              | `arrowRight`, `bluetooth`, `zap`     |
+
+사용자가 동작 줄이기를 설정했다면 아이콘은 움직이지 않습니다. 루프 아이콘은 첫 프레임을 보여 주고, 호버·재생 애니메이션은 재생되지 않으며, 토글은 곧바로 새 상태로 전환됩니다.
+
+<div id="react"></div>
+
+## Props {#props}
+
+```jsx
+<UseAnimations animation={github} size={56} strokeColor="#4b5cff" style={{ padding: 8 }} />
+```
+
+| Prop          | 기본값           | 설명                                                                                                                     |
+| ------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `animation`   | —                | `react-useanimations/lib/<name>`에서 가져온 아이콘, 또는 직접 만든 애니메이션이라면 `{ animationData, interaction }`.    |
+| `size`        | `24`             | 너비와 높이. 숫자는 픽셀, 문자열은 `'1.5em'` 같은 모든 CSS 길이 단위.                                                    |
+| `strokeColor` | `'currentColor'` | 선 색상. 기본적으로 아이콘은 텍스트 색상을 따라갑니다.                                                                   |
+| `fillColor`   | `strokeColor`    | 채워진 부분의 색상(예: 좋아요를 누른 하트).                                                                              |
+| `interaction` | 아이콘별         | `'loop'`, `'click-toggle'`, `'click-replay'`, `'hover'`, `'hover-loop'`, `'hover-replay'` 중 하나.                       |
+| `active`      | —                | `click-toggle` 아이콘용: `true`면 끝 상태를 표시. 제어 방식이므로 `onClick`에서 값을 바꾸며, 클릭만으로는 전환되지 않음. |
+| `autoplay`    | 아이콘별         | `loop` 아이콘은 `true`. 단, 동작 줄이기가 설정되어 있으면 제외.                                                          |
+| `loop`        | 아이콘별         | `loop`와 `hover-loop` 아이콘은 `true`.                                                                                   |
+| `speed`       | `1`              | 재생 속도.                                                                                                               |
+| `render`      | —                | 래퍼를 직접 만들기 위한 render prop. [아이콘을 실제 버튼으로 감싸기](#wrap-the-icon-in-a-real-button) 참고.              |
+
+그 밖의 prop(`className`, `aria-label`, `onClick` 등)은 래퍼 `<span>`에 전달됩니다. 직접 작성한 이벤트 핸들러는 애니메이션보다 먼저 실행되며, `event.preventDefault()`를 호출하면 애니메이션을 건너뜁니다.
+
+## 아이콘 가져오기 {#importing-icons}
+
+아이콘은 하나씩 `react-useanimations/lib/<name>`에서 가져오거나, 여러 개를 한꺼번에 `react-useanimations/icons`에서 가져오세요.
+
+```jsx
+import { github, heart, menu } from 'react-useanimations/icons';
+```
+
+어느 쪽이든 프로덕션 빌드에는 실제로 쓰는 아이콘만 포함됩니다. 다만 개발 서버와 테스트 러너는 트리 셰이킹을 하지 않으므로 `react-useanimations/icons`가 모든 아이콘을 불러옵니다. 이것이 문제가 된다면 `lib/<name>`을 쓰세요. `delete`와 `package`는 예약어이므로 `deleteIcon`, `packageIcon`으로 가져옵니다.
+
+## 제어 토글 {#controlled-toggle}
+
+```jsx
+import { useState } from 'react';
+import UseAnimations from 'react-useanimations';
+import menu from 'react-useanimations/lib/menu';
+
+export function MenuButton() {
+  const [open, setOpen] = useState(false);
+  return (
+    <UseAnimations
+      animation={menu}
+      size={40}
+      active={open} // 다른 곳에서 `open`이 바뀔 때도 애니메이션됨
+      onClick={() => setOpen(!open)}
+    />
+  );
+}
+```
+
+## 아이콘을 실제 버튼으로 감싸기 {#wrap-the-icon-in-a-real-button}
+
+클릭할 수 있는 아이콘이라면 `render` prop으로 포커스 가능한 요소를 아이콘 바깥에 두세요. `eventProps`는 직접 만든 요소에, `animationProps`는 그 안의 `<span>`에 전달합니다. 그러면 버튼이 키보드 포커스를 받을 때도 호버 애니메이션이 재생됩니다.
+
+```jsx
+import heart from 'react-useanimations/lib/heart';
+
+<UseAnimations
+  animation={heart}
+  size={32}
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Add to favorites" {...eventProps}>
+      <span {...animationProps} />
+    </button>
+  )}
+/>;
+```
+
+<div id="customize"></div>
+
+## 크기와 색상 {#size--color}
+
+아이콘은 24 px 또는 32 px 아트보드에 그린 라인 아이콘이며, 어떤 크기에서도 선명합니다. `size`에 픽셀 숫자나 CSS 길이를 지정하세요.
+
+선은 `currentColor`를 따르므로 아이콘이 텍스트 색상, 호버 상태, 다크 모드를 알아서 따라갑니다. `strokeColor`와 `fillColor`, CSS `color`로 바꾸거나 path에 직접 스타일을 지정하세요. 내장 규칙의 명시도가 0이라 작성한 CSS가 항상 우선합니다.
+
+일부 아이콘은 자기 자신에 틈을 냅니다(`visibility`, `microphone`, `video`, `volume`, `notification`의 사선, `download`의 체크 표시, `notification3` 배지 주위의 고리). 이 틈은 페이지 배경색을 따릅니다. 밝은 페이지에서는 흰색, `color-scheme: dark`인 페이지에서는 어두운 색입니다. 다른 배경에서는 `--ua-knockout` CSS 변수로 지정하세요. 예: `body { --ua-knockout: #0f172a; }`.
+
+```jsx
+// Tailwind: 색상과 선 두께
+<UseAnimations animation={github} className="text-indigo-500 [&_path]:stroke-[3]" />
+```
+
+## Next.js와 서버 렌더링 {#nextjs-and-server-rendering}
+
+컴포넌트에는 `'use client'`가 지정되어 있고 애니메이션은 브라우저에서만 그리므로, `dynamic(…, { ssr: false })` 없이 서버 컴포넌트와 SSR 프레임워크(Next.js, Remix, Astro)에서 렌더링할 수 있습니다. 아이콘 모듈은 순수 데이터라서 서버 컴포넌트에서 가져와 props로 넘길 수 있습니다.
+
+<div id="shadcn"></div>
+
+## shadcn/ui {#shadcnui}
+
+모든 아이콘은 [shadcn 레지스트리](https://ui.shadcn.com/docs/registry)에도 있습니다. CLI가 바로 쓸 수 있는 컴포넌트를 추가하고 `react-useanimations`를 설치합니다.
+
+```bash
+npx shadcn@latest add https://useanimations.com/r/checkmark.json
+```
+
+```tsx
+import { AnimatedCheckmark } from '@/components/animations/checkmark';
+
+<AnimatedCheckmark size={24} />;
+```
+
+컴포넌트 이름은 `Animated` + PascalCase로 쓴 아이콘 id(`check-box` → `AnimatedCheckBox`)이고, `components/animations/<id>.tsx`에 생성되며 `UseAnimations`와 같은 props를 받습니다. 레지스트리 인덱스는 [/r/registry.json](/r/registry.json)입니다. `npx shadcn@latest add @useanimations/checkmark`처럼 짧게 쓰려면 `components.json`에 레지스트리를 추가하세요.
+
+```json
+{
+  "registries": {
+    "@useanimations": "https://useanimations.com/r/{name}.json"
+  }
+}
+```
+
+## 직접 만든 애니메이션 {#your-own-animation}
+
+```jsx
+import animationData from './my-animation.json';
+
+<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
+```
+
+애니메이션은 아이콘과 같은 포맷인 Lottie JSON 파일이어야 합니다. 플레이어는 아이콘에 필요한 기능을 지원합니다. 셰이프 레이어, 프리컴포지션, 널 레이어와 부모 지정, 패스, 사각형, 타원, 선, 채우기, 트림 패스, 마스크, 이징·홀드·모션 패스가 있는 키프레임, 그리고 `loopOut()`, `wiggle()` 익스프레션입니다. 그라디언트, 텍스트·이미지 레이어, 이펙트, 매트 등 그 밖의 요소는 그려지지 않으며, 지원하지 않는 레이어, 셰이프, 익스프레션은 콘솔에 경고가 표시됩니다.
+
+<div id="direct-urls"></div><div id="download"></div>
+
+## 파일과 icons.json {#files--iconsjson}
+
+모든 아이콘은 각 아이콘 페이지나 CORS가 허용된 고정 URL에서 내려받을 수도 있습니다.
+
+| 파일                    | URL                                                |
+| ----------------------- | -------------------------------------------------- |
+| 애니메이션(Lottie JSON) | `https://useanimations.com/icons/<id>.json`        |
+| 상태별 정적 SVG         | `https://useanimations.com/icons/<id>/<state>.svg` |
+| JSON과 SVG를 묶은 ZIP   | `https://useanimations.com/icons/<id>.zip`         |
+| 아이콘 페이지           | `https://useanimations.com/icons/<id>`             |
+| 전체 아이콘 카탈로그    | `https://useanimations.com/icons.json`             |
+
+[icons.json](/icons.json)에는 모든 아이콘의 id, 제목, 카테고리, 검색 키워드, 인터랙션, 파일 URL, 크기, 재생 시간, `react-useanimations` import 문, shadcn 명령이 들어 있습니다. npm 패키지에도 같은 데이터가 포함되어 있습니다. `react-useanimations/catalog.json`(메타데이터), `react-useanimations/icons`(애니메이션), `react-useanimations/svg.json`(정적 SVG)입니다.
+
+<div id="without-react"></div>
+
+## React 없이 사용하기 {#use-without-react}
+
+아이콘은 표준 Lottie JSON이므로 어떤 Lottie 플레이어로도 `https://useanimations.com/icons/<id>.json`이나 프로젝트에 복사한 파일을 재생할 수 있습니다. React 밖에서는 인터랙션을 직접 연결해야 합니다. 더 많은 플레이어와 예제는 [Lottie 아이콘](/lottie-icons)에 있습니다.
+
+일부 아이콘은 After Effects 익스프레션(`loopOut()`, `wiggle()`)을 쓰며, [icons.json](/icons.json)의 `requiresFullPlayer`로 표시되어 있습니다. 웹에서는 `lottie_light`가 아닌 lottie-web의 full 빌드가 필요하고, 네이티브 플레이어는 익스프레션을 평가하지 않습니다.
+
+<div id="html"></div><div id="interactions-web"></div>
+
+### HTML과 JavaScript {#html-and-javascript}
+
+```html
+<div id="icon" style="width: 48px; height: 48px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
+<script>
+  const el = document.getElementById('icon');
+  const animation = lottie.loadAnimation({
+    container: el,
+    renderer: 'svg',
+    loop: false,
+    autoplay: false,
+    path: 'https://useanimations.com/icons/archive.json',
+  });
+  // hover: 들어오면 정방향, 나가면 역방향
+  el.addEventListener('mouseenter', () => {
+    animation.setDirection(1);
+    animation.play();
+  });
+  el.addEventListener('mouseleave', () => {
+    animation.setDirection(-1);
+    animation.play();
+  });
+</script>
+```
+
+SVG 렌더러를 쓰면 React 컴포넌트처럼 아이콘이 텍스트 색상을 따라가게 할 수 있습니다.
+
+```css
+#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) {
+  stroke: currentColor;
+}
+#icon path[fill='rgb(0,0,0)'] {
+  fill: currentColor;
+}
+```
+
+<div id="vue"></div>
+
+### Vue {#vue}
+
+```vue
+<script setup>
+import lottie from 'lottie-web';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+const el = ref(null);
+let animation;
+onMounted(() => {
+  animation = lottie.loadAnimation({
+    container: el.value,
+    renderer: 'svg',
+    loop: true,
+    autoplay: true,
+    path: 'https://useanimations.com/icons/loading.json',
+  });
+});
+onBeforeUnmount(() => animation?.destroy());
+</script>
+
+<template>
+  <div ref="el" style="width: 48px; height: 48px" />
+</template>
+```
+
+### React Native {#react-native}
+
+```jsx
+import LottieView from 'lottie-react-native';
+
+<LottieView source={require('./loading.json')} autoPlay loop style={{ width: 48, height: 48 }} />;
+```
+
+<div id="ios"></div>
+
+### iOS {#ios}
+
+[lottie-ios](https://github.com/airbnb/lottie-ios)를 쓰고 JSON을 앱 번들에 넣은 경우:
+
+```swift
+import Lottie
+import SwiftUI
+
+LottieView(animation: .named("loading"))
+  .looping()
+  .frame(width: 48, height: 48)
+```
+
+<div id="android"></div>
+
+### Android {#android}
+
+Jetpack Compose에서 [lottie-android](https://github.com/airbnb/lottie-android)를 쓰고 JSON을 `res/raw`에 넣은 경우:
+
+```kotlin
+val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
+LottieAnimation(composition, iterations = LottieConstants.IterateForever, modifier = Modifier.size(48.dp))
+```
+
+### Flutter {#flutter}
+
+[lottie](https://pub.dev/packages/lottie) 패키지를 쓰는 경우:
+
+```dart
+Lottie.asset('assets/loading.json', width: 48, height: 48)
+```
+
+<div id="performance"></div><div id="accessibility"></div>
+
+## 성능과 접근성 {#performance--accessibility}
+
+- **작은 크기:** 플레이어는 의존성 없이 gzip 기준 8 kB이고, 아이콘 하나는 1~15 kB(중앙값 2 kB)입니다.
+- **지연 처리:** 애니메이션은 페이지가 렌더링된 뒤 브라우저에서만 그립니다. 자동 재생되는 루프는 스크롤해서 화면 밖으로 나가면 일시정지하고, 언마운트하면 모두 정리됩니다.
+- **기본은 장식용:** `aria-label`을 전달하지 않으면 아이콘은 스크린 리더에서 숨겨집니다(`aria-hidden`). `aria-label`을 전달하면 이미지로 읽힙니다. 아이콘만 있는 컨트롤이라면 `aria-label`이 있는 실제 `<button>`을 쓰고([위 내용](#wrap-the-icon-in-a-real-button) 참고), 토글 상태는 `aria-pressed`나 `aria-expanded`로 반영하세요.
+- **동작 줄이기와 터치:** 아이콘은 `prefers-reduced-motion`을 존중하며, 터치스크린에서 탭해도 호버 애니메이션이 재생되지 않습니다.
+
+<div id="agents"></div>
+
+## AI 코딩 에이전트 {#ai-coding-agents}
+
+에이전트는 [icons.json](/icons.json)이나 패키지 안의 `react-useanimations/catalog.json`에서 키워드나 인터랙션으로 아이콘을 고르고, 거기 나와 있는 import 문이나 shadcn 명령을 그대로 쓸 수 있습니다. 각 아이콘 import의 타입 정의에도 제목, 키워드, 인터랙션, 미리보기가 들어 있습니다. 이 문서는 [/documentation.md](/documentation.md)에서 마크다운으로 볼 수 있고, [/llms.txt](/llms.txt)가 사이트 전체의 색인입니다.
+
+## v2에서 업그레이드하기 {#upgrading-from-v2}
+
+대부분의 앱은 v3를 설치하는 것만으로 업그레이드가 끝납니다. 컴포넌트, `react-useanimations/lib/<name>` import, v2 아이콘 79개 모두 그대로입니다. 아래 단계 중 내 코드에 해당하는 것만 진행하세요.
+
+### 1. v3 설치하기 {#1-install-v3}
+
+v3는 React 18 이상이 필요하고 의존성이 없습니다. 앱의 다른 곳에서 lottie-web을 쓰지 않는다면 함께 제거하세요.
+
+```bash
+npm install react-useanimations@3
+npm uninstall lottie-web
+```
+
+### 2. `reverse`를 `active`로 바꾸기 {#2-replace-reverse-with-active}
+
+`active`는 완전한 제어 방식입니다. `active`가 바뀌면 아이콘이 애니메이션되고, 클릭만으로는 전환되지 않으므로 `onClick`에서 값을 갱신하세요. `reverse`는 v2처럼 여전히 동작하지만(시작 상태를 정하고, 클릭하면 아이콘이 전환됨) 지원 중단(deprecated)되었습니다. 둘 다 `click-toggle` 아이콘에만 적용됩니다. 원형 화살표 아이콘 네 개는 이제 클릭하면 다시 재생됩니다([6단계](#6-check-the-icons-whose-interaction-changed) 참고).
+
+```diff
+- <UseAnimations animation={checkBox} reverse={checked} onClick={toggle} />
++ <UseAnimations animation={checkBox} active={checked} onClick={toggle} />
+```
+
+### 3. 색상 확인하기 {#3-check-the-colors}
+
+v2 아이콘은 `strokeColor`를 지정하지 않으면 검은색이었습니다. v3 아이콘은 텍스트 색상(`currentColor`)을 따라가며, `fillColor`의 기본값은 `strokeColor`입니다. 색이 있는 텍스트나 링크 안의 아이콘은 그 색을 따라 바뀝니다. 검은색으로 유지하려면 색상을 직접 지정하세요.
+
+```jsx
+<UseAnimations animation={github} strokeColor="#000" />
+```
+
+### 4. `wrapperStyle`, `pathCss`, `options` 옮기기 {#4-move-wrapperstyle-pathcss-and-options}
+
+- **`wrapperStyle`**은 지원 중단되었습니다. `style`을 쓰세요.
+- **`pathCss`**는 제거되었습니다. 클래스로 path에 스타일을 지정하세요.
+- **`options`**(lottie-web 설정)는 lottie-web과 함께 제거되었습니다. `loop`, `autoplay`, `speed` props를 쓰세요. 그 밖의 lottie-web 옵션에는 대응하는 기능이 없습니다.
+
+그래도 `pathCss`나 `options`를 전달하면 경고가 한 번 출력되고, 값은 무시됩니다.
+
+```diff
+- <UseAnimations animation={github} wrapperStyle={{ margin: 8 }} pathCss="stroke-width: 3px;" options={{ loop: true }} />
++ <UseAnimations animation={github} style={{ margin: 8 }} className="thick" loop />
+```
+
+```css
+.thick path {
+  stroke-width: 3px;
+}
+```
+
+### 5. 래퍼 요소 확인하기 {#5-check-the-wrapper-element}
+
+래퍼가 이제 `<div>` 대신 inline-block `<span>`이므로 버튼과 링크 안에 넣어도 유효하고 텍스트 줄 위에 놓입니다. 래퍼를 `div`로 가정한 CSS를 수정하고, `render` prop에서는 `animationProps`를 `<span>`에 펼쳐 전달하세요.
+
+```diff
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Like" {...eventProps}>
+-     <div {...animationProps} />
++     <span {...animationProps} />
+    </button>
+  )}
+```
+
+이제 `aria-label`을 전달하지 않으면 아이콘이 스크린 리더에서 숨겨집니다(`aria-hidden`). 아이콘 자체가 의미를 전달한다면 레이블을 추가하세요.
+
+### 6. 인터랙션이 바뀐 아이콘 확인하기 {#6-check-the-icons-whose-interaction-changed}
+
+이제 인터랙션이 useanimations.com과 일치합니다. 아이콘이 v2처럼 동작해야 한다면 이전 인터랙션을 전달하세요.
+
+| 아이콘                                                                                             | v2               | v3             |
+| -------------------------------------------------------------------------------------------------- | ---------------- | -------------- |
+| `arrowDownCircle`, `arrowLeftCircle`, `arrowRightCircle`, `arrowUpCircle`                          | `click-toggle`   | `click-replay` |
+| `calendar`, `folder`, `home`, `instagram`, `userMinus`, `userPlus`, `userX`, `youtube`, `youtube2` | `hover-replay`\* | `hover`        |
+| `behance`, `codepen`, `facebook`, `github`, `linkedin`, `pocket`, `twitter`                        | `hover-replay`\* | `hover-loop`   |
+| `copy`, `edit`, `mail`                                                                             | `click-replay`   | `hover`        |
+| `dribbble`                                                                                         | `hover`          | `hover-loop`   |
+| `zoomIn`, `zoomOut`                                                                                | `loop`           | `hover`        |
+
+\* v2에서는 마우스가 들어오면 한 번 재생되고, 나가면 처음 상태로 바로 돌아갔습니다. 가장 가까운 것은 `hover-replay`입니다.
+
+```jsx
+<UseAnimations animation={zoomIn} interaction="loop" />
+```
+
+### 7. import 경로 업데이트하기 {#7-update-imports}
+
+아이콘은 `react-useanimations/lib/<name>`이나 `react-useanimations/icons`에서만 가져오세요. `react-useanimations/lib/github/index`나 `react-useanimations/lib/github/github.json` 같은 v2의 내부 파일 경로는 더 이상 resolve되지 않습니다. Lottie JSON은 아이콘의 `animationData`입니다.
+
+```diff
+- import githubJson from 'react-useanimations/lib/github/github.json';
++ import github from 'react-useanimations/lib/github';
++ const githubJson = github.animationData;
+```
+
+`react-useanimations/utils` 경로는 제거되었습니다. 타입은 패키지에서 가져오세요.
+
+```diff
+- import type { Animation, AnimationKey } from 'react-useanimations/utils';
++ import type { Animation, AnimationKey, Interaction, UseAnimationsProps } from 'react-useanimations';
+```
+
+`Animation`은 이제 `{ animationData, interaction }`입니다. v2의 `animationKey` 필드는 없어졌으므로, 직접 만든 객체에서는 대신 `interaction`을 쓰세요.
+
+### 그 밖의 새로운 점 {#what-else-is-new}
+
+아이콘 221개 추가(총 300개), `react-useanimations/icons`에서 여러 아이콘 한꺼번에 가져오기, 동작 줄이기 지원, 키보드 포커스 시 호버 재생, 터치스크린에서 호버 애니메이션이 멈춰 있는 문제 해결, 별도 우회 없는 서버 렌더링, 그리고 [shadcn 레지스트리](#shadcnui)가 추가되었습니다.
+
+## 라이선스 {#license}
+
+아이콘과 코드는 [MIT 라이선스](https://opensource.org/license/mit/)로 공개되어 있습니다. 개인·상업용 작업에서 사용, 수정, 재배포할 수 있습니다. 출처 표기는 필수가 아니지만, 해 주시면 감사하겠습니다.
+
+```html
+Animated icons by <a href="https://useanimations.com">useAnimations</a>
+```
+
+전체 조건: [라이선스 및 이용 약관](/licencing-and-terms).
+
+## 자주 묻는 질문 {#faq}
+
+<details><summary>useAnimations를 상업용 프로젝트에 무료로 쓸 수 있나요?</summary>
+
+네. 아이콘과 패키지는 MIT 라이선스이며, 출처 표기도 필요 없습니다.
+
+</details>
+
+<details><summary>아이콘 색상은 어떻게 바꾸나요?</summary>
+
+아이콘은 텍스트 색상을 따라갑니다. `strokeColor`와 `fillColor`, CSS `color`, 또는 path에 직접 스타일을 지정해 바꿀 수 있습니다. [크기와 색상](#size--color)을 참고하세요.
+
+</details>
+
+<details><summary>React 없이도 쓸 수 있나요?</summary>
+
+패키지는 React용입니다. 하지만 모든 아이콘은 lottie-web, lottie-ios, lottie-android, Flutter, React Native로 재생할 수 있는 Lottie JSON 파일이기도 하고, 정적 SVG로도 제공됩니다. [React 없이 사용하기](#use-without-react)와 [Lottie 아이콘](/lottie-icons)을 참고하세요.
+
+</details>
+
+<details><summary>AI 코딩 에이전트도 useAnimations를 쓸 수 있나요?</summary>
+
+네. 에이전트에게 [icons.json](/icons.json)과 [/documentation.md](/documentation.md)를 알려 주세요. 패키지 자체에도 `catalog.json`과 모든 아이콘의 문서화된 타입이 들어 있습니다.
+
+</details>
diff --git a/website/src/content/documentation.pt-br.md b/website/src/content/documentation.pt-br.md
new file mode 100644
index 0000000..a42bada
--- /dev/null
+++ b/website/src/content/documentation.pt-br.md
@@ -0,0 +1,454 @@
+# Documentação {#documentation}
+
+O useAnimations é uma biblioteca gratuita, com licença MIT, de 300 ícones animados para React. Cada ícone já vem com uma interação: fica em loop, toca no clique ou toca no hover. Use os ícones com o pacote `react-useanimations` ou adicione-os com a CLI do shadcn.
+
+<div id="quick-start-react"></div>
+
+## Primeiros passos {#quick-start}
+
+```bash
+npm install react-useanimations
+```
+
+```jsx
+import UseAnimations from 'react-useanimations';
+import github from 'react-useanimations/lib/github';
+
+export default function Header() {
+  return <UseAnimations animation={github} size={32} />;
+}
+```
+
+O ícone segue a cor do texto e executa a própria interação: o `github` fica em loop enquanto o mouse está sobre ele. O pacote não tem dependências; um player embutido (8 kB com gzip) desenha os ícones em SVG, e cada ícone é um módulo separado, então o seu bundle inclui só os ícones que você importa.
+
+## Interações {#interactions}
+
+Cada ícone vem com a interação para a qual foi desenhado. Para trocá-la, use a prop `interaction`.
+
+| Interação      | O que faz                                                                  | Ícones de exemplo                    |
+| -------------- | -------------------------------------------------------------------------- | ------------------------------------ |
+| `loop`         | Toca continuamente.                                                        | `loading`, `activity`, `alertCircle` |
+| `click-toggle` | Alterna entre dois estados no clique (para a frente, depois ao contrário). | `menu`, `checkBox`, `playPause`      |
+| `click-replay` | Toca de novo desde o início a cada clique.                                 | `download`, `refresh`, `send`        |
+| `hover`        | Toca para a frente quando o mouse entra e ao contrário quando sai.         | `archive`, `settings`, `trash`       |
+| `hover-loop`   | Fica em loop durante o hover e termina o ciclo atual quando o mouse sai.   | `github`, `twitter`, `dribbble`      |
+| `hover-replay` | Toca uma vez, desde o início, quando o mouse entra.                        | `arrowRight`, `bluetooth`, `zap`     |
+
+Quando o usuário prefere movimento reduzido, os ícones ficam parados: os loops mostram o primeiro frame, as animações de hover e de replay não tocam, e os toggles passam para o novo estado na hora.
+
+<div id="react"></div>
+
+## Props {#props}
+
+```jsx
+<UseAnimations animation={github} size={56} strokeColor="#4b5cff" style={{ padding: 8 }} />
+```
+
+| Prop          | Padrão           | Descrição                                                                                                                                 |
+| ------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `animation`   | —                | Ícone importado de `react-useanimations/lib/<name>`, ou `{ animationData, interaction }` para uma animação sua.                           |
+| `size`        | `24`             | Largura e altura; números são pixels, strings são qualquer medida CSS, como `'1.5em'`.                                                    |
+| `strokeColor` | `'currentColor'` | Cor dos traços. Por padrão, o ícone segue a cor do texto.                                                                                 |
+| `fillColor`   | `strokeColor`    | Cor das partes preenchidas, por exemplo um coração curtido.                                                                               |
+| `interaction` | depende do ícone | `'loop'`, `'click-toggle'`, `'click-replay'`, `'hover'`, `'hover-loop'` ou `'hover-replay'`.                                              |
+| `active`      | —                | Para ícones `click-toggle`: `true` mostra o estado final. É controlada: defina no `onClick`, porque o clique não alterna o ícone sozinho. |
+| `autoplay`    | depende do ícone | `true` para ícones `loop`, a menos que o usuário prefira movimento reduzido.                                                              |
+| `loop`        | depende do ícone | `true` para ícones `loop` e `hover-loop`.                                                                                                 |
+| `speed`       | `1`              | Velocidade de reprodução.                                                                                                                 |
+| `render`      | —                | Render prop para um wrapper próprio; veja [Coloque o ícone num botão de verdade](#wrap-the-icon-in-a-real-button).                        |
+
+Qualquer outra prop (`className`, `aria-label`, `onClick`, …) vai para o `<span>` que envolve o ícone. Os seus event handlers rodam antes dos da animação; chame `event.preventDefault()` para pular a animação.
+
+## Como importar os ícones {#importing-icons}
+
+Importe cada ícone de `react-useanimations/lib/<name>`, ou vários de uma vez de `react-useanimations/icons`:
+
+```jsx
+import { github, heart, menu } from 'react-useanimations/icons';
+```
+
+Nos dois casos, os builds de produção incluem só os ícones que você usa. Servidores de desenvolvimento e test runners não fazem tree-shaking, então neles `react-useanimations/icons` carrega todos os ícones; se isso fizer diferença, prefira `lib/<name>`. `delete` e `package` são palavras reservadas: importe-os como `deleteIcon` e `packageIcon`.
+
+## Toggle controlado {#controlled-toggle}
+
+```jsx
+import { useState } from 'react';
+import UseAnimations from 'react-useanimations';
+import menu from 'react-useanimations/lib/menu';
+
+export function MenuButton() {
+  const [open, setOpen] = useState(false);
+  return (
+    <UseAnimations
+      animation={menu}
+      size={40}
+      active={open} // também anima quando `open` muda em outro lugar
+      onClick={() => setOpen(!open)}
+    />
+  );
+}
+```
+
+## Coloque o ícone num botão de verdade {#wrap-the-icon-in-a-real-button}
+
+Para ícones clicáveis, envolva o ícone num elemento focável usando a prop `render`: os `eventProps` vão no seu elemento e os `animationProps` num `<span>` dentro dele. Assim, as animações de hover também tocam quando o botão recebe foco pelo teclado.
+
+```jsx
+import heart from 'react-useanimations/lib/heart';
+
+<UseAnimations
+  animation={heart}
+  size={32}
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Add to favorites" {...eventProps}>
+      <span {...animationProps} />
+    </button>
+  )}
+/>;
+```
+
+<div id="customize"></div>
+
+## Tamanho e cor {#size--color}
+
+Os ícones são ícones de linha desenhados numa prancheta de 24 ou 32 px e continuam nítidos em qualquer tamanho: defina `size` com um número de pixels ou qualquer medida CSS.
+
+Os traços seguem `currentColor`, então os ícones assumem sozinhos a cor do texto, os estados de hover e o modo escuro. Mude as cores com `strokeColor` e `fillColor`, com a propriedade CSS `color` ou estilizando os paths: a regra embutida tem especificidade zero, então o seu CSS sempre prevalece.
+
+Alguns ícones têm um recorte vazado (a barra em `visibility`, `microphone`, `video`, `volume` e `notification`, o check em `download`, o anel em volta do badge de `notification3`). Esse vão assume a cor de fundo da página: branco em páginas claras e escuro em páginas com `color-scheme: dark`. Em outros fundos, defina a cor com a variável CSS `--ua-knockout`, por exemplo `body { --ua-knockout: #0f172a; }`.
+
+```jsx
+// Tailwind: cor e espessura do traço
+<UseAnimations animation={github} className="text-indigo-500 [&_path]:stroke-[3]" />
+```
+
+## Next.js e renderização no servidor {#nextjs-and-server-rendering}
+
+O componente é marcado com `'use client'` e desenha a animação só no navegador, então você pode renderizá-lo a partir de server components e de frameworks com SSR (Next.js, Remix, Astro) sem `dynamic(…, { ssr: false })`. Os módulos dos ícones são dados simples, então os server components podem importá-los e passá-los como props.
+
+<div id="shadcn"></div>
+
+## shadcn/ui {#shadcnui}
+
+Todos os ícones também estão num [registry do shadcn](https://ui.shadcn.com/docs/registry). A CLI adiciona um componente pronto e instala o `react-useanimations`:
+
+```bash
+npx shadcn@latest add https://useanimations.com/r/checkmark.json
+```
+
+```tsx
+import { AnimatedCheckmark } from '@/components/animations/checkmark';
+
+<AnimatedCheckmark size={24} />;
+```
+
+O componente se chama `Animated` + o id do ícone em PascalCase (`check-box` → `AnimatedCheckBox`), vai para `components/animations/<id>.tsx` e recebe as mesmas props que o `UseAnimations`. O índice do registry fica em [/r/registry.json](/r/registry.json). Para usar a forma curta `npx shadcn@latest add @useanimations/checkmark`, adicione o registry ao `components.json`:
+
+```json
+{
+  "registries": {
+    "@useanimations": "https://useanimations.com/r/{name}.json"
+  }
+}
+```
+
+## Sua própria animação {#your-own-animation}
+
+```jsx
+import animationData from './my-animation.json';
+
+<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
+```
+
+A sua animação precisa ser um arquivo Lottie JSON, o mesmo formato dos ícones. O player suporta o que os ícones precisam: shape layers, precomposições, null layers e parenting, paths, retângulos, elipses, traços, preenchimentos, trim paths, máscaras, keyframes com easing, holds e motion paths, e as expressões `loopOut()` e `wiggle()`. O resto, como gradientes, camadas de texto ou de imagem, efeitos e mattes, não é desenhado; o console avisa sobre camadas, formas e expressões não suportadas.
+
+<div id="direct-urls"></div><div id="download"></div>
+
+## Arquivos e icons.json {#files--iconsjson}
+
+Todos os ícones também podem ser baixados, na página de cada um (em inglês) ou em URLs estáveis com CORS habilitado:
+
+| Arquivo                     | URL                                                |
+| --------------------------- | -------------------------------------------------- |
+| Animação (Lottie JSON)      | `https://useanimations.com/icons/<id>.json`        |
+| SVG estático de cada estado | `https://useanimations.com/icons/<id>/<state>.svg` |
+| ZIP com o JSON e os SVGs    | `https://useanimations.com/icons/<id>.zip`         |
+| Página do ícone             | `https://useanimations.com/icons/<id>`             |
+| Catálogo de todos os ícones | `https://useanimations.com/icons.json`             |
+
+O [icons.json](/icons.json) lista cada ícone com id, título, categoria, palavras-chave de busca, interação, URLs dos arquivos, tamanho e duração, o import do `react-useanimations` e o comando do shadcn. O pacote npm traz os mesmos dados: `react-useanimations/catalog.json` (metadados), `react-useanimations/icons` (as animações) e `react-useanimations/svg.json` (os SVGs estáticos).
+
+<div id="without-react"></div>
+
+## Uso sem React {#use-without-react}
+
+Os ícones são Lottie JSON padrão, então qualquer player Lottie consegue tocá-los a partir de `https://useanimations.com/icons/<id>.json` ou de uma cópia no seu projeto. Fora do React, a interação fica por sua conta. A página [Ícones Lottie](/lottie-icons) tem mais players e exemplos.
+
+Alguns ícones usam expressões do After Effects (`loopOut()`, `wiggle()`); o campo `requiresFullPlayer` os identifica no [icons.json](/icons.json). Na web, eles precisam do build completo do lottie-web, não do `lottie_light`, e os players nativos não avaliam expressões.
+
+<div id="html"></div><div id="interactions-web"></div>
+
+### HTML e JavaScript {#html-and-javascript}
+
+```html
+<div id="icon" style="width: 48px; height: 48px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
+<script>
+  const el = document.getElementById('icon');
+  const animation = lottie.loadAnimation({
+    container: el,
+    renderer: 'svg',
+    loop: false,
+    autoplay: false,
+    path: 'https://useanimations.com/icons/archive.json',
+  });
+  // hover: para a frente ao entrar, ao contrário ao sair
+  el.addEventListener('mouseenter', () => {
+    animation.setDirection(1);
+    animation.play();
+  });
+  el.addEventListener('mouseleave', () => {
+    animation.setDirection(-1);
+    animation.play();
+  });
+</script>
+```
+
+Com o renderer SVG, o ícone pode seguir a cor do texto, como no componente React:
+
+```css
+#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) {
+  stroke: currentColor;
+}
+#icon path[fill='rgb(0,0,0)'] {
+  fill: currentColor;
+}
+```
+
+<div id="vue"></div>
+
+### Vue {#vue}
+
+```vue
+<script setup>
+import lottie from 'lottie-web';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+const el = ref(null);
+let animation;
+onMounted(() => {
+  animation = lottie.loadAnimation({
+    container: el.value,
+    renderer: 'svg',
+    loop: true,
+    autoplay: true,
+    path: 'https://useanimations.com/icons/loading.json',
+  });
+});
+onBeforeUnmount(() => animation?.destroy());
+</script>
+
+<template>
+  <div ref="el" style="width: 48px; height: 48px" />
+</template>
+```
+
+### React Native {#react-native}
+
+```jsx
+import LottieView from 'lottie-react-native';
+
+<LottieView source={require('./loading.json')} autoPlay loop style={{ width: 48, height: 48 }} />;
+```
+
+<div id="ios"></div>
+
+### iOS {#ios}
+
+Com o [lottie-ios](https://github.com/airbnb/lottie-ios) e o JSON no bundle do app:
+
+```swift
+import Lottie
+import SwiftUI
+
+LottieView(animation: .named("loading"))
+  .looping()
+  .frame(width: 48, height: 48)
+```
+
+<div id="android"></div>
+
+### Android {#android}
+
+Com o [lottie-android](https://github.com/airbnb/lottie-android) no Jetpack Compose e o JSON em `res/raw`:
+
+```kotlin
+val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
+LottieAnimation(composition, iterations = LottieConstants.IterateForever, modifier = Modifier.size(48.dp))
+```
+
+### Flutter {#flutter}
+
+Com o pacote [lottie](https://pub.dev/packages/lottie):
+
+```dart
+Lottie.asset('assets/loading.json', width: 48, height: 48)
+```
+
+<div id="performance"></div><div id="accessibility"></div>
+
+## Desempenho e acessibilidade {#performance--accessibility}
+
+- **Leve:** o player tem 8 kB com gzip e nenhuma dependência, e um ícone tem de 1 a 15 kB (mediana de 2 kB).
+- **Sob demanda:** as animações só são desenhadas no navegador, depois que a página renderiza; loops com autoplay pausam enquanto estão fora da área visível, e tudo é liberado no unmount.
+- **Decorativos por padrão:** os ícones ficam ocultos para leitores de tela (`aria-hidden`), a menos que você passe `aria-label`, o que faz o ícone ser anunciado como imagem. Para controles que têm só um ícone, use um `<button>` de verdade com `aria-label` (veja [acima](#wrap-the-icon-in-a-real-button)) e indique o estado do toggle com `aria-pressed` ou `aria-expanded`.
+- **Movimento reduzido e toque:** os ícones respeitam `prefers-reduced-motion`, e toques em telas sensíveis ao toque não disparam animações de hover.
+
+<div id="agents"></div>
+
+## Agentes de código com IA {#ai-coding-agents}
+
+Os agentes podem escolher ícones por palavra-chave ou por interação no [icons.json](/icons.json), ou no `react-useanimations/catalog.json` dentro do pacote, e usar a linha de import ou o comando do shadcn que ele informa. As definições de tipo de cada import de ícone também trazem título, palavras-chave, interação e prévia. Esta documentação está disponível em Markdown em [/documentation.md](/documentation.md), e o [/llms.txt](/llms.txt) indexa o site.
+
+## Atualizando da v2 {#upgrading-from-v2}
+
+Para a maioria dos apps, atualizar significa instalar a v3: o componente, os imports `react-useanimations/lib/<name>` e todos os 79 ícones da v2 continuam iguais. Siga os passos abaixo que se aplicam ao seu código.
+
+### 1. Instale a v3 {#1-install-v3}
+
+A v3 exige React 18 ou mais recente e não tem dependências. Remova também o lottie-web, a menos que outra parte do seu app o use.
+
+```bash
+npm install react-useanimations@3
+npm uninstall lottie-web
+```
+
+### 2. Troque `reverse` por `active` {#2-replace-reverse-with-active}
+
+`active` é totalmente controlada: o ícone anima quando `active` muda, e um clique sozinho não o alterna, então atualize o valor no `onClick`. `reverse` continua funcionando como na v2 (define o estado inicial, e os cliques alternam o ícone), mas está obsoleta. As duas valem só para ícones `click-toggle`: os quatro círculos com seta agora tocam de novo a cada clique (veja o [passo 6](#6-check-the-icons-whose-interaction-changed)).
+
+```diff
+- <UseAnimations animation={checkBox} reverse={checked} onClick={toggle} />
++ <UseAnimations animation={checkBox} active={checked} onClick={toggle} />
+```
+
+### 3. Confira as cores {#3-check-the-colors}
+
+Na v2, os ícones eram pretos, a menos que você definisse `strokeColor`. Na v3, os ícones seguem a cor do texto (`currentColor`), e `fillColor` usa `strokeColor` como padrão. Ícones dentro de texto colorido ou de links mudam de cor junto; para mantê-los pretos, defina a cor você mesmo:
+
+```jsx
+<UseAnimations animation={github} strokeColor="#000" />
+```
+
+### 4. Substitua `wrapperStyle`, `pathCss` e `options` {#4-move-wrapperstyle-pathcss-and-options}
+
+- **`wrapperStyle`** está obsoleta: use `style`.
+- **`pathCss`** foi removida: estilize os paths com uma classe.
+- **`options`** (configurações do lottie-web) foi removida junto com o lottie-web. Use as props `loop`, `autoplay` e `speed`; as outras opções do lottie-web não têm equivalente.
+
+Se você passar `pathCss` ou `options` mesmo assim, um aviso aparece uma vez no console, e elas são ignoradas.
+
+```diff
+- <UseAnimations animation={github} wrapperStyle={{ margin: 8 }} pathCss="stroke-width: 3px;" options={{ loop: true }} />
++ <UseAnimations animation={github} style={{ margin: 8 }} className="thick" loop />
+```
+
+```css
+.thick path {
+  stroke-width: 3px;
+}
+```
+
+### 5. Confira o elemento wrapper {#5-check-the-wrapper-element}
+
+O wrapper agora é um `<span>` inline-block em vez de uma `<div>`, então ele é válido dentro de botões e links e fica alinhado à linha do texto. Atualize o CSS que mira o wrapper como `div` e aplique os `animationProps` num `<span>` na prop `render`:
+
+```diff
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Like" {...eventProps}>
+-     <div {...animationProps} />
++     <span {...animationProps} />
+    </button>
+  )}
+```
+
+Agora os ícones ficam ocultos para leitores de tela (`aria-hidden`), a menos que você passe `aria-label`; adicione um aos ícones que transmitem significado sozinhos.
+
+### 6. Confira os ícones cuja interação mudou {#6-check-the-icons-whose-interaction-changed}
+
+As interações agora são as mesmas de useanimations.com. Se um ícone deve se comportar como na v2, passe a interação antiga:
+
+| Ícones                                                                                             | v2               | v3             |
+| -------------------------------------------------------------------------------------------------- | ---------------- | -------------- |
+| `arrowDownCircle`, `arrowLeftCircle`, `arrowRightCircle`, `arrowUpCircle`                          | `click-toggle`   | `click-replay` |
+| `calendar`, `folder`, `home`, `instagram`, `userMinus`, `userPlus`, `userX`, `youtube`, `youtube2` | `hover-replay`\* | `hover`        |
+| `behance`, `codepen`, `facebook`, `github`, `linkedin`, `pocket`, `twitter`                        | `hover-replay`\* | `hover-loop`   |
+| `copy`, `edit`, `mail`                                                                             | `click-replay`   | `hover`        |
+| `dribbble`                                                                                         | `hover`          | `hover-loop`   |
+| `zoomIn`, `zoomOut`                                                                                | `loop`           | `hover`        |
+
+\* Na v2, esses ícones tocavam uma vez quando o mouse entrava e pulavam de volta para o início quando ele saía; `hover-replay` é o mais próximo disso.
+
+```jsx
+<UseAnimations animation={zoomIn} interaction="loop" />
+```
+
+### 7. Atualize os imports {#7-update-imports}
+
+Importe os ícones só como `react-useanimations/lib/<name>` ou de `react-useanimations/icons`. Os caminhos internos de arquivos da v2, como `react-useanimations/lib/github/index` ou `react-useanimations/lib/github/github.json`, não são mais resolvidos; o Lottie JSON é o `animationData` do ícone:
+
+```diff
+- import githubJson from 'react-useanimations/lib/github/github.json';
++ import github from 'react-useanimations/lib/github';
++ const githubJson = github.animationData;
+```
+
+Os caminhos `react-useanimations/utils` foram removidos. Importe os tipos do próprio pacote:
+
+```diff
+- import type { Animation, AnimationKey } from 'react-useanimations/utils';
++ import type { Animation, AnimationKey, Interaction, UseAnimationsProps } from 'react-useanimations';
+```
+
+`Animation` agora é `{ animationData, interaction }`; o campo `animationKey` da v2 deixou de existir, então objetos que você montou por conta própria passam a usar `interaction`.
+
+### O que mais há de novo {#what-else-is-new}
+
+221 ícones a mais (300 no total), vários ícones de uma vez a partir de `react-useanimations/icons`, suporte a movimento reduzido, hover no foco pelo teclado, nada de animações de hover travadas em telas sensíveis ao toque, renderização no servidor sem workarounds e um [registry do shadcn](#shadcnui).
+
+## Licença {#license}
+
+Os ícones e o código são distribuídos sob a [licença MIT](https://opensource.org/license/mit/): você pode usar, modificar e redistribuir em trabalhos pessoais e comerciais. A atribuição não é obrigatória, mas é bem-vinda:
+
+```html
+Animated icons by <a href="https://useanimations.com">useAnimations</a>
+```
+
+Termos completos: [Licença e termos](/licencing-and-terms).
+
+## Perguntas frequentes {#faq}
+
+<details><summary>O useAnimations é gratuito para projetos comerciais?</summary>
+
+Sim. Os ícones e o pacote têm licença MIT, sem exigência de atribuição.
+
+</details>
+
+<details><summary>Como mudo a cor de um ícone?</summary>
+
+Os ícones seguem a cor do texto. Mude com `strokeColor` e `fillColor`, com a propriedade CSS `color` ou estilizando os paths. Veja [Tamanho e cor](#size--color).
+
+</details>
+
+<details><summary>Funciona sem React?</summary>
+
+O pacote é para React. Cada ícone também é um arquivo Lottie JSON que lottie-web, lottie-ios, lottie-android, Flutter e React Native conseguem tocar, além de um SVG estático. Veja [Uso sem React](#use-without-react) e [Ícones Lottie](/lottie-icons).
+
+</details>
+
+<details><summary>Agentes de código com IA conseguem usar o useAnimations?</summary>
+
+Sim. Indique a eles o [icons.json](/icons.json) e o [/documentation.md](/documentation.md); o próprio pacote traz o `catalog.json` e tipos documentados para cada ícone.
+
+</details>
diff --git a/website/src/content/documentation.ru.md b/website/src/content/documentation.ru.md
new file mode 100644
index 0000000..617a2c2
--- /dev/null
+++ b/website/src/content/documentation.ru.md
@@ -0,0 +1,454 @@
+# Документация {#documentation}
+
+useAnimations — бесплатная библиотека из 300 анимированных иконок для React под лицензией MIT. У каждой иконки есть встроенное взаимодействие: она крутится в цикле, проигрывается по клику или при наведении. Подключайте их через пакет `react-useanimations` или добавляйте с помощью shadcn CLI.
+
+<div id="quick-start-react"></div>
+
+## Быстрый старт {#quick-start}
+
+```bash
+npm install react-useanimations
+```
+
+```jsx
+import UseAnimations from 'react-useanimations';
+import github from 'react-useanimations/lib/github';
+
+export default function Header() {
+  return <UseAnimations animation={github} size={32} />;
+}
+```
+
+Иконка берёт цвет текста и проигрывает своё взаимодействие: `github` крутится в цикле, пока на неё наведён курсор. У пакета нет зависимостей: иконки рисует в SVG встроенный плеер (8 КБ в gzip), а каждая иконка — отдельный модуль, поэтому в бандл попадают только те иконки, которые вы импортировали.
+
+## Взаимодействия {#interactions}
+
+Каждая иконка поставляется со взаимодействием, для которого её нарисовали. Переопределить его можно пропом `interaction`.
+
+| Взаимодействие | Что делает                                                                     | Примеры иконок                       |
+| -------------- | ------------------------------------------------------------------------------ | ------------------------------------ |
+| `loop`         | Проигрывается непрерывно.                                                      | `loading`, `activity`, `alertCircle` |
+| `click-toggle` | Переключается между двумя состояниями по клику (вперёд, затем назад).          | `menu`, `checkBox`, `playPause`      |
+| `click-replay` | Проигрывается с начала при каждом клике.                                       | `download`, `refresh`, `send`        |
+| `hover`        | Проигрывается вперёд, когда курсор наводится, и назад, когда уходит.           | `archive`, `settings`, `trash`       |
+| `hover-loop`   | Крутится в цикле при наведении и доигрывает текущий цикл, когда курсор уходит. | `github`, `twitter`, `dribbble`      |
+| `hover-replay` | Проигрывается один раз с начала, когда курсор наводится.                       | `arrowRight`, `bluetooth`, `zap`     |
+
+Если пользователь включил уменьшение движения, иконки не двигаются: зацикленные показывают первый кадр, анимации при наведении и повторы не проигрываются, а переключатели сразу переходят в новое состояние.
+
+<div id="react"></div>
+
+## Пропсы {#props}
+
+```jsx
+<UseAnimations animation={github} size={56} strokeColor="#4b5cff" style={{ padding: 8 }} />
+```
+
+| Проп          | По умолчанию         | Описание                                                                                                                                      |
+| ------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `animation`   | —                    | Иконка, импортированная из `react-useanimations/lib/<name>`, или `{ animationData, interaction }` для собственной анимации.                   |
+| `size`        | `24`                 | Ширина и высота: число — это пиксели, строка — любая CSS-длина, например `'1.5em'`.                                                           |
+| `strokeColor` | `'currentColor'`     | Цвет обводки. По умолчанию иконка берёт цвет текста.                                                                                          |
+| `fillColor`   | `strokeColor`        | Цвет заливки, например у сердечка после лайка.                                                                                                |
+| `interaction` | у каждой иконки свой | `'loop'`, `'click-toggle'`, `'click-replay'`, `'hover'`, `'hover-loop'` или `'hover-replay'`.                                                 |
+| `active`      | —                    | Для иконок `click-toggle`: `true` показывает конечное состояние. Контролируемый проп: меняйте его в `onClick`, сами клики его не переключают. |
+| `autoplay`    | у каждой иконки свой | `true` для иконок `loop`, если не включено уменьшение движения.                                                                               |
+| `loop`        | у каждой иконки свой | `true` для иконок `loop` и `hover-loop`.                                                                                                      |
+| `speed`       | `1`                  | Скорость воспроизведения.                                                                                                                     |
+| `render`      | —                    | Render-проп для своей обёртки, см. [Оберните иконку в настоящую кнопку](#wrap-the-icon-in-a-real-button).                                     |
+
+Все остальные пропсы (`className`, `aria-label`, `onClick`, …) передаются обёртке `<span>`. Ваши обработчики событий выполняются раньше обработчиков анимации; вызовите `event.preventDefault()`, чтобы пропустить анимацию.
+
+## Импорт иконок {#importing-icons}
+
+Импортируйте каждую иконку из `react-useanimations/lib/<name>` или сразу несколько из `react-useanimations/icons`:
+
+```jsx
+import { github, heart, menu } from 'react-useanimations/icons';
+```
+
+В продакшен-сборку в обоих случаях попадают только используемые иконки. Дев-серверы и тест-раннеры не делают tree-shaking, поэтому там `react-useanimations/icons` загружает все иконки; если это важно, импортируйте из `lib/<name>`. `delete` и `package` — зарезервированные слова, поэтому импортируйте их как `deleteIcon` и `packageIcon`.
+
+## Контролируемый переключатель {#controlled-toggle}
+
+```jsx
+import { useState } from 'react';
+import UseAnimations from 'react-useanimations';
+import menu from 'react-useanimations/lib/menu';
+
+export function MenuButton() {
+  const [open, setOpen] = useState(false);
+  return (
+    <UseAnimations
+      animation={menu}
+      size={40}
+      active={open} // анимируется и тогда, когда `open` меняется в другом месте
+      onClick={() => setOpen(!open)}
+    />
+  );
+}
+```
+
+## Оберните иконку в настоящую кнопку {#wrap-the-icon-in-a-real-button}
+
+Для кликабельных иконок оберните иконку фокусируемым элементом через проп `render`: `eventProps` передаются вашему элементу, а `animationProps` — элементу `<span>` внутри него. Тогда анимации при наведении проигрываются и когда кнопка получает фокус с клавиатуры.
+
+```jsx
+import heart from 'react-useanimations/lib/heart';
+
+<UseAnimations
+  animation={heart}
+  size={32}
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Add to favorites" {...eventProps}>
+      <span {...animationProps} />
+    </button>
+  )}
+/>;
+```
+
+<div id="customize"></div>
+
+## Размер и цвет {#size--color}
+
+Иконки — линейные, нарисованы на артборде 24 или 32 px и остаются чёткими при любом размере: задайте `size` числом пикселей или любой CSS-длиной.
+
+Обводка использует `currentColor`, поэтому иконки сами подхватывают цвет текста, hover-состояния и тёмную тему. Меняйте цвет через `strokeColor` и `fillColor`, через CSS-свойство `color` или стилизуйте path напрямую: у встроенного правила нулевая специфичность, так что ваш CSS всегда побеждает.
+
+У некоторых иконок есть вырез (косая черта в `visibility`, `microphone`, `video`, `volume` и `notification`, галочка в `download`, кольцо вокруг бейджа `notification3`). Вырез заливается цветом фона страницы: белым на светлых страницах и тёмным на страницах с `color-scheme: dark`. На другом фоне задайте его CSS-переменной `--ua-knockout`, например `body { --ua-knockout: #0f172a; }`.
+
+```jsx
+// Tailwind: цвет и толщина обводки
+<UseAnimations animation={github} className="text-indigo-500 [&_path]:stroke-[3]" />
+```
+
+## Next.js и серверный рендеринг {#nextjs-and-server-rendering}
+
+Компонент помечен `'use client'` и рисует анимацию только в браузере, поэтому его можно рендерить из серверных компонентов и SSR-фреймворков (Next.js, Remix, Astro) без `dynamic(…, { ssr: false })`. Модули иконок — обычные данные, так что серверные компоненты могут их импортировать и передавать как пропсы.
+
+<div id="shadcn"></div>
+
+## shadcn/ui {#shadcnui}
+
+Каждая иконка есть и в [реестре shadcn](https://ui.shadcn.com/docs/registry). CLI добавляет готовый компонент и устанавливает `react-useanimations`:
+
+```bash
+npx shadcn@latest add https://useanimations.com/r/checkmark.json
+```
+
+```tsx
+import { AnimatedCheckmark } from '@/components/animations/checkmark';
+
+<AnimatedCheckmark size={24} />;
+```
+
+Компонент называется `Animated` + id иконки в PascalCase (`check-box` → `AnimatedCheckBox`), попадает в `components/animations/<id>.tsx` и принимает те же пропсы, что и `UseAnimations`. Индекс реестра — [/r/registry.json](/r/registry.json). Чтобы пользоваться короткой формой `npx shadcn@latest add @useanimations/checkmark`, добавьте реестр в `components.json`:
+
+```json
+{
+  "registries": {
+    "@useanimations": "https://useanimations.com/r/{name}.json"
+  }
+}
+```
+
+## Собственная анимация {#your-own-animation}
+
+```jsx
+import animationData from './my-animation.json';
+
+<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
+```
+
+Анимация должна быть файлом Lottie JSON — в этом формате сделаны и сами иконки. Плеер поддерживает то, что нужно иконкам: слои фигур, прекомпозиции, null-слои и родительские связи, пути, прямоугольники, эллипсы, обводки, заливки, trim paths, маски, ключевые кадры с easing, удержание и траектории движения, а также выражения `loopOut()` и `wiggle()`. Всё остальное — градиенты, текстовые слои и слои с изображениями, эффекты и матты — не отрисовывается; о неподдерживаемых слоях, фигурах и выражениях плеер предупреждает в консоли.
+
+<div id="direct-urls"></div><div id="download"></div>
+
+## Файлы и icons.json {#files--iconsjson}
+
+Каждую иконку можно скачать — со страницы иконки или по постоянным URL с включённым CORS:
+
+| Файл                            | URL                                                |
+| ------------------------------- | -------------------------------------------------- |
+| Анимация (Lottie JSON)          | `https://useanimations.com/icons/<id>.json`        |
+| Статичный SVG каждого состояния | `https://useanimations.com/icons/<id>/<state>.svg` |
+| ZIP с JSON и SVG                | `https://useanimations.com/icons/<id>.zip`         |
+| Страница иконки                 | `https://useanimations.com/icons/<id>`             |
+| Каталог всех иконок             | `https://useanimations.com/icons.json`             |
+
+[icons.json](/icons.json) содержит все иконки с id, названием, категорией, ключевыми словами для поиска, взаимодействием, URL файлов, размером и длительностью, строкой импорта из `react-useanimations` и командой shadcn. В npm-пакете есть те же данные: `react-useanimations/catalog.json` (метаданные), `react-useanimations/icons` (анимации) и `react-useanimations/svg.json` (статичные SVG).
+
+<div id="without-react"></div>
+
+## Использование без React {#use-without-react}
+
+Иконки — это стандартный Lottie JSON, поэтому их воспроизводит любой Lottie-плеер — по адресу `https://useanimations.com/icons/<id>.json` или из копии в вашем проекте. Вне React взаимодействие придётся подключать самостоятельно. Другие плееры и примеры — на странице [Lottie-иконки](/lottie-icons).
+
+Некоторые иконки используют выражения After Effects (`loopOut()`, `wiggle()`); в [icons.json](/icons.json) они отмечены полем `requiresFullPlayer`. В браузере для них нужна полная сборка lottie-web, а не `lottie_light`, а нативные плееры выражения не вычисляют.
+
+<div id="html"></div><div id="interactions-web"></div>
+
+### HTML и JavaScript {#html-and-javascript}
+
+```html
+<div id="icon" style="width: 48px; height: 48px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
+<script>
+  const el = document.getElementById('icon');
+  const animation = lottie.loadAnimation({
+    container: el,
+    renderer: 'svg',
+    loop: false,
+    autoplay: false,
+    path: 'https://useanimations.com/icons/archive.json',
+  });
+  // hover: вперёд при наведении, назад, когда курсор уходит
+  el.addEventListener('mouseenter', () => {
+    animation.setDirection(1);
+    animation.play();
+  });
+  el.addEventListener('mouseleave', () => {
+    animation.setDirection(-1);
+    animation.play();
+  });
+</script>
+```
+
+С SVG-рендерером иконка может брать цвет текста, как React-компонент:
+
+```css
+#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) {
+  stroke: currentColor;
+}
+#icon path[fill='rgb(0,0,0)'] {
+  fill: currentColor;
+}
+```
+
+<div id="vue"></div>
+
+### Vue {#vue}
+
+```vue
+<script setup>
+import lottie from 'lottie-web';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+const el = ref(null);
+let animation;
+onMounted(() => {
+  animation = lottie.loadAnimation({
+    container: el.value,
+    renderer: 'svg',
+    loop: true,
+    autoplay: true,
+    path: 'https://useanimations.com/icons/loading.json',
+  });
+});
+onBeforeUnmount(() => animation?.destroy());
+</script>
+
+<template>
+  <div ref="el" style="width: 48px; height: 48px" />
+</template>
+```
+
+### React Native {#react-native}
+
+```jsx
+import LottieView from 'lottie-react-native';
+
+<LottieView source={require('./loading.json')} autoPlay loop style={{ width: 48, height: 48 }} />;
+```
+
+<div id="ios"></div>
+
+### iOS {#ios}
+
+С [lottie-ios](https://github.com/airbnb/lottie-ios), JSON лежит в бандле приложения:
+
+```swift
+import Lottie
+import SwiftUI
+
+LottieView(animation: .named("loading"))
+  .looping()
+  .frame(width: 48, height: 48)
+```
+
+<div id="android"></div>
+
+### Android {#android}
+
+С [lottie-android](https://github.com/airbnb/lottie-android) в Jetpack Compose, JSON лежит в `res/raw`:
+
+```kotlin
+val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
+LottieAnimation(composition, iterations = LottieConstants.IterateForever, modifier = Modifier.size(48.dp))
+```
+
+### Flutter {#flutter}
+
+С пакетом [lottie](https://pub.dev/packages/lottie):
+
+```dart
+Lottie.asset('assets/loading.json', width: 48, height: 48)
+```
+
+<div id="performance"></div><div id="accessibility"></div>
+
+## Производительность и доступность {#performance--accessibility}
+
+- **Небольшой размер:** плеер весит 8 КБ в gzip и не имеет зависимостей, а иконка — от 1 до 15 КБ (медиана — 2 КБ).
+- **Ленивая отрисовка:** анимации рисуются только в браузере, после рендера страницы; автоматически запущенные циклы встают на паузу, пока они за пределами экрана, а при размонтировании всё очищается.
+- **По умолчанию декоративные:** иконки скрыты от скринридеров (`aria-hidden`), пока вы не передадите `aria-label` — тогда они озвучиваются как изображение. Для элементов управления из одной иконки используйте настоящий `<button>` с `aria-label` (см. [выше](#wrap-the-icon-in-a-real-button)) и передавайте состояние переключателя через `aria-pressed` или `aria-expanded`.
+- **Уменьшение движения и сенсорные экраны:** иконки учитывают `prefers-reduced-motion`, а касания сенсорного экрана не запускают анимации при наведении.
+
+<div id="agents"></div>
+
+## ИИ-агенты для написания кода {#ai-coding-agents}
+
+Агенты могут подбирать иконки по ключевому слову или взаимодействию в [icons.json](/icons.json) или в `react-useanimations/catalog.json` внутри пакета и использовать указанную там строку импорта или команду shadcn. В определениях типов каждого импорта иконки тоже есть её название, ключевые слова, взаимодействие и превью. Эта документация доступна в Markdown по адресу [/documentation.md](/documentation.md), а [/llms.txt](/llms.txt) содержит индекс сайта.
+
+## Переход с v2 {#upgrading-from-v2}
+
+Для большинства приложений переход сводится к установке v3: компонент, импорты `react-useanimations/lib/<name>` и все 79 иконок из v2 остались прежними. Пройдите те шаги ниже, которые касаются вашего кода.
+
+### 1. Установите v3 {#1-install-v3}
+
+v3 требует React 18 или новее и не имеет зависимостей. Удалите и lottie-web, если он больше нигде в приложении не используется.
+
+```bash
+npm install react-useanimations@3
+npm uninstall lottie-web
+```
+
+### 2. Замените `reverse` на `active` {#2-replace-reverse-with-active}
+
+`active` — полностью контролируемый проп: иконка анимируется, когда `active` меняется, а сам по себе клик её не переключает, поэтому обновляйте значение в `onClick`. `reverse` по-прежнему работает как в v2 (задаёт начальное состояние, а клики переключают иконку), но считается устаревшим. Оба пропа действуют только на иконки `click-toggle`: четыре стрелки в кругах теперь повторяются по клику (см. [шаг 6](#6-check-the-icons-whose-interaction-changed)).
+
+```diff
+- <UseAnimations animation={checkBox} reverse={checked} onClick={toggle} />
++ <UseAnimations animation={checkBox} active={checked} onClick={toggle} />
+```
+
+### 3. Проверьте цвета {#3-check-the-colors}
+
+В v2 иконки были чёрными, если не задать `strokeColor`. В v3 иконки берут цвет текста (`currentColor`), а `fillColor` по умолчанию равен `strokeColor`. Иконки внутри цветного текста или ссылок меняют цвет вместе с ним; чтобы оставить их чёрными, задайте цвет сами:
+
+```jsx
+<UseAnimations animation={github} strokeColor="#000" />
+```
+
+### 4. Перенесите `wrapperStyle`, `pathCss` и `options` {#4-move-wrapperstyle-pathcss-and-options}
+
+- **`wrapperStyle`** устарел: используйте `style`.
+- **`pathCss`** удалён: стилизуйте path через класс.
+- **`options`** (настройки lottie-web) удалён вместе с lottie-web. Используйте пропсы `loop`, `autoplay` и `speed`; у остальных настроек lottie-web аналогов нет.
+
+Если всё же передать `pathCss` или `options`, в консоль один раз выводится предупреждение, а сами значения игнорируются.
+
+```diff
+- <UseAnimations animation={github} wrapperStyle={{ margin: 8 }} pathCss="stroke-width: 3px;" options={{ loop: true }} />
++ <UseAnimations animation={github} style={{ margin: 8 }} className="thick" loop />
+```
+
+```css
+.thick path {
+  stroke-width: 3px;
+}
+```
+
+### 5. Проверьте элемент-обёртку {#5-check-the-wrapper-element}
+
+Обёртка теперь — inline-block `<span>` вместо `<div>`, поэтому её можно класть внутрь кнопок и ссылок, и она стоит на строке текста. Обновите CSS, который обращается к обёртке как к `div`, и в пропе `render` передавайте `animationProps` элементу `<span>`:
+
+```diff
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Like" {...eventProps}>
+-     <div {...animationProps} />
++     <span {...animationProps} />
+    </button>
+  )}
+```
+
+Иконки теперь скрыты от скринридеров (`aria-hidden`), пока вы не передадите `aria-label`; добавьте его иконкам, которые несут смысл сами по себе.
+
+### 6. Проверьте иконки, у которых изменилось взаимодействие {#6-check-the-icons-whose-interaction-changed}
+
+Теперь взаимодействия совпадают с useanimations.com. Если иконка должна вести себя как в v2, передайте её прежнее взаимодействие:
+
+| Иконки                                                                                             | v2               | v3             |
+| -------------------------------------------------------------------------------------------------- | ---------------- | -------------- |
+| `arrowDownCircle`, `arrowLeftCircle`, `arrowRightCircle`, `arrowUpCircle`                          | `click-toggle`   | `click-replay` |
+| `calendar`, `folder`, `home`, `instagram`, `userMinus`, `userPlus`, `userX`, `youtube`, `youtube2` | `hover-replay`\* | `hover`        |
+| `behance`, `codepen`, `facebook`, `github`, `linkedin`, `pocket`, `twitter`                        | `hover-replay`\* | `hover-loop`   |
+| `copy`, `edit`, `mail`                                                                             | `click-replay`   | `hover`        |
+| `dribbble`                                                                                         | `hover`          | `hover-loop`   |
+| `zoomIn`, `zoomOut`                                                                                | `loop`           | `hover`        |
+
+\* В v2 эти иконки проигрывались один раз при наведении и перескакивали в начало, когда курсор уходил; ближе всего к этому `hover-replay`.
+
+```jsx
+<UseAnimations animation={zoomIn} interaction="loop" />
+```
+
+### 7. Обновите импорты {#7-update-imports}
+
+Импортируйте иконки только как `react-useanimations/lib/<name>` или из `react-useanimations/icons`. Внутренние пути файлов из v2, например `react-useanimations/lib/github/index` или `react-useanimations/lib/github/github.json`, больше не резолвятся; Lottie JSON доступен как `animationData` иконки:
+
+```diff
+- import githubJson from 'react-useanimations/lib/github/github.json';
++ import github from 'react-useanimations/lib/github';
++ const githubJson = github.animationData;
+```
+
+Пути `react-useanimations/utils` удалены. Импортируйте типы из самого пакета:
+
+```diff
+- import type { Animation, AnimationKey } from 'react-useanimations/utils';
++ import type { Animation, AnimationKey, Interaction, UseAnimationsProps } from 'react-useanimations';
+```
+
+`Animation` теперь имеет вид `{ animationData, interaction }`; поля `animationKey` из v2 больше нет, поэтому в объектах, которые вы собираете сами, используйте `interaction`.
+
+### Что ещё нового {#what-else-is-new}
+
+221 новая иконка (всего 300), импорт сразу нескольких иконок из `react-useanimations/icons`, поддержка уменьшения движения, hover-анимация при фокусе с клавиатуры, никаких зависших hover-анимаций на сенсорных экранах, серверный рендеринг без обходных путей и [реестр shadcn](#shadcnui).
+
+## Лицензия {#license}
+
+Иконки и код распространяются по [лицензии MIT](https://opensource.org/license/mit/): их можно использовать, изменять и распространять в личных и коммерческих проектах. Указывать авторство не обязательно, но мы будем благодарны:
+
+```html
+Animated icons by <a href="https://useanimations.com">useAnimations</a>
+```
+
+Полные условия: [Лицензия и условия](/licencing-and-terms).
+
+## Частые вопросы {#faq}
+
+<details><summary>Можно ли бесплатно использовать useAnimations в коммерческих проектах?</summary>
+
+Да. Иконки и пакет распространяются по лицензии MIT, указывать авторство не нужно.
+
+</details>
+
+<details><summary>Как изменить цвет иконки?</summary>
+
+Иконки берут цвет текста. Его можно поменять через `strokeColor` и `fillColor`, CSS-свойство `color` или стили для path. См. [Размер и цвет](#size--color).
+
+</details>
+
+<details><summary>Работает ли это без React?</summary>
+
+Сам пакет сделан для React. Но каждая иконка есть и в виде файла Lottie JSON, который воспроизводят lottie-web, lottie-ios, lottie-android, Flutter и React Native, и в виде статичного SVG. См. [Использование без React](#use-without-react) и [Lottie-иконки](/lottie-icons).
+
+</details>
+
+<details><summary>Могут ли ИИ-агенты для написания кода использовать useAnimations?</summary>
+
+Да. Дайте им ссылки на [icons.json](/icons.json) и [/documentation.md](/documentation.md); в самом пакете есть `catalog.json` и задокументированные типы для каждой иконки.
+
+</details>
diff --git a/website/src/content/documentation.tr.md b/website/src/content/documentation.tr.md
new file mode 100644
index 0000000..8ed39f0
--- /dev/null
+++ b/website/src/content/documentation.tr.md
@@ -0,0 +1,454 @@
+# Dokümantasyon {#documentation}
+
+useAnimations, React için 300 animasyonlu ikondan oluşan, ücretsiz ve MIT lisanslı bir kütüphanedir. Her ikon hazır bir etkileşimle gelir: döngüde oynar, tıklandığında oynar ya da hover’da oynar. İkonları `react-useanimations` paketiyle kullanabilir veya shadcn CLI ile projenize ekleyebilirsiniz.
+
+<div id="quick-start-react"></div>
+
+## Hızlı başlangıç {#quick-start}
+
+```bash
+npm install react-useanimations
+```
+
+```jsx
+import UseAnimations from 'react-useanimations';
+import github from 'react-useanimations/lib/github';
+
+export default function Header() {
+  return <UseAnimations animation={github} size={32} />;
+}
+```
+
+İkon metin rengini izler ve kendi etkileşimini oynatır: `github`, üzerine geldiğiniz sürece döngüde oynar. Paketin hiçbir bağımlılığı yoktur; ikonları dahili bir oynatıcı (gzip ile 8 kB) SVG olarak çizer. Her ikon ayrı bir modül olduğu için bundle’ınıza yalnızca import ettiğiniz ikonlar girer.
+
+## Etkileşimler {#interactions}
+
+Her ikon, kendisi için tasarlanan etkileşimle gelir. Bunu `interaction` prop’uyla değiştirebilirsiniz.
+
+| Etkileşim      | Ne yapar                                                               | Örnek ikonlar                        |
+| -------------- | ---------------------------------------------------------------------- | ------------------------------------ |
+| `loop`         | Kesintisiz oynar.                                                      | `loading`, `activity`, `alertCircle` |
+| `click-toggle` | Tıklandığında iki durum arasında geçiş yapar (önce ileri, sonra geri). | `menu`, `checkBox`, `playPause`      |
+| `click-replay` | Her tıklamada baştan oynar.                                            | `download`, `refresh`, `send`        |
+| `hover`        | İmleç gelince ileri, ayrılınca geri oynar.                             | `archive`, `settings`, `trash`       |
+| `hover-loop`   | Hover süresince döngüde oynar, imleç ayrılınca mevcut turu tamamlar.   | `github`, `twitter`, `dribbble`      |
+| `hover-replay` | İmleç geldiğinde baştan bir kez oynar.                                 | `arrowRight`, `bluetooth`, `zap`     |
+
+Kullanıcı azaltılmış hareketi tercih ettiğinde ikonlar sabit kalır: döngüler ilk karelerini gösterir, hover ve tekrar animasyonları oynamaz, geçiş ikonları ise anında yeni durumlarına geçer.
+
+<div id="react"></div>
+
+## Prop’lar {#props}
+
+```jsx
+<UseAnimations animation={github} size={56} strokeColor="#4b5cff" style={{ padding: 8 }} />
+```
+
+| Prop          | Varsayılan       | Açıklama                                                                                                                            |
+| ------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `animation`   | —                | `react-useanimations/lib/<name>` adresinden import edilen ikon ya da kendi animasyonunuz için `{ animationData, interaction }`.     |
+| `size`        | `24`             | Genişlik ve yükseklik; sayılar piksel, string’ler ise `'1.5em'` gibi herhangi bir CSS uzunluğudur.                                  |
+| `strokeColor` | `'currentColor'` | Çizgilerin rengi. Varsayılan olarak ikon metin rengini izler.                                                                       |
+| `fillColor`   | `strokeColor`    | Dolgulu kısımların rengi, ör. beğenilmiş bir kalp.                                                                                  |
+| `interaction` | ikona göre       | `'loop'`, `'click-toggle'`, `'click-replay'`, `'hover'`, `'hover-loop'` ya da `'hover-replay'`.                                     |
+| `active`      | —                | `click-toggle` ikonları için: `true` bitiş durumunu gösterir. Kontrollüdür: `onClick` içinde ayarlayın, tıklamalar onu değiştirmez. |
+| `autoplay`    | ikona göre       | `loop` ikonlarında `true`; azaltılmış hareket tercih edildiğinde değil.                                                             |
+| `loop`        | ikona göre       | `loop` ve `hover-loop` ikonlarında `true`.                                                                                          |
+| `speed`       | `1`              | Oynatma hızı.                                                                                                                       |
+| `render`      | —                | Özel bir wrapper için render prop’u, bkz. [İkonu gerçek bir düğmeye sarın](#wrap-the-icon-in-a-real-button).                        |
+
+Diğer tüm prop’lar (`className`, `aria-label`, `onClick`, …) wrapper `<span>` öğesine gider. Sizin event handler’larınız animasyonunkilerden önce çalışır; animasyonu atlamak için `event.preventDefault()` çağırın.
+
+## İkonları import etme {#importing-icons}
+
+Her ikonu `react-useanimations/lib/<name>` adresinden ya da birkaçını birden `react-useanimations/icons` üzerinden import edin:
+
+```jsx
+import { github, heart, menu } from 'react-useanimations/icons';
+```
+
+Her iki yöntemde de production build’ler yalnızca kullandığınız ikonları içerir. Dev sunucuları ve test runner’lar tree-shaking yapmaz; bu ortamlarda `react-useanimations/icons` tüm ikonları yükler. Bu sizin için önemliyse `lib/<name>` tercih edin. `delete` ve `package` ayrılmış kelimelerdir: bunları `deleteIcon` ve `packageIcon` olarak import edin.
+
+## Kontrollü geçiş {#controlled-toggle}
+
+```jsx
+import { useState } from 'react';
+import UseAnimations from 'react-useanimations';
+import menu from 'react-useanimations/lib/menu';
+
+export function MenuButton() {
+  const [open, setOpen] = useState(false);
+  return (
+    <UseAnimations
+      animation={menu}
+      size={40}
+      active={open} // `open` başka bir yerde değiştiğinde de animasyon oynar
+      onClick={() => setOpen(!open)}
+    />
+  );
+}
+```
+
+## İkonu gerçek bir düğmeye sarın {#wrap-the-icon-in-a-real-button}
+
+Tıklanabilir ikonlarda `render` prop’uyla ikonun etrafına odaklanabilir bir öğe koyun: `eventProps` sizin öğenize, `animationProps` ise onun içindeki bir `<span>` öğesine gider. Böylece hover animasyonları, düğme klavye odağı aldığında da oynar.
+
+```jsx
+import heart from 'react-useanimations/lib/heart';
+
+<UseAnimations
+  animation={heart}
+  size={32}
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Add to favorites" {...eventProps}>
+      <span {...animationProps} />
+    </button>
+  )}
+/>;
+```
+
+<div id="customize"></div>
+
+## Boyut ve renk {#size--color}
+
+İkonlar 24 ya da 32 px’lik bir artboard üzerinde çizilmiş çizgi ikonlardır ve her boyutta keskin kalır: `size` değerini piksel cinsinden bir sayıya ya da herhangi bir CSS uzunluğuna ayarlayın.
+
+Çizgiler `currentColor` değerini izler; bu yüzden ikonlar metin rengini, hover durumlarını ve karanlık modu kendiliğinden alır. Renkleri `strokeColor` ve `fillColor` ile, CSS `color` ile ya da path’lere stil vererek değiştirin: dahili kuralın specificity değeri sıfırdır, yani her zaman sizin CSS’iniz kazanır.
+
+Bazı ikonlar kendi içlerinde bir boşluk keser (`visibility`, `microphone`, `video`, `volume` ve `notification` ikonlarındaki eğik çizgi, `download` ikonundaki onay işareti, `notification3` ikonunun rozetinin etrafındaki halka). Bu boşluk sayfa arka planının rengini alır: açık sayfalarda beyaz, `color-scheme: dark` olan sayfalarda koyu. Başka arka planlarda bunu `--ua-knockout` CSS değişkeniyle ayarlayın, ör. `body { --ua-knockout: #0f172a; }`.
+
+```jsx
+// Tailwind: renk ve çizgi kalınlığı
+<UseAnimations animation={github} className="text-indigo-500 [&_path]:stroke-[3]" />
+```
+
+## Next.js ve sunucu tarafı render {#nextjs-and-server-rendering}
+
+Bileşen `'use client'` olarak işaretlidir ve animasyonu yalnızca tarayıcıda çizer; bu yüzden onu server component’lerden ve SSR framework’lerinden (Next.js, Remix, Astro) `dynamic(…, { ssr: false })` kullanmadan render edebilirsiniz. İkon modülleri düz veridir; server component’ler onları import edip prop olarak geçebilir.
+
+<div id="shadcn"></div>
+
+## shadcn/ui {#shadcnui}
+
+Her ikon aynı zamanda bir [shadcn registry](https://ui.shadcn.com/docs/registry) içinde yer alır. CLI hazır bir bileşen ekler ve `react-useanimations` paketini kurar:
+
+```bash
+npx shadcn@latest add https://useanimations.com/r/checkmark.json
+```
+
+```tsx
+import { AnimatedCheckmark } from '@/components/animations/checkmark';
+
+<AnimatedCheckmark size={24} />;
+```
+
+Bileşenin adı `Animated` + PascalCase yazılmış ikon id’sidir (`check-box` → `AnimatedCheckBox`). Bileşen `components/animations/<id>.tsx` dosyasına eklenir ve `UseAnimations` ile aynı prop’ları alır. Registry dizini [/r/registry.json](/r/registry.json) adresindedir. Kısa yazım olan `npx shadcn@latest add @useanimations/checkmark` için registry’yi `components.json` dosyasına ekleyin:
+
+```json
+{
+  "registries": {
+    "@useanimations": "https://useanimations.com/r/{name}.json"
+  }
+}
+```
+
+## Kendi animasyonunuz {#your-own-animation}
+
+```jsx
+import animationData from './my-animation.json';
+
+<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
+```
+
+Animasyonunuz, ikonların da kullandığı format olan bir Lottie JSON dosyası olmalıdır. Oynatıcı, ikonların ihtiyaç duyduğu her şeyi destekler: shape layer’lar, precomposition’lar, null layer’lar ve parenting, path’ler, dikdörtgenler, elipsler, stroke’lar, fill’ler, trim path’ler, maskeler, easing’li keyframe’ler, hold’lar ve motion path’ler, ayrıca `loopOut()` ve `wiggle()` ifadeleri. Gradyanlar, metin ya da görsel katmanları, efektler ve matte’ler gibi diğer her şey çizilmez; konsol, desteklenmeyen layer, shape ve ifadeler için uyarı verir.
+
+<div id="direct-urls"></div><div id="download"></div>
+
+## Dosyalar ve icons.json {#files--iconsjson}
+
+Her ikon ayrıca kendi sayfasından ya da CORS açık, kalıcı URL’lerden indirilebilir:
+
+| Dosya                       | URL                                                |
+| --------------------------- | -------------------------------------------------- |
+| Animasyon (Lottie JSON)     | `https://useanimations.com/icons/<id>.json`        |
+| Her durumun statik SVG’si   | `https://useanimations.com/icons/<id>/<state>.svg` |
+| JSON ve SVG’leri içeren ZIP | `https://useanimations.com/icons/<id>.zip`         |
+| İkon sayfası (İngilizce)    | `https://useanimations.com/icons/<id>`             |
+| Tüm ikonların kataloğu      | `https://useanimations.com/icons.json`             |
+
+[icons.json](/icons.json) her ikonu id, başlık, kategori, arama anahtar kelimeleri, etkileşim, dosya URL’leri, boyut ve süre bilgileriyle, `react-useanimations` import’u ve shadcn komutuyla birlikte listeler. npm paketi de aynı verileri içerir: `react-useanimations/catalog.json` (meta veriler), `react-useanimations/icons` (animasyonlar) ve `react-useanimations/svg.json` (statik SVG’ler).
+
+<div id="without-react"></div>
+
+## React olmadan kullanım {#use-without-react}
+
+İkonlar standart Lottie JSON olduğu için her Lottie oynatıcısı onları `https://useanimations.com/icons/<id>.json` adresinden ya da projenizdeki bir kopyadan oynatabilir. React dışında etkileşimi kendiniz bağlarsınız. Daha fazla oynatıcı ve örnek için [Lottie ikonları](/lottie-icons) sayfasına bakın.
+
+Bazı ikonlar After Effects ifadeleri (`loopOut()`, `wiggle()`) kullanır; [icons.json](/icons.json) içinde `requiresFullPlayer` bu ikonları işaretler. Web’de bu ikonlar `lottie_light` ile değil, lottie-web’in tam sürümüyle oynatılmalıdır; native oynatıcılar ise ifadeleri işlemez.
+
+<div id="html"></div><div id="interactions-web"></div>
+
+### HTML ve JavaScript {#html-and-javascript}
+
+```html
+<div id="icon" style="width: 48px; height: 48px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
+<script>
+  const el = document.getElementById('icon');
+  const animation = lottie.loadAnimation({
+    container: el,
+    renderer: 'svg',
+    loop: false,
+    autoplay: false,
+    path: 'https://useanimations.com/icons/archive.json',
+  });
+  // hover: imleç gelince ileri, ayrılınca geri
+  el.addEventListener('mouseenter', () => {
+    animation.setDirection(1);
+    animation.play();
+  });
+  el.addEventListener('mouseleave', () => {
+    animation.setDirection(-1);
+    animation.play();
+  });
+</script>
+```
+
+SVG renderer ile ikon, React bileşeninde olduğu gibi metin rengini izleyebilir:
+
+```css
+#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) {
+  stroke: currentColor;
+}
+#icon path[fill='rgb(0,0,0)'] {
+  fill: currentColor;
+}
+```
+
+<div id="vue"></div>
+
+### Vue {#vue}
+
+```vue
+<script setup>
+import lottie from 'lottie-web';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+const el = ref(null);
+let animation;
+onMounted(() => {
+  animation = lottie.loadAnimation({
+    container: el.value,
+    renderer: 'svg',
+    loop: true,
+    autoplay: true,
+    path: 'https://useanimations.com/icons/loading.json',
+  });
+});
+onBeforeUnmount(() => animation?.destroy());
+</script>
+
+<template>
+  <div ref="el" style="width: 48px; height: 48px" />
+</template>
+```
+
+### React Native {#react-native}
+
+```jsx
+import LottieView from 'lottie-react-native';
+
+<LottieView source={require('./loading.json')} autoPlay loop style={{ width: 48, height: 48 }} />;
+```
+
+<div id="ios"></div>
+
+### iOS {#ios}
+
+[lottie-ios](https://github.com/airbnb/lottie-ios) ile, JSON uygulamanızın bundle’ındayken:
+
+```swift
+import Lottie
+import SwiftUI
+
+LottieView(animation: .named("loading"))
+  .looping()
+  .frame(width: 48, height: 48)
+```
+
+<div id="android"></div>
+
+### Android {#android}
+
+Jetpack Compose’da [lottie-android](https://github.com/airbnb/lottie-android) ile, JSON `res/raw` klasöründeyken:
+
+```kotlin
+val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
+LottieAnimation(composition, iterations = LottieConstants.IterateForever, modifier = Modifier.size(48.dp))
+```
+
+### Flutter {#flutter}
+
+[lottie](https://pub.dev/packages/lottie) paketiyle:
+
+```dart
+Lottie.asset('assets/loading.json', width: 48, height: 48)
+```
+
+<div id="performance"></div><div id="accessibility"></div>
+
+## Performans ve erişilebilirlik {#performance--accessibility}
+
+- **Küçük:** oynatıcı gzip ile 8 kB’tır ve bağımlılığı yoktur; bir ikon 1 ile 15 kB arasındadır (medyan 2 kB).
+- **Lazy:** animasyonlar yalnızca tarayıcıda, sayfa render edildikten sonra çizilir; otomatik oynayan döngüler ekranın dışına kaydırıldığında duraklar ve unmount sırasında her şey temizlenir.
+- **Varsayılan olarak dekoratif:** `aria-label` geçmediğiniz sürece ikonlar ekran okuyuculardan gizlenir (`aria-hidden`); `aria-label` geçerseniz görsel olarak duyurulur. Yalnızca ikondan oluşan kontrollerde `aria-label` içeren gerçek bir `<button>` kullanın ([yukarıya](#wrap-the-icon-in-a-real-button) bakın) ve geçiş durumunu `aria-pressed` ya da `aria-expanded` ile yansıtın.
+- **Azaltılmış hareket ve dokunmatik ekranlar:** ikonlar `prefers-reduced-motion` tercihine uyar; dokunmatik ekranlardaki dokunuşlar hover animasyonlarını tetiklemez.
+
+<div id="agents"></div>
+
+## Yapay zekâ kodlama ajanları {#ai-coding-agents}
+
+Ajanlar [icons.json](/icons.json) dosyasından ya da paketin içindeki `react-useanimations/catalog.json` dosyasından anahtar kelimeye veya etkileşime göre ikon seçebilir ve orada listelenen import satırını ya da shadcn komutunu kullanabilir. Her ikon import’unun tip tanımları da ikonun başlığını, anahtar kelimelerini, etkileşimini ve önizlemesini taşır. Bu dokümantasyon [/documentation.md](/documentation.md) adresinde Markdown olarak da mevcuttur; [/llms.txt](/llms.txt) ise sitenin dizinini sunar.
+
+## v2’den yükseltme {#upgrading-from-v2}
+
+Çoğu uygulama için yükseltme, v3’ü kurmaktan ibarettir: bileşen, `react-useanimations/lib/<name>` import’ları ve v2’deki 79 ikonun tamamı aynı kalır. Aşağıdaki adımlardan kodunuzu ilgilendirenleri uygulayın.
+
+### 1. v3’ü kurun {#1-install-v3}
+
+v3, React 18 ya da daha yenisini gerektirir ve hiçbir bağımlılığı yoktur. Uygulamanızda başka bir yer kullanmıyorsa lottie-web’i de kaldırın.
+
+```bash
+npm install react-useanimations@3
+npm uninstall lottie-web
+```
+
+### 2. `reverse` yerine `active` kullanın {#2-replace-reverse-with-active}
+
+`active` tamamen kontrollüdür: `active` değiştiğinde ikon animasyon oynatır, tek başına bir tıklama ise onu değiştirmez; bu yüzden değeri `onClick` içinde güncelleyin. `reverse` hâlâ v2’deki gibi çalışır (başlangıç durumunu belirler ve tıklamalar ikonu değiştirir), ancak kullanımdan kaldırılmıştır (deprecated). İkisi de yalnızca `click-toggle` ikonları için geçerlidir: daire içindeki dört ok ikonu artık tıklandığında baştan oynar (bkz. [6. adım](#6-check-the-icons-whose-interaction-changed)).
+
+```diff
+- <UseAnimations animation={checkBox} reverse={checked} onClick={toggle} />
++ <UseAnimations animation={checkBox} active={checked} onClick={toggle} />
+```
+
+### 3. Renkleri kontrol edin {#3-check-the-colors}
+
+v2 ikonları, `strokeColor` ayarlamadığınız sürece siyahtı. v3 ikonları metin rengini (`currentColor`) izler ve `fillColor` varsayılan olarak `strokeColor` değerini alır. Renkli metin ya da bağlantıların içindeki ikonların rengi de onlarla birlikte değişir; siyah kalmalarını istiyorsanız rengi kendiniz ayarlayın:
+
+```jsx
+<UseAnimations animation={github} strokeColor="#000" />
+```
+
+### 4. `wrapperStyle`, `pathCss` ve `options` yerine yenilerini kullanın {#4-move-wrapperstyle-pathcss-and-options}
+
+- **`wrapperStyle`** kullanımdan kaldırıldı: `style` kullanın.
+- **`pathCss`** kaldırıldı: path’lere bir class ile stil verin.
+- **`options`** (lottie-web ayarları) lottie-web ile birlikte kaldırıldı. `loop`, `autoplay` ve `speed` prop’larını kullanın; lottie-web’in diğer seçeneklerinin bir karşılığı yok.
+
+`pathCss` ya da `options` yine de geçilirse bir kez uyarı loglanır ve bunlar yok sayılır.
+
+```diff
+- <UseAnimations animation={github} wrapperStyle={{ margin: 8 }} pathCss="stroke-width: 3px;" options={{ loop: true }} />
++ <UseAnimations animation={github} style={{ margin: 8 }} className="thick" loop />
+```
+
+```css
+.thick path {
+  stroke-width: 3px;
+}
+```
+
+### 5. Wrapper öğesini kontrol edin {#5-check-the-wrapper-element}
+
+Wrapper artık bir `<div>` değil, inline-block bir `<span>`; böylece düğmelerin ve bağlantıların içinde geçerli HTML olur ve metin satırında durur. Wrapper’ı `div` olarak hedefleyen CSS’i güncelleyin ve `render` prop’unda `animationProps` değerini bir `<span>` öğesine verin:
+
+```diff
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Like" {...eventProps}>
+-     <div {...animationProps} />
++     <span {...animationProps} />
+    </button>
+  )}
+```
+
+İkonlar artık `aria-label` geçmediğiniz sürece ekran okuyuculardan gizlenir (`aria-hidden`); tek başına anlam taşıyan ikonlara bir etiket ekleyin.
+
+### 6. Etkileşimi değişen ikonları kontrol edin {#6-check-the-icons-whose-interaction-changed}
+
+Etkileşimler artık useanimations.com ile aynı. Bir ikonun v2’deki gibi davranmasını istiyorsanız eski etkileşimini geçin:
+
+| İkonlar                                                                                            | v2               | v3             |
+| -------------------------------------------------------------------------------------------------- | ---------------- | -------------- |
+| `arrowDownCircle`, `arrowLeftCircle`, `arrowRightCircle`, `arrowUpCircle`                          | `click-toggle`   | `click-replay` |
+| `calendar`, `folder`, `home`, `instagram`, `userMinus`, `userPlus`, `userX`, `youtube`, `youtube2` | `hover-replay`\* | `hover`        |
+| `behance`, `codepen`, `facebook`, `github`, `linkedin`, `pocket`, `twitter`                        | `hover-replay`\* | `hover-loop`   |
+| `copy`, `edit`, `mail`                                                                             | `click-replay`   | `hover`        |
+| `dribbble`                                                                                         | `hover`          | `hover-loop`   |
+| `zoomIn`, `zoomOut`                                                                                | `loop`           | `hover`        |
+
+\* v2 bu ikonları imleç gelince bir kez oynatıyor, imleç ayrılınca başa atlatıyordu; en yakın karşılık `hover-replay`.
+
+```jsx
+<UseAnimations animation={zoomIn} interaction="loop" />
+```
+
+### 7. Import’ları güncelleyin {#7-update-imports}
+
+İkonları yalnızca `react-useanimations/lib/<name>` olarak ya da `react-useanimations/icons` üzerinden import edin. v2’nin `react-useanimations/lib/github/index` ya da `react-useanimations/lib/github/github.json` gibi dahili dosya yolları artık çözümlenmez; Lottie JSON, ikonun `animationData` alanıdır:
+
+```diff
+- import githubJson from 'react-useanimations/lib/github/github.json';
++ import github from 'react-useanimations/lib/github';
++ const githubJson = github.animationData;
+```
+
+`react-useanimations/utils` yolları kaldırıldı. Tipleri paketin kendisinden import edin:
+
+```diff
+- import type { Animation, AnimationKey } from 'react-useanimations/utils';
++ import type { Animation, AnimationKey, Interaction, UseAnimationsProps } from 'react-useanimations';
+```
+
+`Animation` artık `{ animationData, interaction }` şeklindedir; v2’deki `animationKey` alanı kaldırıldı, bu yüzden kendi oluşturduğunuz nesnelerde bunun yerine `interaction` kullanın.
+
+### Başka neler yeni {#what-else-is-new}
+
+221 yeni ikon (toplam 300), `react-useanimations/icons` üzerinden birden fazla ikonu tek seferde import etme, azaltılmış hareket desteği, klavye odağında hover, dokunmatik ekranlarda takılı kalmayan hover animasyonları, geçici çözüm gerektirmeyen sunucu tarafı render ve bir [shadcn registry](#shadcnui).
+
+## Lisans {#license}
+
+İkonlar ve kod [MIT lisansı](https://opensource.org/license/mit/) ile yayımlanır: kişisel ve ticari işlerde kullanabilir, değiştirebilir ve yeniden dağıtabilirsiniz. Atıf zorunlu değildir ama memnuniyetle karşılanır:
+
+```html
+Animated icons by <a href="https://useanimations.com">useAnimations</a>
+```
+
+Tüm koşullar: [Lisans ve koşullar](/licencing-and-terms).
+
+## Sık sorulan sorular {#faq}
+
+<details><summary>useAnimations ticari projelerde ücretsiz mi?</summary>
+
+Evet. İkonlar ve paket MIT lisanslıdır; atıf gerekmez.
+
+</details>
+
+<details><summary>Bir ikonun rengini nasıl değiştiririm?</summary>
+
+İkonlar metin rengini izler. Rengi `strokeColor` ve `fillColor` ile, CSS `color` ile ya da path’lere stil vererek değiştirebilirsiniz. Bkz. [Boyut ve renk](#size--color).
+
+</details>
+
+<details><summary>React olmadan da çalışır mı?</summary>
+
+Paket React içindir. Ancak her ikon aynı zamanda lottie-web, lottie-ios, lottie-android, Flutter ve React Native’in oynatabildiği bir Lottie JSON dosyası ve statik bir SVG’dir. Bkz. [React olmadan kullanım](#use-without-react) ve [Lottie ikonları](/lottie-icons).
+
+</details>
+
+<details><summary>Yapay zekâ kodlama ajanları useAnimations’ı kullanabilir mi?</summary>
+
+Evet. Onları [icons.json](/icons.json) ve [/documentation.md](/documentation.md) adreslerine yönlendirin; paketin kendisi de `catalog.json` dosyasını ve her ikon için belgelenmiş tipleri içerir.
+
+</details>
diff --git a/website/src/content/documentation.vi.md b/website/src/content/documentation.vi.md
new file mode 100644
index 0000000..a94ad92
--- /dev/null
+++ b/website/src/content/documentation.vi.md
@@ -0,0 +1,454 @@
+# Tài liệu {#documentation}
+
+useAnimations là thư viện miễn phí gồm 300 icon động cho React, phát hành theo giấy phép MIT. Mỗi icon có sẵn một tương tác: lặp liên tục, phát khi click hoặc phát khi hover. Bạn có thể dùng chúng qua package `react-useanimations` hoặc thêm vào dự án bằng shadcn CLI.
+
+<div id="quick-start-react"></div>
+
+## Bắt đầu nhanh {#quick-start}
+
+```bash
+npm install react-useanimations
+```
+
+```jsx
+import UseAnimations from 'react-useanimations';
+import github from 'react-useanimations/lib/github';
+
+export default function Header() {
+  return <UseAnimations animation={github} size={32} />;
+}
+```
+
+Icon tự lấy theo màu chữ và chạy tương tác riêng của nó: `github` lặp liên tục khi bạn hover. Package không có dependency nào; một player tích hợp sẵn (8 kB sau khi gzip) vẽ icon dưới dạng SVG, và mỗi icon là một module riêng, nên bundle của bạn chỉ chứa những icon bạn import.
+
+## Tương tác {#interactions}
+
+Mỗi icon đi kèm tương tác mà nó được thiết kế cho. Bạn có thể ghi đè bằng prop `interaction`.
+
+| Tương tác      | Hoạt động                                                         | Icon ví dụ                           |
+| -------------- | ----------------------------------------------------------------- | ------------------------------------ |
+| `loop`         | Phát liên tục.                                                    | `loading`, `activity`, `alertCircle` |
+| `click-toggle` | Chuyển giữa hai trạng thái khi click (phát xuôi, rồi phát ngược). | `menu`, `checkBox`, `playPause`      |
+| `click-replay` | Phát lại từ đầu sau mỗi lần click.                                | `download`, `refresh`, `send`        |
+| `hover`        | Phát xuôi khi chuột đi vào và phát ngược khi chuột rời đi.        | `archive`, `settings`, `trash`       |
+| `hover-loop`   | Lặp khi đang hover và chạy nốt chu kỳ hiện tại khi chuột rời đi.  | `github`, `twitter`, `dribbble`      |
+| `hover-replay` | Phát một lần từ đầu khi chuột đi vào.                             | `arrowRight`, `bluetooth`, `zap`     |
+
+Khi người dùng bật giảm chuyển động (reduced motion), icon sẽ đứng yên: icon lặp hiển thị khung hình đầu tiên, hiệu ứng hover và phát lại không chạy, còn icon bật/tắt chuyển ngay sang trạng thái mới.
+
+<div id="react"></div>
+
+## Prop {#props}
+
+```jsx
+<UseAnimations animation={github} size={56} strokeColor="#4b5cff" style={{ padding: 8 }} />
+```
+
+| Prop          | Mặc định         | Mô tả                                                                                                                       |
+| ------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `animation`   | —                | Icon import từ `react-useanimations/lib/<name>`, hoặc `{ animationData, interaction }` cho animation của riêng bạn.         |
+| `size`        | `24`             | Chiều rộng và chiều cao; số được tính bằng pixel, chuỗi là bất kỳ độ dài CSS nào, ví dụ `'1.5em'`.                          |
+| `strokeColor` | `'currentColor'` | Màu nét vẽ. Mặc định icon lấy theo màu chữ.                                                                                 |
+| `fillColor`   | `strokeColor`    | Màu của các phần được tô, ví dụ trái tim khi đã thích.                                                                      |
+| `interaction` | tùy icon         | `'loop'`, `'click-toggle'`, `'click-replay'`, `'hover'`, `'hover-loop'` hoặc `'hover-replay'`.                              |
+| `active`      | —                | Cho icon `click-toggle`: `true` hiển thị trạng thái cuối. Có kiểm soát: đặt giá trị trong `onClick`, click không tự đổi nó. |
+| `autoplay`    | tùy icon         | `true` với icon `loop`, trừ khi người dùng bật giảm chuyển động.                                                            |
+| `loop`        | tùy icon         | `true` với icon `loop` và `hover-loop`.                                                                                     |
+| `speed`       | `1`              | Tốc độ phát.                                                                                                                |
+| `render`      | —                | Render prop cho phần tử bọc tùy chỉnh, xem [Bọc icon trong một button thật](#wrap-the-icon-in-a-real-button).               |
+
+Mọi prop khác (`className`, `aria-label`, `onClick`, …) được truyền xuống thẻ `<span>` bọc ngoài. Event handler của bạn chạy trước handler của animation; gọi `event.preventDefault()` để bỏ qua hiệu ứng.
+
+## Import icon {#importing-icons}
+
+Import từng icon từ `react-useanimations/lib/<name>`, hoặc nhiều icon cùng lúc từ `react-useanimations/icons`:
+
+```jsx
+import { github, heart, menu } from 'react-useanimations/icons';
+```
+
+Dù dùng cách nào, bản build production cũng chỉ chứa những icon bạn dùng. Dev server và test runner không tree-shake, nên ở đó `react-useanimations/icons` sẽ tải toàn bộ icon; nếu điều này quan trọng, hãy ưu tiên `lib/<name>`. `delete` và `package` là từ khóa dành riêng: import chúng dưới tên `deleteIcon` và `packageIcon`.
+
+## Toggle có kiểm soát {#controlled-toggle}
+
+```jsx
+import { useState } from 'react';
+import UseAnimations from 'react-useanimations';
+import menu from 'react-useanimations/lib/menu';
+
+export function MenuButton() {
+  const [open, setOpen] = useState(false);
+  return (
+    <UseAnimations
+      animation={menu}
+      size={40}
+      active={open} // cũng chuyển động khi `open` thay đổi ở nơi khác
+      onClick={() => setOpen(!open)}
+    />
+  );
+}
+```
+
+## Bọc icon trong một button thật {#wrap-the-icon-in-a-real-button}
+
+Với icon có thể click, hãy đặt một phần tử nhận được focus bao quanh icon bằng prop `render`: `eventProps` gắn vào phần tử của bạn, còn `animationProps` gắn vào một thẻ `<span>` bên trong. Khi đó hiệu ứng hover cũng phát khi button nhận focus bằng bàn phím.
+
+```jsx
+import heart from 'react-useanimations/lib/heart';
+
+<UseAnimations
+  animation={heart}
+  size={32}
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Add to favorites" {...eventProps}>
+      <span {...animationProps} />
+    </button>
+  )}
+/>;
+```
+
+<div id="customize"></div>
+
+## Kích thước & màu sắc {#size--color}
+
+Icon là dạng line icon vẽ trên artboard 24 hoặc 32 px và luôn sắc nét ở mọi kích thước: đặt `size` bằng một số pixel hoặc bất kỳ độ dài CSS nào.
+
+Nét vẽ dùng `currentColor`, nên icon tự lấy màu chữ, trạng thái hover và dark mode mà không cần cấu hình. Bạn có thể đổi màu bằng `strokeColor` và `fillColor`, bằng thuộc tính CSS `color`, hoặc style trực tiếp các path: rule tích hợp sẵn có specificity bằng 0, nên CSS của bạn luôn thắng.
+
+Một số icon có phần khoét rỗng (đường gạch chéo trong `visibility`, `microphone`, `video`, `volume` và `notification`, dấu tích trong `download`, vòng quanh badge của `notification3`). Phần khoét này lấy màu nền trang: trắng trên trang sáng và tối trên trang có `color-scheme: dark`. Trên các nền khác, hãy đặt màu bằng biến CSS `--ua-knockout`, ví dụ `body { --ua-knockout: #0f172a; }`.
+
+```jsx
+// Tailwind: màu và độ dày nét
+<UseAnimations animation={github} className="text-indigo-500 [&_path]:stroke-[3]" />
+```
+
+## Next.js và server rendering {#nextjs-and-server-rendering}
+
+Component được đánh dấu `'use client'` và chỉ vẽ animation trên trình duyệt, nên bạn có thể render nó từ server component và các framework SSR (Next.js, Remix, Astro) mà không cần `dynamic(…, { ssr: false })`. Module icon là dữ liệu thuần, nên server component có thể import và truyền chúng xuống dưới dạng prop.
+
+<div id="shadcn"></div>
+
+## shadcn/ui {#shadcnui}
+
+Mọi icon cũng có trong một [shadcn registry](https://ui.shadcn.com/docs/registry). CLI sẽ thêm sẵn một component và cài `react-useanimations`:
+
+```bash
+npx shadcn@latest add https://useanimations.com/r/checkmark.json
+```
+
+```tsx
+import { AnimatedCheckmark } from '@/components/animations/checkmark';
+
+<AnimatedCheckmark size={24} />;
+```
+
+Component được đặt tên theo dạng `Animated` + id của icon ở dạng PascalCase (`check-box` → `AnimatedCheckBox`), nằm trong `components/animations/<id>.tsx` và nhận đúng các prop như `UseAnimations`. Chỉ mục registry là [/r/registry.json](/r/registry.json). Để dùng dạng rút gọn `npx shadcn@latest add @useanimations/checkmark`, hãy thêm registry vào `components.json`:
+
+```json
+{
+  "registries": {
+    "@useanimations": "https://useanimations.com/r/{name}.json"
+  }
+}
+```
+
+## Animation của riêng bạn {#your-own-animation}
+
+```jsx
+import animationData from './my-animation.json';
+
+<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
+```
+
+Animation của bạn phải là tệp Lottie JSON, cùng định dạng với các icon. Player hỗ trợ những gì icon cần: shape layer, precomposition, null layer và parenting, path, hình chữ nhật, hình elip, stroke, fill, trim path, mask, keyframe có easing, hold và motion path, cùng các expression `loopOut()` và `wiggle()`. Những thứ khác, như gradient, text layer hoặc image layer, effect và matte, sẽ không được vẽ; console sẽ cảnh báo về các layer, shape và expression không được hỗ trợ.
+
+<div id="direct-urls"></div><div id="download"></div>
+
+## Tệp & icons.json {#files--iconsjson}
+
+Mọi icon đều tải về được, từ trang của icon hoặc từ các URL cố định có bật CORS:
+
+| Tệp                          | URL                                                |
+| ---------------------------- | -------------------------------------------------- |
+| Animation (Lottie JSON)      | `https://useanimations.com/icons/<id>.json`        |
+| SVG tĩnh của từng trạng thái | `https://useanimations.com/icons/<id>/<state>.svg` |
+| ZIP gồm JSON và các SVG      | `https://useanimations.com/icons/<id>.zip`         |
+| Trang icon                   | `https://useanimations.com/icons/<id>`             |
+| Catalog của mọi icon         | `https://useanimations.com/icons.json`             |
+
+[icons.json](/icons.json) liệt kê mọi icon kèm id, tiêu đề, danh mục, từ khóa tìm kiếm, tương tác, URL tệp, kích thước và thời lượng, dòng import `react-useanimations` và lệnh shadcn. Package npm cũng có cùng dữ liệu này: `react-useanimations/catalog.json` (metadata), `react-useanimations/icons` (các animation) và `react-useanimations/svg.json` (các SVG tĩnh).
+
+<div id="without-react"></div>
+
+## Dùng không cần React {#use-without-react}
+
+Các icon là Lottie JSON chuẩn, nên mọi Lottie player đều phát được chúng từ `https://useanimations.com/icons/<id>.json` hoặc từ một bản sao trong dự án của bạn. Ngoài React, bạn phải tự viết phần tương tác. Trang [Icon Lottie](/lottie-icons) có thêm player và ví dụ.
+
+Một số icon dùng expression của After Effects (`loopOut()`, `wiggle()`); `requiresFullPlayer` trong [icons.json](/icons.json) đánh dấu những icon này. Trên web, chúng cần bản đầy đủ của lottie-web chứ không phải `lottie_light`, và các player native không xử lý expression.
+
+<div id="html"></div><div id="interactions-web"></div>
+
+### HTML và JavaScript {#html-and-javascript}
+
+```html
+<div id="icon" style="width: 48px; height: 48px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
+<script>
+  const el = document.getElementById('icon');
+  const animation = lottie.loadAnimation({
+    container: el,
+    renderer: 'svg',
+    loop: false,
+    autoplay: false,
+    path: 'https://useanimations.com/icons/archive.json',
+  });
+  // hover: phát xuôi khi chuột vào, phát ngược khi chuột rời đi
+  el.addEventListener('mouseenter', () => {
+    animation.setDirection(1);
+    animation.play();
+  });
+  el.addEventListener('mouseleave', () => {
+    animation.setDirection(-1);
+    animation.play();
+  });
+</script>
+```
+
+Với renderer SVG, icon có thể theo màu chữ giống như React component:
+
+```css
+#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) {
+  stroke: currentColor;
+}
+#icon path[fill='rgb(0,0,0)'] {
+  fill: currentColor;
+}
+```
+
+<div id="vue"></div>
+
+### Vue {#vue}
+
+```vue
+<script setup>
+import lottie from 'lottie-web';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+const el = ref(null);
+let animation;
+onMounted(() => {
+  animation = lottie.loadAnimation({
+    container: el.value,
+    renderer: 'svg',
+    loop: true,
+    autoplay: true,
+    path: 'https://useanimations.com/icons/loading.json',
+  });
+});
+onBeforeUnmount(() => animation?.destroy());
+</script>
+
+<template>
+  <div ref="el" style="width: 48px; height: 48px" />
+</template>
+```
+
+### React Native {#react-native}
+
+```jsx
+import LottieView from 'lottie-react-native';
+
+<LottieView source={require('./loading.json')} autoPlay loop style={{ width: 48, height: 48 }} />;
+```
+
+<div id="ios"></div>
+
+### iOS {#ios}
+
+Dùng [lottie-ios](https://github.com/airbnb/lottie-ios), với tệp JSON nằm trong app bundle:
+
+```swift
+import Lottie
+import SwiftUI
+
+LottieView(animation: .named("loading"))
+  .looping()
+  .frame(width: 48, height: 48)
+```
+
+<div id="android"></div>
+
+### Android {#android}
+
+Dùng [lottie-android](https://github.com/airbnb/lottie-android) trong Jetpack Compose, với tệp JSON nằm trong `res/raw`:
+
+```kotlin
+val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
+LottieAnimation(composition, iterations = LottieConstants.IterateForever, modifier = Modifier.size(48.dp))
+```
+
+### Flutter {#flutter}
+
+Dùng package [lottie](https://pub.dev/packages/lottie):
+
+```dart
+Lottie.asset('assets/loading.json', width: 48, height: 48)
+```
+
+<div id="performance"></div><div id="accessibility"></div>
+
+## Hiệu năng & khả năng truy cập {#performance--accessibility}
+
+- **Nhỏ gọn:** player chỉ 8 kB sau khi gzip, không có dependency, và mỗi icon nặng từ 1 đến 15 kB (trung vị 2 kB).
+- **Tải lười:** animation chỉ được vẽ trên trình duyệt, sau khi trang đã render; các icon lặp tự phát sẽ tạm dừng khi bị cuộn ra khỏi màn hình, và mọi thứ được dọn dẹp khi unmount.
+- **Mặc định chỉ để trang trí:** icon bị ẩn khỏi trình đọc màn hình (`aria-hidden`) trừ khi bạn truyền `aria-label`, khi đó icon được đọc như một hình ảnh. Với các nút chỉ có icon, hãy dùng một `<button>` thật kèm `aria-label` (xem [phần trên](#wrap-the-icon-in-a-real-button)) và thể hiện trạng thái bật/tắt bằng `aria-pressed` hoặc `aria-expanded`.
+- **Giảm chuyển động và màn hình cảm ứng:** icon tôn trọng `prefers-reduced-motion`, và chạm trên màn hình cảm ứng không kích hoạt hiệu ứng hover.
+
+<div id="agents"></div>
+
+## AI coding agent {#ai-coding-agents}
+
+Agent có thể chọn icon theo từ khóa hoặc tương tác từ [icons.json](/icons.json), hoặc từ `react-useanimations/catalog.json` trong package, rồi dùng dòng import hoặc lệnh shadcn được liệt kê ở đó. Định nghĩa kiểu của mỗi import icon cũng chứa tiêu đề, từ khóa, tương tác và bản xem trước của icon. Tài liệu này có bản Markdown tại [/documentation.md](/documentation.md), và [/llms.txt](/llms.txt) là chỉ mục của toàn bộ trang web.
+
+## Nâng cấp từ v2 {#upgrading-from-v2}
+
+Với phần lớn ứng dụng, nâng cấp chỉ đơn giản là cài v3: component, các import `react-useanimations/lib/<name>` và toàn bộ 79 icon của v2 vẫn giữ nguyên. Hãy làm theo những bước dưới đây áp dụng cho code của bạn.
+
+### 1. Cài v3 {#1-install-v3}
+
+v3 cần React 18 trở lên và không có dependency. Hãy gỡ cả lottie-web, trừ khi ứng dụng của bạn còn dùng nó ở chỗ khác.
+
+```bash
+npm install react-useanimations@3
+npm uninstall lottie-web
+```
+
+### 2. Thay `reverse` bằng `active` {#2-replace-reverse-with-active}
+
+`active` là hoàn toàn có kiểm soát (controlled): icon chuyển động khi `active` thay đổi, còn chỉ click thôi thì không làm icon đổi trạng thái, vì vậy hãy cập nhật nó trong `onClick`. `reverse` vẫn hoạt động như ở v2 (đặt trạng thái ban đầu và click sẽ bật/tắt icon) nhưng đã bị deprecated. Cả hai chỉ áp dụng cho icon `click-toggle`: bốn icon mũi tên trong vòng tròn giờ phát lại khi click (xem [bước 6](#6-check-the-icons-whose-interaction-changed)).
+
+```diff
+- <UseAnimations animation={checkBox} reverse={checked} onClick={toggle} />
++ <UseAnimations animation={checkBox} active={checked} onClick={toggle} />
+```
+
+### 3. Kiểm tra màu sắc {#3-check-the-colors}
+
+Icon v2 có màu đen trừ khi bạn đặt `strokeColor`. Icon v3 lấy theo màu chữ (`currentColor`), và `fillColor` mặc định bằng `strokeColor`. Icon nằm trong chữ hoặc liên kết có màu sẽ đổi màu theo; để giữ màu đen, hãy tự đặt màu:
+
+```jsx
+<UseAnimations animation={github} strokeColor="#000" />
+```
+
+### 4. Thay thế `wrapperStyle`, `pathCss` và `options` {#4-move-wrapperstyle-pathcss-and-options}
+
+- **`wrapperStyle`** đã bị deprecated: hãy dùng `style`.
+- **`pathCss`** đã bị gỡ bỏ: hãy style các path bằng một class.
+- **`options`** (thiết lập của lottie-web) đã bị gỡ bỏ cùng với lottie-web. Hãy dùng các prop `loop`, `autoplay` và `speed`; các tùy chọn khác của lottie-web không có phương án thay thế.
+
+Nếu vẫn truyền `pathCss` hoặc `options`, một cảnh báo sẽ được ghi ra một lần; chúng đều bị bỏ qua.
+
+```diff
+- <UseAnimations animation={github} wrapperStyle={{ margin: 8 }} pathCss="stroke-width: 3px;" options={{ loop: true }} />
++ <UseAnimations animation={github} style={{ margin: 8 }} className="thick" loop />
+```
+
+```css
+.thick path {
+  stroke-width: 3px;
+}
+```
+
+### 5. Kiểm tra phần tử bọc ngoài {#5-check-the-wrapper-element}
+
+Phần tử bọc ngoài giờ là một `<span>` inline-block thay vì `<div>`, nên hợp lệ khi nằm trong button và link, và nằm cùng dòng với chữ. Hãy cập nhật CSS đang nhắm tới phần tử bọc như một `div`, và trong prop `render`, hãy spread `animationProps` lên một `<span>`:
+
+```diff
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Like" {...eventProps}>
+-     <div {...animationProps} />
++     <span {...animationProps} />
+    </button>
+  )}
+```
+
+Icon giờ bị ẩn khỏi trình đọc màn hình (`aria-hidden`) trừ khi bạn truyền `aria-label`; hãy thêm nhãn cho những icon tự mang ý nghĩa.
+
+### 6. Kiểm tra các icon đã đổi tương tác {#6-check-the-icons-whose-interaction-changed}
+
+Tương tác giờ khớp với useanimations.com. Nếu muốn một icon hoạt động như ở v2, hãy truyền tương tác cũ của nó:
+
+| Icon                                                                                               | v2               | v3             |
+| -------------------------------------------------------------------------------------------------- | ---------------- | -------------- |
+| `arrowDownCircle`, `arrowLeftCircle`, `arrowRightCircle`, `arrowUpCircle`                          | `click-toggle`   | `click-replay` |
+| `calendar`, `folder`, `home`, `instagram`, `userMinus`, `userPlus`, `userX`, `youtube`, `youtube2` | `hover-replay`\* | `hover`        |
+| `behance`, `codepen`, `facebook`, `github`, `linkedin`, `pocket`, `twitter`                        | `hover-replay`\* | `hover-loop`   |
+| `copy`, `edit`, `mail`                                                                             | `click-replay`   | `hover`        |
+| `dribbble`                                                                                         | `hover`          | `hover-loop`   |
+| `zoomIn`, `zoomOut`                                                                                | `loop`           | `hover`        |
+
+\* Ở v2, các icon này phát một lần khi chuột đi vào và nhảy về khung hình đầu khi chuột rời đi; `hover-replay` là tương tác gần nhất.
+
+```jsx
+<UseAnimations animation={zoomIn} interaction="loop" />
+```
+
+### 7. Cập nhật import {#7-update-imports}
+
+Chỉ import icon theo dạng `react-useanimations/lib/<name>` hoặc từ `react-useanimations/icons`. Các đường dẫn tệp nội bộ của v2 như `react-useanimations/lib/github/index` hay `react-useanimations/lib/github/github.json` không còn resolve được nữa; Lottie JSON giờ là `animationData` của icon:
+
+```diff
+- import githubJson from 'react-useanimations/lib/github/github.json';
++ import github from 'react-useanimations/lib/github';
++ const githubJson = github.animationData;
+```
+
+Các đường dẫn `react-useanimations/utils` đã bị gỡ bỏ. Hãy import các kiểu từ chính package:
+
+```diff
+- import type { Animation, AnimationKey } from 'react-useanimations/utils';
++ import type { Animation, AnimationKey, Interaction, UseAnimationsProps } from 'react-useanimations';
+```
+
+`Animation` giờ có dạng `{ animationData, interaction }`; trường `animationKey` của v2 không còn nữa, nên các object bạn tự tạo cần dùng `interaction` thay thế.
+
+### Có gì mới nữa {#what-else-is-new}
+
+Thêm 221 icon (tổng cộng 300), import nhiều icon cùng lúc từ `react-useanimations/icons`, hỗ trợ giảm chuyển động, hover khi focus bằng bàn phím, không còn hiệu ứng hover bị kẹt trên màn hình cảm ứng, server rendering không cần mẹo xử lý, và một [shadcn registry](#shadcnui).
+
+## Giấy phép {#license}
+
+Bộ icon và mã nguồn được phát hành theo [giấy phép MIT](https://opensource.org/license/mit/): bạn được dùng, chỉnh sửa và phân phối lại trong dự án cá nhân lẫn thương mại. Không bắt buộc ghi nguồn, nhưng chúng tôi rất trân trọng nếu bạn làm vậy:
+
+```html
+Animated icons by <a href="https://useanimations.com">useAnimations</a>
+```
+
+Điều khoản đầy đủ: [Giấy phép & Điều khoản](/licencing-and-terms).
+
+## Câu hỏi thường gặp {#faq}
+
+<details><summary>useAnimations có miễn phí cho dự án thương mại không?</summary>
+
+Có. Bộ icon và package đều dùng giấy phép MIT, không bắt buộc ghi nguồn.
+
+</details>
+
+<details><summary>Đổi màu icon bằng cách nào?</summary>
+
+Icon tự lấy theo màu chữ. Bạn có thể đổi màu bằng `strokeColor` và `fillColor`, bằng CSS `color`, hoặc style trực tiếp các path. Xem [Kích thước & màu sắc](#size--color).
+
+</details>
+
+<details><summary>Có dùng được khi không có React không?</summary>
+
+Package này dành cho React. Tuy vậy, mỗi icon còn là một tệp Lottie JSON mà lottie-web, lottie-ios, lottie-android, Flutter và React Native đều phát được, kèm một SVG tĩnh. Xem [Dùng không cần React](#use-without-react) và [Icon Lottie](/lottie-icons).
+
+</details>
+
+<details><summary>AI coding agent có dùng được useAnimations không?</summary>
+
+Được. Hãy trỏ agent tới [icons.json](/icons.json) và [/documentation.md](/documentation.md); bản thân package cũng có sẵn `catalog.json` và kiểu dữ liệu có tài liệu cho mọi icon.
+
+</details>
diff --git a/website/src/content/documentation.zh.md b/website/src/content/documentation.zh.md
new file mode 100644
index 0000000..2779836
--- /dev/null
+++ b/website/src/content/documentation.zh.md
@@ -0,0 +1,454 @@
+# 文档 {#documentation}
+
+useAnimations 是一个免费的动态图标库，采用 MIT 许可证，为 React 提供 300 个动态图标。每个图标都内置一种交互：循环播放、点击播放或悬停播放。您可以通过 `react-useanimations` 软件包使用它们，也可以用 shadcn CLI 添加到项目中。
+
+<div id="quick-start-react"></div>
+
+## 快速上手 {#quick-start}
+
+```bash
+npm install react-useanimations
+```
+
+```jsx
+import UseAnimations from 'react-useanimations';
+import github from 'react-useanimations/lib/github';
+
+export default function Header() {
+  return <UseAnimations animation={github} size={32} />;
+}
+```
+
+图标会跟随文字颜色，并播放自己的交互：`github` 在悬停期间循环播放。这个软件包没有任何依赖，由内置播放器（gzip 压缩后 8 kB）把图标绘制成 SVG；每个图标都是独立模块，因此打包结果只包含您导入的图标。
+
+## 交互方式 {#interactions}
+
+每个图标都自带为它设计的交互，可以用 `interaction` 属性覆盖。
+
+| 交互方式       | 效果                                         | 示例图标                             |
+| -------------- | -------------------------------------------- | ------------------------------------ |
+| `loop`         | 持续播放。                                   | `loading`, `activity`, `alertCircle` |
+| `click-toggle` | 点击时在两种状态之间切换（先正向，再反向）。 | `menu`, `checkBox`, `playPause`      |
+| `click-replay` | 每次点击都从头播放。                         | `download`, `refresh`, `send`        |
+| `hover`        | 指针移入时正向播放，移出时反向播放。         | `archive`, `settings`, `trash`       |
+| `hover-loop`   | 悬停期间循环播放，移出后播完当前一轮。       | `github`, `twitter`, `dribbble`      |
+| `hover-replay` | 指针移入时从头播放一次。                     | `arrowRight`, `bluetooth`, `zap`     |
+
+当用户偏好减少动态效果时，图标会保持静止：循环图标显示第一帧，悬停和重播动画不会播放，切换类图标会直接切换到新状态。
+
+<div id="react"></div>
+
+## 属性 {#props}
+
+```jsx
+<UseAnimations animation={github} size={56} strokeColor="#4b5cff" style={{ padding: 8 }} />
+```
+
+| 属性          | 默认值           | 说明                                                                                                    |
+| ------------- | ---------------- | ------------------------------------------------------------------------------------------------------- |
+| `animation`   | —                | 从 `react-useanimations/lib/<name>` 导入的图标；使用自己的动画时传入 `{ animationData, interaction }`。 |
+| `size`        | `24`             | 宽度和高度；数字表示像素，字符串可以是任意 CSS 长度，例如 `'1.5em'`。                                   |
+| `strokeColor` | `'currentColor'` | 线条颜色。默认跟随文字颜色。                                                                            |
+| `fillColor`   | `strokeColor`    | 填充部分的颜色，例如点赞后的爱心。                                                                      |
+| `interaction` | 因图标而异       | `'loop'`、`'click-toggle'`、`'click-replay'`、`'hover'`、`'hover-loop'` 或 `'hover-replay'`。           |
+| `active`      | —                | 用于 `click-toggle` 图标：`true` 显示结束状态。受控模式：在 `onClick` 中设置它，点击本身不会切换图标。  |
+| `autoplay`    | 因图标而异       | `loop` 图标默认为 `true`，除非用户偏好减少动态效果。                                                    |
+| `loop`        | 因图标而异       | `loop` 和 `hover-loop` 图标默认为 `true`。                                                              |
+| `speed`       | `1`              | 播放速度。                                                                                              |
+| `render`      | —                | 用于自定义外层元素的 render 属性，参见[把图标放进真正的按钮](#wrap-the-icon-in-a-real-button)。         |
+
+其他属性（`className`、`aria-label`、`onClick` 等）都会传给外层的 `<span>`。您的事件处理函数会先于动画执行；调用 `event.preventDefault()` 即可跳过动画。
+
+## 导入图标 {#importing-icons}
+
+可以从 `react-useanimations/lib/<name>` 逐个导入图标，也可以从 `react-useanimations/icons` 一次导入多个：
+
+```jsx
+import { github, heart, menu } from 'react-useanimations/icons';
+```
+
+无论哪种方式，生产构建都只包含您用到的图标。开发服务器和测试运行器不做 tree-shaking，所以在这些环境中 `react-useanimations/icons` 会加载全部图标；如果这一点对您很重要，请优先使用 `lib/<name>`。`delete` 和 `package` 是保留字，请分别以 `deleteIcon` 和 `packageIcon` 导入。
+
+## 受控切换 {#controlled-toggle}
+
+```jsx
+import { useState } from 'react';
+import UseAnimations from 'react-useanimations';
+import menu from 'react-useanimations/lib/menu';
+
+export function MenuButton() {
+  const [open, setOpen] = useState(false);
+  return (
+    <UseAnimations
+      animation={menu}
+      size={40}
+      active={open} // `open` 在别处改变时同样会播放动画
+      onClick={() => setOpen(!open)}
+    />
+  );
+}
+```
+
+## 把图标放进真正的按钮 {#wrap-the-icon-in-a-real-button}
+
+对于可点击的图标，请用 `render` 属性在图标外面包一层可聚焦的元素：`eventProps` 放在您的元素上，`animationProps` 放在其内部的 `<span>` 上。这样按钮获得键盘焦点时，悬停动画也会播放。
+
+```jsx
+import heart from 'react-useanimations/lib/heart';
+
+<UseAnimations
+  animation={heart}
+  size={32}
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Add to favorites" {...eventProps}>
+      <span {...animationProps} />
+    </button>
+  )}
+/>;
+```
+
+<div id="customize"></div>
+
+## 尺寸与颜色 {#size--color}
+
+这些图标都是线性图标，绘制在 24 或 32 px 的画板上，任何尺寸下都保持清晰：把 `size` 设为像素数或任意 CSS 长度即可。
+
+线条使用 `currentColor`，因此图标会自动继承文字颜色、悬停状态和深色模式。可以通过 `strokeColor` 和 `fillColor`、CSS `color` 修改颜色，也可以直接给路径设置样式：内置规则的优先级（specificity）为零，所以您的 CSS 总能生效。
+
+有些图标在自身上留出了镂空（`visibility`、`microphone`、`video`、`volume` 和 `notification` 中的斜线，`download` 中的对勾，`notification3` 徽标周围的圆环）。镂空部分取页面背景色：浅色页面上为白色，设置了 `color-scheme: dark` 的页面上为深色。在其他背景上，请用 CSS 变量 `--ua-knockout` 指定，例如 `body { --ua-knockout: #0f172a; }`。
+
+```jsx
+// Tailwind：颜色和线条粗细
+<UseAnimations animation={github} className="text-indigo-500 [&_path]:stroke-[3]" />
+```
+
+## Next.js 与服务端渲染 {#nextjs-and-server-rendering}
+
+组件标记为 `'use client'`，只在浏览器中绘制动画，因此可以在服务端组件和 SSR 框架（Next.js、Remix、Astro）中直接渲染，无需 `dynamic(…, { ssr: false })`。图标模块是普通数据，服务端组件可以直接导入并作为属性传递。
+
+<div id="shadcn"></div>
+
+## shadcn/ui {#shadcnui}
+
+每个图标也都收录在 [shadcn 注册表](https://ui.shadcn.com/docs/registry)中。CLI 会添加一个现成的组件，并安装 `react-useanimations`：
+
+```bash
+npx shadcn@latest add https://useanimations.com/r/checkmark.json
+```
+
+```tsx
+import { AnimatedCheckmark } from '@/components/animations/checkmark';
+
+<AnimatedCheckmark size={24} />;
+```
+
+组件名为 `Animated` 加上 PascalCase 形式的图标 id（`check-box` → `AnimatedCheckBox`），文件位于 `components/animations/<id>.tsx`，接受与 `UseAnimations` 相同的属性。注册表索引位于 [/r/registry.json](/r/registry.json)。如果想使用 `npx shadcn@latest add @useanimations/checkmark` 这种简短写法，请把注册表添加到 `components.json`：
+
+```json
+{
+  "registries": {
+    "@useanimations": "https://useanimations.com/r/{name}.json"
+  }
+}
+```
+
+## 使用自己的动画 {#your-own-animation}
+
+```jsx
+import animationData from './my-animation.json';
+
+<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
+```
+
+您的动画必须是 Lottie JSON 文件，也就是这些图标所用的格式。播放器支持图标所需的功能：形状图层、预合成、空对象图层与父子关系、路径、矩形、椭圆、描边、填充、修剪路径、蒙版、带缓动的关键帧、定格关键帧和运动路径，以及 `loopOut()` 和 `wiggle()` 表达式。其他内容（例如渐变、文本或图片图层、效果和遮罩）不会被绘制；对于不支持的图层、形状和表达式，控制台会给出警告。
+
+<div id="direct-urls"></div><div id="download"></div>
+
+## 文件与 icons.json {#files--iconsjson}
+
+每个图标都可以下载，既可以在图标页面下载，也可以通过固定且支持 CORS 的网址获取：
+
+| 文件                    | 网址                                               |
+| ----------------------- | -------------------------------------------------- |
+| 动画（Lottie JSON）     | `https://useanimations.com/icons/<id>.json`        |
+| 每个状态的静态 SVG      | `https://useanimations.com/icons/<id>/<state>.svg` |
+| 包含 JSON 和 SVG 的 ZIP | `https://useanimations.com/icons/<id>.zip`         |
+| 图标页面                | `https://useanimations.com/icons/<id>`             |
+| 全部图标的目录          | `https://useanimations.com/icons.json`             |
+
+[icons.json](/icons.json) 列出了每个图标的 id、标题、类别、搜索关键词、交互方式、文件网址、尺寸和时长，以及对应的 `react-useanimations` 导入语句和 shadcn 命令。npm 软件包中也附带相同的数据：`react-useanimations/catalog.json`（元数据）、`react-useanimations/icons`（动画）和 `react-useanimations/svg.json`（静态 SVG）。
+
+<div id="without-react"></div>
+
+## 不使用 React {#use-without-react}
+
+这些图标都是标准的 Lottie JSON，任何 Lottie 播放器都能从 `https://useanimations.com/icons/<id>.json` 或项目中的副本播放它们。在 React 之外，交互需要您自己实现。更多播放器和示例请参阅 [Lottie 图标](/lottie-icons)。
+
+有些图标用到了 After Effects 表达式（`loopOut()`、`wiggle()`），[icons.json](/icons.json) 中用 `requiresFullPlayer` 标出了它们。在网页上，它们需要 lottie-web 的完整版，而不是 `lottie_light`；原生播放器则不会执行表达式。
+
+<div id="html"></div><div id="interactions-web"></div>
+
+### HTML 与 JavaScript {#html-and-javascript}
+
+```html
+<div id="icon" style="width: 48px; height: 48px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
+<script>
+  const el = document.getElementById('icon');
+  const animation = lottie.loadAnimation({
+    container: el,
+    renderer: 'svg',
+    loop: false,
+    autoplay: false,
+    path: 'https://useanimations.com/icons/archive.json',
+  });
+  // hover：移入时正向播放，移出时反向播放
+  el.addEventListener('mouseenter', () => {
+    animation.setDirection(1);
+    animation.play();
+  });
+  el.addEventListener('mouseleave', () => {
+    animation.setDirection(-1);
+    animation.play();
+  });
+</script>
+```
+
+使用 SVG 渲染器时，图标也可以像 React 组件那样跟随文字颜色：
+
+```css
+#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) {
+  stroke: currentColor;
+}
+#icon path[fill='rgb(0,0,0)'] {
+  fill: currentColor;
+}
+```
+
+<div id="vue"></div>
+
+### Vue {#vue}
+
+```vue
+<script setup>
+import lottie from 'lottie-web';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+const el = ref(null);
+let animation;
+onMounted(() => {
+  animation = lottie.loadAnimation({
+    container: el.value,
+    renderer: 'svg',
+    loop: true,
+    autoplay: true,
+    path: 'https://useanimations.com/icons/loading.json',
+  });
+});
+onBeforeUnmount(() => animation?.destroy());
+</script>
+
+<template>
+  <div ref="el" style="width: 48px; height: 48px" />
+</template>
+```
+
+### React Native {#react-native}
+
+```jsx
+import LottieView from 'lottie-react-native';
+
+<LottieView source={require('./loading.json')} autoPlay loop style={{ width: 48, height: 48 }} />;
+```
+
+<div id="ios"></div>
+
+### iOS {#ios}
+
+使用 [lottie-ios](https://github.com/airbnb/lottie-ios)，并把 JSON 放进应用包：
+
+```swift
+import Lottie
+import SwiftUI
+
+LottieView(animation: .named("loading"))
+  .looping()
+  .frame(width: 48, height: 48)
+```
+
+<div id="android"></div>
+
+### Android {#android}
+
+在 Jetpack Compose 中使用 [lottie-android](https://github.com/airbnb/lottie-android)，并把 JSON 放在 `res/raw` 中：
+
+```kotlin
+val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
+LottieAnimation(composition, iterations = LottieConstants.IterateForever, modifier = Modifier.size(48.dp))
+```
+
+### Flutter {#flutter}
+
+使用 [lottie](https://pub.dev/packages/lottie) 包：
+
+```dart
+Lottie.asset('assets/loading.json', width: 48, height: 48)
+```
+
+<div id="performance"></div><div id="accessibility"></div>
+
+## 性能与无障碍 {#performance--accessibility}
+
+- **小巧**：播放器 gzip 压缩后为 8 kB，没有任何依赖；单个图标为 1 到 15 kB（中位数 2 kB）。
+- **延迟绘制**：动画只在浏览器中、页面渲染完成后才绘制；自动播放的循环动画在滚出视口时会暂停，组件卸载时会清理所有资源。
+- **默认仅作装饰**：图标对屏幕阅读器隐藏（`aria-hidden`），除非您传入 `aria-label`，此时它会被当作图片读出。对于只有图标的控件，请使用带 `aria-label` 的真正 `<button>`（见[上文](#wrap-the-icon-in-a-real-button)），并用 `aria-pressed` 或 `aria-expanded` 反映切换状态。
+- **减少动态效果与触屏**：图标遵循 `prefers-reduced-motion`，在触摸屏上轻触不会触发悬停动画。
+
+<div id="agents"></div>
+
+## AI 编程智能体 {#ai-coding-agents}
+
+智能体可以从 [icons.json](/icons.json) 或软件包内的 `react-useanimations/catalog.json` 中按关键词或交互方式挑选图标，并使用其中列出的导入语句或 shadcn 命令。每个图标导入的类型定义里也带有它的标题、关键词、交互方式和预览。本文档提供 Markdown 版本，位于 [/documentation.md](/documentation.md)；[/llms.txt](/llms.txt) 则是整个站点的索引。
+
+## 从 v2 升级 {#upgrading-from-v2}
+
+对大多数应用来说，升级就是安装 v3：组件本身、`react-useanimations/lib/<name>` 形式的导入以及 v2 的全部 79 个图标都保持不变。请按下面的步骤逐一检查适用于您代码的部分。
+
+### 1. 安装 v3 {#1-install-v3}
+
+v3 需要 React 18 或更高版本，并且没有任何依赖。如果应用中没有其他地方用到 lottie-web，也请一并移除。
+
+```bash
+npm install react-useanimations@3
+npm uninstall lottie-web
+```
+
+### 2. 用 `active` 替换 `reverse` {#2-replace-reverse-with-active}
+
+`active` 是完全受控的：`active` 变化时图标播放动画，单独点击不会切换图标，因此请在 `onClick` 中更新它。`reverse` 仍然和 v2 中一样可用（它设置初始状态，点击会切换图标），但已被弃用。两者都只对 `click-toggle` 图标生效：四个圆形箭头图标现在改为点击重播（见[第 6 步](#6-check-the-icons-whose-interaction-changed)）。
+
+```diff
+- <UseAnimations animation={checkBox} reverse={checked} onClick={toggle} />
++ <UseAnimations animation={checkBox} active={checked} onClick={toggle} />
+```
+
+### 3. 检查颜色 {#3-check-the-colors}
+
+在 v2 中，除非设置了 `strokeColor`，图标都是黑色的。v3 的图标跟随文字颜色（`currentColor`），并且 `fillColor` 默认等于 `strokeColor`。位于彩色文字或链接中的图标会随之变色；如果想保持黑色，请自己设置颜色：
+
+```jsx
+<UseAnimations animation={github} strokeColor="#000" />
+```
+
+### 4. 迁移 `wrapperStyle`、`pathCss` 和 `options` {#4-move-wrapperstyle-pathcss-and-options}
+
+- **`wrapperStyle`** 已弃用：请改用 `style`。
+- **`pathCss`** 已移除：请通过类名给路径设置样式。
+- **`options`**（lottie-web 的设置）已随 lottie-web 一起移除。请使用 `loop`、`autoplay` 和 `speed` 属性；lottie-web 的其他选项没有对应的替代。
+
+如果仍然传入 `pathCss` 或 `options`，会输出一次警告，然后被忽略。
+
+```diff
+- <UseAnimations animation={github} wrapperStyle={{ margin: 8 }} pathCss="stroke-width: 3px;" options={{ loop: true }} />
++ <UseAnimations animation={github} style={{ margin: 8 }} className="thick" loop />
+```
+
+```css
+.thick path {
+  stroke-width: 3px;
+}
+```
+
+### 5. 检查外层元素 {#5-check-the-wrapper-element}
+
+外层元素现在是 inline-block 的 `<span>`，而不是 `<div>`，因此可以合法地放在按钮和链接中，并与文字处于同一行。请更新把外层元素当作 `div` 来选择的 CSS，并在 `render` 属性中把 `animationProps` 展开到 `<span>` 上：
+
+```diff
+  render={(eventProps, animationProps) => (
+    <button type="button" aria-label="Like" {...eventProps}>
+-     <div {...animationProps} />
++     <span {...animationProps} />
+    </button>
+  )}
+```
+
+图标现在默认对屏幕阅读器隐藏（`aria-hidden`），除非您传入 `aria-label`；对于本身就承载含义的图标，请为它加上标签。
+
+### 6. 检查交互方式有变化的图标 {#6-check-the-icons-whose-interaction-changed}
+
+交互方式现在与 useanimations.com 保持一致。如果希望某个图标保持 v2 中的行为，请传入它原来的交互方式：
+
+| 图标                                                                                               | v2               | v3             |
+| -------------------------------------------------------------------------------------------------- | ---------------- | -------------- |
+| `arrowDownCircle`, `arrowLeftCircle`, `arrowRightCircle`, `arrowUpCircle`                          | `click-toggle`   | `click-replay` |
+| `calendar`, `folder`, `home`, `instagram`, `userMinus`, `userPlus`, `userX`, `youtube`, `youtube2` | `hover-replay`\* | `hover`        |
+| `behance`, `codepen`, `facebook`, `github`, `linkedin`, `pocket`, `twitter`                        | `hover-replay`\* | `hover-loop`   |
+| `copy`, `edit`, `mail`                                                                             | `click-replay`   | `hover`        |
+| `dribbble`                                                                                         | `hover`          | `hover-loop`   |
+| `zoomIn`, `zoomOut`                                                                                | `loop`           | `hover`        |
+
+\* v2 中这些图标在指针移入时播放一次，移出时跳回起点；`hover-replay` 是最接近的效果。
+
+```jsx
+<UseAnimations animation={zoomIn} interaction="loop" />
+```
+
+### 7. 更新导入 {#7-update-imports}
+
+只能以 `react-useanimations/lib/<name>` 的形式或从 `react-useanimations/icons` 导入图标。v2 的内部文件路径，例如 `react-useanimations/lib/github/index` 或 `react-useanimations/lib/github/github.json`，已无法解析；Lottie JSON 现在是图标的 `animationData`：
+
+```diff
+- import githubJson from 'react-useanimations/lib/github/github.json';
++ import github from 'react-useanimations/lib/github';
++ const githubJson = github.animationData;
+```
+
+`react-useanimations/utils` 路径已被移除。请直接从软件包导入类型：
+
+```diff
+- import type { Animation, AnimationKey } from 'react-useanimations/utils';
++ import type { Animation, AnimationKey, Interaction, UseAnimationsProps } from 'react-useanimations';
+```
+
+`Animation` 现在是 `{ animationData, interaction }`；v2 的 `animationKey` 字段已不存在，因此您自己构造的对象请改用 `interaction`。
+
+### 其他新特性 {#what-else-is-new}
+
+新增 221 个图标（共 300 个）、可从 `react-useanimations/icons` 一次导入多个图标、支持减少动态效果、键盘聚焦时播放悬停动画、触摸屏上不再出现卡住的悬停动画、无需变通方案即可服务端渲染，以及 [shadcn 注册表](#shadcnui)。
+
+## 许可证 {#license}
+
+图标和代码均以 [MIT 许可证](https://opensource.org/license/mit/)发布：可以在个人和商业作品中使用、修改和再分发。署名不是必需的，但我们很欢迎：
+
+```html
+Animated icons by <a href="https://useanimations.com">useAnimations</a>
+```
+
+完整条款：[许可与条款](/licencing-and-terms)。
+
+## 常见问题 {#faq}
+
+<details><summary>useAnimations 可以免费用于商业项目吗？</summary>
+
+可以。图标和软件包都采用 MIT 许可证，无需署名。
+
+</details>
+
+<details><summary>如何修改图标的颜色？</summary>
+
+图标默认跟随文字颜色。可以通过 `strokeColor` 和 `fillColor`、CSS `color`，或者直接给路径设置样式来修改。参见[尺寸与颜色](#size--color)。
+
+</details>
+
+<details><summary>不使用 React 也能用吗？</summary>
+
+这个软件包是为 React 设计的。不过每个图标同时也是 Lottie JSON 文件，lottie-web、lottie-ios、lottie-android、Flutter 和 React Native 都能播放，另外还提供静态 SVG。参见[不使用 React](#use-without-react) 和 [Lottie 图标](/lottie-icons)。
+
+</details>
+
+<details><summary>AI 编程智能体可以使用 useAnimations 吗？</summary>
+
+可以。让它们读取 [icons.json](/icons.json) 和 [/documentation.md](/documentation.md) 即可；软件包本身也附带 `catalog.json`，并为每个图标提供了带文档注释的类型定义。
+
+</details>
diff --git a/website/src/i18n/locales.ts b/website/src/i18n/locales.ts
index dec2a59..ce85501 100644
--- a/website/src/i18n/locales.ts
+++ b/website/src/i18n/locales.ts
@@ -31,6 +31,8 @@ export type Locale = {
   /** Search result limits: CJK characters are wider, so fewer of them fit. */
   maxTitle: number;
   maxDescription: number;
+  /** Space between sentences: none in Chinese and Japanese. */
+  space: string;
   /** Rollout wave (see the GSC monitor); live languages are built and indexed. */
   wave: number;
   live: boolean;
@@ -52,6 +54,7 @@ const locale = (
   ogLocale,
   maxTitle: cjk ? 32 : 60,
   maxDescription: cjk ? 80 : 155,
+  space: cjk && code !== 'ko' ? '' : ' ',
   wave,
   live,
 });
diff --git a/website/src/i18n/messages/cs/common.ts b/website/src/i18n/messages/cs/common.ts
new file mode 100644
index 0000000..8ec284a
--- /dev/null
+++ b/website/src/i18n/messages/cs/common.ts
@@ -0,0 +1,46 @@
+import type { Messages } from '../en';
+
+export const common: Messages['common'] = {
+  skipToContent: 'Přejít na obsah',
+  ogImageAlt: 'useAnimations: animované ikony zdarma pro React, shadcn/ui, Lottie a SVG',
+  homeLabel: 'useAnimations – úvodní stránka',
+  mainNav: 'Hlavní navigace',
+  browseIcons: 'Procházet ikony',
+  nav: {
+    icons: 'Ikony',
+    categories: 'Kategorie',
+    documentation: 'Dokumentace',
+    shadcn: 'shadcn',
+    lottie: 'Lottie ikony',
+    license: 'Licence',
+  },
+  footer: {
+    tagline:
+      'Animované ikony zdarma s vestavěnými interakcemi. Pod licencí MIT, vytvořené pro React.',
+    product: 'Produkt',
+    developers: 'Pro vývojáře',
+    follow: 'Sledujte nás',
+    languages: 'Jazyky',
+    allIcons: 'Všechny ikony',
+    categories: 'Kategorie',
+    interactions: 'Interakce',
+    lottieIcons: 'Lottie ikony',
+    shadcnIcons: 'Ikony pro shadcn/ui',
+    documentation: 'Dokumentace',
+    licencing: 'Licence a podmínky',
+    shadcnRegistry: 'Registr shadcn',
+    mitLicense: 'Licence MIT',
+    builtWith: 'Web postavený na Astru',
+  },
+  breadcrumb: 'Drobečková navigace',
+  crumbs: { icons: 'Ikony', categories: 'Kategorie', interactions: 'Interakce' },
+  faq: 'Časté dotazy',
+  copy: 'Kopírovat',
+  copied: 'Zkopírováno',
+  pressCtrlC: 'Stiskněte Ctrl+C',
+  languageBanner: {
+    text: 'Tato stránka je dostupná i v češtině.',
+    action: 'Přepnout do češtiny',
+    dismiss: 'Zavřít',
+  },
+};
diff --git a/website/src/i18n/messages/cs/docs.ts b/website/src/i18n/messages/cs/docs.ts
new file mode 100644
index 0000000..76d67bd
--- /dev/null
+++ b/website/src/i18n/messages/cs/docs.ts
@@ -0,0 +1,37 @@
+import { pluralIn } from '../../format';
+import type { Messages } from '../en';
+
+const plural = pluralIn('cs');
+
+export const docs: Messages['docs'] = {
+  title: 'Dokumentace — useAnimations',
+  description: (iconCount: number) =>
+    `Jak používat ${plural(iconCount, { one: 'animovanou ikonu', few: 'animované ikony', other: 'animovaných ikon' })} v Reactu a shadcn/ui: interakce, props, barvy, soubory a přístupnost.`,
+  badge: 'Dokumentace',
+  onThisPage: 'Na této stránce',
+  viewAsMarkdown: 'Zobrazit jako Markdown',
+  headline: 'Dokumentace useAnimations',
+  summary: 'Jak používat animované ikony useAnimations v Reactu a shadcn/ui.',
+  crumb: 'Dokumentace',
+  faq: [
+    {
+      question: 'Je useAnimations zdarma i pro komerční projekty?',
+      answer: 'Ano. Ikony i React balíček jsou pod licencí MIT a uvádět autora nemusíte.',
+    },
+    {
+      question: 'Jak použít ikony useAnimations v Reactu?',
+      answer:
+        'Nainstalujte react-useanimations, naimportujte UseAnimations a ikonu (např. react-useanimations/lib/checkmark) a vykreslete <UseAnimations animation={checkmark} size={32} />.',
+    },
+    {
+      question: 'Jak změnit barvu ikony?',
+      answer:
+        'Ikony přebírají barvu textu. Změníte ji pomocí strokeColor a fillColor, CSS vlastnosti color nebo stylováním cest (paths).',
+    },
+    {
+      question: 'Funguje to i bez Reactu?',
+      answer:
+        'Balíček je určený pro React. Každá ikona je ale zároveň standardní Lottie JSON soubor, který přehraje jakýkoli Lottie přehrávač (lottie-web, dotLottie, lottie-react-native, lottie-ios, lottie-android, Flutter), a statické SVG. Viz Použití bez Reactu a useanimations.com/lottie-icons.',
+    },
+  ],
+};
diff --git a/website/src/i18n/messages/cs/home.ts b/website/src/i18n/messages/cs/home.ts
new file mode 100644
index 0000000..9447a11
--- /dev/null
+++ b/website/src/i18n/messages/cs/home.ts
@@ -0,0 +1,185 @@
+import { formIn, pluralIn } from '../../format';
+import type { Messages } from '../en';
+import type { HomeFaq } from '../en/home';
+
+const plural = pluralIn('cs');
+const form = formIn('cs');
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const home: Messages['home'] = {
+  title: 'Mikroanimace a knihovna animovaných ikon — useAnimations',
+  description: (count: number) =>
+    `${plural(count, { one: 'mikroanimace', few: 'mikroanimace', other: 'mikroanimací' })} pro UI zdarma: knihovna animovaných ikon pro React, shadcn/ui a Lottie s vestavěným hoverem, kliknutím i smyčkou. MIT.`,
+
+  hero: {
+    badge: (count: number) =>
+      `${plural(count, { one: 'ikona', few: 'ikony', other: 'ikon' })} · žádné závislosti · MIT`,
+    headline: { start: 'Ikony, které ', accent: 'ožijí.', end: '' },
+    h1: 'Animované ikony zdarma pro React, shadcn/ui a Lottie',
+    intro: (count: number) =>
+      `${plural(count, {
+        one: 'ručně vytvořená mikroanimace',
+        few: 'ručně vytvořené mikroanimace',
+        other: 'ručně vytvořených mikroanimací',
+      })} s vestavěnými mikrointerakcemi na hover, kliknutí i ve smyčce. Použijte je jako React komponentu, přidejte je přes shadcn nebo si stáhněte SVG a Lottie JSON. Licence MIT.`,
+    browse: 'Procházet ikony',
+    fieldHint: 'Přejeďte ukazatelem přes pole ikon.',
+  },
+
+  numbers: {
+    label: 'Ve zkratce',
+    icons: 'animovaných ikon',
+    interactions: 'vestavěných interakcí',
+    size: 'přehrávač (gzip)',
+    dependencies: 'závislostí',
+  },
+
+  interactions: {
+    eyebrow: 'Vestavěné interakce',
+    title: 'Každá ikona ví, jak se pohybovat.',
+    intro:
+      'Každá ikona má interakci, pro kterou byla navržena. Stačí ji vložit a funguje — nebo jedním propem zvolte jinou. Vyzkoušejte si je:',
+    demos: {
+      loop: 'Přehrává se nepřetržitě, pro loadery a průběžný stav.',
+      'click-toggle': 'Přepíná mezi dvěma stavy: menu a zavřít, přehrát a pauza.',
+      'click-replay': 'Při každém kliknutí se přehraje od začátku jako zpětná vazba.',
+      hover: 'Při najetí myší se přehraje dopředu, při odjetí pozpátku.',
+      'hover-loop': 'Při hoveru běží ve smyčce a po odjetí myši dokončí cyklus.',
+      'hover-replay': 'Při každém najetí myší se jednou přehraje od začátku.',
+    },
+  },
+
+  browser: {
+    eyebrow: 'Knihovna',
+    title: (count: number) =>
+      plural(count, {
+        one: 'animovaná ikona zdarma',
+        few: 'animované ikony zdarma',
+        other: 'animovaných ikon zdarma',
+      }),
+    intro:
+      'Najetím myší nebo kliknutím ikonu přehrajete. Po otevření najdete její kód a soubory ke stažení — Lottie JSON, SVG a ZIP.',
+    search: 'Hledat ikony',
+    searchPlaceholder: (count: number) =>
+      `Hledejte v ${count} ${form(count, { one: 'ikoně', other: 'ikonách' })} anglicky — třeba „eye“, „bell“ nebo „arrow“`,
+    interaction: 'Interakce',
+    allInteractions: 'Všechny interakce',
+    color: 'Barva ikon',
+    colors: {
+      text: 'Barva textu',
+      indigo: 'Indigová',
+      red: 'Červená',
+      amber: 'Jantarová',
+      teal: 'Modrozelená',
+      violet: 'Fialová',
+    },
+    customColor: 'Vlastní barva',
+    size: 'Velikost',
+    category: 'Kategorie',
+    all: 'Vše',
+    count: { one: '{n} ikona', few: '{n} ikony', many: '{n} ikony', other: '{n} ikon' },
+    noMatch: 'Žádná ikona neodpovídá.',
+    noMatchHintHtml: (href: string) =>
+      `Zkuste jiné slovo, nebo ${link(href, 'navrhněte novou ikonu')}.`,
+  },
+
+  everywhere: {
+    eyebrow: 'Použijte je po svém',
+    title: 'Nainstalovat, importovat, hotovo.',
+    intro:
+      'React komponenta bez závislostí, registr shadcn, soubory ke stažení se stálými URL a katalog, který přečtou i AI agenti.',
+    docs: 'Přečíst dokumentaci →',
+    tablist: 'Platforma',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Soubory', agents: 'Agenti' },
+    codeText: {
+      afterAdding: 'potom',
+      files: 'Každá ikona jako SVG, jako animace (Lottie JSON) a jako ZIP s obojím',
+    },
+  },
+
+  features: {
+    title: 'Malé, přístupné a stylované po vašem.',
+    colors: 'Přebírají vaše barvy',
+    colorsHtml: `Ikony používají ${code('currentColor')}: samy převezmou barvu textu, hover stavy i tmavý režim. Změnit ji můžete propem, třídou nebo obyčejným CSS.`,
+    tiny: 'Malé už z principu',
+    tinyText:
+      'Vestavěný přehrávač, žádné závislosti. Každá ikona je samostatný modul o velikosti 2 kB.',
+    accessible: 'Přístupné bez dalšího nastavování',
+    accessibleText:
+      'Respektují omezený pohyb, hover animace přehrají i při fokusu z klávesnice a čtečky obrazovky je ignorují, dokud jim nedáte popisek.',
+    ssr: 'Připravené na vykreslování na serveru',
+    ssrText:
+      'Klientská komponenta, která se bezpečně vykreslí v Next.js, Remixu i Astru. Ikony jsou obyčejná data, která můžete importovat kdekoli.',
+    agents: 'Pro AI agenty',
+    agentsHtml: (iconsJson: string, llmsTxt: string) =>
+      `Typovaný katalog s klíčovými slovy ke každé ikoně, ${link(iconsJson, 'icons.json')}, ${link(llmsTxt, 'llms.txt')} a dokumentace v Markdownu.`,
+  },
+
+  browse: {
+    title: 'Najděte tu správnou mikroanimaci.',
+    byCategory: 'Procházet podle kategorií',
+    byInteraction: 'Procházet podle interakcí',
+    formats: 'Všechny ikony a formáty',
+  },
+
+  hubs: {
+    icons: 'Všechny animované ikony',
+    categories: 'Kategorie ikon',
+    interactions: 'Ikony podle interakce',
+    lottie: 'Lottie ikony (JSON)',
+    shadcn: 'Animované ikony pro shadcn/ui',
+  },
+
+  faqTitle: 'Otázky',
+  faq: (f): HomeFaq => [
+    {
+      question: 'Co jsou mikroanimace a animované ikony?',
+      answer:
+        'Mikroanimace jsou krátké pohyby s jediným účelem, které odpovídají na akci uživatele: ikona menu, která se změní v tlačítko pro zavření, srdce, které se vyplní, když dáte příspěvku lajk, nebo zvonek, který zazvoní při nové notifikaci. Animované ikony jsou jejich nejběžnějším druhem. Rozhraní díky nim působí pohotově a změny stavu jsou patrné i bez dalšího textu.',
+    },
+    {
+      question: 'Jaký je rozdíl mezi soubory Lottie a SVG?',
+      answer:
+        'Soubor Lottie JSON obsahuje celou animaci a přehraje ho jakýkoli Lottie přehrávač, včetně toho, který je vestavěný v react-useanimations. Soubory SVG jsou statické obrázky ikony v klidu, jeden pro každý stav (například eye a eye-off), pro místa, kde se nic hýbat nemá: e-maily, dokumenty, grafické nástroje nebo záloha pro prohlížeče bez JavaScriptu.',
+    },
+    {
+      question: 'Funguje to s Next.js a vykreslováním na serveru?',
+      answer:
+        "Ano. Komponenta je označená 'use client' a animaci kreslí až v prohlížeči, takže ji vykreslíte ze server komponent i v SSR frameworcích jako Next.js, Remix a Astro bez dynamických importů. Moduly ikon jsou obyčejná data, která server komponenty mohou importovat a předávat jako props.",
+      link: { href: f.links.serverRendering, label: 'Next.js a vykreslování na serveru' },
+    },
+    {
+      question: 'Můžu ikony použít v komerčních projektech?',
+      answer:
+        'Ano. Ikony i balíček react-useanimations jsou pod licencí MIT: můžete je používat, upravovat a dále šířit v osobních i komerčních projektech. Uvedení autora oceníme, ale není povinné.',
+      link: { href: f.links.licence, label: 'Licence a podmínky' },
+    },
+    {
+      question: 'Můžu ikony použít bez Reactu?',
+      answer:
+        'Ano. Každá ikona je standardní Lottie JSON soubor, takže ji přehraje lottie-web v čistém JavaScriptu, ve Vue, Svelte, Angularu nebo v CMS a také Lottie přehrávače pro iOS, Android a Flutter. Na stránce Lottie ikony najdete URL souborů a hotové ukázky pro lottie-web ke každé interakci.',
+      link: { href: f.links.lottie, label: 'Lottie ikony' },
+    },
+    {
+      question: 'Kolik ikony přidají do bundlu?',
+      answer: `Přehrávač v react-useanimations ${f.version} má po gzipu asi 8 kB a nemá žádné závislosti. Každá ikona je samostatný modul o velikosti 1 až 15 kB (medián 2 kB), takže bundle obsahuje jen ikony, které naimportujete.`,
+    },
+  ],
+
+  cta: {
+    title: { start: 'Vdechněte rozhraní ', accent: 'život.', end: '' },
+    text: 'Zdarma a pod licencí MIT, pro osobní i komerční projekty.',
+    start: 'Začít',
+  },
+
+  schema: {
+    software: (count: number) =>
+      `React komponenta a ${plural(count, { one: 'animovaná ikona', few: 'animované ikony', other: 'animovaných ikon' })} (Lottie) s vestavěnými interakcemi na hover, kliknutí i ve smyčce. Bez závislostí.`,
+    catalogName: 'Katalog ikon useAnimations',
+    catalog: (count: number) =>
+      `${form(count, { one: 'Jediná', few: 'Všechny', other: 'Všech' })} ${plural(count, { one: 'ikona', few: 'ikony', other: 'ikon' })} useAnimations s id, názvem, kategorií, klíčovými slovy, interakcí, URL souborů Lottie JSON, SVG a ZIP, importem pro React a příkazem pro shadcn.`,
+  },
+};
diff --git a/website/src/i18n/messages/cs/hubs.ts b/website/src/i18n/messages/cs/hubs.ts
new file mode 100644
index 0000000..65baf28
--- /dev/null
+++ b/website/src/i18n/messages/cs/hubs.ts
@@ -0,0 +1,192 @@
+import type { Interaction } from 'react-useanimations';
+import { formIn, listIn, pluralIn } from '../../format';
+import type { Messages } from '../en';
+import type { CategoryFacts, Faq, InteractionFacts } from '../en/hubs';
+import { PLAY_FORMS } from './taxonomy';
+
+const list = listIn('cs');
+const plural = pluralIn('cs');
+const form = formIn('cs');
+const lower = (text: string) => text[0].toLowerCase() + text.slice(1);
+
+const ICONS = { one: 'ikona', few: 'ikony', other: 'ikon' };
+const icons = (n: number) => plural(n, ICONS);
+const animated = (n: number) =>
+  plural(n, { one: 'animovaná ikona', few: 'animované ikony', other: 'animovaných ikon' });
+
+/** The verb phrase agreeing with a count: "1 se přehrává", "3 se přehrávají", "5 se přehrává". */
+const plays = (n: number, interaction: Interaction) => {
+  const { singular, plural: many } = PLAY_FORMS[interaction];
+  return form(n, { one: singular, few: many, other: singular });
+};
+
+/** Up to `max` titles, then "a N dalších". */
+const titles = (items: string[], max = 12) =>
+  items.length > max
+    ? `${items.slice(0, max).join(', ')} a ${plural(items.length - max, { one: 'další', few: 'další', other: 'dalších' })}`
+    : list(items);
+
+/** The formats every icon comes in, with the static SVGs when the category has them. */
+const formats = (f: CategoryFacts) => {
+  if (f.withSvg === f.count)
+    return 'React komponenta, komponenta pro shadcn/ui, Lottie JSON animace a statické SVG';
+  const base = 'React komponenta, komponenta pro shadcn/ui a Lottie JSON animace';
+  return f.withSvg ? `${base} (${f.withSvg} z nich i jako statické SVG)` : base;
+};
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const hubs: Messages['hubs'] = {
+  titleSuffix: ' — useAnimations',
+  iconCount: icons,
+
+  category: {
+    titles: (f: CategoryFacts) => [
+      `${f.title} pro React a Lottie`,
+      `${f.title} pro React`,
+      `${f.title} zdarma`,
+      f.title,
+    ],
+    descriptions: (f: CategoryFacts) => {
+      const examples = list(f.titles.slice(0, 3));
+      return [
+        `${f.title} zdarma: ${icons(f.count)} včetně ${examples}. Mikroanimace na hover, kliknutí i ve smyčce pro React, shadcn/ui a Lottie JSON, licence MIT.`,
+        `${f.title}: ${icons(f.count)} zdarma včetně ${examples}. Mikroanimace pro React, shadcn/ui a Lottie JSON, licence MIT.`,
+        `${f.title} zdarma: ${icons(f.count)} včetně ${examples}. Pro React, shadcn/ui a Lottie JSON, licence MIT.`,
+        `${f.title} zdarma: ${icons(f.count)} včetně ${examples}. Pro React, shadcn/ui a Lottie, MIT.`,
+        `${f.title} zdarma: ${icons(f.count)} pro React, shadcn/ui a Lottie JSON, licence MIT.`,
+      ];
+    },
+    summary: (f: CategoryFacts) => {
+      let groups: string;
+      if (f.groups.length === 1) {
+        const { interaction } = f.groups[0];
+        groups =
+          f.count === 1
+            ? `Ikona ${plays(1, interaction)}`
+            : form(f.count, {
+                few: `Všechny ${f.count} ikony ${PLAY_FORMS[interaction].plural}`,
+                other: `Všech ${f.count} ikon ${PLAY_FORMS[interaction].singular}`,
+              });
+      } else {
+        groups = `Kategorie obsahuje ${icons(f.count)}: ${list(
+          f.groups.map(({ interaction, count }) => `${count} ${plays(count, interaction)}`)
+        )}`;
+      }
+      return `${groups}. Každá ikona je k dispozici jako ${formats(f)}, zdarma i pro komerční použití pod licencí MIT.`;
+    },
+    faq: (f: CategoryFacts): Faq => {
+      const name = lower(f.title);
+      const ex = f.example;
+      const n = f.expressions.length;
+      return [
+        {
+          question: `Které ${name} sada obsahuje?`,
+          answer: `${icons(f.count)}: ${titles(f.titles)}. Všechny můžete zdarma používat v osobních i komerčních projektech pod licencí MIT, bez nutnosti uvádět autora.`,
+        },
+        {
+          question: `Jak použít ${name} v Reactu?`,
+          answer: `Nainstalujte react-useanimations, přidejte ${ex.importLine} a vykreslete <UseAnimations animation={${ex.exportName}} size={32} />. Ikona přehraje svou interakci „${lower(ex.interactionLabel)}“ a převezme barvu textu. Se shadcn/ui místo toho spusťte ${ex.shadcnCommand}.`,
+        },
+        {
+          question: `Můžu ${name} použít i bez Reactu?`,
+          answer: `Ano. Každá ikona je Lottie JSON soubor na adrese ${f.site}/icons/<id>.json (například ${f.site}/icons/${ex.id}.json), který přehraje lottie-web, lottie-ios, lottie-android nebo balíček lottie pro Flutter${
+            f.withSvg
+              ? '; statická SVG najdete na stránce každé ikony (stránky ikon jsou v angličtině)'
+              : ''
+          }. ${
+            n
+              ? `${titles(f.expressions, 6)} ${n === 1 ? 'používá' : 'používají'} výrazy (expressions) z After Effects, takže na webu ${n === 1 ? 'potřebuje' : 'potřebují'} plný build lottie-web.`
+              : 'Žádná z nich nepoužívá výrazy (expressions), takže stačí light build lottie-web.'
+          }`,
+        },
+      ];
+    },
+    badge: (n: number) => `${icons(n)} · licence MIT`,
+    allIcons: (name: string) => `Všechny ikony v kategorii ${name}`,
+    whereToUse: 'Kde je použít',
+    byInteraction: 'Podle interakce',
+    addOne: 'Přidejte ikonu do aplikace',
+    addOneHtml: (label: string, name: string) =>
+      `V Reactu nainstalujte ${code('react-useanimations')} a naimportujte ikonu; svou interakci „${lower(label)}“ přehraje sama. Všechny ikony v této kategorii fungují stejně: ${code(name)} jen nahraďte názvem ze stránky požadované ikony.`,
+    shadcnHtml: (href: string) => `Se ${link(href, 'shadcn/ui')} vám CLI přidá hotovou komponentu:`,
+    noReactHtml: (href: string) =>
+      `Nepoužíváte React? Každá ikona je Lottie JSON soubor na adrese ${code('/icons/&lt;id&gt;.json')}; přehrávače pro web, iOS, Android a Flutter popisuje stránka ${link(href, 'Lottie ikony')}.`,
+    more: 'Další kategorie',
+    allIconsButton: 'Všechny ikony',
+  },
+
+  interaction: {
+    titles: (f: InteractionFacts) => [
+      `${f.title} pro React a Lottie`,
+      `${f.title} pro React`,
+      f.title,
+    ],
+    descriptions: (f: InteractionFacts) => {
+      const verb = PLAY_FORMS[f.interaction].plural;
+      return [
+        `${animated(f.count)} zdarma, které ${verb}, například ${list(f.titles.slice(0, 3))}. Pro React, shadcn/ui a Lottie JSON, licence MIT.`,
+        `${animated(f.count)} zdarma, které ${verb}. Pro React, shadcn/ui a Lottie JSON, licence MIT.`,
+        `${f.title} zdarma: ${icons(f.count)} pro React, shadcn/ui a Lottie JSON, licence MIT.`,
+      ];
+    },
+    faq: (f: InteractionFacts): Faq => [
+      {
+        question: `Které ikony používají interakci „${lower(f.label)}“?`,
+        answer: `${icons(f.count)}: ${titles(f.titles, 15)}. ${f.example}`,
+      },
+      {
+        question: 'Co se stane, když uživatel preferuje omezený pohyb?',
+        answer: `${f.reducedMotion} React komponenta čte prefers-reduced-motion a reaguje i na změnu nastavení, takže pro to nemusíte psát žádný kód.`,
+      },
+      {
+        question: 'Jak změnit interakci ikony?',
+        answer: `Každá ikona přehrává interakci, pro kterou byla navržena. S interaction="${f.interaction}" získá toto chování kterákoli jiná ikona, jinou hodnotou ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') ho změníte. Přehrávání dál upravují props autoplay, loop a speed.${
+          f.interaction === 'click-toggle'
+            ? ' Pokud chcete stav řídit sami, předejte active={isOn} a měňte ho v onClick: kliknutí pak ikonu sama nepřepínají.'
+            : ''
+        }`,
+      },
+    ],
+    allIcons: (label: string) => `Všechny ikony s interakcí „${lower(label)}“`,
+    behaviour: 'Jak se chová',
+    hoverNote:
+      ' Klepnutí na dotykové obrazovce hover animace nespouští, fokus z klávesnice ano, pokud je ikona uvnitř fokusovatelného prvku.',
+    handled: 'O to všechno se postará React komponenta, vy jen vyberete ikonu.',
+    whereToUse: 'Kde ji použít',
+    byCategory: 'Podle kategorie',
+    useInReact: 'Použití v Reactu',
+    overrideHtml: `Ikony v tomto seznamu přehrávají tuto interakci ve výchozím nastavení. Použít ji může i kterákoli jiná ikona: stačí jí předat prop ${code('interaction')}.`,
+    normallyUses: (title: string, interaction: string) => `${title} jinak používá '${interaction}'`,
+    extra: {
+      loop: 'Smyčky se spouštějí automaticky a mimo viditelnou část stránky se pozastaví. Zpomalíte je pomocí speed, jen jednou je přehrajete s loop={false} a v klidu je necháte s autoplay={false}:',
+      'click-toggle':
+        'Kliknutí ikonu přepínají sama. Pokud ji chcete mít v souladu se svým stavem, předejte active: ikona se animuje pokaždé, když se active změní, a kliknutí ji sama o sobě už nepřepínají.',
+      'click-replay':
+        'Pomocí render prop vložte ikonu do skutečného tlačítka, aby na ni šlo přejít klávesnicí a čtečky obrazovky ji ohlásily. Váš onClick se spustí jako první; voláním event.preventDefault() animaci přeskočíte.',
+      hover:
+        'Pomocí render prop vložte ikonu do odkazu nebo tlačítka: animace se pak přehraje i při fokusu z klávesnice a klepnutí na dotykové obrazovce ji nespustí.',
+      'hover-replay':
+        'Nechte na hover reagovat celou kartu nebo odkaz, ne jen ikonu: s render prop jdou události na váš prvek a animaci přehraje i fokus z klávesnice.',
+      'hover-loop':
+        'Použijte render prop, aby smyčku spouštěl celý odkaz, včetně fokusu z klávesnice. Tempo změníte pomocí speed:',
+    },
+    codeText: {
+      halfSpeed: 'poloviční rychlost',
+      playsOnce: 'přehraje se jednou a zastaví',
+      staticFrame: 'statický první snímek',
+      endState: 'true zobrazí koncový stav',
+      closeMenu: 'Zavřít menu',
+      openMenu: 'Otevřít menu',
+      download: 'Stáhnout',
+      archive: 'Archiv',
+      weeklyGrowth: 'Týdenní růst',
+    },
+    docsHtml: (docs: string, lottie: string) =>
+      `Všechny props najdete v ${link(docs, 'dokumentaci')}. Mimo React jsou ikony Lottie JSON soubory; jak interakce vytvořit s lottie-web, ukazuje stránka ${link(lottie, 'Lottie ikony')}.`,
+    other: 'Další interakce',
+    browseByCategory: 'Procházet podle kategorií',
+  },
+};
diff --git a/website/src/i18n/messages/cs/index.ts b/website/src/i18n/messages/cs/index.ts
new file mode 100644
index 0000000..bf33c1d
--- /dev/null
+++ b/website/src/i18n/messages/cs/index.ts
@@ -0,0 +1,11 @@
+import type { Messages } from '../en';
+import { common } from './common';
+import { docs } from './docs';
+import { home } from './home';
+import { hubs } from './hubs';
+import { islands } from './islands';
+import { licence } from './licence';
+import { pages } from './pages';
+import { taxonomy } from './taxonomy';
+
+export const messages: Messages = { common, taxonomy, hubs, home, docs, licence, pages, islands };
diff --git a/website/src/i18n/messages/cs/islands.ts b/website/src/i18n/messages/cs/islands.ts
new file mode 100644
index 0000000..c152301
--- /dev/null
+++ b/website/src/i18n/messages/cs/islands.ts
@@ -0,0 +1,51 @@
+import type { Messages } from '../en';
+
+export const islands: Messages['islands'] = {
+  iconCard: {
+    hints: {
+      loop: 'Smyčka',
+      'click-toggle': 'Klik',
+      'click-replay': 'Klik',
+      hover: 'Hover',
+      'hover-loop': 'Hover',
+      'hover-replay': 'Hover',
+    },
+  },
+  iconDialog: {
+    hints: {
+      loop: 'Přehrává se sama',
+      'click-toggle': 'Kliknutím přepnete',
+      'click-replay': 'Kliknutím přehrajete znovu',
+      hover: 'Najetím myší přehrajete, odjetím vrátíte zpět',
+      'hover-loop': 'Najetím myší spustíte smyčku',
+      'hover-replay': 'Najetím myší přehrajete',
+    },
+    preview: 'Náhled ikony {title}',
+    colors: 'Barva náhledu',
+    color: 'Barva {color}',
+    textColor: 'Barva textu',
+    interaction: 'Interakce',
+    duration: 'Délka',
+    seconds: '{seconds} s',
+    import: 'Import',
+    close: 'Zavřít',
+    code: 'Kód',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Soubory' },
+    copy: 'Kopírovat',
+    download: 'Stáhnout',
+    iconPage: 'Stránka ikony (anglicky) →',
+  },
+  interactionDemo: {
+    click: 'Klikněte na kartu',
+    loop: 'Přehrává se sama',
+    hover: 'Najeďte myší na kartu',
+  },
+  mobileMenu: {
+    menu: 'Menu',
+    nav: 'Hlavní navigace',
+  },
+  themeToggle: {
+    toLight: 'Přepnout na světlý motiv',
+    toDark: 'Přepnout na tmavý motiv',
+  },
+};
diff --git a/website/src/i18n/messages/cs/licence.ts b/website/src/i18n/messages/cs/licence.ts
new file mode 100644
index 0000000..0f90509
--- /dev/null
+++ b/website/src/i18n/messages/cs/licence.ts
@@ -0,0 +1,25 @@
+import type { Messages } from '../en';
+
+export const licence: Messages['licence'] = {
+  title: 'Licence a podmínky — useAnimations',
+  description:
+    'Ikony useAnimations i balíček react-useanimations jsou pod licencí MIT: zdarma pro osobní i komerční použití a další šíření, bez nutnosti uvádět autora.',
+  name: 'Licence a podmínky',
+  heading: 'Volně k použití. Pod licencí MIT.',
+  introHtml: (mitHref: string) =>
+    `Ikony useAnimations a balíček <code>react-useanimations</code> jsou vydané pod <a href="${mitHref}">licencí MIT</a>.`,
+  canDo: 'Co můžete',
+  canDoItemsHtml: [
+    '<strong>Používat</strong> ikony na osobních i komerčních webech, v aplikacích a produktech.',
+    '<strong>Upravovat</strong> je: měnit barvy, velikosti, časování i samotný pohyb.',
+    '<strong>Dále je šířit</strong>, a to i v rámci sad ikon, šablon, motivů, UI kitů a registrů komponent.',
+  ],
+  attribution: 'Uvedení autora',
+  attributionText:
+    'Není povinné, ale potěší nás. Když šíříte samotné soubory, ponechte u nich licenční doložku, a pokud nás chcete uvést:',
+  credit: (link: string) => `Animované ikony od ${link}`,
+  noWarranty: 'Bez záruky',
+  noWarrantyText: 'Ikony i kód se poskytují tak, jak jsou, bez jakékoli záruky.',
+  licenseText: 'Text licence',
+  bindingNote: 'Níže je původní anglické znění licence, které je právně závazné.',
+};
diff --git a/website/src/i18n/messages/cs/pages.ts b/website/src/i18n/messages/cs/pages.ts
new file mode 100644
index 0000000..2d7133d
--- /dev/null
+++ b/website/src/i18n/messages/cs/pages.ts
@@ -0,0 +1,253 @@
+import { formIn, listIn, pluralIn } from '../../format';
+import type { Messages } from '../en';
+import type { Faq } from '../en/hubs';
+
+const plural = pluralIn('cs');
+const form = formIn('cs');
+const list = listIn('cs');
+
+const ICONS = { one: 'ikona', few: 'ikony', other: 'ikon' };
+const icons = (n: number) => plural(n, ICONS);
+const animatedIcons = (n: number) =>
+  plural(n, { one: 'animovaná ikona', few: 'animované ikony', other: 'animovaných ikon' });
+const categoriesOf = (n: number) =>
+  plural(n, { one: 'kategorie', few: 'kategorie', other: 'kategorií' });
+const interactionsOf = (n: number) =>
+  plural(n, { one: 'interakce', few: 'interakce', other: 'interakcí' });
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+const strong = (text: string) => `<strong class="font-medium text-fg">${text}</strong>`;
+
+export const pages: Messages['pages'] = {
+  icons: {
+    titles: (count: number) => [
+      `${form(count, { one: 'Jediná', few: 'Všechny', other: 'Všech' })} ${animatedIcons(count)} podle kategorií`,
+      `${form(count, { one: 'Jediná', few: 'Všechny', other: 'Všech' })} ${animatedIcons(count)}`,
+      'Všechny animované ikony',
+    ],
+    descriptions: (count: number, categories: number) => [
+      `Všechny ikony useAnimations na jedné stránce: ${animatedIcons(count)} zdarma v ${categories} ${form(categories, { one: 'kategorii', other: 'kategoriích' })} pro React, shadcn/ui, Lottie JSON a SVG. Licence MIT.`,
+    ],
+    title: 'Všechny animované ikony',
+    badge: (count: number) => `${icons(count)} · licence MIT`,
+    introHtml: (browser: string) =>
+      `Všechny ikony sady rozdělené podle kategorií. Po otevření ikony uvidíte živý náhled, kód pro React a shadcn/ui a soubory Lottie JSON, SVG a ZIP ke stažení (stránky ikon jsou v angličtině). Pokud chcete hledat podle klíčových slov a vyzkoušet animace přímo na místě, použijte ${link(browser, 'prohlížeč ikon')}.`,
+    categoriesNav: 'Kategorie',
+    byInteraction: 'Podle interakce:',
+    categoryLink: (count: number, name: string) => `${icons(count)} v kategorii ${name} →`,
+  },
+
+  categories: {
+    titles: (categories: number) => [
+      `Kategorie animovaných ikon: ${categoriesOf(categories)}`,
+      'Kategorie animovaných ikon',
+    ],
+    descriptions: (iconCount: number, categories: number) => [
+      `Procházejte ${animatedIcons(iconCount)} zdarma v ${categories} ${form(categories, { one: 'kategorii', other: 'kategoriích' })}: navigace, akce, média, načítání, sociální sítě a další. Pro React, shadcn/ui a Lottie.`,
+    ],
+    title: 'Kategorie animovaných ikon',
+    badge: (iconCount: number, categories: number) =>
+      `${icons(iconCount)} · ${categoriesOf(categories)}`,
+    introHtml: (interactions: string) =>
+      `Každá ikona useAnimations patří do jedné kategorie, od navigačních šipek a ovládání médií po loadery a loga sociálních sítí. V kategorii najdete všechny její ikony, tipy, kde je použít, a kód pro přidání ikony do projektu. Ikony můžete procházet i podle ${link(interactions, 'interakce')}.`,
+    iconCount: icons,
+  },
+
+  interactions: {
+    titles: [
+      'Mikrointerakce: ikony na hover, kliknutí a ve smyčce',
+      'Mikrointerakce animovaných ikon',
+    ],
+    descriptions: (iconCount: number, interactions: number) => [
+      `${animatedIcons(iconCount)} v ${interactions} ${form(interactions, { one: 'mikrointerakci', other: 'mikrointerakcích' })}: smyčka, přepínání a přehrání kliknutím, hover, přehrání a smyčka při hoveru. S podporou omezeného pohybu.`,
+    ],
+    title: 'Interakce animovaných ikon',
+    badge: (interactions: number, iconCount: number) =>
+      `${interactionsOf(interactions)} · ${icons(iconCount)}`,
+    introHtml: `Každá ikona má mikrointerakci, pro kterou byla navržena: běží ve smyčce, kliknutím se přepne nebo přehraje znovu, případně se přehraje při najetí myší. React komponenta interakci sama zapojí a respektuje omezený pohyb, a prop <code class="font-mono text-base text-fg">interaction</code> kterékoli ikoně nastaví jinou.`,
+    iconCount: icons,
+    chooseTitle: 'Jak vybrat interakci',
+    chooseHtml: {
+      loop: (href: string) =>
+        `${strong('Stav, který trvá')}, třeba načítání nebo aktivní upozornění: ${link(href, 'smyčka')}.`,
+      'click-toggle': (href: string) =>
+        `${strong('Ovládání zapnuto/vypnuto')}, třeba ztlumení, menu nebo zobrazení hesla: ${link(href, 'přepínání kliknutím')}, pro řízený stav s ${code('active')}.`,
+      'click-replay': (href: string) =>
+        `${strong('Jednorázová akce')}, třeba odeslání, uložení nebo obnovení: ${link(href, 'přehrání kliknutím')}.`,
+      hover: (href: string) =>
+        `${strong('Náznak toho, co odkaz otevře')}: ${link(href, 'hover')}, který se po odjetí kurzoru přehraje zpět.`,
+      'hover-replay': (href: string) =>
+        `${strong('Panely nástrojů a seznamy, přes které se rychle přejíždí')}: ${link(href, 'přehrání při hoveru')}, které doběhne samo.`,
+      'hover-loop': (href: string) =>
+        `${strong('Odkazy, které zvou k delšímu pohledu')}, třeba ikony sociálních sítí: ${link(href, 'smyčka při hoveru')}.`,
+    },
+    motionTitle: 'Omezený pohyb',
+    motionHtml: `React komponenta se řídí nastavením ${code('prefers-reduced-motion')} a reaguje i na jeho změnu. Klepnutí na dotykové obrazovce hover animace nikdy nespustí.`,
+    reducedMotion: {
+      loop: 'ikona se automaticky nespustí a zůstane na statickém prvním snímku.',
+      'click-toggle': 'kliknutí přepne do druhého stavu okamžitě, bez animace mezi nimi.',
+      'click-replay': 'kliknutí se k vašemu handleru dostanou dál, ale animace se nepřehraje.',
+      hover: 'najetí myší animaci nespustí.',
+      'hover-replay': 'najetí myší animaci nespustí.',
+      'hover-loop': 'ikona při hoveru zůstane statická.',
+    },
+  },
+
+  lottie: {
+    titles: (count: number) => [
+      `Lottie ikony zdarma: ${plural(count, { one: 'animovaná JSON ikona', few: 'animované JSON ikony', other: 'animovaných JSON ikon' })}`,
+      'Lottie ikony zdarma',
+    ],
+    descriptions: (count: number) => [
+      `${plural(count, { one: 'Lottie ikona', few: 'Lottie ikony', other: 'Lottie ikon' })} zdarma jako čistý Lottie JSON pod licencí MIT. Kód ke zkopírování pro lottie-web, dotLottie, React, React Native, iOS, Android a Flutter.`,
+    ],
+    title: 'Lottie ikony zdarma',
+    crumb: 'Lottie ikony',
+    datasetName: 'Katalog ikon useAnimations',
+    datasetDescription: (count: number) =>
+      `Metadata a URL souborů ${form(count, { one: 'animované Lottie ikony', other: 'animovaných Lottie ikon' })} (${count}): id, název, kategorie, klíčová slova, interakce, velikost a délka.`,
+    badge: (count: number) => `${icons(count)} · Lottie JSON · licence MIT`,
+    intro:
+      'Každá ikona useAnimations je standardní Lottie JSON animace, takže ji přehraje jakýkoli Lottie přehrávač: lottie-web na webu, lottie-ios, lottie-android, Flutter i React Native. Soubory jsou zdarma pod licencí MIT, bez registrace, a jsou dostupné na stálých URL s povoleným CORS, takže je můžete načítat přímo nebo si je stáhnout do projektu.',
+    popular: 'Oblíbené Lottie ikony',
+    allIcons: (count: number) =>
+      `${form(count, { one: 'Jediná', few: 'Všechny', other: 'Všech' })} ${icons(count)} →`,
+    filesTitle: 'Soubory a URL',
+    filesIntroHtml: `Každá ikona má na adrese ${code('/icons/&lt;id&gt;')} stránku s náhledem a soubory ke stažení (v angličtině). Samotné soubory:`,
+    files: {
+      json: 'Lottie JSON animace',
+      zip: 'JSON a statická SVG',
+      svg: 'statické SVG každého stavu',
+      catalog: 'katalog všech ikon',
+    },
+    catalogHtml: (catalog: string, median: number) =>
+      `${link(catalog, 'icons.json')} obsahuje všechny ikony s jejich id, názvem, kategorií, klíčovými slovy, interakcí, velikostí, délkou a URL souborů. Ikony tak snadno vyberete podle klíčového slova ve skriptu nebo výběr necháte na AI agentovi. Medián velikosti Lottie souboru je ${median} kB.`,
+    players: {
+      web: {
+        title: 'Web: lottie-web',
+        text: 'Referenční přehrávač od Airbnb. Načtěte ho z CDN, nasměrujte ho na URL ikony a zvolte SVG renderer, se kterým ikona zůstane ostrá a jde přebarvit přes CSS. Použijte plný build (lottie.min.js): light build výrazy (expressions) nepodporuje.',
+        cssLabel: 'Přebírání barvy textu (SVG renderer)',
+      },
+      'web-interactions': {
+        title: 'Web: interakce na hover a kliknutí',
+        text: 'lottie-web umí přehrávat a zastavovat, interakce si ale musíte napsat sami. Tohle je přepínání kliknutím u ikony menu s podporou omezeného pohybu; všechny interakce fungují podle stejného vzoru a React komponenta níže to všechno udělá za vás.',
+      },
+      dotlottie: {
+        title: 'Web: webová komponenta dotLottie',
+        text: 'Přehrávač od LottieFiles vykresluje pomocí enginu ve WebAssembly do canvasu a kromě souborů .lottie přehraje i obyčejný Lottie JSON. Canvas zachová barvy ze souboru, takže ikony zůstanou černé, dokud JSON nepřebarvíte.',
+        jsLabel: 'Nebo JavaScript API: npm install @lottiefiles/dotlottie-web',
+      },
+      react: {
+        title: 'React: react-useanimations',
+        text: 'Žádný Lottie přehrávač instalovat nemusíte: balíček má vlastní přehrávač o velikosti 8 kB, přehrává interakci každé ikony, přebírá barvu textu a respektuje omezený pohyb. Každá ikona je samostatný modul, takže do aplikace dostanete jen ty, které naimportujete.',
+      },
+      'react-native': {
+        title: 'React Native: lottie-react-native',
+        text: 'Pro offline použití zabalte JSON do aplikace přes require(), nebo ho načtěte z jeho URL.',
+      },
+      ios: {
+        title: 'iOS: lottie-ios (SwiftUI)',
+        text: 'Přidejte balíček z https://github.com/airbnb/lottie-spm.git přes Swift Package Manager a pak vložte JSON do bundlu aplikace, nebo ho načtěte z jeho URL.',
+      },
+      android: {
+        title: 'Android: lottie-android (Jetpack Compose)',
+        text: 'Přidejte com.airbnb.android:lottie-compose (nebo com.airbnb.android:lottie pro views). Pro offline použití dejte JSON do res/raw a načtěte ho přes LottieCompositionSpec.RawRes.',
+      },
+      flutter: {
+        title: 'Flutter: lottie',
+        text: 'Balíček lottie je přehrávač napsaný čistě v Dartu pro Android, iOS, web i desktop.',
+      },
+    },
+    expressionsTitle: 'Ikony s výrazy (expressions)',
+    expressionsHtml: (count: number) =>
+      `${icons(count)} ${form(count, { one: 'používá', few: 'používají', other: 'používá' })} výrazy (expressions) z After Effects (${code('loopOut')} nebo ${code('wiggle')}). Na webu je přehrávejte plným buildem lottie-web, ne ${code('lottie_light')}. Nativní přehrávače výrazy nevyhodnocují, takže tyto ikony na iOS, Androidu a ve Flutteru otestujte, nebo zvolte jinou; react-useanimations je přehraje tak, jak byly navržené.`,
+    faq: (f: {
+      count: number;
+      minSize: number;
+      maxSize: number;
+      medianSize: number;
+      expressions: string[];
+    }): Faq => [
+      {
+        question: 'Jsou tyto Lottie ikony zdarma i pro komerční použití?',
+        answer: `Ano. ${form(f.count, { one: 'Jediná', few: 'Všechny', other: 'Všech' })} ${plural(f.count, { one: 'Lottie ikona je', few: 'Lottie ikony jsou', other: 'Lottie ikon je' })} pod licencí MIT: můžete je používat, upravovat a dále šířit v osobních i komerčních projektech, bez uvedení autora a bez účtu ke stažení.`,
+      },
+      {
+        question: 'V jakém formátu jsou Lottie soubory?',
+        answer: `Standardní Lottie JSON (formát Bodymovin) jen s tvarovými vrstvami: žádné obrázky, fonty ani externí soubory. Každá ikona je nakreslená na plátně 24 nebo 32 px, škáluje se na libovolnou velikost a má ${f.minSize} až ${f.maxSize} kB, medián ${f.medianSize} kB.`,
+      },
+      {
+        question: 'Je pro použití ikon v Reactu potřeba lottie-web?',
+        answer:
+          'Ne. react-useanimations má vlastní přehrávač o velikosti 8 kB bez závislostí, takže nainstalujete jeden balíček a naimportujete ikony, které potřebujete. lottie-web potřebujete jen mimo React, na obyčejných webových stránkách nebo v jiných frameworcích.',
+      },
+      {
+        question: 'Které ikony potřebují plný build lottie-web?',
+        answer: `${icons(f.expressions.length)} ${form(f.expressions.length, { one: 'používá', few: 'používají', other: 'používá' })} výrazy (expressions) z After Effects (loopOut nebo wiggle): ${list(f.expressions)}. Na webu potřebují plný build lottie-web; lottie_light výrazy ignoruje. Nativní přehrávače (lottie-ios, lottie-android, lottie pro Flutter) výrazy také nevyhodnocují, takže se tam tyto ikony mohou pohybovat jinak.`,
+      },
+      {
+        question: 'Můžu změnit barvu Lottie ikony?',
+        answer:
+          'Na webu zapisuje SVG renderer lottie-web barvy jako atributy, takže ikonu přebarvíte CSS pravidlem pro cesty (paths). Nativní přehrávače mají vlastní API pro dynamické vlastnosti: ColorValueProvider na iOS, LottieProperty.COLOR a STROKE_COLOR na Androidu a ValueDelegate.color ve Flutteru.',
+      },
+    ],
+    byCategory: 'Lottie ikony podle kategorií',
+  },
+
+  shadcn: {
+    titles: (count: number) => [
+      `Animované ikony pro shadcn/ui: ${plural(count, { one: 'komponenta', few: 'komponenty', other: 'komponent' })}`,
+      'Animované ikony pro shadcn/ui',
+    ],
+    descriptions: (count: number) => [
+      `${animatedIcons(count)} pro shadcn/ui: každou přidáte jedním příkazem shadcn CLI. Mikrointerakce na hover, kliknutí i ve smyčce, licence MIT, bez lottie-web.`,
+    ],
+    title: 'Animované ikony pro shadcn/ui',
+    crumb: 'shadcn/ui',
+    popularList: 'Oblíbené animované ikony pro shadcn/ui',
+    badge: (count: number) =>
+      `${plural(count, { one: 'komponenta', few: 'komponenty', other: 'komponent' })} · registr shadcn · licence MIT`,
+    intro:
+      'Všechny ikony useAnimations jsou v registru shadcn. Jeden příkaz CLI vám do projektu přidá typovanou React komponentu s interakcí na hover, kliknutí nebo ve smyčce, pro kterou byla ikona navržena, s podporou omezeného pohybu a barvami, které přebírají váš motiv. Kód skončí ve vašem repozitáři jako u každé jiné komponenty shadcn/ui.',
+    addTitle: 'Přidání ikony',
+    addIntro: 'Spusťte shadcn CLI s URL ikony v registru:',
+    namingHtml: `Komponenta se jmenuje ${code('Animated')} + id ikony v PascalCase (${code('check-box')} → ${code('AnimatedCheckBox')}) a uloží se do ${code('components/animations/&lt;id&gt;.tsx')}. CLI přidá také sdílený obal ${code('components/use-animation.tsx')} a nainstaluje ${code('react-useanimations')}, který má vlastní přehrávač: lottie-web nepotřebujete.`,
+    namespaceTitle: 'Krátké názvy díky jmennému prostoru registru',
+    namespaceHtml: `Jednou přidejte registr do ${code('components.json')} a pak přidávejte ikony podle názvu, klidně několik najednou:`,
+    registryHtml: (registry: string) =>
+      `Index registru na ${link(registry, '/r/registry.json')} obsahuje všechny položky s názvem, kategorií a interakcí.`,
+    usageTitle: 'Použití v shadcn Button',
+    usageHtml: `Komponenty přijímají stejné props jako ${code('UseAnimations')}. U přepínací ikony, jako je menu, předejte ${code('active')} a stav držte v tlačítku; ikona se animuje pokaždé, když se změní:`,
+    colorHtml: (docs: string) =>
+      `Ikony přebírají barvu textu, takže je přebarví ${code('text-primary')} nebo ${code('text-muted-foreground')} a tmavý režim nevyžaduje nic navíc. Další props a postupy najdete v ${link(docs, 'dokumentaci')}.`,
+    codeText: { closeMenu: 'Zavřít menu', openMenu: 'Otevřít menu' },
+    popular: 'Oblíbené ikony pro shadcn/ui',
+    allIcons: (count: number) =>
+      `${form(count, { one: 'Jediná', few: 'Všechny', other: 'Všech' })} ${icons(count)} →`,
+    popularNote:
+      'Na stránce každé ikony najdete její příkaz pro shadcn (stránky ikon jsou v angličtině).',
+    faq: (f: { count: number; version: string }): Faq => [
+      {
+        question: 'Jsou animované ikony pro shadcn/ui zdarma?',
+        answer: `Ano. ${form(f.count, { one: 'Jediná', few: 'Všechny', other: 'Všech' })} ${icons(f.count)} i kód komponent jsou pod licencí MIT, pro osobní i komerční projekty. Registr nevyžaduje účet ani API klíč.`,
+      },
+      {
+        question: 'Co shadcn CLI přidá do mého projektu?',
+        answer: `Komponentu ikony v components/animations/<id>.tsx, sdílený obal přehrávače UseAnimation v components/use-animation.tsx (jednou, jako závislost z registru) a react-useanimations@^${f.version} z npm. lottie-web není potřeba: balíček má vlastní přehrávač o velikosti 8 kB.`,
+      },
+      {
+        question: 'Fungují komponenty se server komponentami v Next.js?',
+        answer:
+          'Ano. Komponenty jsou označené "use client" a animaci kreslí až v prohlížeči, takže je můžete vykreslit ze server komponent a stránek bez dynamických importů nebo ssr: false.',
+      },
+      {
+        question: 'Můžu změnit vzhled a pohyb ikon?',
+        answer:
+          'Kód je váš, ve vašem repozitáři. Komponenty přijímají props komponenty UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop a speed. Ikony přebírají barvu textu, takže je přebarví třídy Tailwindu jako text-primary nebo text-muted-foreground.',
+      },
+    ],
+    byCategory: 'Procházet podle kategorií',
+  },
+};
diff --git a/website/src/i18n/messages/cs/taxonomy.ts b/website/src/i18n/messages/cs/taxonomy.ts
new file mode 100644
index 0000000..e732609
--- /dev/null
+++ b/website/src/i18n/messages/cs/taxonomy.ts
@@ -0,0 +1,415 @@
+import type { Interaction } from 'react-useanimations';
+import type { Messages } from '../en';
+
+/**
+ * How icons play, as a verb phrase after a count: the singular form goes with 1 and 5+ icons
+ * ("5 ikon se přehrává"), the plural with 2–4 icons and after "které" ("3 ikony se přehrávají").
+ */
+export const PLAY_FORMS: Record<Interaction, { singular: string; plural: string }> = {
+  loop: { singular: 'se přehrává ve smyčce', plural: 'se přehrávají ve smyčce' },
+  'click-toggle': {
+    singular: 'se kliknutím přepíná mezi dvěma stavy',
+    plural: 'se kliknutím přepínají mezi dvěma stavy',
+  },
+  'click-replay': {
+    singular: 'se přehraje při každém kliknutí',
+    plural: 'se přehrají při každém kliknutí',
+  },
+  hover: {
+    singular: 'se při najetí myší přehraje a při odjetí přehraje pozpátku',
+    plural: 'se při najetí myší přehrají a při odjetí přehrají pozpátku',
+  },
+  'hover-replay': {
+    singular: 'se při najetí myší jednou přehraje',
+    plural: 'se při najetí myší jednou přehrají',
+  },
+  'hover-loop': {
+    singular: 'se při najetí myší přehrává ve smyčce',
+    plural: 'se při najetí myší přehrávají ve smyčce',
+  },
+};
+
+export const taxonomy: Messages['taxonomy'] = {
+  categories: {
+    Alerts: {
+      name: 'Upozornění',
+      title: 'Animované ikony upozornění',
+      intro:
+        'Výstražné trojúhelníky, kroužky s vykřičníkem a značky stop, které pulzují tak akorát, aby si jich uživatel všiml, ale neblikají. Patří k chybnému poli formuláře, na začátek chybového banneru nebo do sloupce se stavem, kde se statická ikona snadno přehlédne.',
+      useCases: [
+        'Chyby validace pod poli formuláře',
+        'Chybové a varovné bannery v horní části stránky',
+        'Neúspěšné řádky v tabulce stavu deploye nebo úloh',
+        'Potvrzovací dialogy u nevratných akcí',
+        'Stavové stránky během výpadku',
+      ],
+    },
+    Notifications: {
+      name: 'Notifikace',
+      title: 'Animované ikony zvonků a notifikací',
+      intro:
+        'Zvonky, které zazvoní při nové aktivitě nebo se přepínají mezi zvonkem a přeškrtnutým zvonkem. Krátké zhoupnutí zvonku přitáhne pozornost k počtu nepřečtených zpráv a přepínací varianty zároveň poslouží jako ztlumení kanálu nebo vlákna.',
+      useCases: [
+        'Tlačítko centra notifikací v hlavičce aplikace',
+        'Odznak nepřečtených zpráv, který zazvoní, když přijde nová zpráva',
+        'Ztlumení a zrušení ztlumení kanálu nebo vlákna',
+        'Nastavení e-mailových a push notifikací',
+        'Tlačítka pro odběr připomínek a upozornění',
+      ],
+    },
+    Navigation: {
+      name: 'Navigace',
+      title: 'Animované navigační ikony a šipky',
+      intro:
+        'Hamburger menu, které se promění v tlačítko pro zavření, a šipky, chevrony i rohové šipky, které se při najetí myší posunou svým směrem. Je z nich hned jasné, kam ovládací prvek vede: otevřít panel, vrátit se zpět, rozbalit řádek, odejít z webu.',
+      useCases: [
+        'Hamburger menu, které se na mobilu změní v tlačítko pro zavření',
+        'Tlačítka předchozí a další v karuselech a stránkování',
+        'Chevrony v akordeonech a rozbalovacích nabídkách',
+        'Odkazy zpět nahoru a výzvy k posunu dolů',
+        'Odkazy pro přihlášení a odhlášení',
+        'Označení externích odkazů a přepínače postranního panelu',
+      ],
+    },
+    Action: {
+      name: 'Akce',
+      title: 'Animované ikony akcí',
+      intro:
+        'Slovesa rozhraní: uložit, smazat, stáhnout, obnovit, lajknout, přidat do záložek, hledat a nastavení. Každá ikona potvrdí kliknutí nebo hover, ke kterému patří: srdce se po lajknutí příspěvku vyplní a koši se před smazáním nadzvedne víko.',
+      useCases: [
+        'Tlačítka To se mi líbí, oblíbené a záložky na kartách',
+        'Tlačítka stáhnout, nahrát a uložit, která akci potvrdí',
+        'Zobrazení a skrytí hesla v přihlašovacím formuláři',
+        'Tlačítka obnovit a synchronizovat v dashboardech',
+        'Tlačítka smazat v tabulkách a seznamech souborů',
+        'Vyhledávací pole, které se změní v tlačítko pro vymazání',
+      ],
+    },
+    Content: {
+      name: 'Obsah',
+      title: 'Animované ikony souborů, složek a uživatelů',
+      intro:
+        'Soubory, složky, knihy, pošta, přílohy a lidé. Označují věci, se kterými uživatel pracuje, a díky variantám pro přidání, odebrání a zaškrtnutí působí správa seznamů a týmů živě.',
+      useCases: [
+        'Správci souborů a seznamy dokumentů',
+        'Tlačítka pro přílohy a kopírování do schránky',
+        'Doručená pošta a archiv v e-mailových klientech',
+        'Seznamy členů týmu s akcemi pro přidání a odebrání uživatele',
+        'Nabídky sdílení dokumentů a odkazů',
+      ],
+    },
+    Form: {
+      name: 'Formuláře',
+      title: 'Animované ikony formulářových prvků',
+      intro:
+        'Zaškrtávací políčko, přepínač (radio button) a vypínač, které animují přechod mezi zaškrtnutým a nezaškrtnutým stavem. Hodí se tam, kde obyčejný input působí ploše, třeba v onboardingových checklistech a v nastavení, a stav je přitom pořád čitelný na první pohled.',
+      useCases: [
+        'Vypínače funkcí a předvoleb v nastavení',
+        'Onboardingové checklisty a seznamy úkolů',
+        'Výběr jedné možnosti v dotaznících a při volbě tarifu',
+        'Zaškrtávací políčka pro souhlas s podmínkami',
+      ],
+    },
+    Media: {
+      name: 'Média',
+      title: 'Animované ikony přehrávače médií',
+      intro:
+        'Přehrát a pozastavit, hlasitost, mikrofon, kamera, přeskočení a náhodné pořadí pro audio a video přehrávače. Přepínací ikony střídají své dva stavy, přehrát a pauza nebo mikrofon a ztlumení, takže tlačítko vždy ukazuje, co kliknutí udělá.',
+      useCases: [
+        'Tlačítka přehrát a pozastavit v audio a video přehrávačích',
+        'Ztlumení a zrušení ztlumení ve videohovorech',
+        'Zapnutí a vypnutí kamery v aplikacích pro schůzky',
+        'Ovládání playlistu: přeskočit, opakovat a náhodně',
+        'Tlačítka pro casting a AirPlay',
+        'Ovládání v podcastových a hudebních aplikacích',
+      ],
+    },
+    'Text editing': {
+      name: 'Úpravy textu',
+      title: 'Animované ikony pro úpravy textu',
+      intro:
+        'Tučné písmo, kurzíva, podtržení, zarovnání a seznamy pro panely nástrojů editorů formátovaného textu. Krátká animace po kliknutí potvrdí, že se formátování použilo, což pomáhá v editorech, kde je změna samotného textu nenápadná.',
+      useCases: [
+        'Panely nástrojů editorů formátovaného textu',
+        'Pole pro psaní komentářů a zpráv',
+        'Editory v CMS a blogovacích systémech',
+        'Aplikace pro Markdown a poznámky',
+        'Ovládání zarovnání textu v grafických nástrojích',
+      ],
+    },
+    Communication: {
+      name: 'Komunikace',
+      title: 'Animované ikony komunikace',
+      intro:
+        'Telefony, chatovací bubliny, tlačítka pro odeslání, hlasová schránka a RSS. Ikony hovorů pokrývají příchozí, odchozí, zmeškané a přesměrované hovory, které výpis hovorů potřebuje, a ikona odeslání zprávu po kliknutí krátce „vypustí“.',
+      useCases: [
+        'Tlačítko odeslat v chatu a formulářích komentářů',
+        'Výpisy příchozích, odchozích a zmeškaných hovorů',
+        'Tlačítka pro kontakt a podporu',
+        'Spouštěče chatovacích widgetů',
+        'Zmínky a pole pro e-mailovou adresu',
+      ],
+    },
+    Devices: {
+      name: 'Zařízení',
+      title: 'Animované ikony zařízení',
+      intro:
+        'Telefony, tablety, monitory, hodinky a tiskárny a k nim indikátory připojení: wifi, Bluetooth a baterie. Hodí se do výběru zařízení, přepínačů náhledu responzivního zobrazení a stavu připojení.',
+      useCases: [
+        'Přepínače náhledu pro mobil, tablet a desktop',
+        'Stav připojení wifi a Bluetooth',
+        'Indikátory baterie a nabíjení',
+        'Seznamy zařízení v nastavení zabezpečení účtu',
+        'Tlačítka pro tisk faktur a reportů',
+      ],
+    },
+    Weather: {
+      name: 'Počasí',
+      title: 'Animované ikony počasí',
+      intro:
+        'Slunce, měsíc, mraky, déšť, sníh, blesky a vítr pro předpovědi a všechno, co se řídí denní dobou. Slunce a měsíc navíc přirozeně poslouží jako přepínač světlého a tmavého režimu.',
+      useCases: [
+        'Widgety a karty s předpovědí počasí',
+        'Přepínače světlého a tmavého motivu',
+        'Časy východu a západu slunce v cestovních aplikacích',
+        'Teploty na dashboardech chytré domácnosti',
+        'Indikátory energie a napájení',
+      ],
+    },
+    'Maps & location': {
+      name: 'Mapy a poloha',
+      title: 'Animované ikony map a polohy',
+      intro:
+        'Špendlíky na mapě, navigační šipky, glóby, terče a kotvy. Špendlík, který při najetí myší dopadne na místo, zvýrazní vyhledávač poboček nebo doručovací adresu a glóbus funguje jako přepínač jazyka nebo regionu.',
+      useCases: [
+        'Vyhledávače poboček a pole pro adresu',
+        'Tlačítka aktuální polohy a navigace',
+        'Výběr jazyka a regionu',
+        'Doručení a sledování objednávek',
+        'Cestovní a rezervační aplikace',
+      ],
+    },
+    Commerce: {
+      name: 'E-commerce',
+      title: 'Animované ikony pro e-shopy',
+      intro:
+        'Nákupní košíky, tašky, cenovky, dárky, platební karty a dodávky pro e-shopy. Animace přidání do košíku potvrdí kliknutí i bez toast notifikace a ikony dodávky a balíku dodají stavu objednávky trochu života.',
+      useCases: [
+        'Tlačítka Přidat do košíku na kartách produktů',
+        'Tlačítka košíku a tašky v hlavičce e-shopu',
+        'Pokladna a výběr platební metody',
+        'Štítky slev, kupónů a výprodejů',
+        'Kroky doručení a sledování objednávky',
+        'Dárkové karty a možnosti dárkového balení',
+      ],
+    },
+    Charts: {
+      name: 'Grafy',
+      title: 'Animované ikony grafů',
+      intro:
+        'Sloupcové grafy, koláčový graf a trendové šipky pro analytiku a reporty. Ikony rostoucího a klesajícího trendu ukážou na první pohled, jestli metrika stoupla, nebo klesla, což se hodí do KPI karet a přehledů změn v číslech.',
+      useCases: [
+        'KPI karty s rostoucími nebo klesajícími metrikami',
+        'Položky navigace pro analytiku a reporty',
+        'Prázdné stavy dashboardů',
+        'Přehledy financí a portfolia',
+      ],
+    },
+    Development: {
+      name: 'Vývoj',
+      title: 'Animované ikony pro vývojáře',
+      intro:
+        'Závorky kódu, terminál, větve v Gitu, commity, merge a pull requesty a k tomu servery a databáze. Vytvořené pro vývojářské nástroje, dokumentace a stavové stránky, kde jsou pojmy z Gitu a infrastruktury součástí rozhraní.',
+      useCases: [
+        'Stav pull requestů, merge a větví ve vývojářských nástrojích',
+        'Tlačítka pro úryvky kódu a embed v dokumentaci',
+        'Sekce o terminálu a CLI na landing pages',
+        'Stav serverů a databází na stavových stránkách',
+        'Nápovědy klávesových zkratek s klávesou Command',
+      ],
+    },
+    'Design & layout': {
+      name: 'Design a layout',
+      title: 'Animované ikony designu a layoutu',
+      intro:
+        'Mřížky, sloupce, vrstvy, oříznutí, pero a kurzor pro editory a page buildery. Patří do panelů nástrojů, kde uživatel skládá obsah, přepíná mezi zobrazením mřížky a tabulky nebo vybírá kreslicí nástroj.',
+      useCases: [
+        'Přepínače zobrazení mřížky, seznamu a tabulky',
+        'Panely vrstev v grafických a prezentačních nástrojích',
+        'Nástroje oříznutí a výřezu v editorech obrázků',
+        'Page buildery a výběr rozvržení',
+        'Úchyty pro přesouvání tažením',
+      ],
+    },
+    'Shapes & math': {
+      name: 'Tvary a matematika',
+      title: 'Animované ikony tvarů a matematických znaků',
+      intro:
+        'Kruhy, čtverce, trojúhelníky, šestiúhelníky, osmiúhelník a znaky dělení. Použijte je jako nástroje tvarů v kreslicích aplikacích, jako operátory kalkulačky nebo jako neutrální značky v diagramech a krocích onboardingu.',
+      useCases: [
+        'Nástroje tvarů v aplikacích pro whiteboard a kreslení',
+        'Operátory v kalkulačkách a editorech vzorců',
+        'Odrážky a značky kroků v diagramech',
+        'Rozhraní kvízů a her',
+      ],
+    },
+    Loading: {
+      name: 'Načítání',
+      title: 'Animované ikony načítání',
+      intro:
+        'Spinnery a loadery, které běží ve smyčce, dokud něco probíhá. Dejte je do odesílacího tlačítka, dokud čekáte na odpověď požadavku, místo obsahu, který se ještě načítá, nebo na celoobrazovkovou úvodní obrazovku. Když uživatel preferuje omezený pohyb, zůstanou v klidu.',
+      useCases: [
+        'Odesílací tlačítka čekající na odpověď požadavku',
+        'Zástupný obsah, dokud se načítá seznam nebo graf',
+        'Indikátory nekonečného scrollování a načtení dalších položek',
+        'Celoobrazovkové úvodní obrazovky a přechody mezi stránkami',
+        'Průběh nahrávání a zpracování souborů',
+      ],
+    },
+    'Social media': {
+      name: 'Sociální sítě',
+      title: 'Animované ikony sociálních sítí',
+      intro:
+        'Ikony značek sociálních sítí a nástrojů, na kterých vývojáři a designéři sdílejí svou práci: X, Instagram, YouTube, Discord, Telegram, Figma a další. Při najetí myší se animují, takže odkazy v patičce a v profilech působí jasně klikatelně.',
+      useCases: [
+        'Odkazy na sociální sítě v patičce webu',
+        'Tlačítka pro sdílení u článků na blogu',
+        'Odkazy na profily autorů a členů týmu',
+        'Pozvánky do komunit na chatovacích serverech',
+        'Přihlášení přes sociální síť nebo vývojářský účet',
+      ],
+    },
+    Other: {
+      name: 'Ostatní',
+      title: 'Další animované ikony',
+      intro:
+        'Ikony, které nepatří do žádné větší skupiny: smajlíci pro zpětnou vazbu, šálek kávy, hodiny, křivka pulzu a výzva k posunu dolů. Ikona posunu dolů je v úvodní sekci webu (hero) běžnou nápovědou, že pod ní je další obsah.',
+      useCases: [
+        'Výzvy k posunu dolů ve spodní části úvodní sekce',
+        'Veselé, neutrální a smutné obličeje ve widgetech zpětné vazby',
+        'Indikátory aktivity a dostupnosti',
+        'Otevírací doba a výběr času',
+        'Odkazy Buy Me a Coffee a na podporu projektu',
+      ],
+    },
+  },
+  interactions: {
+    loop: {
+      label: 'Smyčka',
+      title: 'Animované ikony ve smyčce',
+      intro:
+        'Tyto ikony se přehrávají nepřetržitě, dokud jsou na obrazovce, takže se hodí pro stavy, které trvají: něco se načítá, platí varování, terminál čeká. Když uživatel preferuje omezený pohyb, zastaví se na prvním snímku a fungují jako běžná statická ikona.',
+      useCases: [
+        'Spinnery načítání a indikátory průběhu',
+        'Aktivní varování a chybové stavy',
+        'Indikátory živého vysílání a nahrávání',
+        'Výzvy k posunu dolů v úvodních sekcích',
+        'Upoutání pozornosti na nové notifikace',
+      ],
+      example:
+        'Ikony ve smyčce obvykle slouží jako spinnery načítání, aktivní upozornění, zvonící zvonek nebo nápověda k posunu dolů.',
+      description:
+        'Přehrává se nepřetržitě; když uživatel preferuje omezený pohyb, zůstane na statickém prvním snímku.',
+      reducedMotion:
+        'Když uživatel preferuje omezený pohyb, ikona se automaticky nespustí a zůstane na statickém prvním snímku.',
+      plays: PLAY_FORMS.loop.plural,
+    },
+    'click-toggle': {
+      label: 'Přepínání kliknutím',
+      title: 'Animované ikony přepínané kliknutím',
+      intro:
+        'Každé kliknutí ikonu animuje do druhého stavu, ve kterém zůstane, takže tvoří vizuální polovinu ovládacího prvku zapnuto/vypnuto. Ikona vždy ukazuje aktuální stav: doplňte k ní aria-pressed nebo atribut checked a tlačítko bude srozumitelné samo o sobě.',
+      useCases: [
+        'Tlačítka pro ztlumení a zrušení ztlumení',
+        'Pole hesla se zobrazením a skrytím',
+        'Hamburger menu a tlačítka pro zavření',
+        'Ovládání přehrát a pozastavit',
+        'Přepínače To se mi líbí, hvězdičky a záložek',
+        'Zaškrtávací políčka, přepínače (radio) a vypínače',
+      ],
+      example:
+        'Ikony přepínané kliknutím obvykle ovládají ztlumení, zobrazení a skrytí hesla, otevření a zavření menu, přehrávání a pauzu nebo tlačítka To se mi líbí.',
+      description:
+        'Kliknutím se přepíná mezi dvěma stavy; když uživatel preferuje omezený pohyb, přepne se okamžitě.',
+      reducedMotion:
+        'Když uživatel preferuje omezený pohyb, kliknutí přepne do druhého stavu okamžitě, bez animace mezi nimi.',
+      plays: PLAY_FORMS['click-toggle'].plural,
+    },
+    'click-replay': {
+      label: 'Přehrání kliknutím',
+      title: 'Animované ikony na kliknutí',
+      intro:
+        'Tyto ikony se po každém kliknutí jednou přehrají od začátku a nenápadně tak potvrdí, že akce proběhla. Hodí se pro jednorázové akce, po kterých nezůstává žádný stav: odeslat, uložit, obnovit, stáhnout, vytisknout nebo smazat.',
+      useCases: [
+        'Tlačítka odeslat v chatu a formulářích komentářů',
+        'Tlačítka uložit, stáhnout a nahrát',
+        'Tlačítka obnovit a otočit',
+        'Tlačítka Přidat do košíku',
+        'Tlačítka formátování textu v editorech',
+      ],
+      example:
+        'Ikony na kliknutí obvykle potvrzují odeslání, uložení, obnovení, stažení, přidání do košíku a formátování textu.',
+      description:
+        'Při každém kliknutí se jednou přehraje od začátku, pokud uživatel nepreferuje omezený pohyb.',
+      reducedMotion:
+        'Když uživatel preferuje omezený pohyb, kliknutí se k vašemu handleru dostanou dál, ale animace se nepřehraje.',
+      plays: PLAY_FORMS['click-replay'].plural,
+    },
+    hover: {
+      label: 'Hover',
+      title: 'Animované ikony reagující na hover',
+      intro:
+        'Tyto ikony se při najetí myší přehrají dopředu a při odjetí pozpátku, takže pohyb sleduje kurzor a nikdy neskončí v půlce. Hodí se pro položky navigace a tlačítka, která naznačují, co otevírají: koši se nadzvedne víko, ozubené kolo nastavení se pootočí, složka se otevře.',
+      useCases: [
+        'Položky postranního panelu a navigačního menu',
+        'Tlačítka smazat, která nadzvednou víko ještě před kliknutím',
+        'Odkazy na nastavení a profil',
+        'Ovládání přiblížení a oddálení',
+        'Odkazy na sociální sítě v patičce',
+      ],
+      example:
+        'Ikony reagující na hover obvykle označují položky navigace, tlačítka smazat, nastavení, ovládání přiblížení a odkazy na sociální sítě.',
+      description:
+        'Při najetí myší (mouseenter) se přehraje dopředu, při odjetí (mouseleave) pozpátku.',
+      reducedMotion: 'Když uživatel preferuje omezený pohyb, najetí myší animaci nespustí.',
+      plays: PLAY_FORMS.hover.plural,
+    },
+    'hover-replay': {
+      label: 'Přehrání při hoveru',
+      title: 'Animované ikony s přehráním při hoveru',
+      intro:
+        'Tyto ikony se při najetí myší jednou přehrají a doběhnou samy, takže rychlé přejetí přes panel nástrojů nezpůsobí roztěkaný pohyb. Takhle funguje většina sady: šipky, soubory, zařízení, počasí a ikony značek, které při hoveru ožijí.',
+      useCases: [
+        'Seznamy funkcí a ceníky',
+        'Odkazy se šipkou a tlačítka s výzvou k akci',
+        'Tlačítka panelů nástrojů v editorech a dashboardech',
+        'Karty v mřížce na landing page',
+        'Odkazy v patičce a kontakty',
+      ],
+      example:
+        'Ikony s přehráním při hoveru obvykle oživí odkazy se šipkou, seznamy funkcí, tlačítka panelů nástrojů a karty na landing page.',
+      description:
+        'Při najetí myší (mouseenter) se jednou přehraje, pokud uživatel nepreferuje omezený pohyb. Odjetí myši ji nezastaví a nové najetí během přehrávání ji nespustí znovu.',
+      reducedMotion: 'Když uživatel preferuje omezený pohyb, najetí myší animaci nespustí.',
+      plays: PLAY_FORMS['hover-replay'].plural,
+    },
+    'hover-loop': {
+      label: 'Smyčka při hoveru',
+      title: 'Animované ikony se smyčkou při hoveru',
+      intro:
+        'Tyto ikony běží ve smyčce, dokud na nich zůstává kurzor, a po jeho odjetí dokončí rozběhnutý cyklus, takže se nikdy nezastaví uprostřed pohybu. Hodí se pro odkazy, které zvou k delšímu pohledu, hlavně ikony sociálních sítí a komunit.',
+      useCases: [
+        'Odkazy na sociální sítě v hlavičce a patičce',
+        'Pozvánky do komunit a chatů',
+        'Odkazy na portfolio a profil',
+        'Výběr jazyka a regionu',
+      ],
+      example:
+        'Ikony se smyčkou při hoveru obvykle označují odkazy na sociální sítě, pozvánky do komunit, odkazy na portfolio a výběr jazyka.',
+      description:
+        'Při hoveru běží ve smyčce, po odjetí myši (mouseleave) dokončí aktuální cyklus a při preferenci omezeného pohybu zůstane statická.',
+      reducedMotion: 'Když uživatel preferuje omezený pohyb, ikona při hoveru zůstane statická.',
+      plays: PLAY_FORMS['hover-loop'].plural,
+    },
+  },
+};
diff --git a/website/src/i18n/messages/de/common.ts b/website/src/i18n/messages/de/common.ts
new file mode 100644
index 0000000..d9c486b
--- /dev/null
+++ b/website/src/i18n/messages/de/common.ts
@@ -0,0 +1,46 @@
+import type { Messages } from '../en';
+
+export const common: Messages['common'] = {
+  skipToContent: 'Zum Inhalt springen',
+  ogImageAlt: 'useAnimations: kostenlose animierte Icons für React, shadcn/ui, Lottie und SVG',
+  homeLabel: 'useAnimations Startseite',
+  mainNav: 'Hauptnavigation',
+  browseIcons: 'Icons ansehen',
+  nav: {
+    icons: 'Icons',
+    categories: 'Kategorien',
+    documentation: 'Dokumentation',
+    shadcn: 'shadcn',
+    lottie: 'Lottie-Icons',
+    license: 'Lizenz',
+  },
+  footer: {
+    tagline:
+      'Kostenlose animierte Icons mit eingebauten Interaktionen. MIT-lizenziert, gemacht für React.',
+    product: 'Produkt',
+    developers: 'Entwickler',
+    follow: 'Folgen',
+    languages: 'Sprachen',
+    allIcons: 'Alle Icons',
+    categories: 'Kategorien',
+    interactions: 'Interaktionen',
+    lottieIcons: 'Lottie-Icons',
+    shadcnIcons: 'shadcn/ui-Icons',
+    documentation: 'Dokumentation',
+    licencing: 'Lizenz & Nutzungsbedingungen',
+    shadcnRegistry: 'shadcn-Registry',
+    mitLicense: 'MIT-Lizenz',
+    builtWith: 'Website erstellt mit Astro',
+  },
+  breadcrumb: 'Brotkrumennavigation',
+  crumbs: { icons: 'Icons', categories: 'Kategorien', interactions: 'Interaktionen' },
+  faq: 'Häufige Fragen',
+  copy: 'Kopieren',
+  copied: 'Kopiert',
+  pressCtrlC: 'Strg+C drücken',
+  languageBanner: {
+    text: 'Diese Seite gibt es auch auf Deutsch.',
+    action: 'Auf Deutsch lesen',
+    dismiss: 'Schließen',
+  },
+};
diff --git a/website/src/i18n/messages/de/docs.ts b/website/src/i18n/messages/de/docs.ts
new file mode 100644
index 0000000..ad7d010
--- /dev/null
+++ b/website/src/i18n/messages/de/docs.ts
@@ -0,0 +1,35 @@
+import type { Messages } from '../en';
+
+export const docs: Messages['docs'] = {
+  title: 'Dokumentation — useAnimations',
+  description: (iconCount: number) =>
+    `So nutzen Sie ${iconCount} animierte Icons in React und shadcn/ui: Interaktionen, Props, Farben, Dateien und Barrierefreiheit.`,
+  badge: 'Dokumentation',
+  onThisPage: 'Auf dieser Seite',
+  viewAsMarkdown: 'Als Markdown ansehen',
+  headline: 'useAnimations-Dokumentation',
+  summary: 'So nutzen Sie die animierten Icons von useAnimations in React und shadcn/ui.',
+  crumb: 'Dokumentation',
+  faq: [
+    {
+      question: 'Ist useAnimations für kommerzielle Projekte kostenlos?',
+      answer:
+        'Ja. Die Icons und das React-Paket stehen unter der MIT-Lizenz, eine Namensnennung ist nicht erforderlich.',
+    },
+    {
+      question: 'Wie verwende ich die useAnimations-Icons in React?',
+      answer:
+        'Installieren Sie react-useanimations, importieren Sie UseAnimations und ein Icon (z. B. react-useanimations/lib/checkmark) und rendern Sie <UseAnimations animation={checkmark} size={32} />.',
+    },
+    {
+      question: 'Wie ändere ich die Farbe eines Icons?',
+      answer:
+        'Icons übernehmen die Textfarbe. Ändern lässt sie sich mit strokeColor und fillColor, mit der CSS-Eigenschaft color oder über Styles für die Pfade.',
+    },
+    {
+      question: 'Funktioniert es auch ohne React?',
+      answer:
+        'Das Paket ist für React gedacht. Jedes Icon gibt es aber auch als Standard-Lottie-JSON, das jeder Lottie-Player abspielen kann (lottie-web, dotLottie, lottie-react-native, lottie-ios, lottie-android, Flutter), und als statisches SVG. Mehr dazu unter „Ohne React verwenden“ und auf useanimations.com/lottie-icons.',
+    },
+  ],
+};
diff --git a/website/src/i18n/messages/de/home.ts b/website/src/i18n/messages/de/home.ts
new file mode 100644
index 0000000..4040078
--- /dev/null
+++ b/website/src/i18n/messages/de/home.ts
@@ -0,0 +1,171 @@
+import type { Messages } from '../en';
+import type { FaqLinks, HomeFaq } from '../en/home';
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const home: Messages['home'] = {
+  title: 'Animierte Icons & Mikroanimationen — useAnimations',
+  description: (count: number) =>
+    `${count} kostenlose Mikroanimationen für UIs: animierte Icons für React, shadcn/ui und Lottie mit eingebautem Hover, Klick und Loop. MIT-Lizenz.`,
+
+  hero: {
+    badge: (count: number) => `${count} Icons · keine Abhängigkeiten · MIT`,
+    headline: { start: 'Icons, die ', accent: 'lebendig werden.', end: '' },
+    h1: 'Kostenlose animierte Icons für React, shadcn/ui und Lottie',
+    intro: (count: number) =>
+      `${count} handgemachte Mikroanimationen mit eingebauten Mikrointeraktionen für Hover, Klick und Loop. Nutzen Sie sie als React-Komponente, fügen Sie sie mit shadcn hinzu oder laden Sie SVG und Lottie JSON herunter. MIT-lizenziert.`,
+    browse: 'Icons ansehen',
+    fieldHint: 'Bewegen Sie den Mauszeiger über das Feld.',
+  },
+
+  numbers: {
+    label: 'Auf einen Blick',
+    icons: 'animierte Icons',
+    interactions: 'eingebaute Interaktionen',
+    size: 'Player, gzip-komprimiert',
+    dependencies: 'Abhängigkeiten',
+  },
+
+  interactions: {
+    eyebrow: 'Interaktionen inklusive',
+    title: 'Jedes Icon weiß, wie es sich bewegt.',
+    intro:
+      'Jedes Icon kommt mit der Interaktion, für die es gestaltet wurde. Einfach einbauen, und es funktioniert – oder mit einem einzigen Prop eine andere wählen. Probieren Sie es aus:',
+    demos: {
+      loop: 'Läuft ununterbrochen, für Loader und dezente Statusanzeigen.',
+      'click-toggle': 'Wechselt zwischen zwei Zuständen: Menü und Schließen, Play und Pause.',
+      'click-replay': 'Spielt bei jedem Klick von vorn ab, als Feedback.',
+      hover: 'Spielt beim Betreten vorwärts und beim Verlassen rückwärts.',
+      'hover-loop': 'Läuft bei Hover in Schleife und beendet beim Verlassen den Durchlauf.',
+      'hover-replay': 'Spielt bei jedem Betreten einmal von vorn ab.',
+    },
+  },
+
+  browser: {
+    eyebrow: 'Die Bibliothek',
+    title: (count: number) => `${count} kostenlose animierte Icons`,
+    intro:
+      'Hover oder Klick startet die Animation. Ein Klick auf ein Icon öffnet Code und Downloads – Lottie JSON, SVG und ZIP.',
+    search: 'Icons durchsuchen',
+    searchPlaceholder: (count: number) =>
+      `${count} Icons durchsuchen – z. B. „eye“, „bell“ oder „arrow“`,
+    interaction: 'Interaktion',
+    allInteractions: 'Alle Interaktionen',
+    color: 'Icon-Farbe',
+    colors: {
+      text: 'Textfarbe',
+      indigo: 'Indigo',
+      red: 'Rot',
+      amber: 'Bernstein',
+      teal: 'Petrol',
+      violet: 'Violett',
+    },
+    customColor: 'Eigene Farbe',
+    size: 'Größe',
+    category: 'Kategorie',
+    all: 'Alle',
+    count: { one: '{n} Icon', other: '{n} Icons' },
+    noMatch: 'Keine passenden Icons.',
+    noMatchHintHtml: (href: string) =>
+      `Versuchen Sie ein anderes Wort oder ${link(href, 'schlagen Sie ein Icon vor')}.`,
+  },
+
+  everywhere: {
+    eyebrow: 'Ganz nach Ihrem Workflow',
+    title: 'Installieren, importieren, fertig.',
+    intro:
+      'Eine React-Komponente ohne Abhängigkeiten, eine shadcn-Registry, Dateien zum Herunterladen unter stabilen URLs und ein Katalog, den KI-Agenten lesen können.',
+    docs: 'Zur Dokumentation →',
+    tablist: 'Plattform',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Dateien', agents: 'Agenten' },
+    codeText: {
+      afterAdding: 'danach',
+      files: 'Jedes Icon als SVG, als Animation (Lottie JSON) und als ZIP mit beidem',
+    },
+  },
+
+  features: {
+    title: 'Klein, barrierefrei und frei gestaltbar.',
+    colors: 'Übernimmt Ihre Farben',
+    colorsHtml: `Icons nutzen ${code('currentColor')}: Textfarbe, Hover-Zustände und Dark Mode übernehmen sie von selbst. Überschreiben lässt sich das per Prop, Klasse oder ganz normalem CSS.`,
+    tiny: 'Bewusst klein',
+    tinyText:
+      'Ein eingebauter Player, keine Abhängigkeiten. Jedes Icon ist ein eigenes Modul mit 2 kB.',
+    accessible: 'Von Haus aus barrierefrei',
+    accessibleText:
+      'Berücksichtigt reduzierte Bewegung, spielt Hover-Animationen auch bei Tastaturfokus ab und bleibt für Screenreader unsichtbar, solange Sie kein Label vergeben.',
+    ssr: 'Bereit für Server-Rendering',
+    ssrText:
+      'Eine Client-Komponente, die in Next.js, Remix und Astro problemlos rendert. Icons sind reine Daten, die Sie überall importieren können.',
+    agents: 'Gemacht für Agenten',
+    agentsHtml: (iconsJson: string, llmsTxt: string) =>
+      `Ein typisierter Katalog mit Keywords für jedes Icon, ${link(iconsJson, 'icons.json')}, ${link(llmsTxt, 'llms.txt')} und Dokumentation in Markdown.`,
+  },
+
+  browse: {
+    title: 'Die passende Mikroanimation finden.',
+    byCategory: 'Nach Kategorie stöbern',
+    byInteraction: 'Nach Interaktion stöbern',
+    formats: 'Alle Icons und Formate',
+  },
+
+  hubs: {
+    icons: 'Alle animierten Icons',
+    categories: 'Icon-Kategorien',
+    interactions: 'Icons nach Interaktion',
+    lottie: 'Lottie-Icons (JSON)',
+    shadcn: 'Animierte Icons für shadcn/ui',
+  },
+
+  faqTitle: 'Häufige Fragen',
+  faq: (f: { version: string; links: FaqLinks }): HomeFaq => [
+    {
+      question: 'Was sind Mikroanimationen und animierte Icons?',
+      answer:
+        'Mikroanimationen sind kurze Bewegungen mit genau einem Zweck, die auf eine Aktion des Nutzers antworten: ein Menü-Icon, das zum Schließen-Button wird, ein Herz, das sich beim Liken eines Beitrags füllt, eine Glocke, die bei einer neuen Benachrichtigung läutet. Animierte Icons sind die häufigste Form davon. Sie lassen eine Oberfläche reaktionsschnell wirken und zeigen Zustandswechsel ohne zusätzlichen Text.',
+    },
+    {
+      question: 'Was ist der Unterschied zwischen den Lottie- und den SVG-Dateien?',
+      answer:
+        'Die Lottie-JSON-Datei enthält die komplette Animation und läuft in jedem Lottie-Player, auch in dem, der in react-useanimations eingebaut ist. Die SVG-Dateien sind Standbilder des Icons im Ruhezustand, eines pro Zustand (zum Beispiel eye und eye-off), für Stellen, an denen sich nichts bewegen soll: E-Mails, Dokumente, Design-Tools oder ein Fallback ohne JavaScript.',
+    },
+    {
+      question: 'Funktioniert das mit Next.js und Server-Rendering?',
+      answer:
+        "Ja. Die Komponente ist mit 'use client' markiert und zeichnet die Animation nur im Browser. Sie rendert daher aus Server Components und SSR-Frameworks wie Next.js, Remix und Astro, ganz ohne dynamische Imports. Icon-Module sind reine Daten, die Server Components importieren und als Props weitergeben können.",
+      link: { href: f.links.serverRendering, label: 'Next.js und Server-Rendering' },
+    },
+    {
+      question: 'Darf ich die Icons in kommerziellen Projekten verwenden?',
+      answer:
+        'Ja. Die Icons und das Paket react-useanimations stehen unter der MIT-Lizenz: Sie dürfen sie in privaten und kommerziellen Projekten nutzen, verändern und weitergeben. Eine Namensnennung freut uns, ist aber nicht erforderlich.',
+      link: { href: f.links.licence, label: 'Lizenz & Nutzungsbedingungen' },
+    },
+    {
+      question: 'Kann ich die Icons ohne React verwenden?',
+      answer:
+        'Ja. Jedes Icon ist eine Standard-Lottie-JSON-Datei und läuft daher mit lottie-web in reinem JavaScript, in Vue, Svelte, Angular oder einem CMS sowie in Lottie-Playern für iOS, Android und Flutter. Auf der Seite zu den Lottie-Icons finden Sie die Datei-URLs und fertige lottie-web-Snippets für jede Interaktion.',
+      link: { href: f.links.lottie, label: 'Lottie-Icons' },
+    },
+    {
+      question: 'Wie viel bringen die Icons zusätzlich ins Bundle?',
+      answer: `Der Player in react-useanimations ${f.version} ist gzip-komprimiert etwa 8 kB groß und hat keine Abhängigkeiten. Jedes Icon ist ein eigenes Modul mit 1 bis 15 kB (Median 2 kB), im Bundle landen also nur die Icons, die Sie importieren.`,
+    },
+  ],
+
+  cta: {
+    title: { start: 'Bringen Sie Ihr Interface ', accent: 'in Bewegung.', end: '' },
+    text: 'Kostenlos und MIT-lizenziert, für private und kommerzielle Projekte.',
+    start: 'Jetzt loslegen',
+  },
+
+  schema: {
+    software: (count: number) =>
+      `React-Komponente und ${count} animierte Icons (Lottie) mit eingebauten Interaktionen für Hover, Klick und Loop. Keine Abhängigkeiten.`,
+    catalogName: 'useAnimations-Icon-Katalog',
+    catalog: (count: number) =>
+      `Alle ${count} useAnimations-Icons mit ID, Titel, Kategorie, Keywords, Interaktion, URLs für Lottie JSON, SVG und ZIP, React-Import und shadcn-Befehl.`,
+  },
+};
diff --git a/website/src/i18n/messages/de/hubs.ts b/website/src/i18n/messages/de/hubs.ts
new file mode 100644
index 0000000..65a07c0
--- /dev/null
+++ b/website/src/i18n/messages/de/hubs.ts
@@ -0,0 +1,202 @@
+import type { Interaction } from 'react-useanimations';
+import type { Messages } from '../en';
+import type { CategoryFacts, Faq, InteractionFacts } from '../en/hubs';
+import { formIn, listIn, pluralIn } from '../../format';
+
+const list = listIn('de');
+const plural = pluralIn('de');
+const form = formIn('de');
+
+const icons = (n: number) => plural(n, { one: 'Icon', other: 'Icons' });
+
+/** Up to `max` titles, then 'und N weitere'. */
+const titles = (items: string[], max = 12) =>
+  items.length > max
+    ? `${items.slice(0, max).join(', ')} und ${items.length - max} weitere`
+    : list(items);
+
+/** How a group of icons plays, as the verb phrase after its count: "5 laufen in Endlosschleife". */
+const PLAYS: Record<Interaction, { one: string; other: string }> = {
+  loop: { one: 'läuft in Endlosschleife', other: 'laufen in Endlosschleife' },
+  'click-toggle': {
+    one: 'wechselt per Klick zwischen zwei Zuständen',
+    other: 'wechseln per Klick zwischen zwei Zuständen',
+  },
+  'click-replay': {
+    one: 'spielt bei jedem Klick erneut ab',
+    other: 'spielen bei jedem Klick erneut ab',
+  },
+  hover: {
+    one: 'spielt bei Hover vorwärts und beim Verlassen rückwärts',
+    other: 'spielen bei Hover vorwärts und beim Verlassen rückwärts',
+  },
+  'hover-replay': { one: 'spielt bei Hover einmal ab', other: 'spielen bei Hover einmal ab' },
+  'hover-loop': {
+    one: 'läuft in Schleife, solange der Mauszeiger darauf liegt',
+    other: 'laufen in Schleife, solange der Mauszeiger darauf liegt',
+  },
+};
+
+/** The same, as the end of a relative clause: "Icons, die in Endlosschleife laufen". */
+const PLAYS_RELATIVE: Record<Interaction, string> = {
+  loop: 'in Endlosschleife laufen',
+  'click-toggle': 'per Klick zwischen zwei Zuständen wechseln',
+  'click-replay': 'bei jedem Klick erneut abspielen',
+  hover: 'bei Hover vorwärts und beim Verlassen rückwärts spielen',
+  'hover-replay': 'bei Hover einmal abspielen',
+  'hover-loop': 'in Schleife laufen, solange der Mauszeiger darauf liegt',
+};
+
+/** Static SVG note after the list of formats. */
+const svgNote = (f: CategoryFacts) => {
+  if (f.withSvg === f.count) return ', außerdem als statisches SVG';
+  return f.withSvg ? `, ${f.withSvg} davon zusätzlich als statisches SVG` : '';
+};
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const hubs: Messages['hubs'] = {
+  titleSuffix: ' — useAnimations',
+  iconCount: icons,
+
+  category: {
+    titles: (f: CategoryFacts) => [
+      `${f.title} für React & Lottie`,
+      `${f.title} für React`,
+      f.title,
+    ],
+    descriptions: (f: CategoryFacts) => {
+      const examples = list(f.titles.slice(0, 3));
+      return [
+        `${f.title}: ${f.count} kostenlose Icons mit Hover-, Klick- und Loop-Animation, darunter ${examples}. Für React, shadcn/ui und Lottie JSON, MIT-Lizenz.`,
+        `${f.title}: ${f.count} kostenlose Icons, darunter ${examples}. Für React, shadcn/ui und Lottie JSON, MIT-Lizenz.`,
+        `${f.title}: ${f.count} kostenlose Icons, darunter ${examples}. Für React, shadcn/ui und Lottie, MIT.`,
+        `${f.title}: ${f.count} kostenlose Icons für React, shadcn/ui und Lottie JSON, MIT-Lizenz.`,
+      ];
+    },
+    summary: (f: CategoryFacts) => {
+      const first =
+        f.groups.length === 1
+          ? f.count === 1
+            ? `Das Icon ${PLAYS[f.groups[0].interaction].one}.`
+            : `Alle ${f.count} Icons ${PLAYS[f.groups[0].interaction].other}.`
+          : `Die ${f.count} Icons verteilen sich so: ${list(
+              f.groups.map(
+                ({ interaction, count }) => `${count} ${form(count, PLAYS[interaction])}`
+              )
+            )}.`;
+      return `${first} Jedes Icon gibt es als React-Komponente, als shadcn/ui-Komponente und als Lottie-JSON-Animation${svgNote(f)}, kostenlos auch für kommerzielle Projekte unter der MIT-Lizenz.`;
+    },
+    faq: (f: CategoryFacts): Faq => {
+      const ex = f.example;
+      const n = f.expressions.length;
+      return [
+        {
+          question: `Welche Icons enthält die Kategorie „${f.name}“?`,
+          answer: `${icons(f.count)}: ${titles(f.titles)}. Alle sind unter der MIT-Lizenz kostenlos für private und kommerzielle Projekte nutzbar, ohne Namensnennung.`,
+        },
+        {
+          question: `Wie verwende ich die Icons der Kategorie „${f.name}“ in React?`,
+          answer: `Installieren Sie react-useanimations, fügen Sie ${ex.importLine} hinzu und rendern Sie <UseAnimations animation={${ex.exportName}} size={32} />. Das Icon spielt seine Interaktion „${ex.interactionLabel}“ ab und übernimmt die Textfarbe. Mit shadcn/ui führen Sie stattdessen ${ex.shadcnCommand} aus.`,
+        },
+        {
+          question: `Kann ich die Icons der Kategorie „${f.name}“ ohne React verwenden?`,
+          answer: `Ja. Jedes Icon ist eine Lottie-JSON-Datei unter ${f.site}/icons/<id>.json (zum Beispiel ${f.site}/icons/${ex.id}.json), abspielbar mit lottie-web, lottie-ios, lottie-android oder dem Flutter-Paket lottie${svgNote(f) ? '; statische SVGs finden Sie auf der jeweiligen Icon-Seite (die Icon-Seiten sind nur auf Englisch verfügbar)' : ''}. ${
+            n
+              ? `${titles(f.expressions, 6)} ${form(n, { one: 'nutzt', other: 'nutzen' })} After-Effects-Expressions und ${form(n, { one: 'braucht', other: 'brauchen' })} im Web deshalb den vollständigen Build von lottie-web.`
+              : 'Keines davon nutzt Expressions, der Light-Build von lottie-web reicht also aus.'
+          }`,
+        },
+      ];
+    },
+    badge: (n: number) => `${icons(n)} · MIT-Lizenz`,
+    allIcons: (name: string) => `Alle Icons der Kategorie „${name}“`,
+    whereToUse: 'Einsatzmöglichkeiten',
+    byInteraction: 'Nach Interaktion',
+    addOne: 'In die eigene App einbauen',
+    addOneHtml: (label: string, name: string) =>
+      `Mit React installieren Sie ${code('react-useanimations')} und importieren das Icon; seine Interaktion „${label}“ spielt es von selbst ab. Alle Icons dieser Kategorie funktionieren gleich: Ersetzen Sie ${code(name)} durch den Namen, der auf der jeweiligen Icon-Seite steht.`,
+    shadcnHtml: (href: string) =>
+      `Mit ${link(href, 'shadcn/ui')} fügt die CLI eine fertige Komponente hinzu:`,
+    noReactHtml: (href: string) =>
+      `Kein React im Einsatz? Jedes Icon ist eine Lottie-JSON-Datei unter ${code('/icons/&lt;id&gt;.json')}; Player für Web, iOS, Android und Flutter finden Sie unter ${link(href, 'Lottie-Icons')}.`,
+    more: 'Weitere Kategorien',
+    allIconsButton: 'Alle Icons',
+  },
+
+  interaction: {
+    titles: (f: InteractionFacts) => [
+      `${f.title} für React & Lottie`,
+      `${f.title} für React`,
+      f.title,
+    ],
+    descriptions: (f: InteractionFacts) => {
+      const plays = PLAYS_RELATIVE[f.interaction];
+      return [
+        `${f.count} kostenlose animierte Icons, die ${plays}, etwa ${list(f.titles.slice(0, 3))}. Für React, shadcn/ui und Lottie JSON, MIT-Lizenz.`,
+        `${f.count} kostenlose animierte Icons, die ${plays}, etwa ${list(f.titles.slice(0, 3))}. Für React, shadcn/ui und Lottie, MIT.`,
+        `${f.count} kostenlose animierte Icons, die ${plays}. Für React, shadcn/ui und Lottie JSON, MIT-Lizenz.`,
+        `${f.count} kostenlose animierte Icons, die ${plays}. Für React, shadcn/ui und Lottie.`,
+      ];
+    },
+    faq: (f: InteractionFacts): Faq => [
+      {
+        question: `Welche Icons nutzen die Interaktion „${f.label}“?`,
+        answer: `${icons(f.count)}: ${titles(f.titles, 15)}. ${f.example}`,
+      },
+      {
+        question: 'Was passiert, wenn reduzierte Bewegung eingestellt ist?',
+        answer: `${f.reducedMotion} Die React-Komponente liest prefers-reduced-motion aus und reagiert, sobald sich die Einstellung ändert. Sie brauchen dafür keinen eigenen Code.`,
+      },
+      {
+        question: 'Wie ändere ich die Interaktion eines Icons?',
+        answer: `Jedes Icon spielt die Interaktion ab, für die es gestaltet wurde. Mit interaction="${f.interaction}" bekommt jedes andere Icon dieses Verhalten, mit einem anderen Wert ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') ein anderes. Die Props autoplay, loop und speed steuern die Wiedergabe.${
+          f.interaction === 'click-toggle'
+            ? ' Um den Zustand selbst zu steuern, übergeben Sie active={isOn} und aktualisieren den Wert in onClick: Klicks schalten das Icon dann nicht mehr von selbst um.'
+            : ''
+        }`,
+      },
+    ],
+    allIcons: (label: string) => `Alle Icons mit ${label}`,
+    behaviour: 'So verhält es sich',
+    hoverNote:
+      ' Tippen auf Touchscreens startet keine Hover-Animation; der Tastaturfokus dagegen schon, wenn das Icon in einem fokussierbaren Element steckt.',
+    handled: 'All das übernimmt die React-Komponente, Sie wählen nur das Icon aus.',
+    whereToUse: 'Einsatzmöglichkeiten',
+    byCategory: 'Nach Kategorie',
+    useInReact: 'In React verwenden',
+    overrideHtml: `Die hier aufgeführten Icons spielen diese Interaktion standardmäßig ab. Jedes andere Icon kann sie ebenfalls nutzen: Übergeben Sie dazu das Prop ${code('interaction')}.`,
+    normallyUses: (title: string, interaction: string) =>
+      `${title} nutzt normalerweise '${interaction}'`,
+    extra: {
+      loop: 'Loops starten automatisch und pausieren, solange sie aus dem sichtbaren Bereich gescrollt sind. Mit speed verlangsamen Sie die Animation, mit loop={false} läuft sie nur einmal, und mit autoplay={false} bleibt sie stehen:',
+      'click-toggle':
+        'Klicks schalten das Icon von selbst um. Um es mit Ihrem State synchron zu halten, übergeben Sie active: Das Icon animiert bei jeder Änderung von active, und Klicks allein schalten es nicht mehr um.',
+      'click-replay':
+        'Setzen Sie das Icon mit dem render-Prop in einen echten Button, damit es fokussierbar ist und von Screenreadern angesagt wird. Ihr onClick läuft zuerst; mit event.preventDefault() lassen Sie die Animation aus.',
+      hover:
+        'Setzen Sie das Icon mit dem render-Prop in einen Link oder Button: Dann spielt die Animation auch, wenn das Element den Tastaturfokus erhält, und Tippen auf Touchscreens löst sie nicht aus.',
+      'hover-replay':
+        'Lassen Sie die ganze Karte oder den ganzen Link auf Hover reagieren, nicht nur das Icon: Mit dem render-Prop landen die Events auf Ihrem Element, und auch der Tastaturfokus spielt die Animation ab.',
+      'hover-loop':
+        'Nutzen Sie das render-Prop, damit der ganze Link den Loop auslöst, auch per Tastaturfokus. Das Tempo ändern Sie mit speed:',
+    },
+    codeText: {
+      halfSpeed: 'halbe Geschwindigkeit',
+      playsOnce: 'spielt einmal, dann Stopp',
+      staticFrame: 'statischer erster Frame',
+      endState: 'true zeigt den Endzustand',
+      closeMenu: 'Menü schließen',
+      openMenu: 'Menü öffnen',
+      download: 'Herunterladen',
+      archive: 'Archiv',
+      weeklyGrowth: 'Wöchentliches Wachstum',
+    },
+    docsHtml: (docs: string, lottie: string) =>
+      `Alle Props stehen in der ${link(docs, 'Dokumentation')}. Außerhalb von React sind die Icons Lottie-JSON-Dateien; unter ${link(lottie, 'Lottie-Icons')} sehen Sie, wie Sie die Interaktionen mit lottie-web nachbauen.`,
+    other: 'Weitere Interaktionen',
+    browseByCategory: 'Nach Kategorie stöbern',
+  },
+};
diff --git a/website/src/i18n/messages/de/index.ts b/website/src/i18n/messages/de/index.ts
new file mode 100644
index 0000000..27d6581
--- /dev/null
+++ b/website/src/i18n/messages/de/index.ts
@@ -0,0 +1,12 @@
+// Deutsch: the German messages, in the shape of the English ones (type Messages).
+import type { Messages } from '../en';
+import { common } from './common';
+import { docs } from './docs';
+import { home } from './home';
+import { hubs } from './hubs';
+import { islands } from './islands';
+import { licence } from './licence';
+import { pages } from './pages';
+import { taxonomy } from './taxonomy';
+
+export const messages: Messages = { common, taxonomy, hubs, home, docs, licence, pages, islands };
diff --git a/website/src/i18n/messages/de/islands.ts b/website/src/i18n/messages/de/islands.ts
new file mode 100644
index 0000000..da6f564
--- /dev/null
+++ b/website/src/i18n/messages/de/islands.ts
@@ -0,0 +1,51 @@
+import type { Messages } from '../en';
+
+export const islands: Messages['islands'] = {
+  iconCard: {
+    hints: {
+      loop: 'Loop',
+      'click-toggle': 'Klick',
+      'click-replay': 'Klick',
+      hover: 'Hover',
+      'hover-loop': 'Hover',
+      'hover-replay': 'Hover',
+    },
+  },
+  iconDialog: {
+    hints: {
+      loop: 'Läuft von selbst',
+      'click-toggle': 'Zum Umschalten klicken',
+      'click-replay': 'Zum Wiederholen klicken',
+      hover: 'Hover spielt ab, Verlassen spielt rückwärts',
+      'hover-loop': 'Hover startet den Loop',
+      'hover-replay': 'Hover spielt ab',
+    },
+    preview: 'Vorschau: {title}',
+    colors: 'Vorschaufarbe',
+    color: 'Farbe {color}',
+    textColor: 'Textfarbe',
+    interaction: 'Interaktion',
+    duration: 'Dauer',
+    seconds: '{seconds} s',
+    import: 'Import',
+    close: 'Schließen',
+    code: 'Code',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Dateien' },
+    copy: 'Kopieren',
+    download: 'Herunterladen',
+    iconPage: 'Zur Icon-Seite →',
+  },
+  interactionDemo: {
+    click: 'Auf die Karte klicken',
+    loop: 'Läuft von selbst',
+    hover: 'Mauszeiger auf die Karte',
+  },
+  mobileMenu: {
+    menu: 'Menü',
+    nav: 'Hauptnavigation',
+  },
+  themeToggle: {
+    toLight: 'Zum hellen Design wechseln',
+    toDark: 'Zum dunklen Design wechseln',
+  },
+};
diff --git a/website/src/i18n/messages/de/licence.ts b/website/src/i18n/messages/de/licence.ts
new file mode 100644
index 0000000..dfb3ada
--- /dev/null
+++ b/website/src/i18n/messages/de/licence.ts
@@ -0,0 +1,27 @@
+import type { Messages } from '../en';
+
+export const licence: Messages['licence'] = {
+  title: 'Lizenz & Nutzungsbedingungen — useAnimations',
+  description:
+    'useAnimations-Icons und react-useanimations stehen unter der MIT-Lizenz: kostenlos nutzbar und weitergebbar, privat wie kommerziell, ohne Namensnennung.',
+  name: 'Lizenz & Nutzungsbedingungen',
+  heading: 'Frei nutzbar. MIT-lizenziert.',
+  introHtml: (mitHref: string) =>
+    `Die useAnimations-Icons und das Paket <code>react-useanimations</code> werden unter der <a href="${mitHref}">MIT-Lizenz</a> veröffentlicht.`,
+  canDo: 'Was Sie dürfen',
+  canDoItemsHtml: [
+    '<strong>Nutzen:</strong> die Icons in privaten und kommerziellen Websites, Apps und Produkten einsetzen.',
+    '<strong>Verändern:</strong> Farben, Größen, Timing oder die Bewegung selbst anpassen.',
+    '<strong>Weitergeben:</strong> auch als Teil von Icon-Paketen, Templates, Themes, UI-Kits und Komponenten-Registries.',
+  ],
+  attribution: 'Namensnennung',
+  attributionText:
+    'Nicht erforderlich, aber willkommen. Wenn Sie die Dateien selbst weitergeben, behalten Sie den Lizenzhinweis bei. Und falls Sie uns nennen möchten:',
+  credit: (link: string) => `Animierte Icons von ${link}`,
+  noWarranty: 'Keine Gewährleistung',
+  noWarrantyText:
+    'Die Icons und der Code werden ohne Mängelgewähr und ohne jegliche Gewährleistung bereitgestellt.',
+  licenseText: 'Lizenztext',
+  bindingNote:
+    'Der folgende Lizenztext ist die englische Originalfassung; nur sie ist rechtlich verbindlich.',
+};
diff --git a/website/src/i18n/messages/de/pages.ts b/website/src/i18n/messages/de/pages.ts
new file mode 100644
index 0000000..b0c72a9
--- /dev/null
+++ b/website/src/i18n/messages/de/pages.ts
@@ -0,0 +1,242 @@
+import type { Messages } from '../en';
+import type { Faq } from '../en/hubs';
+import { listIn, pluralIn } from '../../format';
+
+const list = listIn('de');
+const iconCount = (n: number) => pluralIn('de')(n, { one: 'Icon', other: 'Icons' });
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+const strong = (text: string) => `<strong class="font-medium text-fg">${text}</strong>`;
+
+export const pages: Messages['pages'] = {
+  icons: {
+    titles: (count: number) => [
+      `Alle ${count} animierten Icons nach Kategorie`,
+      `Alle ${count} animierten Icons`,
+    ],
+    descriptions: (count: number, categories: number) => [
+      `Alle useAnimations-Icons auf einer Seite: ${count} kostenlose animierte Icons in ${categories} Kategorien, für React, shadcn/ui, Lottie JSON und SVG. MIT-Lizenz.`,
+    ],
+    title: 'Alle animierten Icons',
+    badge: (count: number) => `${count} Icons · MIT-Lizenz`,
+    introHtml: (browser: string) =>
+      `Alle Icons der Sammlung, nach Kategorie gruppiert. Jedes Icon führt zu einer Seite mit Live-Vorschau, dem Code für React und shadcn/ui sowie den Downloads als Lottie JSON, SVG und ZIP (die Icon-Seiten sind nur auf Englisch verfügbar). Um nach Stichworten zu suchen und die Animationen direkt auszuprobieren, nutzen Sie den ${link(browser, 'Icon-Browser')}.`,
+    categoriesNav: 'Kategorien',
+    byInteraction: 'Nach Interaktion:',
+    categoryLink: (count: number, name: string) => `${name}: ${iconCount(count)} →`,
+  },
+
+  categories: {
+    titles: (categories: number) => [
+      `Kategorien animierter Icons: ${categories} Sammlungen`,
+      'Kategorien animierter Icons',
+    ],
+    descriptions: (icons: number, categories: number) => [
+      `${icons} kostenlose animierte Icons in ${categories} Kategorien: Navigation, Aktionen, Medien, Ladeanzeigen, Social Media und mehr. Für React, shadcn/ui und Lottie.`,
+    ],
+    title: 'Kategorien animierter Icons',
+    badge: (icons: number, categories: number) => `${icons} Icons · ${categories} Kategorien`,
+    introHtml: (interactions: string) =>
+      `Jedes useAnimations-Icon gehört zu genau einer Kategorie, von Navigationspfeilen und Mediensteuerung bis zu Loadern und Social-Media-Logos. Eine Kategorie zeigt alle ihre Icons, typische Einsatzorte und den Code zum Einbauen. Alternativ können Sie nach ${link(interactions, 'Interaktion')} stöbern.`,
+    iconCount,
+  },
+
+  interactions: {
+    titles: [
+      'Mikrointeraktionen: Icons für Hover, Klick und Loop',
+      'Mikrointeraktionen für animierte Icons',
+    ],
+    descriptions: (icons: number, interactions: number) => [
+      `${icons} animierte Icons mit ${interactions} Mikrointeraktionen: Loop, Klick-Toggle, Klick-Replay, Hover, Hover-Replay und Hover-Loop. Unterstützt reduzierte Bewegung.`,
+      `${icons} animierte Icons mit ${interactions} Mikrointeraktionen: Loop, Klick-Toggle, Klick-Replay, Hover, Hover-Replay und Hover-Loop.`,
+    ],
+    title: 'Interaktionen der animierten Icons',
+    badge: (interactions: number, icons: number) =>
+      `${interactions} Interaktionen · ${icons} Icons`,
+    introHtml: `Jedes Icon kommt mit der Mikrointeraktion, für die es gestaltet wurde: Es läuft in Schleife, schaltet um, spielt per Klick erneut ab oder reagiert auf Hover. Die React-Komponente verdrahtet das, berücksichtigt reduzierte Bewegung, und mit dem Prop <code class="font-mono text-base text-fg">interaction</code> wechselt jedes Icon zu einer anderen Interaktion.`,
+    iconCount,
+    chooseTitle: 'Die passende Interaktion wählen',
+    chooseHtml: {
+      loop: (href: string) =>
+        `${strong('Ein andauernder Zustand')} wie Laden oder eine aktive Warnung: ${link(href, 'Loop')}.`,
+      'click-toggle': (href: string) =>
+        `${strong('Ein Ein-/Aus-Schalter')} wie Stummschalten, Menü oder Passwort anzeigen: ${link(href, 'Klick-Toggle')}, mit ${code('active')} für kontrollierten State.`,
+      'click-replay': (href: string) =>
+        `${strong('Eine einmalige Aktion')} wie Senden, Speichern oder Aktualisieren: ${link(href, 'Klick-Replay')}.`,
+      hover: (href: string) =>
+        `${strong('Ein Hinweis darauf, was ein Link öffnet')}: ${link(href, 'Hover')}, das beim Verlassen rückwärts läuft.`,
+      'hover-replay': (href: string) =>
+        `${strong('Toolbars und Listen, über die man schnell hinwegfährt')}: ${link(href, 'Hover-Replay')}, das von selbst zu Ende läuft.`,
+      'hover-loop': (href: string) =>
+        `${strong('Links, die zu einem längeren Blick einladen')}, etwa Social-Icons: ${link(href, 'Hover-Loop')}.`,
+    },
+    motionTitle: 'Reduzierte Bewegung',
+    motionHtml: `Die React-Komponente richtet sich nach ${code('prefers-reduced-motion')} und reagiert, sobald sich die Einstellung ändert. Tippen auf Touchscreens startet nie eine Hover-Animation.`,
+    reducedMotion: {
+      loop: 'Das Icon startet nicht automatisch und bleibt auf seinem statischen ersten Frame.',
+      'click-toggle':
+        'Ein Klick wechselt sofort in den anderen Zustand, ohne die Animation dazwischen.',
+      'click-replay':
+        'Klicks erreichen weiterhin Ihren Handler, die Animation spielt aber nicht ab.',
+      hover: 'Hover spielt die Animation nicht ab.',
+      'hover-replay': 'Hover spielt die Animation nicht ab.',
+      'hover-loop': 'Das Icon bleibt auch bei Hover statisch.',
+    },
+  },
+
+  lottie: {
+    titles: (count: number) => [
+      `Kostenlose Lottie-Icons: ${count} animierte JSON-Icons`,
+      'Kostenlose Lottie-Icons',
+    ],
+    descriptions: (count: number) => [
+      `${count} kostenlose Lottie-Icons als reines Lottie JSON, MIT-Lizenz. Code zum Kopieren für lottie-web, dotLottie, React, React Native, iOS, Android und Flutter.`,
+      `${count} kostenlose Lottie-Icons als Lottie JSON, MIT-Lizenz. Code für lottie-web, dotLottie, React, React Native, iOS, Android und Flutter.`,
+    ],
+    title: 'Kostenlose Lottie-Icons',
+    crumb: 'Lottie-Icons',
+    datasetName: 'useAnimations-Icon-Katalog',
+    datasetDescription: (count: number) =>
+      `Metadaten und Datei-URLs von ${count} animierten Lottie-Icons: ID, Titel, Kategorie, Keywords, Interaktion, Größe und Dauer.`,
+    badge: (count: number) => `${count} Icons · Lottie JSON · MIT-Lizenz`,
+    intro:
+      'Jedes useAnimations-Icon ist eine Standard-Lottie-JSON-Animation und läuft damit in jedem Lottie-Player: lottie-web im Web, lottie-ios, lottie-android, Flutter und React Native. Die Dateien sind unter der MIT-Lizenz kostenlos, ohne Registrierung, und liegen unter stabilen URLs mit aktiviertem CORS. Sie können sie also direkt laden oder in Ihr Projekt herunterladen.',
+    popular: 'Beliebte Lottie-Icons',
+    allIcons: (count: number) => `Alle ${count} Icons →`,
+    filesTitle: 'Dateien und URLs',
+    filesIntroHtml: `Jedes Icon hat eine Seite unter ${code('/icons/&lt;id&gt;')} mit Vorschau und Downloads (nur auf Englisch). Die Dateien selbst:`,
+    files: {
+      json: 'Lottie-JSON-Animation',
+      zip: 'JSON und statische SVGs',
+      svg: 'statisches SVG je Zustand',
+      catalog: 'Katalog aller Icons',
+    },
+    catalogHtml: (catalog: string, median: number) =>
+      `${link(catalog, 'icons.json')} listet jedes Icon mit ID, Titel, Kategorie, Keywords, Interaktion, Größe, Dauer und Datei-URLs auf. So lassen sich Icons per Skript nach Stichwort auswählen, oder ein Coding-Agent sucht eines aus. Die Lottie-Dateien sind im Median ${median} kB groß.`,
+    players: {
+      web: {
+        title: 'Web: lottie-web',
+        text: 'Der Referenz-Player von Airbnb. Laden Sie ihn von einem CDN, geben Sie ihm eine Icon-URL und wählen Sie den SVG-Renderer: Damit bleibt das Icon gestochen scharf und lässt sich per CSS umfärben. Nutzen Sie den vollständigen Build (lottie.min.js), denn der Light-Build ignoriert Expressions.',
+        cssLabel: 'Textfarbe übernehmen (SVG-Renderer)',
+      },
+      'web-interactions': {
+        title: 'Web: Interaktionen für Hover und Klick',
+        text: 'lottie-web kann abspielen und stoppen, die Interaktionen bauen Sie aber selbst. Hier ist der Klick-Toggle des Menü-Icons mit Unterstützung für reduzierte Bewegung; alle Interaktionen folgen demselben Muster, und die React-Komponente weiter unten erledigt das alles für Sie.',
+      },
+      dotlottie: {
+        title: 'Web: dotLottie-Webkomponente',
+        text: 'Der Player von LottieFiles rendert mit einer WebAssembly-Engine in ein Canvas und spielt neben .lottie-Dateien auch reines Lottie JSON ab. Ein Canvas übernimmt die Farben aus der Datei, die Icons bleiben also schwarz, solange Sie das JSON nicht umfärben.',
+        jsLabel: 'Oder die JavaScript-API: npm install @lottiefiles/dotlottie-web',
+      },
+      react: {
+        title: 'React: react-useanimations',
+        text: 'Kein Lottie-Player nötig: Das Paket bringt einen eigenen Player mit 8 kB mit, spielt die Interaktion jedes Icons ab, übernimmt die Textfarbe und berücksichtigt reduzierte Bewegung. Jedes Icon ist ein eigenes Modul, ausgeliefert werden also nur die, die Sie importieren.',
+      },
+      'react-native': {
+        title: 'React Native: lottie-react-native',
+        text: 'Binden Sie das JSON für die Offline-Nutzung mit require() ein oder laden Sie es über seine URL.',
+      },
+      ios: {
+        title: 'iOS: lottie-ios (SwiftUI)',
+        text: 'Fügen Sie das Paket https://github.com/airbnb/lottie-spm.git mit dem Swift Package Manager hinzu und legen Sie das JSON dann in Ihr Bundle oder laden Sie es über seine URL.',
+      },
+      android: {
+        title: 'Android: lottie-android (Jetpack Compose)',
+        text: 'Fügen Sie com.airbnb.android:lottie-compose hinzu (oder com.airbnb.android:lottie für Views). Für die Offline-Nutzung mit LottieCompositionSpec.RawRes legen Sie das JSON in res/raw ab.',
+      },
+      flutter: {
+        title: 'Flutter: lottie',
+        text: 'Das Paket lottie ist ein reiner Dart-Player für Android, iOS, Web und Desktop.',
+      },
+    },
+    expressionsTitle: 'Icons mit Expressions',
+    expressionsHtml: (count: number) =>
+      `${count} Icons nutzen After-Effects-Expressions (${code('loopOut')} oder ${code('wiggle')}). Im Web spielen Sie diese mit dem vollständigen Build von lottie-web ab, nicht mit ${code('lottie_light')}. Native Player werten keine Expressions aus; testen Sie diese Icons daher unter iOS, Android und Flutter oder wählen Sie ein anderes. react-useanimations spielt sie so ab, wie sie gestaltet wurden.`,
+    faq: (f: {
+      count: number;
+      minSize: number;
+      maxSize: number;
+      medianSize: number;
+      expressions: string[];
+    }): Faq => [
+      {
+        question: 'Sind diese Lottie-Icons für die kommerzielle Nutzung kostenlos?',
+        answer: `Ja. Alle ${f.count} Lottie-Icons stehen unter der MIT-Lizenz: Sie dürfen sie in privaten und kommerziellen Projekten nutzen, verändern und weitergeben, ohne Namensnennung und ohne Konto für den Download.`,
+      },
+      {
+        question: 'In welchem Format liegen die Lottie-Dateien vor?',
+        answer: `Standard-Lottie-JSON (das Bodymovin-Format) ausschließlich mit Formebenen: keine Bilder, Schriften oder externen Assets. Jedes Icon ist auf einer Zeichenfläche von 24 oder 32 px gezeichnet, lässt sich beliebig skalieren und ist ${f.minSize} kB bis ${f.maxSize} kB groß, im Median ${f.medianSize} kB.`,
+      },
+      {
+        question: 'Brauche ich lottie-web, um die Icons in React zu nutzen?',
+        answer:
+          'Nein. react-useanimations hat einen eigenen Player mit 8 kB ohne Abhängigkeiten: Sie installieren ein Paket und importieren die Icons, die Sie brauchen. lottie-web ist nur außerhalb von React nötig, also auf reinen Webseiten oder in anderen Frameworks.',
+      },
+      {
+        question: 'Welche Icons brauchen den vollständigen Build von lottie-web?',
+        answer: `${f.expressions.length} Icons nutzen After-Effects-Expressions (loopOut oder wiggle): ${list(f.expressions)}. Im Web brauchen sie den vollständigen Build von lottie-web, denn lottie_light ignoriert Expressions. Auch native Player (lottie-ios, lottie-android, das Flutter-Paket lottie) werten keine Expressions aus, dort bewegen sich diese Icons also möglicherweise anders.`,
+      },
+      {
+        question: 'Kann ich die Farbe eines Lottie-Icons ändern?',
+        answer:
+          'Im Web schreibt der SVG-Renderer von lottie-web die Farben als Attribute, eine CSS-Regel für die Pfade färbt das Icon also um. Native Player nutzen ihre APIs für dynamische Eigenschaften: ColorValueProvider unter iOS, LottieProperty.COLOR und STROKE_COLOR unter Android und ValueDelegate.color in Flutter.',
+      },
+    ],
+    byCategory: 'Lottie-Icons nach Kategorie',
+  },
+
+  shadcn: {
+    titles: (count: number) => [
+      `Animierte Icons für shadcn/ui: ${count} Komponenten`,
+      'Animierte Icons für shadcn/ui',
+    ],
+    descriptions: (count: number) => [
+      `${count} animierte Icons für shadcn/ui: jedes Icon mit einem Befehl der shadcn CLI hinzufügen. Hover-, Klick- und Loop-Interaktionen, MIT-Lizenz, ohne lottie-web.`,
+      `${count} animierte Icons für shadcn/ui, jedes mit einem Befehl der shadcn CLI hinzugefügt. Hover, Klick und Loop, MIT-Lizenz, ohne lottie-web.`,
+    ],
+    title: 'Animierte Icons für shadcn/ui',
+    crumb: 'shadcn/ui',
+    popularList: 'Beliebte animierte Icons für shadcn/ui',
+    badge: (count: number) => `${count} Komponenten · shadcn-Registry · MIT-Lizenz`,
+    intro:
+      'Jedes useAnimations-Icon steht in einer shadcn-Registry. Ein CLI-Befehl fügt Ihrem Projekt eine typisierte React-Komponente hinzu, mit der Hover-, Klick- oder Loop-Interaktion, für die das Icon gestaltet wurde, Unterstützung für reduzierte Bewegung und Farben, die Ihrem Theme folgen. Der Code landet in Ihrem Repository, wie bei jeder anderen shadcn/ui-Komponente.',
+    addTitle: 'Ein Icon hinzufügen',
+    addIntro: 'Führen Sie die shadcn CLI mit der Registry-URL des Icons aus:',
+    namingHtml: `Die Komponente heißt ${code('Animated')} + die Icon-ID in PascalCase (${code('check-box')} → ${code('AnimatedCheckBox')}) und landet in ${code('components/animations/&lt;id&gt;.tsx')}. Die CLI fügt außerdem den gemeinsamen Wrapper ${code('components/use-animation.tsx')} hinzu und installiert ${code('react-useanimations')}, das einen eigenen Player mitbringt: kein lottie-web nötig.`,
+    namespaceTitle: 'Kurze Namen mit einem Registry-Namespace',
+    namespaceHtml: `Tragen Sie die Registry einmalig in ${code('components.json')} ein; danach fügen Sie Icons per Namen hinzu, auch mehrere auf einmal:`,
+    registryHtml: (registry: string) =>
+      `Der Registry-Index unter ${link(registry, '/r/registry.json')} listet jeden Eintrag mit Titel, Kategorie und Interaktion auf.`,
+    usageTitle: 'In einem shadcn-Button verwenden',
+    usageHtml: `Die Komponenten nehmen dieselben Props wie ${code('UseAnimations')}. Bei einem Toggle wie dem Menü-Icon übergeben Sie ${code('active')} und halten den State in Ihrem Button; das Icon animiert bei jeder Änderung:`,
+    colorHtml: (docs: string) =>
+      `Icons übernehmen die Textfarbe: ${code('text-primary')} oder ${code('text-muted-foreground')} färben sie um, und Dark Mode braucht nichts Zusätzliches. Weitere Props und Muster finden Sie in der ${link(docs, 'Dokumentation')}.`,
+    codeText: { closeMenu: 'Menü schließen', openMenu: 'Menü öffnen' },
+    popular: 'Beliebte Icons für shadcn/ui',
+    allIcons: (count: number) => `Alle ${count} Icons →`,
+    popularNote:
+      'Jede Icon-Seite zeigt ihren shadcn-Befehl (die Icon-Seiten sind nur auf Englisch verfügbar).',
+    faq: (f: { count: number; version: string }): Faq => [
+      {
+        question: 'Sind die animierten Icons für shadcn/ui kostenlos?',
+        answer: `Ja. Alle ${f.count} Icons und der Code der Komponenten stehen unter der MIT-Lizenz, für private und kommerzielle Projekte. Die Registry braucht weder Konto noch API-Key.`,
+      },
+      {
+        question: 'Was fügt die shadcn CLI meinem Projekt hinzu?',
+        answer: `Die Icon-Komponente in components/animations/<id>.tsx, den gemeinsamen Player-Wrapper UseAnimation in components/use-animation.tsx (einmalig, als Registry-Abhängigkeit) und react-useanimations@^${f.version} von npm. lottie-web ist nicht nötig: Das Paket hat einen eigenen Player mit 8 kB.`,
+      },
+      {
+        question: 'Funktionieren die Komponenten mit Server Components in Next.js?',
+        answer:
+          'Ja. Die Komponenten sind mit "use client" markiert und zeichnen die Animation nur im Browser. Sie können sie also aus Server Components und Seiten rendern, ohne dynamische Imports oder ssr: false.',
+      },
+      {
+        question: 'Kann ich Aussehen und Bewegung der Icons ändern?',
+        answer:
+          'Der Code gehört Ihnen und liegt in Ihrem Repository. Die Komponenten nehmen die Props von UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop und speed. Icons übernehmen die Textfarbe, Tailwind-Klassen wie text-primary oder text-muted-foreground färben sie also um.',
+      },
+    ],
+    byCategory: 'Nach Kategorie stöbern',
+  },
+};
diff --git a/website/src/i18n/messages/de/taxonomy.ts b/website/src/i18n/messages/de/taxonomy.ts
new file mode 100644
index 0000000..c6fb46b
--- /dev/null
+++ b/website/src/i18n/messages/de/taxonomy.ts
@@ -0,0 +1,385 @@
+import type { Messages } from '../en';
+
+export const taxonomy: Messages['taxonomy'] = {
+  categories: {
+    Alerts: {
+      name: 'Warnungen',
+      title: 'Animierte Warn-Icons',
+      intro:
+        'Warndreiecke, Alarmkreise und Stoppschilder, die gerade so stark pulsieren, dass man sie bemerkt, ohne dass etwas blinkt. Sie gehören neben ein fehlerhaftes Formularfeld, an den Anfang eines Fehlerbanners oder in eine Statusspalte, also überall dorthin, wo man über ein statisches Icon leicht hinwegscrollt.',
+      useCases: [
+        'Validierungsfehler direkt unter Formularfeldern',
+        'Fehler- und Warnbanner oben auf der Seite',
+        'Fehlgeschlagene Zeilen in einer Deploy- oder Job-Statustabelle',
+        'Bestätigungsdialoge für destruktive Aktionen',
+        'Statusseiten während einer Störung',
+      ],
+    },
+    Notifications: {
+      name: 'Benachrichtigungen',
+      title: 'Animierte Benachrichtigungsglocken',
+      intro:
+        'Glocken-Icons, die bei neuen Aktivitäten läuten oder zwischen Glocke und durchgestrichener Glocke wechseln. Ein kurzes Schwingen lenkt den Blick auf die Zahl ungelesener Nachrichten, und die umschaltbaren Varianten dienen zugleich als Stummschalter für einen Kanal oder Thread.',
+      useCases: [
+        'Button für die Benachrichtigungszentrale im App-Header',
+        'Ungelesen-Badge, das bei einer neuen Nachricht läutet',
+        'Stummschalten und Wiedereinschalten eines Kanals oder Threads',
+        'Einstellungen für E-Mail- und Push-Benachrichtigungen',
+        'Buttons zum Abonnieren von Erinnerungen und Alerts',
+      ],
+    },
+    Navigation: {
+      name: 'Navigation',
+      title: 'Animierte Navigations- und Pfeil-Icons',
+      intro:
+        'Hamburger-Menüs, die sich in einen Schließen-Button verwandeln, dazu Pfeile, Chevrons und Eckpfeile, die bei Hover ein Stück in ihre Richtung rücken. So ist sofort klar, wohin ein Bedienelement führt: Drawer öffnen, zurückgehen, Zeile aufklappen, die Website verlassen.',
+      useCases: [
+        'Hamburger-Menü, das mobil zum Schließen-Button wird',
+        'Zurück- und Weiter-Buttons in Karussells und Paginierung',
+        'Chevrons in Akkordeons und Dropdowns',
+        'Hinweise „Nach oben“ und „Nach unten scrollen“',
+        'Links zum Anmelden und Abmelden',
+        'Markierungen für externe Links und Sidebar-Toggles',
+      ],
+    },
+    Action: {
+      name: 'Aktionen',
+      title: 'Animierte Aktions-Icons',
+      intro:
+        'Die Verben einer Oberfläche: speichern, löschen, herunterladen, aktualisieren, liken, merken, suchen und Einstellungen. Jedes Icon bestätigt den Klick oder Hover, zu dem es gehört: Das Herz füllt sich, wenn man einen Beitrag likt, und der Deckel des Papierkorbs hebt sich, bevor man etwas löscht.',
+      useCases: [
+        'Like-, Favoriten- und Merken-Buttons auf Karten',
+        'Download-, Upload- und Speichern-Buttons, die die Aktion bestätigen',
+        'Passwort anzeigen und verbergen im Login-Formular',
+        'Aktualisieren- und Sync-Buttons in Dashboards',
+        'Löschen-Buttons in Tabellen und Dateilisten',
+        'Suchfeld, das zum Leeren-Button wird',
+      ],
+    },
+    Content: {
+      name: 'Inhalte',
+      title: 'Animierte Datei-, Ordner- und Nutzer-Icons',
+      intro:
+        'Dateien, Ordner, Bücher, Mail, Anhänge und Personen. Sie kennzeichnen die Dinge, mit denen Nutzer arbeiten, und dank der Varianten zum Hinzufügen, Entfernen und Abhaken reagieren Listen und Teamverwaltung spürbar auf jede Aktion.',
+      useCases: [
+        'Dateimanager und Dokumentlisten',
+        'Buttons für Anhänge und „In die Zwischenablage kopieren“',
+        'Posteingang und Archiv in Mail-Clients',
+        'Teamlisten mit Aktionen zum Hinzufügen und Entfernen von Nutzern',
+        'Teilen-Menüs für Dokumente und Links',
+      ],
+    },
+    Form: {
+      name: 'Formulare',
+      title: 'Animierte Icons für Formularelemente',
+      intro:
+        'Eine Checkbox, ein Radiobutton und ein Toggle-Switch, die zwischen aktiviertem und deaktiviertem Zustand animieren. Sie passen überall dort, wo ein normales Eingabeelement flach wirkt, etwa in Onboarding-Checklisten und Einstellungsseiten, und der Zustand bleibt auf einen Blick erkennbar.',
+      useCases: [
+        'Schalter für Funktionen und Einstellungen',
+        'Onboarding- und To-do-Checklisten',
+        'Einfachauswahl in Umfragen und bei der Tarifwahl',
+        'Checkboxen für AGB und Einwilligungen',
+      ],
+    },
+    Media: {
+      name: 'Medien',
+      title: 'Animierte Mediaplayer-Icons',
+      intro:
+        'Play und Pause, Lautstärke, Mikrofon, Kamera, Überspringen und Zufallswiedergabe für Audio- und Videoplayer. Die umschaltbaren Icons wechseln zwischen ihren beiden Zuständen, von Play zu Pause oder vom Mikrofon zum stummgeschalteten Mikrofon, sodass der Button immer zeigt, was ein Klick bewirkt.',
+      useCases: [
+        'Play- und Pause-Buttons in Audio- und Videoplayern',
+        'Stummschalten in Videocalls',
+        'Kamera ein und aus in Meeting-Apps',
+        'Playlist-Steuerung für Überspringen, Wiederholen und Zufallswiedergabe',
+        'Buttons für Casting und AirPlay',
+        'Steuerelemente in Podcast- und Musik-Apps',
+      ],
+    },
+    'Text editing': {
+      name: 'Textbearbeitung',
+      title: 'Animierte Icons für die Textbearbeitung',
+      intro:
+        'Fett, kursiv, unterstrichen, Ausrichtung und Listen für Rich-Text-Toolbars. Eine kurze Klick-Animation bestätigt, dass die Formatierung angewendet wurde. Das hilft in Editoren, in denen die Änderung am Text selbst kaum auffällt.',
+      useCases: [
+        'Toolbars in Rich-Text-Editoren',
+        'Eingabefelder für Kommentare und Nachrichten',
+        'CMS- und Blog-Editoren',
+        'Markdown- und Notiz-Apps',
+        'Textausrichtung in Design-Tools',
+      ],
+    },
+    Communication: {
+      name: 'Kommunikation',
+      title: 'Animierte Kommunikations-Icons',
+      intro:
+        'Telefone, Sprechblasen, Senden-Buttons, Voicemail und RSS. Die Telefon-Icons decken alle Zustände ab, die eine Anrufliste braucht: eingehend, ausgehend, verpasst und weitergeleitet. Das Senden-Icon gibt einer Nachricht beim Klick einen kleinen Schwung mit auf den Weg.',
+      useCases: [
+        'Senden-Button in Chat- und Kommentarformularen',
+        'Anruflisten mit eingehenden, ausgehenden und verpassten Anrufen',
+        'Kontakt- und Support-Buttons',
+        'Buttons zum Öffnen eines Chat-Widgets',
+        'Felder für Erwähnungen und E-Mail-Adressen',
+      ],
+    },
+    Devices: {
+      name: 'Geräte',
+      title: 'Animierte Geräte-Icons',
+      intro:
+        'Smartphones, Tablets, Monitore, Smartwatches und Drucker, dazu die passenden Verbindungsanzeigen: WLAN, Bluetooth und Akku. Sie eignen sich für Geräteauswahl, Umschalter für die responsive Vorschau und den Verbindungsstatus.',
+      useCases: [
+        'Umschalter für die responsive Vorschau auf Smartphone, Tablet und Desktop',
+        'WLAN- und Bluetooth-Verbindungsstatus',
+        'Akku- und Ladeanzeigen',
+        'Gerätelisten in den Sicherheitseinstellungen eines Kontos',
+        'Drucken-Buttons bei Rechnungen und Berichten',
+      ],
+    },
+    Weather: {
+      name: 'Wetter',
+      title: 'Animierte Wetter-Icons',
+      intro:
+        'Sonne, Mond, Wolken, Regen, Schnee, Blitz und Wind für Wettervorhersagen und alles, was sich nach der Tageszeit richtet. Sonne und Mond ergeben außerdem einen naheliegenden Umschalter zwischen Light und Dark Mode.',
+      useCases: [
+        'Wetter-Widgets und Vorhersagekarten',
+        'Umschalter zwischen hellem und dunklem Design',
+        'Sonnenauf- und -untergang in Reise-Apps',
+        'Temperaturanzeigen in Smart-Home-Dashboards',
+        'Anzeigen für Energie- und Stromstatus',
+      ],
+    },
+    'Maps & location': {
+      name: 'Karten & Standort',
+      title: 'Animierte Karten- und Standort-Icons',
+      intro:
+        'Kartenpins, Navigationspfeile, Globen, Zielscheiben und Anker. Ein Pin, der bei Hover herunterfällt, hebt eine Filialsuche oder eine Lieferadresse hervor, und der Globus taugt als Umschalter für Sprache oder Region.',
+      useCases: [
+        'Filialsuche und Adressfelder',
+        'Buttons für aktuellen Standort und Routenplanung',
+        'Auswahl von Sprache und Region',
+        'Liefer- und Sendungsverfolgung',
+        'Reise- und Buchungs-Apps',
+      ],
+    },
+    Commerce: {
+      name: 'E-Commerce',
+      title: 'Animierte E-Commerce-Icons',
+      intro:
+        'Warenkörbe, Einkaufstaschen, Preisschilder, Geschenke, Kreditkarten und Lieferwagen für Onlineshops. Eine In-den-Warenkorb-Animation bestätigt den Klick ohne Toast, und Lieferwagen und Paket bringen etwas Leben in den Bestellstatus.',
+      useCases: [
+        'In-den-Warenkorb-Buttons auf Produktkarten',
+        'Warenkorb- und Taschen-Buttons im Shop-Header',
+        'Checkout und Auswahl der Zahlungsart',
+        'Rabatt-, Gutschein- und Sale-Badges',
+        'Schritte für Versand und Sendungsverfolgung',
+        'Geschenkkarten und Optionen für Geschenkverpackung',
+      ],
+    },
+    Charts: {
+      name: 'Diagramme',
+      title: 'Animierte Diagramm-Icons',
+      intro:
+        'Balkendiagramme, ein Tortendiagramm und Trendpfeile für Analytics und Reporting. Die Icons für steigenden und fallenden Trend zeigen auf einen Blick, ob eine Kennzahl gestiegen oder gesunken ist, und passen damit zu KPI-Karten und Zahlenübersichten im Zeitverlauf.',
+      useCases: [
+        'KPI-Karten mit steigenden oder fallenden Kennzahlen',
+        'Navigationspunkte für Analytics und Berichte',
+        'Leere Zustände in Dashboards',
+        'Finanz- und Portfolioübersichten',
+      ],
+    },
+    Development: {
+      name: 'Entwicklung',
+      title: 'Animierte Entwickler-Icons',
+      intro:
+        'Code-Klammern, ein Terminal, Git-Branches, Commits, Merges und Pull Requests, dazu Server und Datenbanken. Gemacht für Developer-Tools, Dokumentationsseiten und Statusseiten, deren Oberfläche ohnehin von Git- und Infrastruktur-Begriffen geprägt ist.',
+      useCases: [
+        'Status von Pull Requests, Merges und Branches in Developer-Tools',
+        'Buttons für Code-Snippets und Embeds in Dokumentationen',
+        'Terminal- und CLI-Abschnitte auf Landingpages',
+        'Server- und Datenbank-Health auf Statusseiten',
+        'Hinweise auf Tastenkürzel mit der Command-Taste',
+      ],
+    },
+    'Design & layout': {
+      name: 'Design & Layout',
+      title: 'Animierte Design- und Layout-Icons',
+      intro:
+        'Raster, Spalten, Ebenen, Zuschneiden, Zeichenstift und Mauszeiger für Editoren und Baukästen. Sie passen in Toolbars, in denen Nutzer Inhalte anordnen, zwischen Raster- und Tabellenansicht wechseln oder ein Zeichenwerkzeug wählen.',
+      useCases: [
+        'Umschalter zwischen Raster-, Listen- und Tabellenansicht',
+        'Ebenen-Panels in Design- und Präsentations-Tools',
+        'Zuschneide- und Ausschneidewerkzeuge in Bildeditoren',
+        'Page-Builder und Layoutauswahl',
+        'Griffe zum Verschieben per Drag-and-drop',
+      ],
+    },
+    'Shapes & math': {
+      name: 'Formen & Mathematik',
+      title: 'Animierte Formen- und Mathe-Icons',
+      intro:
+        'Kreise, Quadrate, Dreiecke, Sechsecke, ein Achteck und Divisionszeichen. Sie dienen als Formwerkzeuge in Zeichen-Apps, als Rechenoperatoren in einem Taschenrechner oder als neutrale Markierungen in Diagrammen und Onboarding-Schritten.',
+      useCases: [
+        'Formwerkzeuge in Whiteboard- und Zeichen-Apps',
+        'Operatoren in Taschenrechnern und Formeleditoren',
+        'Aufzählungs- und Schrittmarkierungen in Diagrammen',
+        'Quiz- und Spieloberflächen',
+      ],
+    },
+    Loading: {
+      name: 'Ladeanzeigen',
+      title: 'Animierte Lade-Icons',
+      intro:
+        'Spinner und Loader, die in Schleife laufen, solange etwas in Arbeit ist. Setzen Sie einen in den Absenden-Button, während ein Request läuft, an die Stelle von Inhalten, die noch laden, oder auf einen Vollbild-Splashscreen. Bevorzugt der Nutzer reduzierte Bewegung, bleiben sie still stehen.',
+      useCases: [
+        'Absenden-Buttons, die auf einen Request warten',
+        'Platzhalter, während eine Liste oder ein Diagramm lädt',
+        'Anzeigen für Infinite Scroll und „Mehr laden“',
+        'Vollbild-Splashscreens und Routenwechsel',
+        'Fortschritt beim Datei-Upload und bei der Verarbeitung',
+      ],
+    },
+    'Social media': {
+      name: 'Social Media',
+      title: 'Animierte Social-Media-Icons',
+      intro:
+        'Marken-Icons für soziale Netzwerke und für die Tools, über die Entwickler und Designer ihre Arbeit teilen: X, Instagram, YouTube, Discord, Telegram, Figma und weitere. Sie animieren bei Hover, wodurch Links im Footer und im Profil sichtbar anklickbar wirken.',
+      useCases: [
+        'Social-Links im Footer einer Website',
+        'Teilen-Buttons unter Blogartikeln',
+        'Profillinks von Autoren und Teams',
+        'Einladungs-Buttons für Community-Chatserver',
+        'Anmeldung mit einem Social- oder Entwicklerkonto',
+      ],
+    },
+    Other: {
+      name: 'Sonstige',
+      title: 'Weitere animierte Icons',
+      intro:
+        'Icons, die zu keiner größeren Gruppe gehören: Emoji-Gesichter für Feedback, eine Kaffeetasse, eine Uhr, eine Pulslinie und ein Scroll-Hinweis. Das Scroll-Icon ist ein verbreiteter Hinweis im Hero-Bereich, dass weiter unten noch mehr kommt.',
+      useCases: [
+        'Scroll-Hinweise am unteren Rand eines Hero-Bereichs',
+        'Fröhliche, neutrale und traurige Gesichter in Feedback-Widgets',
+        'Aktivitäts- und Uptime-Anzeigen',
+        'Öffnungszeiten und Zeitauswahl',
+        'Links zu „Buy me a coffee“ und anderen Unterstützungsangeboten',
+      ],
+    },
+  },
+  interactions: {
+    loop: {
+      label: 'Loop',
+      title: 'Animierte Icons in Endlosschleife',
+      intro:
+        'Diese Icons laufen ununterbrochen, solange sie zu sehen sind, und passen damit zu Zuständen, die andauern: Etwas lädt, eine Warnung ist aktiv, ein Terminal wartet. Ist reduzierte Bewegung eingestellt, bleiben sie auf ihrem ersten Frame stehen und funktionieren weiter als ganz normales Icon.',
+      useCases: [
+        'Lade-Spinner und Fortschrittsanzeigen',
+        'Aktive Warn- und Fehlerzustände',
+        'Live- und Aufnahmeanzeigen',
+        'Scroll-Hinweise im Hero-Bereich',
+        'Aufmerksamkeitsmarker für neue Benachrichtigungen',
+      ],
+      example:
+        'Typische Loop-Icons sind Lade-Spinner, aktive Warnungen, eine läutende Glocke oder ein Scroll-Hinweis.',
+      description:
+        'Läuft ununterbrochen; bleibt bei reduzierter Bewegung auf dem statischen ersten Frame stehen.',
+      reducedMotion:
+        'Ist reduzierte Bewegung eingestellt, startet das Icon nicht automatisch und bleibt auf seinem statischen ersten Frame.',
+      plays: 'laufen in Endlosschleife',
+    },
+    'click-toggle': {
+      label: 'Klick-Toggle',
+      title: 'Animierte Icons zum Umschalten per Klick',
+      intro:
+        'Jeder Klick animiert zwischen zwei Zuständen, und das Icon bleibt im neuen Zustand. Damit ist es die sichtbare Hälfte eines Ein-/Aus-Schalters. Da das Icon immer den aktuellen Zustand zeigt, erklärt sich der Button von selbst, sobald er zusätzlich aria-pressed oder ein checked-Attribut bekommt.',
+      useCases: [
+        'Buttons zum Stumm- und Lautschalten',
+        'Passwortfelder mit Anzeigen und Verbergen',
+        'Hamburger-Menü und Schließen-Button',
+        'Play und Pause',
+        'Toggles für Like, Stern und Lesezeichen',
+        'Checkboxen, Radiobuttons und Schalter',
+      ],
+      example:
+        'Typische Einsätze für Icons mit Klick-Toggle sind Buttons für Stumm/Laut, Passwort anzeigen/verbergen, Menü/Schließen, Play/Pause und Like.',
+      description:
+        'Wechselt per Klick zwischen zwei Zuständen; bei reduzierter Bewegung springt es sofort um.',
+      reducedMotion:
+        'Ist reduzierte Bewegung eingestellt, wechselt ein Klick sofort in den anderen Zustand, ohne die Animation dazwischen.',
+      plays: 'wechseln per Klick zwischen zwei Zuständen',
+    },
+    'click-replay': {
+      label: 'Klick-Replay',
+      title: 'Animierte Icons mit Klick-Animation',
+      intro:
+        'Diese Icons spielen bei jedem Klick einmal von vorn ab, als kleine Bestätigung, dass die Aktion angekommen ist. Sie passen zu einmaligen Aktionen, die keinen Zustand hinterlassen: senden, speichern, aktualisieren, herunterladen, drucken oder löschen.',
+      useCases: [
+        'Senden-Buttons in Chat- und Kommentarformularen',
+        'Buttons zum Speichern, Herunterladen und Hochladen',
+        'Buttons zum Aktualisieren und Drehen',
+        'In-den-Warenkorb-Buttons',
+        'Formatierungs-Buttons in Editoren',
+      ],
+      example:
+        'Icons mit Klick-Animation bestätigen typischerweise Buttons zum Senden, Speichern, Aktualisieren, Herunterladen, Formatieren und für den Warenkorb.',
+      description: 'Spielt bei jedem Klick einmal von vorn ab, außer bei reduzierter Bewegung.',
+      reducedMotion:
+        'Ist reduzierte Bewegung eingestellt, erreichen Klicks weiterhin Ihren Handler, die Animation spielt aber nicht ab.',
+      plays: 'spielen bei jedem Klick erneut ab',
+    },
+    hover: {
+      label: 'Hover',
+      title: 'Animierte Hover-Icons',
+      intro:
+        'Diese Icons spielen vorwärts, wenn der Mauszeiger sie erreicht, und rückwärts, wenn er sie verlässt. Die Bewegung folgt also dem Cursor und bleibt nie auf halber Strecke hängen. Sie passen zu Navigationspunkten und Buttons, die andeuten, was sie öffnen: Der Papierkorbdeckel hebt sich, das Zahnrad dreht sich, der Ordner geht auf.',
+      useCases: [
+        'Einträge in Sidebar und Navigationsmenü',
+        'Löschen-Buttons, die schon vor dem Klick den Deckel heben',
+        'Links zu Einstellungen und Profil',
+        'Steuerelemente zum Vergrößern und Verkleinern',
+        'Social-Links im Footer',
+      ],
+      example:
+        'Hover-Icons kennzeichnen typischerweise Navigationspunkte, Löschen-Buttons, Einstellungen, Zoom-Steuerelemente und Social-Links.',
+      description: 'Spielt bei mouseenter vorwärts und bei mouseleave rückwärts.',
+      reducedMotion: 'Ist reduzierte Bewegung eingestellt, spielt Hover die Animation nicht ab.',
+      plays: 'spielen bei Hover vorwärts und beim Verlassen rückwärts',
+    },
+    'hover-replay': {
+      label: 'Hover-Replay',
+      title: 'Animierte Icons mit Hover-Replay',
+      intro:
+        'Diese Icons spielen einmal ab, wenn der Mauszeiger sie erreicht, und laufen dann von selbst zu Ende. So wird aus dem schnellen Überfahren einer Toolbar kein nervöses Gezappel. Die meisten Icons der Sammlung funktionieren so: Pfeile, Dateien, Geräte, Wetter- und Marken-Icons, die bei Hover lebendig werden.',
+      useCases: [
+        'Feature-Listen und Preistabellen',
+        'Pfeil-Links und Call-to-Action-Buttons',
+        'Toolbar-Buttons in Editoren und Dashboards',
+        'Karten im Raster einer Landingpage',
+        'Links im Footer und zum Kontakt',
+      ],
+      example:
+        'Icons mit Hover-Replay beleben typischerweise Pfeil-Links, Feature-Listen, Toolbar-Buttons und Karten auf Landingpages.',
+      description:
+        'Spielt bei mouseenter einmal ab, außer bei reduzierter Bewegung. Verlassen stoppt die Animation nicht, und erneutes Betreten während der Wiedergabe startet sie nicht neu.',
+      reducedMotion: 'Ist reduzierte Bewegung eingestellt, spielt Hover die Animation nicht ab.',
+      plays: 'spielen bei Hover einmal ab',
+    },
+    'hover-loop': {
+      label: 'Hover-Loop',
+      title: 'Animierte Icons mit Hover-Loop',
+      intro:
+        'Diese Icons laufen in Schleife, solange der Mauszeiger auf ihnen liegt, und spielen den aktuellen Durchlauf zu Ende, wenn er sie verlässt. Sie bleiben also nie mitten in der Bewegung stehen. Sie eignen sich für Links, die zu einem längeren Blick einladen, vor allem Social- und Community-Icons.',
+      useCases: [
+        'Social-Media-Links in Header und Footer',
+        'Einladungs-Buttons für Community und Chat',
+        'Links zu Portfolio und Profil',
+        'Auswahl von Sprache und Region',
+      ],
+      example:
+        'Icons mit Hover-Loop kennzeichnen typischerweise Social-Links, Community-Einladungen, Portfolio-Links und die Sprachauswahl.',
+      description:
+        'Läuft in Schleife, solange der Mauszeiger darauf liegt, spielt nach mouseleave den aktuellen Durchlauf zu Ende und bleibt bei reduzierter Bewegung statisch.',
+      reducedMotion:
+        'Ist reduzierte Bewegung eingestellt, bleibt das Icon auch bei Hover statisch.',
+      plays: 'laufen in Schleife, solange der Mauszeiger darauf liegt',
+    },
+  },
+};
diff --git a/website/src/i18n/messages/es/common.ts b/website/src/i18n/messages/es/common.ts
new file mode 100644
index 0000000..a7a77d4
--- /dev/null
+++ b/website/src/i18n/messages/es/common.ts
@@ -0,0 +1,47 @@
+// Texto común a todas las páginas: layout, cabecera, pie, migas de pan, FAQ y botones de copiar.
+import type { Messages } from '../en';
+
+export const common: Messages['common'] = {
+  skipToContent: 'Saltar al contenido',
+  ogImageAlt: 'useAnimations: iconos animados gratis para React, shadcn/ui, Lottie y SVG',
+  homeLabel: 'Inicio de useAnimations',
+  mainNav: 'Principal',
+  browseIcons: 'Explorar iconos',
+  nav: {
+    icons: 'Iconos',
+    categories: 'Categorías',
+    documentation: 'Documentación',
+    shadcn: 'shadcn',
+    lottie: 'Iconos Lottie',
+    license: 'Licencia',
+  },
+  footer: {
+    tagline:
+      'Iconos animados gratis con interacciones integradas. Con licencia MIT, hechos para React.',
+    product: 'Producto',
+    developers: 'Desarrolladores',
+    follow: 'Síguenos',
+    languages: 'Idiomas',
+    allIcons: 'Todos los iconos',
+    categories: 'Categorías',
+    interactions: 'Interacciones',
+    lottieIcons: 'Iconos Lottie',
+    shadcnIcons: 'Iconos para shadcn/ui',
+    documentation: 'Documentación',
+    licencing: 'Licencia y condiciones',
+    shadcnRegistry: 'Registro de shadcn',
+    mitLicense: 'Licencia MIT',
+    builtWith: 'Sitio creado con Astro',
+  },
+  breadcrumb: 'Ruta de navegación',
+  crumbs: { icons: 'Iconos', categories: 'Categorías', interactions: 'Interacciones' },
+  faq: 'Preguntas frecuentes',
+  copy: 'Copiar',
+  copied: 'Copiado',
+  pressCtrlC: 'Pulsa Ctrl+C',
+  languageBanner: {
+    text: 'Esta página también está disponible en español.',
+    action: 'Ver en español',
+    dismiss: 'Cerrar',
+  },
+};
diff --git a/website/src/i18n/messages/es/docs.ts b/website/src/i18n/messages/es/docs.ts
new file mode 100644
index 0000000..5cd29c9
--- /dev/null
+++ b/website/src/i18n/messages/es/docs.ts
@@ -0,0 +1,35 @@
+// El marco de la página de documentación. El cuerpo está en src/content/documentation.es.md.
+import type { Messages } from '../en';
+
+export const docs: Messages['docs'] = {
+  title: 'Documentación — useAnimations',
+  description: (iconCount: number) =>
+    `Cómo usar ${iconCount} iconos animados en React y shadcn/ui: interacciones, props, colores, archivos y accesibilidad.`,
+  badge: 'Documentación',
+  onThisPage: 'En esta página',
+  viewAsMarkdown: 'Ver como Markdown',
+  headline: 'Documentación de useAnimations',
+  summary: 'Cómo usar los iconos animados de useAnimations en React y shadcn/ui.',
+  crumb: 'Documentación',
+  faq: [
+    {
+      question: '¿useAnimations es gratis para proyectos comerciales?',
+      answer: 'Sí. Los iconos y el paquete de React tienen licencia MIT y no requieren atribución.',
+    },
+    {
+      question: '¿Cómo uso los iconos de useAnimations en React?',
+      answer:
+        'Instala react-useanimations, importa UseAnimations y un icono (por ejemplo, react-useanimations/lib/checkmark) y renderiza <UseAnimations animation={checkmark} size={32} />.',
+    },
+    {
+      question: '¿Cómo cambio el color de un icono?',
+      answer:
+        'Los iconos siguen el color del texto. Puedes cambiarlo con strokeColor y fillColor, con la propiedad color de CSS o aplicando estilos a los trazados.',
+    },
+    {
+      question: '¿Funciona sin React?',
+      answer:
+        'El paquete es para React. Cada icono es también un archivo Lottie JSON estándar que puede reproducir cualquier reproductor de Lottie (lottie-web, dotLottie, lottie-react-native, lottie-ios, lottie-android, Flutter), además de un SVG estático. Consulta “Uso sin React” y useanimations.com/lottie-icons.',
+    },
+  ],
+};
diff --git a/website/src/i18n/messages/es/home.ts b/website/src/i18n/messages/es/home.ts
new file mode 100644
index 0000000..8dfbada
--- /dev/null
+++ b/website/src/i18n/messages/es/home.ts
@@ -0,0 +1,172 @@
+// La página de inicio (/), sus preguntas frecuentes y los enlaces a las colecciones.
+import type { Messages } from '../en';
+import type { FaqLinks, HomeFaq } from '../en/home';
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const home: Messages['home'] = {
+  title: 'Iconos animados y microanimaciones — useAnimations',
+  description: (count: number) =>
+    `${count} microanimaciones gratis para UI: una biblioteca de iconos animados para React, shadcn/ui y Lottie con hover, clic y bucle integrados. MIT.`,
+
+  hero: {
+    badge: (count: number) => `${count} iconos · cero dependencias · MIT`,
+    headline: { start: 'Iconos que ', accent: 'cobran vida.', end: '' },
+    h1: 'Iconos animados gratis para React, shadcn/ui y Lottie',
+    intro: (count: number) =>
+      `${count} microanimaciones hechas a mano, con microinteracciones de hover, clic y bucle integradas. Úsalas como componente de React, añádelas con shadcn o descarga los archivos SVG y Lottie JSON. Con licencia MIT.`,
+    browse: 'Explorar iconos',
+    fieldHint: 'Mueve el puntero sobre los iconos.',
+  },
+
+  numbers: {
+    label: 'De un vistazo',
+    icons: 'iconos animados',
+    interactions: 'interacciones integradas',
+    size: 'reproductor, con gzip',
+    dependencies: 'dependencias',
+  },
+
+  interactions: {
+    eyebrow: 'Interacciones integradas',
+    title: 'Cada icono sabe cómo moverse.',
+    intro:
+      'Cada icono viene con la interacción para la que fue diseñado. Colócalo y funciona sin más, o elige otra con una sola prop. Pruébalas:',
+    demos: {
+      loop: 'Se reproduce sin parar, para loaders y estados de fondo.',
+      'click-toggle': 'Alterna entre dos estados: menú y cerrar, reproducir y pausar.',
+      'click-replay': 'Se repite desde el principio con cada clic, como confirmación.',
+      hover: 'Avanza al entrar el cursor y retrocede al salir.',
+      'hover-loop': 'Se repite en bucle durante el hover y termina su ciclo al salir.',
+      'hover-replay': 'Se reproduce una vez desde el principio cada vez que entra el cursor.',
+    },
+  },
+
+  browser: {
+    eyebrow: 'La biblioteca',
+    title: (count: number) => `${count} iconos animados gratis`,
+    intro:
+      'Pasa el cursor o haz clic para reproducirlos. Abre un icono para ver su código y sus descargas: Lottie JSON, SVG y ZIP.',
+    search: 'Buscar iconos',
+    searchPlaceholder: (count: number) =>
+      `Busca entre ${count} iconos (en inglés): prueba “eye”, “bell” o “arrow”`,
+    interaction: 'Interacción',
+    allInteractions: 'Todas las interacciones',
+    color: 'Color del icono',
+    colors: {
+      text: 'Color del texto',
+      indigo: 'Índigo',
+      red: 'Rojo',
+      amber: 'Ámbar',
+      teal: 'Verde azulado',
+      violet: 'Violeta',
+    },
+    customColor: 'Color personalizado',
+    size: 'Tamaño',
+    category: 'Categoría',
+    all: 'Todos',
+    count: { one: '{n} icono', other: '{n} iconos' },
+    noMatch: 'Ningún icono coincide con la búsqueda.',
+    noMatchHintHtml: (href: string) =>
+      `Prueba con otra palabra o ${link(href, 'sugiere un icono')}.`,
+  },
+
+  everywhere: {
+    eyebrow: 'Úsalos a tu manera',
+    title: 'Instala, importa y listo.',
+    intro:
+      'Un componente de React sin dependencias, un registro de shadcn, archivos descargables con URL estables y un catálogo que pueden leer los agentes de IA.',
+    docs: 'Leer la documentación →',
+    tablist: 'Plataforma',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Archivos', agents: 'Agentes' },
+    codeText: {
+      afterAdding: 'después',
+      files: 'Cada icono como SVG, como animación (Lottie JSON) y como ZIP con ambos',
+    },
+  },
+
+  features: {
+    title: 'Ligeros, accesibles y a tu estilo.',
+    colors: 'Siguen tus colores',
+    colorsHtml: `Los iconos usan ${code('currentColor')}: adoptan por sí solos el color del texto, los estados de hover y el modo oscuro. Puedes cambiarlo con una prop, una clase o CSS normal.`,
+    tiny: 'Diminutos por diseño',
+    tinyText:
+      'Un reproductor integrado y cero dependencias. Cada icono es su propio módulo de 2 kB.',
+    accessible: 'Accesibles por defecto',
+    accessibleText:
+      'Respetan el movimiento reducido, reproducen las animaciones de hover con el foco del teclado y los lectores de pantalla los ignoran salvo que les pongas una etiqueta.',
+    ssr: 'Listos para el renderizado en servidor',
+    ssrText:
+      'Un componente de cliente que se renderiza sin problemas en Next.js, Remix y Astro. Los iconos son datos simples que puedes importar en cualquier parte.',
+    agents: 'Hechos para agentes',
+    agentsHtml: (iconsJson: string, llmsTxt: string) =>
+      `Un catálogo tipado con palabras clave para cada icono, ${link(iconsJson, 'icons.json')}, ${link(llmsTxt, 'llms.txt')} y documentación en Markdown.`,
+  },
+
+  browse: {
+    title: 'Encuentra la microanimación adecuada.',
+    byCategory: 'Explorar por categoría',
+    byInteraction: 'Explorar por interacción',
+    formats: 'Todos los iconos y formatos',
+  },
+
+  hubs: {
+    icons: 'Todos los iconos animados',
+    categories: 'Categorías de iconos',
+    interactions: 'Iconos por interacción',
+    lottie: 'Iconos Lottie (JSON)',
+    shadcn: 'Iconos animados para shadcn/ui',
+  },
+
+  faqTitle: 'Preguntas',
+  faq: (f: { version: string; links: FaqLinks }): HomeFaq => [
+    {
+      question: '¿Qué son las microanimaciones y los iconos animados?',
+      answer:
+        'Las microanimaciones son movimientos breves con un único propósito que responden a una acción del usuario: un icono de menú que se convierte en un botón de cerrar, un corazón que se rellena cuando das me gusta a una publicación, una campana que suena con una notificación nueva. Los iconos animados son el tipo más habitual. Hacen que una interfaz se sienta ágil y muestran los cambios de estado sin texto adicional.',
+    },
+    {
+      question: '¿Qué diferencia hay entre los archivos Lottie y SVG?',
+      answer:
+        'El archivo Lottie JSON contiene la animación completa y se reproduce en cualquier reproductor de Lottie, incluido el que trae react-useanimations. Los archivos SVG son imágenes estáticas del icono en reposo, una por estado (por ejemplo, eye y eye-off), para lugares donde nada debe moverse: correos, documentos, herramientas de diseño o una alternativa sin JavaScript.',
+    },
+    {
+      question: '¿Funciona con Next.js y el renderizado en servidor?',
+      answer:
+        "Sí. El componente está marcado con 'use client' y dibuja la animación solo en el navegador, así que se renderiza desde server components y frameworks con SSR como Next.js, Remix y Astro sin imports dinámicos. Los módulos de los iconos son datos simples que los server components pueden importar y pasar como props.",
+      link: { href: f.links.serverRendering, label: 'Next.js y renderizado en servidor' },
+    },
+    {
+      question: '¿Puedo usar los iconos en proyectos comerciales?',
+      answer:
+        'Sí. Los iconos y el paquete react-useanimations tienen licencia MIT: úsalos, modifícalos y redistribúyelos en trabajos personales y comerciales. La atribución se agradece, pero no es obligatoria.',
+      link: { href: f.links.licence, label: 'Licencia y condiciones' },
+    },
+    {
+      question: '¿Puedo usar los iconos sin React?',
+      answer:
+        'Sí. Cada icono es un archivo Lottie JSON estándar, así que se reproduce con lottie-web en JavaScript puro, Vue, Svelte, Angular o un CMS, y en los reproductores de Lottie para iOS, Android y Flutter. La página de iconos Lottie tiene las URL de los archivos y fragmentos de lottie-web listos para usar con cada interacción.',
+      link: { href: f.links.lottie, label: 'Iconos Lottie' },
+    },
+    {
+      question: '¿Cuánto añaden los iconos a mi bundle?',
+      answer: `El reproductor de react-useanimations ${f.version} ocupa unos 8 kB con gzip y no tiene dependencias, y cada icono es un módulo independiente de 1 a 15 kB (2 kB de mediana), así que el bundle solo incluye los iconos que importas.`,
+    },
+  ],
+
+  cta: {
+    title: { start: 'Pon tu interfaz ', accent: 'en movimiento.', end: '' },
+    text: 'Gratis y con licencia MIT, para trabajos personales y comerciales.',
+    start: 'Empezar',
+  },
+
+  schema: {
+    software: (count: number) =>
+      `Componente de React y ${count} iconos animados (Lottie) con interacciones de hover, clic y bucle integradas. Sin dependencias.`,
+    catalogName: 'Catálogo de iconos de useAnimations',
+    catalog: (count: number) =>
+      `Los ${count} iconos de useAnimations con id, título, categoría, palabras clave, interacción, URL de Lottie JSON, SVG y ZIP, import de React y comando de shadcn.`,
+  },
+};
diff --git a/website/src/i18n/messages/es/hubs.ts b/website/src/i18n/messages/es/hubs.ts
new file mode 100644
index 0000000..ff07e13
--- /dev/null
+++ b/website/src/i18n/messages/es/hubs.ts
@@ -0,0 +1,191 @@
+// Páginas de categoría e interacción: frases generadas con gramática española.
+import type { Interaction } from 'react-useanimations';
+import type { Messages } from '../en';
+import type { CategoryFacts, Faq, InteractionFacts } from '../en/hubs';
+import { formIn, listIn, pluralIn } from '../../format';
+
+const list = listIn('es');
+const plural = pluralIn('es');
+const form = formIn('es');
+const icons = (n: number) => plural(n, { one: 'icono', other: 'iconos' });
+const lower = (text: string) => text[0].toLowerCase() + text.slice(1);
+
+/** Hasta `max` títulos y después «y N más». */
+const titles = (items: string[], max = 12) =>
+  items.length > max
+    ? `${items.slice(0, max).join(', ')} y ${items.length - max} más`
+    : list(items);
+
+/** Cómo se reproduce un solo icono (las frases de `plays` están en plural). */
+const PLAYS_ONE: Record<Interaction, string> = {
+  loop: 'se reproduce sin parar',
+  'click-toggle': 'alterna entre dos estados al hacer clic',
+  'click-replay': 'se repite con cada clic',
+  hover: 'se reproduce con hover y retrocede al salir el cursor',
+  'hover-replay': 'se reproduce una vez con hover',
+  'hover-loop': 'se repite en bucle mientras el cursor está encima',
+};
+
+/** Los formatos de cada icono, con los SVG estáticos si los hay. */
+const formats = (f: CategoryFacts) => {
+  if (f.withSvg === f.count)
+    return 'como componente de React, componente de shadcn/ui, animación Lottie JSON y SVG estático';
+  const base = 'como componente de React, componente de shadcn/ui y animación Lottie JSON';
+  if (!f.withSvg) return base;
+  return `${base} (${f.withSvg} de ellos también como SVG estático)`;
+};
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+
+/** «Todos los iconos de …»; la categoría «Otros» se nombra aparte. */
+const allOf = (name: string) =>
+  name === 'Otros' ? 'Todos los demás iconos' : `Todos los iconos de ${name.toLowerCase()}`;
+
+export const hubs: Messages['hubs'] = {
+  titleSuffix: ' — useAnimations',
+  iconCount: icons,
+
+  category: {
+    titles: (f: CategoryFacts) => [
+      `${f.title} para React y Lottie`,
+      `${f.title} para React`,
+      `${f.title} gratis`,
+      f.title,
+    ],
+    descriptions: (f: CategoryFacts) => {
+      const name = lower(f.title);
+      const examples = list(f.titles.slice(0, 3));
+      return [
+        `${f.count} ${name} gratis, como ${examples}. Microanimaciones con hover, clic y bucle para React, shadcn/ui y Lottie JSON, con licencia MIT.`,
+        `${f.count} ${name} gratis, como ${examples}. Para React, shadcn/ui y Lottie JSON, con licencia MIT.`,
+        `${f.count} ${name} gratis, como ${examples}. Para React, shadcn/ui y Lottie, MIT.`,
+        `${f.count} ${name} gratis para React, shadcn/ui y Lottie JSON, con licencia MIT.`,
+        `${f.count} ${name} gratis para React, shadcn/ui y Lottie, MIT.`,
+      ];
+    },
+    summary: (f: CategoryFacts) => {
+      const first =
+        f.groups.length === 1
+          ? f.count === 1
+            ? `El icono ${PLAYS_ONE[f.groups[0].interaction]}`
+            : `Los ${f.count} iconos ${f.groups[0].plays}`
+          : `De los ${f.count} iconos, ${list(
+              f.groups.map(({ interaction, count, plays }) =>
+                count === 1 ? `1 ${PLAYS_ONE[interaction]}` : `${count} ${plays}`
+              )
+            )}`;
+      return `${first}. Cada uno se ofrece ${formats(f)}, gratis para uso comercial con la licencia MIT.`;
+    },
+    faq: (f: CategoryFacts): Faq => {
+      const name = lower(f.title);
+      const ex = f.example;
+      const n = f.expressions.length;
+      return [
+        {
+          question: `¿Qué ${name} se incluyen?`,
+          answer: `${icons(f.count)}: ${titles(f.titles)}. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.`,
+        },
+        {
+          question: `¿Cómo uso estos ${name} en React?`,
+          answer: `Instala react-useanimations, añade ${ex.importLine} y renderiza <UseAnimations animation={${ex.exportName}} size={32} />. El icono reproduce su interacción “${ex.interactionLabel}” y sigue el color del texto. Con shadcn/ui, ejecuta en su lugar ${ex.shadcnCommand}.`,
+        },
+        {
+          question: `¿Puedo usar estos ${name} sin React?`,
+          answer: `Sí. Cada icono es un archivo Lottie JSON en ${f.site}/icons/<id>.json (por ejemplo, ${f.site}/icons/${ex.id}.json) que se reproduce con lottie-web, lottie-ios, lottie-android o el paquete lottie de Flutter${f.withSvg ? '; los SVG estáticos están en la página de cada icono (en inglés)' : ''}. ${
+            n
+              ? `${titles(f.expressions, 6)} ${form(n, { one: 'usa', other: 'usan' })} expresiones de After Effects, así que en la web ${form(n, { one: 'necesita', other: 'necesitan' })} la versión completa de lottie-web.`
+              : 'Ninguno usa expresiones, así que basta con la versión ligera de lottie-web.'
+          }`,
+        },
+      ];
+    },
+    badge: (n: number) => `${icons(n)} · licencia MIT`,
+    allIcons: allOf,
+    whereToUse: 'Dónde usarlos',
+    byInteraction: 'Por interacción',
+    addOne: 'Añade uno a tu app',
+    addOneHtml: (label: string, name: string) =>
+      `Con React, instala ${code('react-useanimations')} e importa el icono; reproducirá por sí solo su interacción “${label}”. Todos los iconos de esta categoría funcionan igual: cambia ${code(name)} por el nombre que aparece en la página de cada uno.`,
+    shadcnHtml: (href: string) =>
+      `Con ${link(href, 'shadcn/ui')}, la CLI añade un componente listo para usar:`,
+    noReactHtml: (href: string) =>
+      `¿No usas React? Cada icono es un archivo Lottie JSON en ${code('/icons/&lt;id&gt;.json')}; en ${link(href, 'Iconos Lottie')} encontrarás reproductores para web, iOS, Android y Flutter.`,
+    more: 'Más categorías',
+    allIconsButton: 'Todos los iconos',
+  },
+
+  interaction: {
+    titles: (f: InteractionFacts) => [
+      `${f.title} para React y Lottie`,
+      `${f.title} para React`,
+      f.title,
+    ],
+    descriptions: (f: InteractionFacts) => {
+      const name = lower(f.title);
+      return [
+        `${f.count} ${name} gratis que ${f.plays}, como ${list(f.titles.slice(0, 3))}. Para React, shadcn/ui y Lottie JSON, con licencia MIT.`,
+        `${f.count} ${name} gratis que ${f.plays}. Para React, shadcn/ui y Lottie JSON, con licencia MIT.`,
+        `${f.count} ${name} gratis para React, shadcn/ui y Lottie JSON, con licencia MIT.`,
+      ];
+    },
+    faq: (f: InteractionFacts): Faq => [
+      {
+        question: `¿Qué iconos usan la interacción “${f.label}”?`,
+        answer: `${icons(f.count)}: ${titles(f.titles, 15)}. ${f.example}`,
+      },
+      {
+        question: '¿Qué pasa cuando el usuario prefiere movimiento reducido?',
+        answer: `${f.reducedMotion} El componente de React lee prefers-reduced-motion y se actualiza cuando cambia el ajuste, así que no necesitas escribir código para ello.`,
+      },
+      {
+        question: '¿Cómo cambio la interacción de un icono?',
+        answer: `Cada icono reproduce la interacción para la que fue diseñado. Pasa interaction="${f.interaction}" para dar este comportamiento a cualquier otro icono, u otro valor ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') para cambiarlo. Las props autoplay, loop y speed ajustan la reproducción.${
+          f.interaction === 'click-toggle'
+            ? ' Para controlar el estado tú mismo, pasa active={isOn} y actualízalo en onClick: así los clics dejan de alternar el icono por sí solos.'
+            : ''
+        }`,
+      },
+    ],
+    allIcons: (label: string) => `Todos los iconos con la interacción “${label}”`,
+    behaviour: 'Cómo se comporta',
+    hoverNote:
+      ' En pantallas táctiles, un toque no inicia las animaciones de hover; el foco del teclado sí, cuando el icono está dentro de un elemento enfocable.',
+    handled: 'El componente de React se encarga de todo esto; tú solo eliges el icono.',
+    whereToUse: 'Dónde usarlos',
+    byCategory: 'Por categoría',
+    useInReact: 'Úsalo en React',
+    overrideHtml: `Los iconos de esta lista usan esta interacción por defecto, pero cualquier otro icono también puede usarla: pasa la prop ${code('interaction')}.`,
+    normallyUses: (title: string, interaction: string) =>
+      `${title} usa normalmente '${interaction}'`,
+    extra: {
+      loop: 'Los bucles se reproducen automáticamente y se pausan cuando quedan fuera de la vista. Ralentiza uno con speed, reprodúcelo una sola vez con loop={false} o déjalo quieto con autoplay={false}:',
+      'click-toggle':
+        'Los clics alternan el icono por sí solos. Para mantenerlo sincronizado con tu estado, pasa active: el icono se anima cada vez que active cambia y los clics ya no lo alternan por su cuenta.',
+      'click-replay':
+        'Coloca el icono dentro de un botón real con la render prop, para que pueda recibir el foco y los lectores de pantalla lo anuncien. Tu onClick se ejecuta primero; llama a event.preventDefault() para omitir la animación.',
+      hover:
+        'Coloca el icono dentro de un enlace o un botón con la render prop: así la animación también se reproduce cuando el elemento recibe el foco del teclado, y los toques en pantallas táctiles no la activan.',
+      'hover-replay':
+        'Aplica el hover a toda la tarjeta o el enlace, no solo al icono: con la render prop los eventos van a tu elemento, y el foco del teclado también reproduce la animación.',
+      'hover-loop':
+        'Usa la render prop para que todo el enlace active el bucle, también con el foco del teclado. Cambia el ritmo con speed:',
+    },
+    codeText: {
+      halfSpeed: 'a mitad de velocidad',
+      playsOnce: 'se reproduce una vez y se detiene',
+      staticFrame: 'primer fotograma estático',
+      endState: 'true muestra el estado final',
+      closeMenu: 'Cerrar menú',
+      openMenu: 'Abrir menú',
+      download: 'Descargar',
+      archive: 'Archivo',
+      weeklyGrowth: 'Crecimiento semanal',
+    },
+    docsHtml: (docs: string, lottie: string) =>
+      `Todas las props están en la ${link(docs, 'documentación')}. Fuera de React, los iconos son archivos Lottie JSON; en ${link(lottie, 'Iconos Lottie')} verás cómo recrear las interacciones con lottie-web.`,
+    other: 'Otras interacciones',
+    browseByCategory: 'Explorar por categoría',
+  },
+};
diff --git a/website/src/i18n/messages/es/index.ts b/website/src/i18n/messages/es/index.ts
new file mode 100644
index 0000000..8a723e7
--- /dev/null
+++ b/website/src/i18n/messages/es/index.ts
@@ -0,0 +1,12 @@
+// Español (neutro, para España y Latinoamérica).
+import type { Messages } from '../en';
+import { common } from './common';
+import { docs } from './docs';
+import { home } from './home';
+import { hubs } from './hubs';
+import { islands } from './islands';
+import { licence } from './licence';
+import { pages } from './pages';
+import { taxonomy } from './taxonomy';
+
+export const messages: Messages = { common, taxonomy, hubs, home, docs, licence, pages, islands };
diff --git a/website/src/i18n/messages/es/islands.ts b/website/src/i18n/messages/es/islands.ts
new file mode 100644
index 0000000..8e5f08c
--- /dev/null
+++ b/website/src/i18n/messages/es/islands.ts
@@ -0,0 +1,52 @@
+// Texto de las islas de React (components/*.tsx); '{name}' lo rellena el componente.
+import type { Messages } from '../en';
+
+export const islands: Messages['islands'] = {
+  iconCard: {
+    hints: {
+      loop: 'Bucle',
+      'click-toggle': 'Clic',
+      'click-replay': 'Clic',
+      hover: 'Hover',
+      'hover-loop': 'Hover',
+      'hover-replay': 'Hover',
+    },
+  },
+  iconDialog: {
+    hints: {
+      loop: 'Se reproduce solo',
+      'click-toggle': 'Haz clic para alternar',
+      'click-replay': 'Haz clic para repetir',
+      hover: 'Pasa el cursor para reproducir; al salir, se invierte',
+      'hover-loop': 'Pasa el cursor para repetir en bucle',
+      'hover-replay': 'Pasa el cursor para reproducir',
+    },
+    preview: 'Vista previa de {title}',
+    colors: 'Color de la vista previa',
+    color: 'Color {color}',
+    textColor: 'Color del texto',
+    interaction: 'Interacción',
+    duration: 'Duración',
+    seconds: '{seconds} s',
+    import: 'Importar',
+    close: 'Cerrar',
+    code: 'Código',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Archivos' },
+    copy: 'Copiar',
+    download: 'Descargar',
+    iconPage: 'Página del icono →',
+  },
+  interactionDemo: {
+    click: 'Haz clic en la tarjeta',
+    loop: 'Se reproduce solo',
+    hover: 'Pasa el cursor sobre la tarjeta',
+  },
+  mobileMenu: {
+    menu: 'Menú',
+    nav: 'Principal',
+  },
+  themeToggle: {
+    toLight: 'Cambiar al tema claro',
+    toDark: 'Cambiar al tema oscuro',
+  },
+};
diff --git a/website/src/i18n/messages/es/licence.ts b/website/src/i18n/messages/es/licence.ts
new file mode 100644
index 0000000..e69d0d9
--- /dev/null
+++ b/website/src/i18n/messages/es/licence.ts
@@ -0,0 +1,27 @@
+// La página de licencia (/licencing-and-terms). El texto de LICENSE se muestra en inglés.
+import type { Messages } from '../en';
+
+export const licence: Messages['licence'] = {
+  title: 'Licencia y condiciones — useAnimations',
+  description:
+    'Los iconos de useAnimations y el paquete react-useanimations tienen licencia MIT: uso personal y comercial y redistribución gratis, sin atribución.',
+  name: 'Licencia y condiciones',
+  heading: 'De uso libre. Con licencia MIT.',
+  introHtml: (mitHref: string) =>
+    `Los iconos de useAnimations y el paquete <code>react-useanimations</code> se publican bajo la <a href="${mitHref}">licencia MIT</a>.`,
+  canDo: 'Qué puedes hacer',
+  canDoItemsHtml: [
+    '<strong>Usar</strong> los iconos en sitios web, aplicaciones y productos personales y comerciales.',
+    '<strong>Modificarlos</strong>: cambiar colores, tamaños, tiempos o el propio movimiento.',
+    '<strong>Redistribuirlos</strong>, también dentro de packs de iconos, plantillas, temas, kits de UI y registros de componentes.',
+  ],
+  attribution: 'Atribución',
+  attributionText:
+    'No es obligatoria, pero se agradece. Conserva el aviso de licencia cuando redistribuyas los propios archivos y, si quieres mencionarnos:',
+  credit: (link: string) => `Iconos animados de ${link}`,
+  noWarranty: 'Sin garantía',
+  noWarrantyText: 'Los iconos y el código se ofrecen tal cual, sin garantía de ningún tipo.',
+  licenseText: 'Texto de la licencia',
+  bindingNote:
+    'El texto de la licencia que aparece a continuación es la versión original en inglés, que es la jurídicamente vinculante.',
+};
diff --git a/website/src/i18n/messages/es/pages.ts b/website/src/i18n/messages/es/pages.ts
new file mode 100644
index 0000000..759d3bd
--- /dev/null
+++ b/website/src/i18n/messages/es/pages.ts
@@ -0,0 +1,244 @@
+// Las páginas de colección: /icons, /categories, /interactions, /lottie-icons y /shadcn-animated-icons.
+import type { Messages } from '../en';
+import type { Faq } from '../en/hubs';
+import { listIn, pluralIn } from '../../format';
+
+const plural = pluralIn('es');
+const list = listIn('es');
+const icons = (n: number) => plural(n, { one: 'icono', other: 'iconos' });
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+const strong = (text: string) => `<strong class="font-medium text-fg">${text}</strong>`;
+
+export const pages: Messages['pages'] = {
+  icons: {
+    titles: (count: number) => [
+      `Los ${count} iconos animados por categoría`,
+      `Los ${count} iconos animados`,
+    ],
+    descriptions: (count: number, categories: number) => [
+      `Todos los iconos de useAnimations en una página: ${count} iconos animados gratis en ${categories} categorías, para React, shadcn/ui, Lottie JSON y SVG. Licencia MIT.`,
+      `${count} iconos animados gratis en ${categories} categorías, para React, shadcn/ui, Lottie JSON y SVG. Con licencia MIT.`,
+    ],
+    title: 'Todos los iconos animados',
+    badge: (count: number) => `${icons(count)} · licencia MIT`,
+    introHtml: (browser: string) =>
+      `Todos los iconos del set, agrupados por categoría. Abre uno para ver una vista previa en vivo, su código de React y shadcn/ui y las descargas en Lottie JSON, SVG y ZIP (las páginas de cada icono están en inglés). Para buscar por palabra clave y probar las animaciones aquí mismo, usa el ${link(browser, 'explorador de iconos')}.`,
+    categoriesNav: 'Categorías',
+    byInteraction: 'Por interacción:',
+    categoryLink: (count: number, name: string) =>
+      name === 'Otros' ? `${icons(count)} más →` : `${icons(count)} de ${name.toLowerCase()} →`,
+  },
+
+  categories: {
+    titles: (categories: number) => [
+      `Categorías de iconos animados: ${categories} colecciones`,
+      'Categorías de iconos animados',
+    ],
+    descriptions: (n: number, categories: number) => [
+      `Explora ${n} iconos animados gratis en ${categories} categorías: navegación, acciones, multimedia, carga, redes sociales y más. Para React, shadcn/ui y Lottie.`,
+      `${n} iconos animados gratis en ${categories} categorías: navegación, acciones, multimedia, carga y más. Para React, shadcn/ui y Lottie.`,
+    ],
+    title: 'Categorías de iconos animados',
+    badge: (n: number, categories: number) => `${icons(n)} · ${categories} categorías`,
+    introHtml: (interactions: string) =>
+      `Cada icono de useAnimations pertenece a una categoría, desde flechas de navegación y controles multimedia hasta loaders y logotipos de redes sociales. Abre una categoría para ver todos sus iconos, dónde usarlos y el código para añadir uno, o explora por ${link(interactions, 'interacción')}.`,
+    iconCount: icons,
+  },
+
+  interactions: {
+    titles: [
+      'Microinteracciones: iconos con hover, clic y bucle',
+      'Microinteracciones para iconos animados',
+    ],
+    descriptions: (n: number, interactions: number) => [
+      `${n} iconos animados con ${interactions} microinteracciones: bucle, alternar con clic, repetir con clic, hover, repetir con hover y bucle con hover. Con movimiento reducido.`,
+      `${n} iconos animados con ${interactions} microinteracciones de hover, clic y bucle, compatibles con movimiento reducido.`,
+    ],
+    title: 'Interacciones de los iconos animados',
+    badge: (interactions: number, n: number) => `${interactions} interacciones · ${icons(n)}`,
+    introHtml: `Cada icono viene con la microinteracción para la que fue diseñado: se repite en bucle, alterna o se repite al hacer clic, o se reproduce con hover. El componente de React la conecta y respeta el movimiento reducido, y la prop <code class="font-mono text-base text-fg">interaction</code> cambia cualquier icono a otra.`,
+    iconCount: icons,
+    chooseTitle: 'Cómo elegir una interacción',
+    chooseHtml: {
+      loop: (href: string) =>
+        `${strong('Un estado que dura')}, como una carga o una alerta activa: ${link(href, 'bucle')}.`,
+      'click-toggle': (href: string) =>
+        `${strong('Un control de activar y desactivar')}, como silenciar, el menú o mostrar la contraseña: ${link(href, 'alternar con clic')}, con ${code('active')} para el estado controlado.`,
+      'click-replay': (href: string) =>
+        `${strong('Una acción puntual')}, como enviar, guardar o actualizar: ${link(href, 'repetir con clic')}.`,
+      hover: (href: string) =>
+        `${strong('Una pista de lo que abre un enlace')}: ${link(href, 'hover')}, que retrocede cuando sale el puntero.`,
+      'hover-replay': (href: string) =>
+        `${strong('Barras de herramientas y listas que se recorren con el cursor')}: ${link(href, 'repetir con hover')}, que termina por sí sola.`,
+      'hover-loop': (href: string) =>
+        `${strong('Enlaces que invitan a mirar con calma')}, como los iconos sociales: ${link(href, 'bucle con hover')}.`,
+    },
+    motionTitle: 'Movimiento reducido',
+    motionHtml: `El componente de React respeta ${code('prefers-reduced-motion')} y se actualiza cuando cambia el ajuste. Los toques en pantallas táctiles nunca inician las animaciones de hover.`,
+    reducedMotion: {
+      loop: 'el icono no se reproduce automáticamente y se queda en su primer fotograma estático.',
+      'click-toggle': 'un clic cambia al otro estado de inmediato, sin la animación intermedia.',
+      'click-replay': 'los clics siguen llegando a tu handler, pero la animación no se reproduce.',
+      hover: 'el hover no reproduce la animación.',
+      'hover-replay': 'el hover no reproduce la animación.',
+      'hover-loop': 'el icono se queda estático durante el hover.',
+    },
+  },
+
+  lottie: {
+    titles: (count: number) => [
+      `Iconos Lottie gratis: ${count} iconos animados en JSON`,
+      'Iconos Lottie gratis',
+    ],
+    descriptions: (count: number) => [
+      `${count} iconos Lottie gratis en Lottie JSON estándar, con licencia MIT. Código listo para copiar en lottie-web, dotLottie, React, React Native, iOS, Android y Flutter.`,
+      `${count} iconos Lottie gratis en JSON, con licencia MIT. Código para lottie-web, dotLottie, React, React Native, iOS, Android y Flutter.`,
+    ],
+    title: 'Iconos Lottie gratis',
+    crumb: 'Iconos Lottie',
+    datasetName: 'Catálogo de iconos de useAnimations',
+    datasetDescription: (count: number) =>
+      `Metadatos y URL de los archivos de ${count} iconos animados Lottie: id, título, categoría, palabras clave, interacción, tamaño y duración.`,
+    badge: (count: number) => `${icons(count)} · Lottie JSON · licencia MIT`,
+    intro:
+      'Cada icono de useAnimations es una animación Lottie JSON estándar, así que cualquier reproductor de Lottie puede reproducirla: lottie-web en la web, lottie-ios, lottie-android, Flutter y React Native. Los archivos son gratis con la licencia MIT, sin registro, y se sirven desde URL estables con CORS habilitado, así que puedes cargarlos directamente o descargarlos en tu proyecto.',
+    popular: 'Iconos Lottie populares',
+    allIcons: (count: number) => `Los ${count} iconos →`,
+    filesTitle: 'Archivos y URL',
+    filesIntroHtml: `Cada icono tiene una página en ${code('/icons/&lt;id&gt;')} (en inglés) con vista previa y descargas. Los archivos en sí:`,
+    files: {
+      json: 'animación Lottie JSON',
+      zip: 'el JSON y los SVG estáticos',
+      svg: 'SVG estático de cada estado',
+      catalog: 'catálogo de todos los iconos',
+    },
+    catalogHtml: (catalog: string, median: number) =>
+      `${link(catalog, 'icons.json')} recoge cada icono con su id, título, categoría, palabras clave, interacción, tamaño, duración y URL de archivos, lo que facilita elegir iconos por palabra clave desde un script o dejar que un agente de programación escoja uno. Los archivos Lottie pesan ${median} kB de mediana.`,
+    players: {
+      web: {
+        title: 'Web: lottie-web',
+        text: 'El reproductor de referencia, creado por Airbnb. Cárgalo desde un CDN, apúntalo a la URL de un icono y elige el renderizador SVG, que mantiene el icono nítido y permite cambiarle el color con CSS. Usa la versión completa (lottie.min.js): la versión ligera ignora las expresiones.',
+        cssLabel: 'Seguir el color del texto (renderizador SVG)',
+      },
+      'web-interactions': {
+        title: 'Web: interacciones de hover y clic',
+        text: 'lottie-web reproduce y detiene, pero las interacciones corren de tu cuenta. Este es el toggle con clic del icono de menú, con soporte para movimiento reducido; todas las interacciones siguen el mismo patrón, y el componente de React que verás más abajo lo hace todo por ti.',
+      },
+      dotlottie: {
+        title: 'Web: componente web de dotLottie',
+        text: 'El reproductor de LottieFiles renderiza en un canvas con un motor WebAssembly y reproduce tanto Lottie JSON normal como archivos .lottie. Un canvas conserva los colores del archivo, así que los iconos se quedan en negro a menos que cambies el color en el JSON.',
+        jsLabel: 'O la API de JavaScript: npm install @lottiefiles/dotlottie-web',
+      },
+      react: {
+        title: 'React: react-useanimations',
+        text: 'No hace falta instalar ningún reproductor de Lottie: el paquete trae su propio reproductor de 8 kB, reproduce la interacción de cada icono, sigue el color del texto y respeta el movimiento reducido. Cada icono es un módulo independiente, así que solo envías los que importas.',
+      },
+      'react-native': {
+        title: 'React Native: lottie-react-native',
+        text: 'Incluye el JSON en el bundle con require() para usarlo sin conexión, o cárgalo desde su URL.',
+      },
+      ios: {
+        title: 'iOS: lottie-ios (SwiftUI)',
+        text: 'Añade el paquete desde https://github.com/airbnb/lottie-spm.git con Swift Package Manager y, después, incluye el JSON en tu bundle o cárgalo desde su URL.',
+      },
+      android: {
+        title: 'Android: lottie-android (Jetpack Compose)',
+        text: 'Añade com.airbnb.android:lottie-compose (o com.airbnb.android:lottie para vistas). Coloca el JSON en res/raw para usarlo sin conexión con LottieCompositionSpec.RawRes.',
+      },
+      flutter: {
+        title: 'Flutter: lottie',
+        text: 'El paquete lottie es un reproductor escrito íntegramente en Dart para Android, iOS, web y escritorio.',
+      },
+    },
+    expressionsTitle: 'Iconos con expresiones',
+    expressionsHtml: (count: number) =>
+      `${icons(count)} usan expresiones de After Effects (${code('loopOut')} o ${code('wiggle')}). En la web, reprodúcelos con la versión completa de lottie-web, no con ${code('lottie_light')}. Los reproductores nativos no evalúan expresiones, así que prueba estos iconos en iOS, Android y Flutter o elige otro; react-useanimations los reproduce tal como se diseñaron.`,
+    faq: (f: {
+      count: number;
+      minSize: number;
+      maxSize: number;
+      medianSize: number;
+      expressions: string[];
+    }): Faq => [
+      {
+        question: '¿Estos iconos Lottie son gratis para uso comercial?',
+        answer: `Sí. Los ${f.count} iconos Lottie tienen licencia MIT: úsalos, modifícalos y redistribúyelos en proyectos personales y comerciales, sin atribución obligatoria y sin necesidad de una cuenta para descargarlos.`,
+      },
+      {
+        question: '¿En qué formato están los archivos Lottie?',
+        answer: `Lottie JSON estándar (el formato Bodymovin) solo con capas de forma: sin imágenes, fuentes ni recursos externos. Cada icono está dibujado en una mesa de trabajo de 24 o 32 px, se escala a cualquier tamaño y pesa entre ${f.minSize} kB y ${f.maxSize} kB, con una mediana de ${f.medianSize} kB.`,
+      },
+      {
+        question: '¿Necesito lottie-web para usar los iconos en React?',
+        answer:
+          'No. react-useanimations trae su propio reproductor de 8 kB sin dependencias, así que instalas un solo paquete e importas los iconos que necesitas. lottie-web solo hace falta fuera de React, en páginas web sin framework o en otros frameworks.',
+      },
+      {
+        question: '¿Qué iconos necesitan la versión completa de lottie-web?',
+        answer: `${icons(f.expressions.length)} usan expresiones de After Effects (loopOut o wiggle): ${list(f.expressions)}. En la web necesitan la versión completa de lottie-web; lottie_light ignora las expresiones. Los reproductores nativos (lottie-ios, lottie-android y el paquete lottie de Flutter) tampoco evalúan expresiones, así que estos iconos pueden moverse de otra forma en ellos.`,
+      },
+      {
+        question: '¿Puedo cambiar el color de un icono Lottie?',
+        answer:
+          'En la web, el renderizador SVG de lottie-web escribe los colores como atributos, así que una regla CSS sobre los trazados cambia el color del icono. Los reproductores nativos usan sus API de propiedades dinámicas: ColorValueProvider en iOS, LottieProperty.COLOR y STROKE_COLOR en Android, y ValueDelegate.color en Flutter.',
+      },
+    ],
+    byCategory: 'Iconos Lottie por categoría',
+  },
+
+  shadcn: {
+    titles: (count: number) => [
+      `Iconos animados para shadcn/ui: ${count} componentes`,
+      'Iconos animados para shadcn/ui',
+    ],
+    descriptions: (count: number) => [
+      `${count} iconos animados para shadcn/ui: añade cualquier icono con un solo comando de la CLI de shadcn. Microinteracciones de hover, clic y bucle, MIT, sin lottie-web.`,
+      `${count} iconos animados para shadcn/ui: añade cualquier icono con un comando de la CLI de shadcn. Con licencia MIT, sin lottie-web.`,
+    ],
+    title: 'Iconos animados para shadcn/ui',
+    crumb: 'shadcn/ui',
+    popularList: 'Iconos animados populares para shadcn/ui',
+    badge: (count: number) => `${count} componentes · registro de shadcn · licencia MIT`,
+    intro:
+      'Todos los iconos de useAnimations están en un registro de shadcn. Un solo comando de la CLI añade a tu proyecto un componente de React tipado, con la interacción de hover, clic o bucle para la que fue diseñado, soporte para movimiento reducido y colores que siguen tu tema. El código queda en tu repositorio, como cualquier otro componente de shadcn/ui.',
+    addTitle: 'Añadir un icono',
+    addIntro: 'Ejecuta la CLI de shadcn con la URL del icono en el registro:',
+    namingHtml: `El componente se llama ${code('Animated')} + el id del icono en PascalCase (${code('check-box')} → ${code('AnimatedCheckBox')}) y se guarda en ${code('components/animations/&lt;id&gt;.tsx')}. La CLI también añade el wrapper compartido ${code('components/use-animation.tsx')} e instala ${code('react-useanimations')}, que trae su propio reproductor: no necesitas lottie-web.`,
+    namespaceTitle: 'Nombres cortos con un namespace de registro',
+    namespaceHtml: `Añade el registro a ${code('components.json')} una sola vez y después añade iconos por su nombre, varios a la vez:`,
+    registryHtml: (registry: string) =>
+      `El índice del registro en ${link(registry, '/r/registry.json')} recoge cada elemento con su título, categoría e interacción.`,
+    usageTitle: 'Úsalo en un Button de shadcn',
+    usageHtml: `Los componentes aceptan las mismas props que ${code('UseAnimations')}. Para un toggle como el icono de menú, pasa ${code('active')} y guarda el estado en tu botón; el icono se anima cada vez que cambia:`,
+    colorHtml: (docs: string) =>
+      `Los iconos siguen el color del texto, así que ${code('text-primary')} o ${code('text-muted-foreground')} les cambian el color y el modo oscuro no necesita nada más. Encontrarás más props y patrones en la ${link(docs, 'documentación')}.`,
+    codeText: { closeMenu: 'Cerrar menú', openMenu: 'Abrir menú' },
+    popular: 'Iconos populares para shadcn/ui',
+    allIcons: (count: number) => `Los ${count} iconos →`,
+    popularNote: 'La página de cada icono (en inglés) muestra su comando de shadcn.',
+    faq: (f: { count: number; version: string }): Faq => [
+      {
+        question: '¿Los iconos animados para shadcn/ui son gratis?',
+        answer: `Sí. Los ${f.count} iconos y el código de los componentes tienen licencia MIT, para proyectos personales y comerciales. El registro no requiere cuenta ni clave de API.`,
+      },
+      {
+        question: '¿Qué añade la CLI de shadcn a mi proyecto?',
+        answer: `El componente del icono en components/animations/<id>.tsx, el wrapper compartido del reproductor UseAnimation en components/use-animation.tsx (una sola vez, como dependencia del registro) y react-useanimations@^${f.version} desde npm. No necesitas lottie-web: el paquete trae su propio reproductor de 8 kB.`,
+      },
+      {
+        question: '¿Los componentes funcionan con los server components de Next.js?',
+        answer:
+          'Sí. Los componentes están marcados con "use client" y dibujan la animación solo en el navegador, así que puedes renderizarlos desde server components y páginas sin imports dinámicos ni ssr: false.',
+      },
+      {
+        question: '¿Puedo cambiar el aspecto y el movimiento de los iconos?',
+        answer:
+          'El código es tuyo y está en tu repositorio. Los componentes aceptan las props de UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop y speed. Los iconos siguen el color del texto, así que clases de Tailwind como text-primary o text-muted-foreground les cambian el color.',
+      },
+    ],
+    byCategory: 'Explorar por categoría',
+  },
+};
diff --git a/website/src/i18n/messages/es/taxonomy.ts b/website/src/i18n/messages/es/taxonomy.ts
new file mode 100644
index 0000000..6034ab4
--- /dev/null
+++ b/website/src/i18n/messages/es/taxonomy.ts
@@ -0,0 +1,387 @@
+// Categorías e interacciones tal como las ven los lectores, en español.
+import type { Messages } from '../en';
+
+export const taxonomy: Messages['taxonomy'] = {
+  categories: {
+    Alerts: {
+      name: 'Alertas',
+      title: 'Iconos animados de alerta',
+      intro:
+        'Triángulos de advertencia, círculos de alerta y señales de stop que laten lo justo para llamar la atención sin parpadear. Colócalos junto a un campo de formulario con error, al principio de un banner de error o en una columna de estado, donde un icono estático pasa fácilmente desapercibido.',
+      useCases: [
+        'Errores de validación bajo los campos de un formulario',
+        'Banners de error y de advertencia en la parte superior de una página',
+        'Filas fallidas en una tabla de estado de despliegues o tareas',
+        'Diálogos de confirmación de acciones destructivas',
+        'Páginas de estado del sistema durante una incidencia',
+      ],
+    },
+    Notifications: {
+      name: 'Notificaciones',
+      title: 'Iconos animados de campana de notificación',
+      intro:
+        'Campanas que suenan cuando hay actividad nueva o que alternan entre campana y campana silenciada. Un breve balanceo de la campana dirige la mirada hacia el contador de no leídos, y las versiones que alternan sirven también como control para silenciar un canal o un hilo.',
+      useCases: [
+        'Botón del centro de notificaciones en la cabecera de una aplicación',
+        'Indicador de no leídos que suena cuando llega un mensaje nuevo',
+        'Interruptor para silenciar y reactivar un canal o un hilo',
+        'Ajustes de notificaciones por correo y push',
+        'Botones para suscribirse a recordatorios y alertas',
+      ],
+    },
+    Navigation: {
+      name: 'Navegación',
+      title: 'Iconos animados de navegación y flechas',
+      intro:
+        'Menús hamburguesa que se transforman en un botón de cerrar, y flechas, chevrons y flechas de esquina que se desplazan hacia su dirección con hover. Dejan claro adónde lleva cada control: abrir el panel lateral, volver atrás, desplegar una fila o salir del sitio.',
+      useCases: [
+        'Menú hamburguesa que se convierte en botón de cerrar en móvil',
+        'Botones de anterior y siguiente en carruseles y paginación',
+        'Chevrons de acordeones y menús desplegables',
+        'Indicaciones para volver arriba y para desplazarse hacia abajo',
+        'Enlaces de inicio y cierre de sesión',
+        'Marcadores de enlaces externos y botones para mostrar u ocultar la barra lateral',
+      ],
+    },
+    Action: {
+      name: 'Acciones',
+      title: 'Iconos animados de acción',
+      intro:
+        'Los verbos de una interfaz: guardar, eliminar, descargar, actualizar, dar me gusta, añadir a marcadores, buscar y ajustes. Cada uno confirma el clic o el hover al que responde: un corazón se rellena cuando das me gusta a una publicación y la tapa de una papelera se levanta antes de eliminar.',
+      useCases: [
+        'Botones de me gusta, favoritos y marcadores en tarjetas',
+        'Botones de descargar, subir y guardar que confirman la acción',
+        'Botón para mostrar u ocultar la contraseña en un formulario de inicio de sesión',
+        'Botones de actualizar y sincronizar en dashboards',
+        'Botones de eliminar en tablas y listas de archivos',
+        'Campo de búsqueda que se convierte en un botón para borrar',
+      ],
+    },
+    Content: {
+      name: 'Contenido',
+      title: 'Iconos animados de archivos, carpetas y usuarios',
+      intro:
+        'Archivos, carpetas, libros, correo, adjuntos y personas. Identifican aquello con lo que trabaja el usuario, y las variantes de añadir, quitar y marcar hacen que gestionar listas y equipos se sienta ágil.',
+      useCases: [
+        'Gestores de archivos y listas de documentos',
+        'Botones de adjuntar y de copiar al portapapeles',
+        'Bandeja de entrada y archivo en clientes de correo',
+        'Listas de miembros de un equipo con acciones para añadir y quitar usuarios',
+        'Menús para compartir documentos y enlaces',
+      ],
+    },
+    Form: {
+      name: 'Formularios',
+      title: 'Iconos animados de controles de formulario',
+      intro:
+        'Una casilla de verificación, un botón de opción y un interruptor que se animan entre los estados marcado y desmarcado. Úsalos donde un input normal se queda plano, como en checklists de onboarding y pantallas de ajustes, sin que el estado deje de leerse de un vistazo.',
+      useCases: [
+        'Interruptores de ajustes para funciones y preferencias',
+        'Checklists de onboarding y listas de tareas',
+        'Opciones de respuesta única en encuestas y selectores de plan',
+        'Casillas de aceptación de términos y de consentimiento',
+      ],
+    },
+    Media: {
+      name: 'Multimedia',
+      title: 'Iconos animados de reproductor multimedia',
+      intro:
+        'Reproducir y pausar, volumen, micrófono, cámara, saltar y aleatorio para reproductores de audio y vídeo. Los iconos que alternan cambian entre sus dos estados, de reproducir a pausa o de micrófono a silenciado, así que el botón siempre muestra lo que hará el siguiente clic.',
+      useCases: [
+        'Botones de reproducir y pausar en reproductores de audio y vídeo',
+        'Controles para silenciar y activar el micrófono en videollamadas',
+        'Botones para encender y apagar la cámara en apps de reuniones',
+        'Controles de lista de reproducción para saltar, repetir y reproducir en aleatorio',
+        'Botones de transmisión y AirPlay',
+        'Controles de apps de pódcast y música',
+      ],
+    },
+    'Text editing': {
+      name: 'Edición de texto',
+      title: 'Iconos animados de edición de texto',
+      intro:
+        'Negrita, cursiva, subrayado, alineación y listas para barras de herramientas de texto enriquecido. Una animación breve al hacer clic confirma que se aplicó el formato, algo útil en editores donde el cambio en el propio texto es sutil.',
+      useCases: [
+        'Barras de herramientas de editores de texto enriquecido',
+        'Cajas para redactar comentarios y mensajes',
+        'Editores de CMS y de entradas de blog',
+        'Apps de Markdown y de notas',
+        'Controles de alineación de texto en herramientas de diseño',
+      ],
+    },
+    Communication: {
+      name: 'Comunicación',
+      title: 'Iconos animados de comunicación',
+      intro:
+        'Teléfonos, burbujas de chat, botones de enviar, buzón de voz y RSS. Los iconos de llamada cubren los estados que necesita un registro de llamadas (entrante, saliente, perdida y desviada), y el icono de enviar despide cada mensaje con un pequeño gesto al hacer clic.',
+      useCases: [
+        'Botón de enviar en formularios de chat y comentarios',
+        'Registros de llamadas entrantes, salientes y perdidas',
+        'Botones de contacto y de soporte',
+        'Botones para abrir un widget de chat',
+        'Campos de menciones y de direcciones de correo',
+      ],
+    },
+    Devices: {
+      name: 'Dispositivos',
+      title: 'Iconos animados de dispositivos',
+      intro:
+        'Teléfonos, tabletas, monitores, relojes e impresoras, además de los indicadores de conexión que los rodean: wifi, Bluetooth y batería. Sirven para selectores de dispositivo, conmutadores de vista previa responsive y estado de conectividad.',
+      useCases: [
+        'Conmutadores de vista previa responsive para móvil, tableta y escritorio',
+        'Estado de la conexión wifi y Bluetooth',
+        'Indicadores de batería y de carga',
+        'Listas de dispositivos en los ajustes de seguridad de la cuenta',
+        'Botones de imprimir en facturas e informes',
+      ],
+    },
+    Weather: {
+      name: 'Clima',
+      title: 'Iconos animados del clima',
+      intro:
+        'Sol, luna, nubes, lluvia, nieve, rayos y viento para pronósticos y para todo lo que siga la hora del día. El sol y la luna también funcionan como un interruptor natural entre modo claro y modo oscuro.',
+      useCases: [
+        'Widgets del tiempo y tarjetas de pronóstico',
+        'Interruptores entre tema claro y tema oscuro',
+        'Horas de amanecer y atardecer en apps de viajes',
+        'Lecturas de temperatura en paneles de casa inteligente',
+        'Indicadores de energía y de estado de alimentación',
+      ],
+    },
+    'Maps & location': {
+      name: 'Mapas y ubicación',
+      title: 'Iconos animados de mapas y ubicación',
+      intro:
+        'Pines de mapa, flechas de navegación, globos terráqueos, dianas y anclas. Un pin que cae con hover ayuda a que destaque un localizador de tiendas o una dirección de entrega, y el globo funciona como selector de idioma o de región.',
+      useCases: [
+        'Localizadores de tiendas y campos de dirección',
+        'Botones de ubicación actual y de cómo llegar',
+        'Selectores de idioma y de región',
+        'Entregas y seguimiento de pedidos',
+        'Apps de viajes y de reservas',
+      ],
+    },
+    Commerce: {
+      name: 'Comercio electrónico',
+      title: 'Iconos animados de comercio electrónico',
+      intro:
+        'Carritos, bolsas de compra, etiquetas de precio, regalos, tarjetas de crédito y camiones de reparto para tiendas online. Una animación de añadir al carrito confirma el clic sin necesidad de un aviso emergente, y los iconos del camión y del paquete dan un poco de vida al estado del pedido.',
+      useCases: [
+        'Botones de añadir al carrito en tarjetas de producto',
+        'Botones de carrito y bolsa en la cabecera de una tienda',
+        'Pago y selección del método de pago',
+        'Distintivos de descuentos, cupones y rebajas',
+        'Pasos de envío y seguimiento del pedido',
+        'Tarjetas regalo y opciones de envoltorio',
+      ],
+    },
+    Charts: {
+      name: 'Gráficos',
+      title: 'Iconos animados de gráficos',
+      intro:
+        'Gráficos de barras, un gráfico circular y flechas de tendencia para analítica e informes. Los iconos de tendencia al alza y a la baja muestran de un vistazo si una métrica subió o bajó, lo que encaja en tarjetas de KPI y en registros de cambios de cifras.',
+      useCases: [
+        'Tarjetas de KPI con métricas al alza o a la baja',
+        'Elementos de navegación de analítica e informes',
+        'Estados vacíos de dashboards',
+        'Resúmenes financieros y de cartera',
+      ],
+    },
+    Development: {
+      name: 'Desarrollo',
+      title: 'Iconos animados para desarrolladores',
+      intro:
+        'Llaves de código, una terminal, ramas de Git, commits, merges y pull requests, además de servidores y bases de datos. Pensados para herramientas de desarrollo, sitios de documentación y páginas de estado donde los términos de Git y de infraestructura forman parte de la interfaz.',
+      useCases: [
+        'Estado de pull requests, merges y ramas en herramientas de desarrollo',
+        'Botones de fragmento de código y de insertar en la documentación',
+        'Secciones de terminal y CLI en landing pages',
+        'Estado de servidores y bases de datos en páginas de estado',
+        'Atajos de teclado con la tecla Command',
+      ],
+    },
+    'Design & layout': {
+      name: 'Diseño y maquetación',
+      title: 'Iconos animados de diseño y maquetación',
+      intro:
+        'Cuadrículas, columnas, capas, recorte, pluma y cursor para editores y constructores de páginas. Encajan en barras de herramientas donde los usuarios organizan contenido, cambian entre vista de cuadrícula y de tabla o eligen una herramienta de dibujo.',
+      useCases: [
+        'Conmutadores entre vista de cuadrícula, lista y tabla',
+        'Paneles de capas en herramientas de diseño y de presentaciones',
+        'Herramientas de recortar en editores de imágenes',
+        'Constructores de páginas y selectores de diseño',
+        'Asas para arrastrar y mover',
+      ],
+    },
+    'Shapes & math': {
+      name: 'Formas y matemáticas',
+      title: 'Iconos animados de formas y matemáticas',
+      intro:
+        'Círculos, cuadrados, triángulos, hexágonos, un octógono y signos de división. Úsalos como herramientas de formas en apps de dibujo, como operadores de una calculadora o como marcadores neutros en diagramas y pasos de onboarding.',
+      useCases: [
+        'Herramientas de formas en pizarras y apps de dibujo',
+        'Operadores de calculadoras y editores de fórmulas',
+        'Viñetas y marcadores de pasos en diagramas',
+        'Interfaces de cuestionarios y juegos',
+      ],
+    },
+    Loading: {
+      name: 'Carga',
+      title: 'Iconos animados de carga',
+      intro:
+        'Spinners y loaders que se repiten en bucle mientras algo está en curso. Pon uno dentro de un botón de envío mientras se ejecuta una petición, en lugar del contenido que aún se está cargando o en una pantalla de bienvenida a pantalla completa; se quedan quietos cuando el usuario prefiere movimiento reducido.',
+      useCases: [
+        'Botones de envío a la espera de una petición',
+        'Placeholders mientras se carga una lista o un gráfico',
+        'Indicadores de scroll infinito y de cargar más',
+        'Pantallas de bienvenida y transiciones entre rutas',
+        'Progreso de subida y procesamiento de archivos',
+      ],
+    },
+    'Social media': {
+      name: 'Redes sociales',
+      title: 'Iconos animados de redes sociales',
+      intro:
+        'Iconos de marca de redes sociales y de las herramientas donde desarrolladores y diseñadores comparten su trabajo: X, Instagram, YouTube, Discord, Telegram, Figma y más. Se animan con hover, lo que hace que los enlaces del pie de página y del perfil inviten a hacer clic.',
+      useCases: [
+        'Enlaces a redes sociales en el pie de un sitio',
+        'Botones para compartir en entradas de blog',
+        'Enlaces a perfiles de autores y del equipo',
+        'Botones de invitación a servidores de chat de la comunidad',
+        'Inicio de sesión con una cuenta social o de desarrollador',
+      ],
+    },
+    Other: {
+      name: 'Otros',
+      title: 'Más iconos animados',
+      intro:
+        'Iconos que no pertenecen a un grupo mayor: caras emoji para valoraciones, una taza de café, un reloj, una línea de pulso y una indicación para desplazarse hacia abajo. El icono de desplazamiento es una pista habitual en la sección hero para indicar que hay más contenido debajo.',
+      useCases: [
+        'Indicaciones para desplazarse hacia abajo al final de una sección hero',
+        'Caras alegres, neutras y tristes en widgets de valoración',
+        'Indicadores de actividad y de disponibilidad',
+        'Horarios de apertura y selectores de hora',
+        'Enlaces de Buy Me a Coffee y de apoyo',
+      ],
+    },
+  },
+  interactions: {
+    loop: {
+      label: 'Bucle',
+      title: 'Iconos animados en bucle',
+      intro:
+        'Estos iconos se reproducen sin parar mientras están en pantalla, así que encajan con estados que duran: algo se está cargando, hay una advertencia activa, una terminal está esperando. Si se prefiere movimiento reducido, se detienen en su primer fotograma y se leen como un icono normal.',
+      useCases: [
+        'Spinners de carga e indicadores de progreso',
+        'Estados activos de advertencia y de error',
+        'Indicadores de directo y de grabación',
+        'Indicaciones para desplazarse hacia abajo en secciones hero',
+        'Marcadores que llaman la atención sobre notificaciones nuevas',
+      ],
+      example:
+        'Los iconos en bucle suelen usarse para spinners de carga, alertas activas, una campana que suena o una indicación para desplazarse hacia abajo.',
+      description:
+        'Se reproduce sin parar; se queda en el primer fotograma estático si se prefiere movimiento reducido.',
+      reducedMotion:
+        'Si se prefiere movimiento reducido, el icono no se reproduce automáticamente y se queda en su primer fotograma estático.',
+      plays: 'se reproducen sin parar',
+    },
+    'click-toggle': {
+      label: 'Alternar con clic',
+      title: 'Iconos animados que alternan con un clic',
+      intro:
+        'Cada clic anima el icono entre dos estados y lo deja en el nuevo, lo que convierte estos iconos en la parte visual de un control de activar y desactivar. El icono siempre muestra el estado actual, así que combínalo con aria-pressed o con un atributo checked y el botón se explica solo.',
+      useCases: [
+        'Botones para silenciar y reactivar el sonido',
+        'Campos para mostrar y ocultar la contraseña',
+        'Botones de menú hamburguesa y de cerrar',
+        'Controles de reproducir y pausar',
+        'Botones de me gusta, estrella y marcador',
+        'Casillas de verificación, botones de opción e interruptores',
+      ],
+      example:
+        'Los iconos que alternan con un clic suelen controlar botones de silenciar y reactivar, mostrar y ocultar contraseña, menú y cerrar, reproducir y pausar, y me gusta.',
+      description:
+        'Alterna entre dos estados al hacer clic, o cambia de inmediato si se prefiere movimiento reducido.',
+      reducedMotion:
+        'Si se prefiere movimiento reducido, un clic cambia al otro estado de inmediato, sin la animación intermedia.',
+      plays: 'alternan entre dos estados al hacer clic',
+    },
+    'click-replay': {
+      label: 'Repetir con clic',
+      title: 'Iconos animados al hacer clic',
+      intro:
+        'Estos iconos se reproducen una vez desde el principio cada vez que se hace clic en ellos, como una pequeña confirmación de que la acción se completó. Encajan con acciones puntuales que no dejan un estado: enviar, guardar, actualizar, descargar, imprimir o eliminar.',
+      useCases: [
+        'Botones de enviar en formularios de chat y comentarios',
+        'Botones de guardar, descargar y subir',
+        'Botones de actualizar y girar',
+        'Botones de añadir al carrito',
+        'Botones de formato de texto en editores',
+      ],
+      example:
+        'Los iconos que se animan al hacer clic suelen confirmar botones de enviar, guardar, actualizar, descargar, añadir al carrito y dar formato.',
+      description:
+        'Se reproduce una vez desde el principio con cada clic, salvo que se prefiera movimiento reducido.',
+      reducedMotion:
+        'Si se prefiere movimiento reducido, los clics siguen llegando a tu handler, pero la animación no se reproduce.',
+      plays: 'se repiten con cada clic',
+    },
+    hover: {
+      label: 'Hover',
+      title: 'Iconos animados con hover',
+      intro:
+        'Estos iconos avanzan cuando entra el puntero y retroceden cuando sale, así que el movimiento sigue al cursor y nunca se queda a medias. Encajan en elementos de navegación y en botones que anticipan lo que abren: la tapa de una papelera se levanta, el engranaje de ajustes gira, una carpeta se abre.',
+      useCases: [
+        'Elementos de la barra lateral y del menú de navegación',
+        'Botones de eliminar que levantan la tapa antes del clic',
+        'Enlaces a ajustes y al perfil',
+        'Controles para acercar y alejar el zoom',
+        'Enlaces a redes sociales en el pie de página',
+      ],
+      example:
+        'Los iconos con hover suelen marcar elementos de navegación, botones de eliminar, ajustes, controles de zoom y enlaces a redes sociales.',
+      description: 'Avanza con mouseenter y retrocede con mouseleave.',
+      reducedMotion: 'Si se prefiere movimiento reducido, el hover no reproduce la animación.',
+      plays: 'se reproducen con hover y retroceden al salir el cursor',
+    },
+    'hover-replay': {
+      label: 'Repetir con hover',
+      title: 'Iconos animados que se reproducen con hover',
+      intro:
+        'Estos iconos se reproducen una vez cuando entra el puntero y terminan por sí solos, lo que evita que un paso rápido por una barra de herramientas se convierta en un movimiento nervioso. La mayor parte del set funciona así: flechas, archivos, dispositivos, clima e iconos de marca que cobran vida con hover.',
+      useCases: [
+        'Listas de funciones y tablas de precios',
+        'Enlaces con flecha y botones de llamada a la acción',
+        'Botones de barras de herramientas en editores y dashboards',
+        'Tarjetas en la cuadrícula de una landing page',
+        'Enlaces del pie de página y de contacto',
+      ],
+      example:
+        'Los iconos que se reproducen con hover suelen animar enlaces con flecha, listas de funciones, botones de barras de herramientas y tarjetas de landing pages.',
+      description:
+        'Se reproduce una vez con mouseenter, salvo que se prefiera movimiento reducido. Salir no lo detiene, y volver a entrar durante la reproducción no lo reinicia.',
+      reducedMotion: 'Si se prefiere movimiento reducido, el hover no reproduce la animación.',
+      plays: 'se reproducen una vez con hover',
+    },
+    'hover-loop': {
+      label: 'Bucle con hover',
+      title: 'Iconos animados en bucle con hover',
+      intro:
+        'Estos iconos se repiten en bucle mientras el puntero está sobre ellos y terminan el ciclo en curso cuando sale, así que nunca se detienen a mitad del movimiento. Funcionan bien en enlaces que invitan a mirar con calma, sobre todo iconos sociales y de comunidad.',
+      useCases: [
+        'Enlaces a redes sociales en cabeceras y pies de página',
+        'Botones de invitación a comunidades y chats',
+        'Enlaces a portafolios y perfiles',
+        'Selectores de idioma y de región',
+      ],
+      example:
+        'Los iconos en bucle con hover suelen marcar enlaces sociales, invitaciones a comunidades, enlaces a portafolios y selectores de idioma.',
+      description:
+        'Se repite en bucle durante el hover, termina el ciclo en curso tras mouseleave y se queda estático si se prefiere movimiento reducido.',
+      reducedMotion:
+        'Si se prefiere movimiento reducido, el icono se queda estático durante el hover.',
+      plays: 'se repiten en bucle mientras el cursor está encima',
+    },
+  },
+};
diff --git a/website/src/i18n/messages/fr/common.ts b/website/src/i18n/messages/fr/common.ts
new file mode 100644
index 0000000..5566af8
--- /dev/null
+++ b/website/src/i18n/messages/fr/common.ts
@@ -0,0 +1,46 @@
+import type { Messages } from '../en';
+
+export const common: Messages['common'] = {
+  skipToContent: 'Aller au contenu',
+  ogImageAlt: 'useAnimations : icônes animées gratuites pour React, shadcn/ui, Lottie et SVG',
+  homeLabel: 'Accueil useAnimations',
+  mainNav: 'Navigation principale',
+  browseIcons: 'Parcourir les icônes',
+  nav: {
+    icons: 'Icônes',
+    categories: 'Catégories',
+    documentation: 'Documentation',
+    shadcn: 'shadcn',
+    lottie: 'Icônes Lottie',
+    license: 'Licence',
+  },
+  footer: {
+    tagline:
+      'Des icônes animées gratuites, interactions incluses. Sous licence MIT, conçues pour React.',
+    product: 'Produit',
+    developers: 'Développeurs',
+    follow: 'Suivre',
+    languages: 'Langues',
+    allIcons: 'Toutes les icônes',
+    categories: 'Catégories',
+    interactions: 'Interactions',
+    lottieIcons: 'Icônes Lottie',
+    shadcnIcons: 'Icônes shadcn/ui',
+    documentation: 'Documentation',
+    licencing: 'Licence et conditions',
+    shadcnRegistry: 'Registre shadcn',
+    mitLicense: 'Licence MIT',
+    builtWith: 'Site réalisé avec Astro',
+  },
+  breadcrumb: 'Fil d’Ariane',
+  crumbs: { icons: 'Icônes', categories: 'Catégories', interactions: 'Interactions' },
+  faq: 'Questions fréquentes',
+  copy: 'Copier',
+  copied: 'Copié',
+  pressCtrlC: 'Appuyez sur Ctrl+C',
+  languageBanner: {
+    text: 'Cette page existe aussi en français.',
+    action: 'Passer en français',
+    dismiss: 'Fermer',
+  },
+};
diff --git a/website/src/i18n/messages/fr/docs.ts b/website/src/i18n/messages/fr/docs.ts
new file mode 100644
index 0000000..09e6664
--- /dev/null
+++ b/website/src/i18n/messages/fr/docs.ts
@@ -0,0 +1,35 @@
+import type { Messages } from '../en';
+
+export const docs: Messages['docs'] = {
+  title: 'Documentation — useAnimations',
+  description: (iconCount: number) =>
+    `Utiliser ${iconCount} icônes animées dans React et shadcn/ui : interactions, props, couleurs, fichiers et accessibilité.`,
+  badge: 'Documentation',
+  onThisPage: 'Sur cette page',
+  viewAsMarkdown: 'Voir en Markdown',
+  headline: 'Documentation de useAnimations',
+  summary: 'Comment utiliser les icônes animées useAnimations dans React et shadcn/ui.',
+  crumb: 'Documentation',
+  faq: [
+    {
+      question: 'useAnimations est-il gratuit pour les projets commerciaux ?',
+      answer:
+        'Oui. Les icônes et le package React sont sous licence MIT, sans attribution obligatoire.',
+    },
+    {
+      question: 'Comment utiliser les icônes useAnimations dans React ?',
+      answer:
+        'Installez react-useanimations, importez UseAnimations et une icône (par exemple react-useanimations/lib/checkmark), puis affichez <UseAnimations animation={checkmark} size={32} />.',
+    },
+    {
+      question: 'Comment changer la couleur d’une icône ?',
+      answer:
+        'Les icônes suivent la couleur du texte. Changez-la avec strokeColor et fillColor, avec la propriété CSS color ou en stylant les tracés.',
+    },
+    {
+      question: 'Est-ce que ça fonctionne sans React ?',
+      answer:
+        'Le package est destiné à React. Chaque icône existe aussi en fichier Lottie JSON standard, lisible par n’importe quel lecteur Lottie (lottie-web, dotLottie, lottie-react-native, lottie-ios, lottie-android, Flutter), et en SVG statique. Voir la section Utiliser sans React et useanimations.com/lottie-icons.',
+    },
+  ],
+};
diff --git a/website/src/i18n/messages/fr/home.ts b/website/src/i18n/messages/fr/home.ts
new file mode 100644
index 0000000..df72cf1
--- /dev/null
+++ b/website/src/i18n/messages/fr/home.ts
@@ -0,0 +1,170 @@
+import type { Messages } from '../en';
+import type { FaqLinks } from '../en/home';
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const home: Messages['home'] = {
+  title: 'Micro-animations et icônes animées — useAnimations',
+  description: (count: number) =>
+    `${count} micro-animations gratuites pour vos interfaces : une bibliothèque d’icônes animées pour React, shadcn/ui et Lottie, survol, clic et boucle inclus. MIT.`,
+
+  hero: {
+    badge: (count: number) => `${count} icônes · zéro dépendance · MIT`,
+    headline: { start: 'Des icônes qui ', accent: 'prennent vie.', end: '' },
+    h1: 'Icônes animées gratuites pour React, shadcn/ui et Lottie',
+    intro: (count: number) =>
+      `${count} micro-animations faites main, avec des micro-interactions au survol, au clic et en boucle déjà intégrées. Utilisez-les comme composant React, ajoutez-les avec shadcn ou téléchargez-les en SVG et en Lottie JSON. Sous licence MIT.`,
+    browse: 'Parcourir les icônes',
+    fieldHint: 'Passez le pointeur sur le champ d’icônes.',
+  },
+
+  numbers: {
+    label: 'En bref',
+    icons: 'icônes animées',
+    interactions: 'interactions intégrées',
+    size: 'pour le lecteur, gzippé',
+    dependencies: 'dépendance',
+  },
+
+  interactions: {
+    eyebrow: 'Interactions intégrées',
+    title: 'Chaque icône sait comment bouger.',
+    intro:
+      'Chaque icône est livrée avec l’interaction pour laquelle elle a été conçue. Il suffit de l’ajouter pour qu’elle fonctionne, ou d’en choisir une autre avec une seule prop. Essayez :',
+    demos: {
+      loop: 'Se joue en continu, pour les chargements et les statuts d’ambiance.',
+      'click-toggle': 'Bascule entre deux états : menu et fermer, lecture et pause.',
+      'click-replay': 'Rejoue l’animation depuis le début à chaque clic, en guise de retour.',
+      hover: 'Se joue vers l’avant à l’entrée du pointeur et en arrière à sa sortie.',
+      'hover-loop': 'Boucle pendant le survol et termine son cycle à la sortie.',
+      'hover-replay': 'Se joue une fois depuis le début à chaque entrée du pointeur.',
+    },
+  },
+
+  browser: {
+    eyebrow: 'La bibliothèque',
+    title: (count: number) => `${count} icônes animées gratuites`,
+    intro:
+      'Survolez ou cliquez pour lancer l’animation. Ouvrez une icône pour obtenir son code et ses fichiers : Lottie JSON, SVG et ZIP.',
+    search: 'Rechercher des icônes',
+    searchPlaceholder: (count: number) =>
+      `Rechercher parmi ${count} icônes (en anglais) : « eye », « bell », « arrow »`,
+    interaction: 'Interaction',
+    allInteractions: 'Toutes les interactions',
+    color: 'Couleur des icônes',
+    colors: {
+      text: 'Couleur du texte',
+      indigo: 'Indigo',
+      red: 'Rouge',
+      amber: 'Ambre',
+      teal: 'Bleu sarcelle',
+      violet: 'Violet',
+    },
+    customColor: 'Couleur personnalisée',
+    size: 'Taille',
+    category: 'Catégorie',
+    all: 'Toutes',
+    count: { one: '{n} icône', other: '{n} icônes' },
+    noMatch: 'Aucune icône ne correspond.',
+    noMatchHintHtml: (href: string) =>
+      `Essayez un autre mot ou ${link(href, 'proposez une icône')}.`,
+  },
+
+  everywhere: {
+    eyebrow: 'Utilisez-les à votre façon',
+    title: 'Installer, importer, c’est tout.',
+    intro:
+      'Un composant React sans dépendance, un registre shadcn, des fichiers téléchargeables aux URL stables et un catalogue lisible par les agents IA.',
+    docs: 'Lire la documentation →',
+    tablist: 'Plateforme',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Fichiers', agents: 'Agents' },
+    codeText: {
+      afterAdding: 'puis',
+      files: 'Chaque icône en SVG, en animation (Lottie JSON) et en ZIP réunissant les deux',
+    },
+  },
+
+  features: {
+    title: 'Légères, accessibles et faciles à styler.',
+    colors: 'Suit vos couleurs',
+    colorsHtml: `Les icônes utilisent ${code('currentColor')} : elles reprennent d’elles-mêmes la couleur du texte, les états de survol et le mode sombre. Pour en changer, passez par une prop, une classe ou du CSS classique.`,
+    tiny: 'Légère par conception',
+    tinyText: 'Un lecteur intégré, zéro dépendance. Chaque icône est un module à part de 2 kB.',
+    accessible: 'Accessible par défaut',
+    accessibleText:
+      'Respecte la réduction des animations, joue les animations de survol au focus clavier et reste invisible pour les lecteurs d’écran, sauf si vous lui donnez un libellé.',
+    ssr: 'Prête pour le rendu serveur',
+    ssrText:
+      'Un composant client qui s’affiche sans risque dans Next.js, Remix et Astro. Les icônes sont de simples données, importables n’importe où.',
+    agents: 'Pensée pour les agents',
+    agentsHtml: (iconsJson: string, llmsTxt: string) =>
+      `Un catalogue typé avec des mots-clés pour chaque icône, ${link(iconsJson, 'icons.json')}, ${link(llmsTxt, 'llms.txt')} et une documentation en Markdown.`,
+  },
+
+  browse: {
+    title: 'Trouvez la bonne micro-animation.',
+    byCategory: 'Parcourir par catégorie',
+    byInteraction: 'Parcourir par interaction',
+    formats: 'Toutes les icônes et tous les formats',
+  },
+
+  hubs: {
+    icons: 'Toutes les icônes animées',
+    categories: 'Catégories d’icônes',
+    interactions: 'Icônes par interaction',
+    lottie: 'Icônes Lottie (JSON)',
+    shadcn: 'Icônes animées shadcn/ui',
+  },
+
+  faqTitle: 'Questions fréquentes',
+  faq: (f: { version: string; links: FaqLinks }) => [
+    {
+      question: 'Que sont les micro-animations et les icônes animées ?',
+      answer:
+        'Les micro-animations sont des mouvements courts, au rôle unique, qui répondent à une action de l’utilisateur : une icône de menu qui se transforme en bouton de fermeture, un cœur qui se remplit quand on aime une publication, une cloche qui sonne à l’arrivée d’une notification. Les icônes animées en sont la forme la plus courante. Elles rendent une interface plus réactive et signalent les changements d’état sans texte supplémentaire.',
+    },
+    {
+      question: 'Quelle différence entre les fichiers Lottie et SVG ?',
+      answer:
+        'Le fichier Lottie JSON contient toute l’animation et se lit dans n’importe quel lecteur Lottie, y compris celui intégré à react-useanimations. Les fichiers SVG sont des images fixes de l’icône au repos, une par état (par exemple eye et eye-off), pour les endroits où rien ne doit bouger : e-mails, documents, outils de design ou solution de repli sans JavaScript.',
+    },
+    {
+      question: 'Est-ce compatible avec Next.js et le rendu côté serveur ?',
+      answer:
+        "Oui. Le composant est marqué 'use client' et ne dessine l’animation que dans le navigateur : il s’affiche donc depuis les server components et les frameworks SSR comme Next.js, Remix et Astro, sans import dynamique. Les modules d’icônes sont de simples données que les server components peuvent importer et transmettre en props.",
+      link: { href: f.links.serverRendering, label: 'Next.js et rendu côté serveur' },
+    },
+    {
+      question: 'Puis-je utiliser les icônes dans des projets commerciaux ?',
+      answer:
+        'Oui. Les icônes et le package react-useanimations sont sous licence MIT : utilisez-les, modifiez-les et redistribuez-les dans vos projets personnels et commerciaux. L’attribution est appréciée, mais pas obligatoire.',
+      link: { href: f.links.licence, label: 'Licence et conditions' },
+    },
+    {
+      question: 'Puis-je utiliser les icônes sans React ?',
+      answer:
+        'Oui. Chaque icône est un fichier Lottie JSON standard : elle se lit avec lottie-web en JavaScript pur, dans Vue, Svelte, Angular ou un CMS, ainsi qu’avec les lecteurs Lottie pour iOS, Android et Flutter. La page Icônes Lottie donne les URL des fichiers et des extraits lottie-web prêts à l’emploi pour chaque interaction.',
+      link: { href: f.links.lottie, label: 'Icônes Lottie' },
+    },
+    {
+      question: 'Quel poids les icônes ajoutent-elles à mon bundle ?',
+      answer: `Le lecteur de react-useanimations ${f.version} pèse environ 8 kB gzippé, sans dépendance, et chaque icône est un module à part de 1 à 15 kB (2 kB en médiane) : votre bundle ne contient que les icônes que vous importez.`,
+    },
+  ],
+
+  cta: {
+    title: { start: 'Donnez du ', accent: 'rythme', end: ' à votre interface.' },
+    text: 'Gratuit et sous licence MIT, pour vos projets personnels et commerciaux.',
+    start: 'Commencer',
+  },
+
+  schema: {
+    software: (count: number) =>
+      `Composant React et ${count} icônes animées (Lottie) avec interactions au survol, au clic et en boucle intégrées. Sans dépendance.`,
+    catalogName: 'Catalogue d’icônes useAnimations',
+    catalog: (count: number) =>
+      `Les ${count} icônes useAnimations, chacune avec son id, son titre, sa catégorie, ses mots-clés, son interaction, les URL Lottie JSON, SVG et ZIP, l’import React et la commande shadcn.`,
+  },
+};
diff --git a/website/src/i18n/messages/fr/hubs.ts b/website/src/i18n/messages/fr/hubs.ts
new file mode 100644
index 0000000..4b5f5f9
--- /dev/null
+++ b/website/src/i18n/messages/fr/hubs.ts
@@ -0,0 +1,179 @@
+import { formIn, listIn, pluralIn } from '../../format';
+import type { Messages } from '../en';
+import type { CategoryFacts, InteractionFacts } from '../en/hubs';
+import { CATEGORY_OF, PLAYS_ONE } from './taxonomy';
+
+const list = listIn('fr');
+const plural = pluralIn('fr');
+const form = formIn('fr');
+const icons = (n: number) => plural(n, { one: 'icône', other: 'icônes' });
+const lower = (text: string) => text[0].toLowerCase() + text.slice(1);
+
+/** Up to `max` titles, then 'et N autres'. */
+const titles = (items: string[], max = 12) =>
+  items.length > max
+    ? `${items.slice(0, max).join(', ')} et ${items.length - max} autres`
+    : list(items);
+
+/** How the icons also come as static SVGs, after "en animation Lottie JSON". */
+const svgNote = (f: CategoryFacts) => {
+  if (f.withSvg === f.count) return ', ainsi qu’en SVG statique';
+  return f.withSvg
+    ? `, et ${f.withSvg} ${form(f.withSvg, { one: 'd’entre elles existe', other: 'd’entre elles existent' })} aussi en SVG statique`
+    : '';
+};
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const hubs: Messages['hubs'] = {
+  titleSuffix: ' — useAnimations',
+  iconCount: icons,
+
+  category: {
+    titles: (f: CategoryFacts) => [
+      `${f.title} pour React et Lottie`,
+      `${f.title} pour React`,
+      `${f.title} gratuites`,
+      f.title,
+    ],
+    descriptions: (f: CategoryFacts) => {
+      const name = lower(f.title);
+      const examples = list(f.titles.slice(0, 3));
+      return [
+        `${f.count} ${name} gratuites, dont ${examples}. Micro-animations au survol, au clic et en boucle pour React, shadcn/ui et Lottie JSON, sous licence MIT.`,
+        `${f.count} ${name} gratuites, dont ${examples}. Pour React, shadcn/ui et Lottie JSON, sous licence MIT.`,
+        `${f.count} ${name} gratuites, dont ${examples}. Pour React, shadcn/ui et Lottie, MIT.`,
+        `${f.count} ${name} gratuites pour React, shadcn/ui et Lottie JSON, sous licence MIT.`,
+      ];
+    },
+    summary: (f: CategoryFacts) => {
+      const groups = f.groups.map(
+        ({ interaction, count, plays }) =>
+          `${count} ${form(count, { one: PLAYS_ONE[interaction], other: plays })}`
+      );
+      const plays =
+        f.groups.length === 1
+          ? form(f.count, {
+              one: `L’unique icône ${PLAYS_ONE[f.groups[0].interaction]}`,
+              other: `Les ${f.count} icônes ${f.groups[0].plays}`,
+            })
+          : `Sur les ${f.count} icônes, ${list(groups)}`;
+      return `${plays}. Chacune est disponible en composant React, en composant shadcn/ui et en animation Lottie JSON${svgNote(f)}, gratuitement pour un usage commercial sous licence MIT.`;
+    },
+    faq: (f: CategoryFacts) => {
+      const name = lower(f.title);
+      const ex = f.example;
+      const n = f.expressions.length;
+      return [
+        {
+          question: `Quelles ${name} sont incluses ?`,
+          answer: `${icons(f.count)} : ${titles(f.titles)}. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.`,
+        },
+        {
+          question: `Comment utiliser ces ${name} dans React ?`,
+          answer: `Installez react-useanimations, ajoutez ${ex.importLine} et affichez <UseAnimations animation={${ex.exportName}} size={32} />. L’icône joue son interaction « ${lower(ex.interactionLabel)} » et suit la couleur du texte. Avec shadcn/ui, lancez plutôt ${ex.shadcnCommand}.`,
+        },
+        {
+          question: `Puis-je utiliser ces ${name} sans React ?`,
+          answer: `Oui. Chaque icône est un fichier Lottie JSON disponible à l’adresse ${f.site}/icons/<id>.json (par exemple ${f.site}/icons/${ex.id}.json), lisible avec lottie-web, lottie-ios, lottie-android ou le package lottie de Flutter${svgNote(f) ? ' ; les SVG statiques se trouvent sur la page de chaque icône (en anglais)' : ''}. ${
+            n
+              ? `${titles(f.expressions, 6)} ${form(n, {
+                  one: 'utilise des expressions After Effects : sur le web, il lui faut donc la version complète de lottie-web.',
+                  other:
+                    'utilisent des expressions After Effects : sur le web, il leur faut donc la version complète de lottie-web.',
+                })}`
+              : 'Aucune n’utilise d’expressions : la version light de lottie-web suffit.'
+          }`,
+        },
+      ];
+    },
+    badge: (n: number) => `${icons(n)} · licence MIT`,
+    allIcons: (name: string) => `Toutes les icônes ${CATEGORY_OF[name] ?? `« ${name} »`}`,
+    whereToUse: 'Où les utiliser',
+    byInteraction: 'Par interaction',
+    addOne: 'En ajouter une à votre app',
+    addOneHtml: (label: string, name: string) =>
+      `Avec React, installez ${code('react-useanimations')} et importez l’icône : elle joue d’elle-même son interaction « ${lower(label)} ». Toutes les icônes de cette catégorie fonctionnent de la même façon : remplacez ${code(name)} par le nom indiqué sur leur page.`,
+    shadcnHtml: (href: string) =>
+      `Avec ${link(href, 'shadcn/ui')}, la CLI ajoute un composant prêt à l’emploi :`,
+    noReactHtml: (href: string) =>
+      `Vous n’utilisez pas React ? Chaque icône est un fichier Lottie JSON à l’adresse ${code('/icons/&lt;id&gt;.json')} ; la page ${link(href, 'Icônes Lottie')} présente les lecteurs pour le web, iOS, Android et Flutter.`,
+    more: 'Autres catégories',
+    allIconsButton: 'Toutes les icônes',
+  },
+
+  interaction: {
+    titles: (f: InteractionFacts) => [
+      `${f.title} pour React et Lottie`,
+      `${f.title} pour React`,
+      f.title,
+    ],
+    descriptions: (f: InteractionFacts) => {
+      const name = lower(f.title);
+      return [
+        `${f.count} ${name} gratuites qui ${f.plays}, comme ${list(f.titles.slice(0, 3))}. Pour React, shadcn/ui et Lottie JSON, sous licence MIT.`,
+        `${f.count} ${name} gratuites qui ${f.plays}. Pour React, shadcn/ui et Lottie JSON, sous licence MIT.`,
+        `${f.count} ${name} gratuites pour React, shadcn/ui et Lottie JSON, sous licence MIT.`,
+      ];
+    },
+    faq: (f: InteractionFacts) => [
+      {
+        question: `Quelles icônes utilisent l’interaction « ${lower(f.label)} » ?`,
+        answer: `${icons(f.count)} : ${titles(f.titles, 15)}. ${f.example}`,
+      },
+      {
+        question: 'Que se passe-t-il quand l’utilisateur a activé la réduction des animations ?',
+        answer: `${f.reducedMotion} Le composant React lit prefers-reduced-motion et se met à jour quand le réglage change : vous n’avez aucun code à écrire pour cela.`,
+      },
+      {
+        question: 'Comment changer l’interaction d’une icône ?',
+        answer: `Chaque icône joue l’interaction pour laquelle elle a été conçue. Passez interaction="${f.interaction}" pour donner ce comportement à n’importe quelle autre icône, ou une autre valeur ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') pour en changer. Les props autoplay, loop et speed règlent la lecture.${
+          f.interaction === 'click-toggle'
+            ? ' Pour piloter l’état vous-même, passez active={isOn} et mettez-le à jour dans onClick : les clics ne font alors plus basculer l’icône d’eux-mêmes.'
+            : ''
+        }`,
+      },
+    ],
+    allIcons: (label: string) => `Toutes les icônes « ${lower(label)} »`,
+    behaviour: 'Comportement',
+    hoverNote:
+      ' Sur écran tactile, un tap ne déclenche pas les animations au survol ; le focus clavier, lui, les déclenche quand l’icône se trouve dans un élément focusable.',
+    handled: 'Le composant React gère tout cela : vous n’avez qu’à choisir l’icône.',
+    whereToUse: 'Où l’utiliser',
+    byCategory: 'Par catégorie',
+    useInReact: 'Utilisation dans React',
+    overrideHtml: `Les icônes listées ici jouent cette interaction par défaut. Toute autre icône peut aussi l’utiliser : passez-lui la prop ${code('interaction')}.`,
+    normallyUses: (title: string, interaction: string) =>
+      `${title} utilise normalement '${interaction}'`,
+    extra: {
+      loop: 'Les boucles démarrent seules et se mettent en pause quand elles sortent de l’écran. Ralentissez-en une avec speed, jouez-la une seule fois avec loop={false} ou gardez-la immobile avec autoplay={false} :',
+      'click-toggle':
+        'Les clics font basculer l’icône d’eux-mêmes. Pour la synchroniser avec votre état, passez active : l’icône s’anime chaque fois que active change, et les clics ne la font plus basculer seuls.',
+      'click-replay':
+        'Placez l’icône dans un vrai bouton grâce à la render prop, pour qu’elle puisse recevoir le focus et être annoncée. Votre onClick s’exécute en premier ; appelez event.preventDefault() pour sauter l’animation.',
+      hover:
+        'Placez l’icône dans un lien ou un bouton grâce à la render prop : l’animation se joue alors aussi quand l’élément reçoit le focus clavier, et un tap sur écran tactile ne la déclenche pas.',
+      'hover-replay':
+        'Déclenchez l’animation au survol de toute la carte ou de tout le lien, pas seulement de l’icône : avec la render prop, les événements sont posés sur votre élément, et le focus clavier lance aussi l’animation.',
+      'hover-loop':
+        'Utilisez la render prop pour que tout le lien déclenche la boucle, focus clavier compris. Changez le rythme avec speed :',
+    },
+    codeText: {
+      halfSpeed: 'demi-vitesse',
+      playsOnce: 'se joue une fois, puis s’arrête',
+      staticFrame: 'première image, fixe',
+      endState: 'true affiche l’état final',
+      closeMenu: 'Fermer le menu',
+      openMenu: 'Ouvrir le menu',
+      download: 'Télécharger',
+      archive: 'Archives',
+      weeklyGrowth: 'Croissance hebdomadaire',
+    },
+    docsHtml: (docs: string, lottie: string) =>
+      `Toutes les props sont décrites dans la ${link(docs, 'documentation')}. En dehors de React, les icônes sont des fichiers Lottie JSON ; la page ${link(lottie, 'Icônes Lottie')} montre comment recréer les interactions avec lottie-web.`,
+    other: 'Autres interactions',
+    browseByCategory: 'Parcourir par catégorie',
+  },
+};
diff --git a/website/src/i18n/messages/fr/index.ts b/website/src/i18n/messages/fr/index.ts
new file mode 100644
index 0000000..bf33c1d
--- /dev/null
+++ b/website/src/i18n/messages/fr/index.ts
@@ -0,0 +1,11 @@
+import type { Messages } from '../en';
+import { common } from './common';
+import { docs } from './docs';
+import { home } from './home';
+import { hubs } from './hubs';
+import { islands } from './islands';
+import { licence } from './licence';
+import { pages } from './pages';
+import { taxonomy } from './taxonomy';
+
+export const messages: Messages = { common, taxonomy, hubs, home, docs, licence, pages, islands };
diff --git a/website/src/i18n/messages/fr/islands.ts b/website/src/i18n/messages/fr/islands.ts
new file mode 100644
index 0000000..13aeee9
--- /dev/null
+++ b/website/src/i18n/messages/fr/islands.ts
@@ -0,0 +1,51 @@
+import type { Messages } from '../en';
+
+export const islands: Messages['islands'] = {
+  iconCard: {
+    hints: {
+      loop: 'Boucle',
+      'click-toggle': 'Clic',
+      'click-replay': 'Clic',
+      hover: 'Survol',
+      'hover-loop': 'Survol',
+      'hover-replay': 'Survol',
+    },
+  },
+  iconDialog: {
+    hints: {
+      loop: 'Se joue toute seule',
+      'click-toggle': 'Cliquez pour basculer',
+      'click-replay': 'Cliquez pour rejouer',
+      hover: 'Survolez pour lancer, sortez pour revenir',
+      'hover-loop': 'Survolez pour boucler',
+      'hover-replay': 'Survolez pour lancer',
+    },
+    preview: 'Aperçu de {title}',
+    colors: 'Couleur de l’aperçu',
+    color: 'Couleur {color}',
+    textColor: 'Couleur du texte',
+    interaction: 'Interaction',
+    duration: 'Durée',
+    seconds: '{seconds} s',
+    import: 'Import',
+    close: 'Fermer',
+    code: 'Code',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Fichiers' },
+    copy: 'Copier',
+    download: 'Télécharger',
+    iconPage: 'Page de l’icône →',
+  },
+  interactionDemo: {
+    click: 'Cliquez sur la carte',
+    loop: 'Se joue toute seule',
+    hover: 'Survolez la carte',
+  },
+  mobileMenu: {
+    menu: 'Menu',
+    nav: 'Navigation principale',
+  },
+  themeToggle: {
+    toLight: 'Passer au thème clair',
+    toDark: 'Passer au thème sombre',
+  },
+};
diff --git a/website/src/i18n/messages/fr/licence.ts b/website/src/i18n/messages/fr/licence.ts
new file mode 100644
index 0000000..eca6455
--- /dev/null
+++ b/website/src/i18n/messages/fr/licence.ts
@@ -0,0 +1,26 @@
+import type { Messages } from '../en';
+
+export const licence: Messages['licence'] = {
+  title: 'Licence et conditions — useAnimations',
+  description:
+    'Les icônes useAnimations et le package react-useanimations sont sous licence MIT : usage personnel et commercial, redistribution libre, sans attribution.',
+  name: 'Licence et conditions',
+  heading: 'Libre d’utilisation. Sous licence MIT.',
+  introHtml: (mitHref: string) =>
+    `Les icônes useAnimations et le package <code>react-useanimations</code> sont publiés sous <a href="${mitHref}">licence MIT</a>.`,
+  canDo: 'Ce que vous pouvez faire',
+  canDoItemsHtml: [
+    '<strong>Utiliser</strong> les icônes dans des sites, des apps et des produits, personnels comme commerciaux.',
+    '<strong>Les modifier</strong> : changer les couleurs, les tailles, le timing ou le mouvement lui-même.',
+    '<strong>Les redistribuer</strong>, y compris au sein de packs d’icônes, de templates, de thèmes, de kits UI et de registres de composants.',
+  ],
+  attribution: 'Attribution',
+  attributionText:
+    'Elle n’est pas obligatoire, mais elle fait plaisir. Conservez la notice de licence si vous redistribuez les fichiers eux-mêmes, et si vous souhaitez nous citer :',
+  credit: (link: string) => `Icônes animées par ${link}`,
+  noWarranty: 'Absence de garantie',
+  noWarrantyText: 'Les icônes et le code sont fournis tels quels, sans garantie d’aucune sorte.',
+  licenseText: 'Texte de la licence',
+  bindingNote:
+    'Le texte de licence ci-dessous est la version originale en anglais, seule juridiquement contraignante.',
+};
diff --git a/website/src/i18n/messages/fr/pages.ts b/website/src/i18n/messages/fr/pages.ts
new file mode 100644
index 0000000..666e8c4
--- /dev/null
+++ b/website/src/i18n/messages/fr/pages.ts
@@ -0,0 +1,245 @@
+import { formIn, pluralIn } from '../../format';
+import type { Messages } from '../en';
+import { CATEGORY_OF } from './taxonomy';
+
+const plural = pluralIn('fr');
+const iconCount = (n: number) => plural(n, { one: 'icône', other: 'icônes' });
+const uses = (n: number) => formIn('fr')(n, { one: 'utilise', other: 'utilisent' });
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+const strong = (text: string) => `<strong class="font-medium text-fg">${text}</strong>`;
+
+export const pages: Messages['pages'] = {
+  icons: {
+    titles: (count: number) => [
+      `Les ${count} icônes animées, par catégorie`,
+      `Les ${count} icônes animées`,
+    ],
+    descriptions: (count: number, categories: number) => [
+      `Toutes les icônes useAnimations sur une page : ${count} icônes animées gratuites dans ${categories} catégories, pour React, shadcn/ui, Lottie JSON et SVG. Licence MIT.`,
+      `${count} icônes animées gratuites dans ${categories} catégories, pour React, shadcn/ui, Lottie JSON et SVG. Licence MIT.`,
+    ],
+    title: 'Toutes les icônes animées',
+    badge: (count: number) => `${iconCount(count)} · licence MIT`,
+    introHtml: (browser: string) =>
+      `Toutes les icônes du jeu, regroupées par catégorie. Ouvrez-en une pour voir un aperçu animé, son code React et shadcn/ui, et télécharger les fichiers Lottie JSON, SVG et ZIP. Pour chercher par mot-clé et tester les animations sur place, utilisez l’${link(browser, 'explorateur d’icônes')}.`,
+    categoriesNav: 'Catégories',
+    byInteraction: 'Par interaction :',
+    categoryLink: (count: number, name: string) =>
+      `${iconCount(count)} ${CATEGORY_OF[name] ?? `« ${name} »`} →`,
+  },
+
+  categories: {
+    titles: (categories: number) => [
+      `Catégories d’icônes animées : ${categories} collections`,
+      'Catégories d’icônes animées',
+    ],
+    descriptions: (icons: number, categories: number) => [
+      `${icons} icônes animées gratuites réparties en ${categories} catégories : navigation, actions, médias, chargement, réseaux sociaux, etc. Pour React, shadcn/ui et Lottie.`,
+      `${icons} icônes animées gratuites en ${categories} catégories, pour React, shadcn/ui et Lottie.`,
+    ],
+    title: 'Catégories d’icônes animées',
+    badge: (icons: number, categories: number) => `${icons} icônes · ${categories} catégories`,
+    introHtml: (interactions: string) =>
+      `Chaque icône useAnimations appartient à une catégorie, des flèches de navigation aux logos de réseaux sociaux en passant par les contrôles multimédias et les indicateurs de chargement. Ouvrez une catégorie pour voir toutes ses icônes, où les utiliser et le code pour en ajouter une, ou parcourez plutôt les icônes par ${link(interactions, 'interaction')}.`,
+    iconCount,
+  },
+
+  interactions: {
+    titles: [
+      'Micro-interactions : icônes au survol, au clic, en boucle',
+      'Micro-interactions pour icônes animées',
+    ],
+    descriptions: (icons: number, interactions: number) => [
+      `${icons} icônes animées réparties en ${interactions} micro-interactions : boucle, bascule au clic, relecture au clic, survol, lecture au survol et boucle au survol. Avec gestion de la réduction des animations.`,
+      `${icons} icônes animées en ${interactions} micro-interactions : boucle, clic et survol, avec gestion de la réduction des animations.`,
+    ],
+    title: 'Interactions des icônes animées',
+    badge: (interactions: number, icons: number) =>
+      `${interactions} interactions · ${icons} icônes`,
+    introHtml: `Chaque icône est livrée avec la micro-interaction pour laquelle elle a été conçue : elle boucle, bascule ou se rejoue au clic, ou se joue au survol. Le composant React s’occupe du branchement et respecte la réduction des animations, et la prop <code class="font-mono text-base text-fg">interaction</code> permet de passer n’importe quelle icône à une autre interaction.`,
+    iconCount,
+    chooseTitle: 'Choisir une interaction',
+    chooseHtml: {
+      loop: (href: string) =>
+        `${strong('Un état qui dure')}, comme un chargement ou une alerte active : ${link(href, 'boucle')}.`,
+      'click-toggle': (href: string) =>
+        `${strong('Un contrôle on/off')}, comme couper le son, le menu ou afficher le mot de passe : ${link(href, 'bascule au clic')}, avec ${code('active')} pour un état contrôlé.`,
+      'click-replay': (href: string) =>
+        `${strong('Une action ponctuelle')}, comme envoyer, enregistrer ou actualiser : ${link(href, 'relecture au clic')}.`,
+      hover: (href: string) =>
+        `${strong('Un aperçu de ce qu’ouvre un lien')} : ${link(href, 'survol')}, qui revient en arrière quand le pointeur s’en va.`,
+      'hover-replay': (href: string) =>
+        `${strong('Les barres d’outils et les listes que l’on balaie du pointeur')} : ${link(href, 'lecture au survol')}, qui va au bout de l’animation d’elle-même.`,
+      'hover-loop': (href: string) =>
+        `${strong('Les liens qui invitent à s’attarder')}, comme les icônes de réseaux sociaux : ${link(href, 'boucle au survol')}.`,
+    },
+    motionTitle: 'Réduction des animations',
+    motionHtml: `Le composant React suit ${code('prefers-reduced-motion')} et se met à jour quand le réglage change. Sur écran tactile, un tap ne déclenche jamais les animations au survol.`,
+    reducedMotion: {
+      loop: 'l’icône ne démarre pas seule et reste sur sa première image, fixe.',
+      'click-toggle': 'un clic passe immédiatement à l’autre état, sans l’animation intermédiaire.',
+      'click-replay':
+        'les clics atteignent toujours votre gestionnaire, mais l’animation ne se joue pas.',
+      hover: 'le survol ne déclenche pas l’animation.',
+      'hover-replay': 'le survol ne déclenche pas l’animation.',
+      'hover-loop': 'l’icône reste fixe pendant le survol.',
+    },
+  },
+
+  lottie: {
+    titles: (count: number) => [
+      `Icônes Lottie gratuites : ${count} icônes animées en JSON`,
+      'Icônes Lottie gratuites',
+    ],
+    descriptions: (count: number) => [
+      `${count} icônes Lottie gratuites en Lottie JSON standard, sous licence MIT. Code prêt à copier pour lottie-web, dotLottie, React, React Native, iOS, Android et Flutter.`,
+      `${count} icônes Lottie gratuites en JSON, sous licence MIT. Code pour lottie-web, dotLottie, React, React Native, iOS, Android et Flutter.`,
+    ],
+    title: 'Icônes Lottie gratuites',
+    crumb: 'Icônes Lottie',
+    datasetName: 'Catalogue d’icônes useAnimations',
+    datasetDescription: (count: number) =>
+      `Métadonnées et URL des fichiers de ${count} icônes Lottie animées : id, titre, catégorie, mots-clés, interaction, taille et durée.`,
+    badge: (count: number) => `${count} icônes · Lottie JSON · licence MIT`,
+    intro:
+      'Chaque icône useAnimations est une animation Lottie JSON standard : n’importe quel lecteur Lottie peut la jouer, que ce soit lottie-web sur le web, lottie-ios, lottie-android, Flutter ou React Native. Les fichiers sont gratuits sous licence MIT, sans inscription, et servis depuis des URL stables avec CORS activé : vous pouvez les charger directement ou les télécharger dans votre projet.',
+    popular: 'Icônes Lottie populaires',
+    allIcons: (count: number) => `Les ${count} icônes →`,
+    filesTitle: 'Fichiers et URL',
+    filesIntroHtml: `Chaque icône a sa page (en anglais) à l’adresse ${code('/icons/&lt;id&gt;')}, avec un aperçu et les téléchargements. Les fichiers eux-mêmes :`,
+    files: {
+      json: 'animation Lottie JSON',
+      zip: 'le JSON et les SVG statiques',
+      svg: 'SVG statique de chaque état',
+      catalog: 'catalogue de toutes les icônes',
+    },
+    catalogHtml: (catalog: string, median: number) =>
+      `${link(catalog, 'icons.json')} liste chaque icône avec son id, son titre, sa catégorie, ses mots-clés, son interaction, sa taille, sa durée et les URL de ses fichiers : de quoi choisir facilement des icônes par mot-clé dans un script ou laisser un agent de code en sélectionner une. Les fichiers Lottie pèsent ${median} kB en médiane.`,
+    players: {
+      web: {
+        title: 'Web : lottie-web',
+        text: 'Le lecteur de référence, développé par Airbnb. Chargez-le depuis un CDN, indiquez-lui l’URL d’une icône et choisissez le moteur de rendu SVG, qui garde l’icône nette et permet de la recolorer en CSS. Utilisez la version complète (lottie.min.js) : la version light ignore les expressions.',
+        cssLabel: 'Suivre la couleur du texte (rendu SVG)',
+      },
+      'web-interactions': {
+        title: 'Web : interactions au survol et au clic',
+        text: 'lottie-web sait lancer et arrêter une animation, mais les interactions sont à votre charge. Voici la bascule au clic de l’icône de menu, avec prise en charge de la réduction des animations ; toutes les interactions suivent le même schéma, et le composant React ci-dessous fait tout cela pour vous.',
+      },
+      dotlottie: {
+        title: 'Web : composant web dotLottie',
+        text: 'Le lecteur de LottieFiles fait le rendu dans un canvas avec un moteur WebAssembly et lit aussi bien le Lottie JSON standard que les fichiers .lottie. Un canvas conserve les couleurs du fichier : les icônes restent noires, sauf si vous recolorez le JSON.',
+        jsLabel: 'Ou l’API JavaScript : npm install @lottiefiles/dotlottie-web',
+      },
+      react: {
+        title: 'React : react-useanimations',
+        text: 'Aucun lecteur Lottie à installer : le package embarque son propre lecteur de 8 kB, joue l’interaction de chaque icône, suit la couleur du texte et respecte la réduction des animations. Chaque icône est un module distinct : vous ne livrez que celles que vous importez.',
+      },
+      'react-native': {
+        title: 'React Native : lottie-react-native',
+        text: 'Intégrez le JSON au bundle avec require() pour un usage hors ligne, ou chargez-le depuis son URL.',
+      },
+      ios: {
+        title: 'iOS : lottie-ios (SwiftUI)',
+        text: 'Ajoutez le package https://github.com/airbnb/lottie-spm.git avec Swift Package Manager, puis placez le JSON dans votre bundle ou chargez-le depuis son URL.',
+      },
+      android: {
+        title: 'Android : lottie-android (Jetpack Compose)',
+        text: 'Ajoutez com.airbnb.android:lottie-compose (ou com.airbnb.android:lottie pour les vues). Placez le JSON dans res/raw pour un usage hors ligne avec LottieCompositionSpec.RawRes.',
+      },
+      flutter: {
+        title: 'Flutter : lottie',
+        text: 'Le package lottie est un lecteur en pur Dart pour Android, iOS, le web et le desktop.',
+      },
+    },
+    expressionsTitle: 'Icônes avec expressions',
+    expressionsHtml: (count: number) =>
+      `${iconCount(count)} ${uses(count)} des expressions After Effects (${code('loopOut')} ou ${code('wiggle')}). Sur le web, lisez-les avec la version complète de lottie-web, pas avec ${code('lottie_light')}. Les lecteurs natifs n’évaluent pas les expressions : testez ces icônes sur iOS, Android et Flutter ou choisissez-en une autre ; react-useanimations les joue telles qu’elles ont été conçues.`,
+    faq: (f: {
+      count: number;
+      minSize: number;
+      maxSize: number;
+      medianSize: number;
+      expressions: string[];
+    }) => [
+      {
+        question: 'Ces icônes Lottie sont-elles gratuites pour un usage commercial ?',
+        answer: `Oui. Les ${f.count} icônes Lottie sont sous licence MIT : utilisez-les, modifiez-les et redistribuez-les dans vos projets personnels et commerciaux, sans attribution obligatoire et sans compte pour les télécharger.`,
+      },
+      {
+        question: 'Quel est le format des fichiers Lottie ?',
+        answer: `Du Lottie JSON standard (le format Bodymovin), uniquement avec des calques de forme : ni images, ni polices, ni ressources externes. Chaque icône est dessinée sur un plan de travail de 24 ou 32 px, s’adapte à toutes les tailles et pèse de ${f.minSize} kB à ${f.maxSize} kB, ${f.medianSize} kB en médiane.`,
+      },
+      {
+        question: 'Faut-il lottie-web pour utiliser les icônes dans React ?',
+        answer:
+          'Non. react-useanimations embarque son propre lecteur de 8 kB, sans dépendance : vous installez un seul package et importez les icônes dont vous avez besoin. lottie-web ne sert qu’en dehors de React, sur des pages web classiques ou avec d’autres frameworks.',
+      },
+      {
+        question: 'Quelles icônes nécessitent la version complète de lottie-web ?',
+        answer: `${iconCount(f.expressions.length)} ${uses(f.expressions.length)} des expressions After Effects (loopOut ou wiggle) : ${f.expressions.join(', ')}. Sur le web, il leur faut la version complète de lottie-web ; lottie_light ignore les expressions. Les lecteurs natifs (lottie-ios, lottie-android, le package lottie de Flutter) ne les évaluent pas non plus : ces icônes peuvent donc s’y animer différemment.`,
+      },
+      {
+        question: 'Puis-je changer la couleur d’une icône Lottie ?',
+        answer:
+          'Sur le web, le moteur de rendu SVG de lottie-web écrit les couleurs sous forme d’attributs : une règle CSS sur les tracés suffit à recolorer l’icône. Les lecteurs natifs passent par leurs API de propriétés dynamiques : ColorValueProvider sur iOS, LottieProperty.COLOR et STROKE_COLOR sur Android, ValueDelegate.color dans Flutter.',
+      },
+    ],
+    byCategory: 'Icônes Lottie par catégorie',
+  },
+
+  shadcn: {
+    titles: (count: number) => [
+      `Icônes animées pour shadcn/ui : ${count} composants`,
+      'Icônes animées pour shadcn/ui',
+    ],
+    descriptions: (count: number) => [
+      `${count} icônes animées pour shadcn/ui : ajoutez n’importe quelle icône avec une seule commande de la CLI shadcn. Micro-interactions au survol, au clic, en boucle. MIT.`,
+      `${count} icônes animées pour shadcn/ui, à ajouter avec une seule commande de la CLI shadcn. Sous licence MIT, sans lottie-web.`,
+    ],
+    title: 'Icônes animées pour shadcn/ui',
+    crumb: 'shadcn/ui',
+    popularList: 'Icônes animées shadcn/ui populaires',
+    badge: (count: number) => `${count} composants · registre shadcn · licence MIT`,
+    intro:
+      'Toutes les icônes useAnimations sont disponibles dans un registre shadcn. Une seule commande de la CLI ajoute à votre projet un composant React typé, avec l’interaction au survol, au clic ou en boucle pour laquelle l’icône a été conçue, la prise en charge de la réduction des animations et des couleurs qui suivent votre thème. Le code atterrit dans votre dépôt, comme n’importe quel autre composant shadcn/ui.',
+    addTitle: 'Ajouter une icône',
+    addIntro: 'Lancez la CLI shadcn avec l’URL de l’icône dans le registre :',
+    namingHtml: `Le composant s’appelle ${code('Animated')} + l’id de l’icône en PascalCase (${code('check-box')} → ${code('AnimatedCheckBox')}) et se place dans ${code('components/animations/&lt;id&gt;.tsx')}. La CLI ajoute aussi le wrapper partagé ${code('components/use-animation.tsx')} et installe ${code('react-useanimations')}, qui embarque son propre lecteur : pas besoin de lottie-web.`,
+    namespaceTitle: 'Des noms courts avec un namespace de registre',
+    namespaceHtml: `Ajoutez une fois le registre à ${code('components.json')}, puis ajoutez les icônes par leur nom, plusieurs à la fois :`,
+    registryHtml: (registry: string) =>
+      `L’index du registre, ${link(registry, '/r/registry.json')}, liste chaque élément avec son titre, sa catégorie et son interaction.`,
+    usageTitle: 'Dans un Button shadcn',
+    usageHtml: `Les composants acceptent les mêmes props que ${code('UseAnimations')}. Pour une bascule comme l’icône de menu, passez ${code('active')} et gardez l’état dans votre bouton ; l’icône s’anime chaque fois qu’il change :`,
+    colorHtml: (docs: string) =>
+      `Les icônes suivent la couleur du texte : ${code('text-primary')} ou ${code('text-muted-foreground')} suffisent à les recolorer, et le mode sombre ne demande rien de plus. D’autres props et exemples sont dans la ${link(docs, 'documentation')}.`,
+    codeText: { closeMenu: 'Fermer le menu', openMenu: 'Ouvrir le menu' },
+    popular: 'Icônes populaires pour shadcn/ui',
+    allIcons: (count: number) => `Les ${count} icônes →`,
+    popularNote: 'La page de chaque icône indique sa commande shadcn.',
+    faq: (f: { count: number; version: string }) => [
+      {
+        question: 'Les icônes animées shadcn/ui sont-elles gratuites ?',
+        answer: `Oui. Les ${f.count} icônes et le code des composants sont sous licence MIT, pour vos projets personnels et commerciaux. Le registre ne demande ni compte ni clé d’API.`,
+      },
+      {
+        question: 'Qu’est-ce que la CLI shadcn ajoute à mon projet ?',
+        answer: `Le composant de l’icône dans components/animations/<id>.tsx, le wrapper partagé du lecteur UseAnimation dans components/use-animation.tsx (une seule fois, en tant que dépendance du registre) et react-useanimations@^${f.version} depuis npm. lottie-web n’est pas nécessaire : le package embarque son propre lecteur de 8 kB.`,
+      },
+      {
+        question: 'Les composants fonctionnent-ils avec les server components de Next.js ?',
+        answer:
+          'Oui. Les composants sont marqués "use client" et ne dessinent l’animation que dans le navigateur : vous pouvez les afficher depuis des server components et des pages sans import dynamique ni ssr: false.',
+      },
+      {
+        question: 'Puis-je modifier l’apparence et le mouvement des icônes ?',
+        answer:
+          'Le code vous appartient, il est dans votre dépôt. Les composants acceptent les props de UseAnimations : size, strokeColor, fillColor, interaction, active, autoplay, loop et speed. Les icônes suivent la couleur du texte : des classes Tailwind comme text-primary ou text-muted-foreground suffisent à les recolorer.',
+      },
+    ],
+    byCategory: 'Parcourir par catégorie',
+  },
+};
diff --git a/website/src/i18n/messages/fr/taxonomy.ts b/website/src/i18n/messages/fr/taxonomy.ts
new file mode 100644
index 0000000..747fdc3
--- /dev/null
+++ b/website/src/i18n/messages/fr/taxonomy.ts
@@ -0,0 +1,391 @@
+import type { Interaction } from 'react-useanimations';
+import type { Messages } from '../en';
+import type { CategoryText } from '../en/taxonomy';
+
+/**
+ * The complement after "icônes" for each category, keyed by its French name:
+ * 'Chargement' -> 'de chargement', for "Toutes les icônes de chargement".
+ */
+export const CATEGORY_OF: Record<string, string> = {};
+
+const category = (name: string, of: string, text: Omit<CategoryText, 'name'>): CategoryText => {
+  CATEGORY_OF[name] = of;
+  return { name, ...text };
+};
+
+/** How a single icon plays: the singular of `plays`, "1 icône <playsOne>". */
+export const PLAYS_ONE: Record<Interaction, string> = {
+  loop: 'boucle en continu',
+  'click-toggle': 'bascule entre deux états au clic',
+  'click-replay': 'se rejoue à chaque clic',
+  hover: 'se joue au survol et revient en arrière quand le pointeur s’en va',
+  'hover-replay': 'se joue une fois au survol',
+  'hover-loop': 'boucle pendant le survol',
+};
+
+export const taxonomy: Messages['taxonomy'] = {
+  categories: {
+    Alerts: category('Alertes', 'd’alerte', {
+      title: 'Icônes animées d’alerte',
+      intro:
+        'Triangles d’avertissement, cercles d’alerte et panneaux stop qui pulsent juste assez pour attirer l’œil, sans clignoter. Placez-les à côté d’un champ de formulaire en erreur, en tête d’une bannière d’erreur ou dans une colonne de statut : là où une icône fixe passe facilement inaperçue.',
+      useCases: [
+        'Erreurs de validation sous les champs de formulaire',
+        'Bannières d’erreur et d’avertissement en haut de page',
+        'Lignes en échec dans un tableau de déploiements ou de tâches',
+        'Boîtes de dialogue de confirmation avant une action destructive',
+        'Pages de statut pendant un incident',
+      ],
+    }),
+    Notifications: category('Notifications', 'de notification', {
+      title: 'Icônes animées de cloche de notification',
+      intro:
+        'Des cloches qui sonnent à chaque nouvelle activité ou qui basculent entre cloche et cloche barrée. Un léger balancement attire le regard vers le nombre de non-lus, et les versions à bascule servent aussi de bouton pour couper les notifications d’un canal ou d’un fil.',
+      useCases: [
+        'Bouton du centre de notifications dans l’en-tête d’une app',
+        'Badge de non-lus qui sonne à l’arrivée d’un nouveau message',
+        'Activation et désactivation des notifications d’un canal ou d’un fil',
+        'Réglages des notifications e-mail et push',
+        'Boutons d’abonnement aux rappels et aux alertes',
+      ],
+    }),
+    Navigation: category('Navigation', 'de navigation', {
+      title: 'Icônes animées de navigation et de flèches',
+      intro:
+        'Des menus hamburger qui se transforment en bouton de fermeture, des flèches, des chevrons et des flèches d’angle qui se décalent dans leur direction au survol. On voit tout de suite où mène le contrôle : ouvrir le tiroir, revenir en arrière, déplier la ligne, quitter le site.',
+      useCases: [
+        'Menu hamburger qui devient un bouton de fermeture sur mobile',
+        'Boutons précédent et suivant des carrousels et de la pagination',
+        'Chevrons des accordéons et des menus déroulants',
+        'Retour en haut de page et invitations à faire défiler',
+        'Liens de connexion et de déconnexion',
+        'Marqueurs de liens externes et boutons de barre latérale',
+      ],
+    }),
+    Action: category('Actions', 'd’action', {
+      title: 'Icônes animées d’action',
+      intro:
+        'Les verbes d’une interface : enregistrer, supprimer, télécharger, actualiser, aimer, ajouter aux favoris, rechercher et régler. Chaque icône confirme le clic ou le survol auquel elle correspond : le cœur se remplit quand on aime une publication, le couvercle de la corbeille se soulève avant la suppression.',
+      useCases: [
+        'Boutons j’aime, favori et signet sur les cartes',
+        'Boutons de téléchargement, d’envoi de fichier et d’enregistrement qui confirment l’action',
+        'Bouton afficher/masquer le mot de passe dans un formulaire de connexion',
+        'Boutons d’actualisation et de synchronisation dans les tableaux de bord',
+        'Boutons de suppression dans les tableaux et les listes de fichiers',
+        'Champ de recherche qui se transforme en bouton d’effacement',
+      ],
+    }),
+    Content: category('Contenu', 'de contenu', {
+      title: 'Icônes animées de fichiers, dossiers et utilisateurs',
+      intro:
+        'Fichiers, dossiers, livres, e-mails, pièces jointes et personnes. Ces icônes désignent les objets que l’utilisateur manipule, et leurs variantes ajout, retrait et validation rendent la gestion des listes et des équipes plus réactive.',
+      useCases: [
+        'Gestionnaires de fichiers et listes de documents',
+        'Boutons de pièce jointe et de copie dans le presse-papiers',
+        'Boîte de réception et archives d’un client de messagerie',
+        'Listes de membres d’une équipe avec ajout et retrait d’utilisateurs',
+        'Menus de partage pour les documents et les liens',
+      ],
+    }),
+    Form: category('Formulaires', 'de formulaire', {
+      title: 'Icônes animées de contrôles de formulaire',
+      intro:
+        'Une case à cocher, un bouton radio et un interrupteur qui s’animent entre l’état coché et l’état décoché. Utilisez-les là où un champ standard paraît plat, comme les checklists d’onboarding ou les écrans de réglages, tout en gardant l’état lisible d’un coup d’œil.',
+      useCases: [
+        'Interrupteurs de réglages pour les fonctionnalités et les préférences',
+        'Checklists d’onboarding et listes de tâches',
+        'Choix uniques dans les sondages et les sélecteurs d’offre',
+        'Cases d’acceptation des conditions et de consentement',
+      ],
+    }),
+    Media: category('Médias', 'multimédia', {
+      title: 'Icônes animées de lecteur multimédia',
+      intro:
+        'Lecture et pause, volume, micro, caméra, piste suivante et lecture aléatoire pour les lecteurs audio et vidéo. Les icônes à bascule passent d’un état à l’autre, de lecture à pause ou de micro à micro coupé, si bien que le bouton montre toujours ce que fera le prochain clic.',
+      useCases: [
+        'Boutons lecture et pause des lecteurs audio et vidéo',
+        'Activation et coupure du micro en visioconférence',
+        'Activation et désactivation de la caméra dans les apps de réunion',
+        'Contrôles de playlist : piste suivante, répétition et lecture aléatoire',
+        'Boutons Cast et AirPlay',
+        'Contrôles des apps de podcast et de musique',
+      ],
+    }),
+    'Text editing': category('Édition de texte', 'd’édition de texte', {
+      title: 'Icônes animées d’édition de texte',
+      intro:
+        'Gras, italique, souligné, alignement et listes pour les barres d’outils de texte enrichi. Une courte animation au clic confirme que la mise en forme a été appliquée, ce qui aide dans les éditeurs où le changement sur le texte lui-même est discret.',
+      useCases: [
+        'Barres d’outils d’éditeur de texte enrichi',
+        'Zones de saisie de commentaires et de messages',
+        'Éditeurs d’articles de CMS et de blog',
+        'Apps Markdown et de prise de notes',
+        'Contrôles d’alignement du texte dans les outils de design',
+      ],
+    }),
+    Communication: category('Communication', 'de communication', {
+      title: 'Icônes animées de communication',
+      intro:
+        'Téléphones, bulles de discussion, boutons d’envoi, messagerie vocale et RSS. Les icônes d’appel couvrent les états entrant, sortant, manqué et transféré dont un journal d’appels a besoin, et l’icône d’envoi donne au message un petit élan au clic.',
+      useCases: [
+        'Bouton d’envoi des formulaires de chat et de commentaire',
+        'Journaux d’appels avec appels entrants, sortants et manqués',
+        'Boutons de contact et de support',
+        'Boutons de lancement de widget de chat',
+        'Champs de mention et d’adresse e-mail',
+      ],
+    }),
+    Devices: category('Appareils', 'd’appareils', {
+      title: 'Icônes animées d’appareils',
+      intro:
+        'Téléphones, tablettes, écrans, montres et imprimantes, avec les indicateurs de connexion qui les accompagnent : wifi, Bluetooth et batterie. Elles conviennent aux sélecteurs d’appareil, aux commutateurs d’aperçu responsive et aux statuts de connectivité.',
+      useCases: [
+        'Commutateurs d’aperçu responsive mobile, tablette et ordinateur',
+        'Statut de connexion wifi et Bluetooth',
+        'Indicateurs de batterie et de charge',
+        'Listes des appareils dans les paramètres de sécurité du compte',
+        'Boutons d’impression sur les factures et les rapports',
+      ],
+    }),
+    Weather: category('Météo', 'météo', {
+      title: 'Icônes météo animées',
+      intro:
+        'Soleil, lune, nuages, pluie, neige, éclairs et vent pour les prévisions et tout ce qui suit le moment de la journée. Le soleil et la lune font aussi un interrupteur naturel entre mode clair et mode sombre.',
+      useCases: [
+        'Widgets météo et cartes de prévisions',
+        'Bascule entre thème clair et thème sombre',
+        'Heures de lever et de coucher du soleil dans les apps de voyage',
+        'Températures sur les tableaux de bord de maison connectée',
+        'Indicateurs d’énergie et d’alimentation',
+      ],
+    }),
+    'Maps & location': category('Cartes et localisation', 'de carte et de localisation', {
+      title: 'Icônes animées de carte et de localisation',
+      intro:
+        'Repères de carte, flèches de navigation, globes, cibles et ancres. Un repère qui tombe au survol fait ressortir un localisateur de magasins ou une adresse de livraison, et le globe sert de sélecteur de langue ou de région.',
+      useCases: [
+        'Localisateurs de magasins et champs d’adresse',
+        'Boutons de position actuelle et d’itinéraire',
+        'Sélecteurs de langue et de région',
+        'Suivi de livraison et de commande',
+        'Apps de voyage et de réservation',
+      ],
+    }),
+    Commerce: category('E-commerce', 'e-commerce', {
+      title: 'Icônes e-commerce animées',
+      intro:
+        'Paniers, sacs, étiquettes de prix, cadeaux, cartes bancaires et camions de livraison pour les boutiques en ligne. Une animation d’ajout au panier confirme le clic sans toast, et les icônes de camion et de colis donnent un peu de vie au suivi de commande.',
+      useCases: [
+        'Boutons d’ajout au panier sur les fiches produit',
+        'Boutons panier et sac dans l’en-tête d’une boutique',
+        'Paiement et choix du moyen de paiement',
+        'Badges de remise, de code promo et de soldes',
+        'Étapes de livraison et de suivi de commande',
+        'Cartes cadeaux et options d’emballage cadeau',
+      ],
+    }),
+    Charts: category('Graphiques', 'de graphique', {
+      title: 'Icônes animées de graphiques',
+      intro:
+        'Histogrammes, graphique circulaire et flèches de tendance pour l’analytique et le reporting. Les icônes de tendance à la hausse et à la baisse montrent d’un coup d’œil si un indicateur a progressé ou reculé, idéal pour les cartes de KPI et les historiques de chiffres.',
+      useCases: [
+        'Cartes de KPI avec indicateurs en hausse ou en baisse',
+        'Entrées de navigation vers l’analytique et les rapports',
+        'États vides des tableaux de bord',
+        'Synthèses financières et de portefeuille',
+      ],
+    }),
+    Development: category('Développement', 'de développement', {
+      title: 'Icônes animées de développement',
+      intro:
+        'Chevrons de code, terminal, branches, commits, merges et pull requests Git, ainsi que serveurs et bases de données. Pensées pour les outils de développement, les sites de documentation et les pages de statut, où le vocabulaire de Git et de l’infrastructure fait partie de l’interface.',
+      useCases: [
+        'Statut des pull requests, merges et branches dans les outils de développement',
+        'Boutons d’extrait de code et d’intégration dans la documentation',
+        'Sections terminal et CLI des pages d’accueil',
+        'Santé des serveurs et des bases de données sur les pages de statut',
+        'Raccourcis clavier avec la touche Commande',
+      ],
+    }),
+    'Design & layout': category('Design et mise en page', 'de design et de mise en page', {
+      title: 'Icônes animées de design et de mise en page',
+      intro:
+        'Grilles, colonnes, calques, recadrage, outil plume et curseurs pour les éditeurs et les builders. Elles trouvent leur place dans les barres d’outils où l’on organise du contenu, où l’on passe d’une vue grille à une vue tableau ou où l’on choisit un outil de dessin.',
+      useCases: [
+        'Sélecteurs d’affichage grille, liste et tableau',
+        'Panneaux de calques des outils de design et de présentation',
+        'Outils de recadrage et de découpe des éditeurs d’images',
+        'Page builders et sélecteurs de mise en page',
+        'Poignées de glisser-déposer',
+      ],
+    }),
+    'Shapes & math': category('Formes et maths', 'de formes et de maths', {
+      title: 'Icônes animées de formes et de maths',
+      intro:
+        'Cercles, carrés, triangles, hexagones, un octogone et des signes de division. Utilisez-les comme outils de forme dans les apps de dessin, comme opérateurs de calculatrice ou comme repères neutres dans les schémas et les étapes d’onboarding.',
+      useCases: [
+        'Outils de forme des tableaux blancs et des apps de dessin',
+        'Opérateurs de calculatrice et d’éditeur de formules',
+        'Puces et repères d’étape dans les schémas',
+        'Interfaces de quiz et de jeu',
+      ],
+    }),
+    Loading: category('Chargement', 'de chargement', {
+      title: 'Icônes animées de chargement',
+      intro:
+        'Spinners et loaders qui tournent en boucle tant qu’une opération est en cours. Placez-en un dans un bouton d’envoi pendant une requête, à la place d’un contenu qui charge encore ou sur un écran de démarrage plein écran ; ils restent immobiles quand l’utilisateur a activé la réduction des animations.',
+      useCases: [
+        'Boutons d’envoi en attente d’une requête',
+        'Placeholders pendant le chargement d’une liste ou d’un graphique',
+        'Indicateurs de scroll infini et de chargement de la suite',
+        'Écrans de démarrage plein écran et transitions de route',
+        'Progression d’envoi et de traitement de fichiers',
+      ],
+    }),
+    'Social media': category('Réseaux sociaux', 'de réseaux sociaux', {
+      title: 'Icônes animées de réseaux sociaux',
+      intro:
+        'Logos des réseaux sociaux et des outils sur lesquels développeurs et designers partagent leur travail : X, Instagram, YouTube, Discord, Telegram, Figma et d’autres. Ils s’animent au survol, ce qui rend les liens du footer et des profils visiblement cliquables.',
+      useCases: [
+        'Liens sociaux dans le footer du site',
+        'Boutons de partage sur les articles de blog',
+        'Liens vers les profils des auteurs et de l’équipe',
+        'Boutons d’invitation aux serveurs de discussion d’une communauté',
+        'Connexion avec un compte social ou développeur',
+      ],
+    }),
+    Other: category('Autres', 'diverses', {
+      title: 'Autres icônes animées',
+      intro:
+        'Des icônes qui n’appartiennent à aucun groupe plus large : des émojis pour recueillir un avis, une tasse de café, une horloge, une ligne de pouls et une invitation à faire défiler. L’icône de défilement est un indice classique en bas d’une section hero pour signaler qu’il y a de la suite.',
+      useCases: [
+        'Invitations à faire défiler en bas d’une section hero',
+        'Visages content, neutre et triste dans les widgets d’avis',
+        'Indicateurs d’activité et de disponibilité',
+        'Horaires d’ouverture et sélecteurs d’heure',
+        'Liens « Buy me a coffee » et de soutien',
+      ],
+    }),
+  },
+  interactions: {
+    loop: {
+      label: 'Boucle',
+      title: 'Icônes animées en boucle',
+      intro:
+        'Ces icônes jouent en continu tant qu’elles sont à l’écran : elles conviennent aux états qui durent, comme un chargement en cours, un avertissement actif ou un terminal en attente. Quand l’utilisateur a activé la réduction des animations, elles s’arrêtent sur leur première image et restent lisibles comme une icône normale.',
+      useCases: [
+        'Spinners de chargement et indicateurs de progression',
+        'États d’avertissement et d’erreur actifs',
+        'Indicateurs de direct et d’enregistrement',
+        'Invitations à faire défiler dans les sections hero',
+        'Signaux d’attention pour les nouvelles notifications',
+      ],
+      example:
+        'Les icônes en boucle servent surtout aux spinners de chargement, aux alertes actives, à une cloche qui sonne ou à une invitation à faire défiler.',
+      description:
+        'Joue en continu ; reste sur la première image, fixe, quand la réduction des animations est activée.',
+      reducedMotion:
+        'Si la réduction des animations est activée, l’icône ne démarre pas seule et reste sur sa première image, fixe.',
+      plays: 'bouclent en continu',
+    },
+    'click-toggle': {
+      label: 'Bascule au clic',
+      title: 'Icônes animées à bascule au clic',
+      intro:
+        'Chaque clic anime l’icône d’un état à l’autre, et elle y reste : ces icônes sont la moitié visuelle d’un contrôle on/off. L’icône montre toujours l’état actuel ; associez-la à aria-pressed ou à un attribut checked et le bouton se passe d’explication.',
+      useCases: [
+        'Boutons pour couper et rétablir le son',
+        'Champs de mot de passe avec affichage et masquage',
+        'Boutons menu hamburger et fermeture',
+        'Contrôles lecture et pause',
+        'Bascules j’aime, étoile et signet',
+        'Cases à cocher, boutons radio et interrupteurs',
+      ],
+      example:
+        'Les icônes à bascule au clic pilotent typiquement les boutons son/muet, afficher/masquer le mot de passe, menu/fermer, lecture/pause et j’aime.',
+      description:
+        'Bascule entre deux états au clic, ou change d’état immédiatement quand la réduction des animations est activée.',
+      reducedMotion:
+        'Si la réduction des animations est activée, un clic passe immédiatement à l’autre état, sans l’animation intermédiaire.',
+      plays: 'basculent entre deux états au clic',
+    },
+    'click-replay': {
+      label: 'Relecture au clic',
+      title: 'Icônes animées au clic',
+      intro:
+        'Ces icônes rejouent leur animation depuis le début à chaque clic : une petite confirmation que l’action a bien eu lieu. Elles conviennent aux actions ponctuelles qui ne laissent pas d’état derrière elles : envoyer, enregistrer, actualiser, télécharger, imprimer ou supprimer.',
+      useCases: [
+        'Boutons d’envoi des formulaires de chat et de commentaire',
+        'Boutons d’enregistrement, de téléchargement et d’envoi de fichier',
+        'Boutons d’actualisation et de rotation',
+        'Boutons d’ajout au panier',
+        'Boutons de mise en forme du texte dans les éditeurs',
+      ],
+      example:
+        'Les icônes au clic confirment typiquement les boutons envoyer, enregistrer, actualiser, télécharger, ajouter au panier et de mise en forme.',
+      description:
+        'Rejoue une fois l’animation depuis le début à chaque clic, sauf si la réduction des animations est activée.',
+      reducedMotion:
+        'Si la réduction des animations est activée, les clics atteignent toujours votre gestionnaire, mais l’animation ne se joue pas.',
+      plays: 'se rejouent à chaque clic',
+    },
+    hover: {
+      label: 'Survol',
+      title: 'Icônes animées au survol',
+      intro:
+        'Ces icônes se jouent vers l’avant quand le pointeur entre et en sens inverse quand il sort : le mouvement suit le curseur et ne s’arrête jamais à mi-course. Elles conviennent aux éléments de navigation et aux boutons qui annoncent ce qu’ils ouvrent : le couvercle de la corbeille se soulève, la roue crantée des réglages tourne, le dossier s’ouvre.',
+      useCases: [
+        'Éléments de barre latérale et de menu de navigation',
+        'Boutons de suppression qui soulèvent le couvercle avant le clic',
+        'Liens vers les réglages et le profil',
+        'Contrôles de zoom avant et arrière',
+        'Liens sociaux dans le footer',
+      ],
+      example:
+        'Les icônes au survol signalent typiquement les éléments de navigation, les boutons de suppression, les réglages, les contrôles de zoom et les liens sociaux.',
+      description: 'Se joue vers l’avant sur mouseenter et en sens inverse sur mouseleave.',
+      reducedMotion:
+        'Si la réduction des animations est activée, le survol ne déclenche pas l’animation.',
+      plays: 'se jouent au survol et reviennent en arrière quand le pointeur s’en va',
+    },
+    'hover-replay': {
+      label: 'Lecture au survol',
+      title: 'Icônes animées à lecture au survol',
+      intro:
+        'Ces icônes se jouent une fois quand le pointeur entre et vont au bout d’elles-mêmes, ce qui évite qu’un passage rapide sur une barre d’outils ne produise un mouvement saccadé. C’est le cas de la majorité du jeu d’icônes : flèches, fichiers, appareils, météo et logos de marques qui s’animent au survol.',
+      useCases: [
+        'Listes de fonctionnalités et grilles tarifaires',
+        'Liens fléchés et boutons d’appel à l’action',
+        'Boutons de barre d’outils dans les éditeurs et les tableaux de bord',
+        'Cartes dans la grille d’une landing page',
+        'Liens du footer et de contact',
+      ],
+      example:
+        'Les icônes à lecture au survol animent typiquement les liens fléchés, les listes de fonctionnalités, les boutons de barre d’outils et les cartes de landing page.',
+      description:
+        'Se joue une fois sur mouseenter, sauf si la réduction des animations est activée. Sortir ne l’arrête pas ; entrer pendant la lecture ne la relance pas.',
+      reducedMotion:
+        'Si la réduction des animations est activée, le survol ne déclenche pas l’animation.',
+      plays: 'se jouent une fois au survol',
+    },
+    'hover-loop': {
+      label: 'Boucle au survol',
+      title: 'Icônes animées en boucle au survol',
+      intro:
+        'Ces icônes bouclent tant que le pointeur reste dessus et terminent le cycle en cours après sa sortie : elles ne s’arrêtent jamais en plein mouvement. Elles conviennent aux liens qui invitent à s’attarder, surtout les icônes de réseaux sociaux et de communautés.',
+      useCases: [
+        'Liens vers les réseaux sociaux dans l’en-tête et le footer',
+        'Boutons d’invitation à une communauté ou à un chat',
+        'Liens vers un portfolio ou un profil',
+        'Sélecteurs de langue et de région',
+      ],
+      example:
+        'Les icônes en boucle au survol signalent typiquement les liens sociaux, les invitations à une communauté, les liens de portfolio et les sélecteurs de langue.',
+      description:
+        'Boucle pendant le survol, termine le cycle en cours après mouseleave et reste fixe quand la réduction des animations est activée.',
+      reducedMotion:
+        'Si la réduction des animations est activée, l’icône reste fixe pendant le survol.',
+      plays: 'bouclent pendant le survol',
+    },
+  },
+};
diff --git a/website/src/i18n/messages/id/common.ts b/website/src/i18n/messages/id/common.ts
new file mode 100644
index 0000000..2148b13
--- /dev/null
+++ b/website/src/i18n/messages/id/common.ts
@@ -0,0 +1,45 @@
+import type { Messages } from '../en';
+
+export const common: Messages['common'] = {
+  skipToContent: 'Langsung ke konten',
+  ogImageAlt: 'useAnimations: ikon animasi gratis untuk React, shadcn/ui, Lottie, dan SVG',
+  homeLabel: 'Beranda useAnimations',
+  mainNav: 'Utama',
+  browseIcons: 'Jelajahi ikon',
+  nav: {
+    icons: 'Ikon',
+    categories: 'Kategori',
+    documentation: 'Dokumentasi',
+    shadcn: 'shadcn',
+    lottie: 'Ikon Lottie',
+    license: 'Lisensi',
+  },
+  footer: {
+    tagline: 'Ikon animasi gratis dengan interaksi bawaan. Berlisensi MIT, dibuat untuk React.',
+    product: 'Produk',
+    developers: 'Developer',
+    follow: 'Ikuti',
+    languages: 'Bahasa',
+    allIcons: 'Semua ikon',
+    categories: 'Kategori',
+    interactions: 'Interaksi',
+    lottieIcons: 'Ikon Lottie',
+    shadcnIcons: 'Ikon shadcn/ui',
+    documentation: 'Dokumentasi',
+    licencing: 'Lisensi & Ketentuan',
+    shadcnRegistry: 'Registry shadcn',
+    mitLicense: 'Lisensi MIT',
+    builtWith: 'Situs dibuat dengan Astro',
+  },
+  breadcrumb: 'Breadcrumb',
+  crumbs: { icons: 'Ikon', categories: 'Kategori', interactions: 'Interaksi' },
+  faq: 'FAQ',
+  copy: 'Salin',
+  copied: 'Tersalin',
+  pressCtrlC: 'Tekan Ctrl+C',
+  languageBanner: {
+    text: 'Halaman ini juga tersedia dalam bahasa Indonesia.',
+    action: 'Buka versi bahasa Indonesia',
+    dismiss: 'Tutup',
+  },
+};
diff --git a/website/src/i18n/messages/id/docs.ts b/website/src/i18n/messages/id/docs.ts
new file mode 100644
index 0000000..854efba
--- /dev/null
+++ b/website/src/i18n/messages/id/docs.ts
@@ -0,0 +1,34 @@
+import type { Messages } from '../en';
+
+export const docs: Messages['docs'] = {
+  title: 'Dokumentasi — useAnimations',
+  description: (iconCount: number) =>
+    `Cara memakai ${iconCount} ikon animasi di React dan shadcn/ui: interaksi, props, warna, file, dan aksesibilitas.`,
+  badge: 'Dokumentasi',
+  onThisPage: 'Di halaman ini',
+  viewAsMarkdown: 'Lihat sebagai Markdown',
+  headline: 'Dokumentasi useAnimations',
+  summary: 'Cara memakai ikon animasi useAnimations di React dan shadcn/ui.',
+  crumb: 'Dokumentasi',
+  faq: [
+    {
+      question: 'Apakah useAnimations gratis untuk proyek komersial?',
+      answer: 'Ya. Ikon dan paket React-nya berlisensi MIT, tanpa kewajiban atribusi.',
+    },
+    {
+      question: 'Bagaimana cara memakai ikon useAnimations di React?',
+      answer:
+        'Instal react-useanimations, import UseAnimations dan sebuah ikon (misalnya react-useanimations/lib/checkmark), lalu render <UseAnimations animation={checkmark} size={32} />.',
+    },
+    {
+      question: 'Bagaimana cara mengubah warna ikon?',
+      answer:
+        'Ikon mengikuti warna teks. Ubah dengan strokeColor dan fillColor, properti CSS color, atau dengan memberi style pada path-nya.',
+    },
+    {
+      question: 'Apakah bisa dipakai tanpa React?',
+      answer:
+        'Paketnya khusus untuk React. Namun setiap ikon juga tersedia sebagai file Lottie JSON standar yang bisa diputar oleh Lottie player mana pun (lottie-web, dotLottie, lottie-react-native, lottie-ios, lottie-android, Flutter), serta sebagai SVG statis. Lihat bagian Memakai tanpa React dan useanimations.com/lottie-icons.',
+    },
+  ],
+};
diff --git a/website/src/i18n/messages/id/home.ts b/website/src/i18n/messages/id/home.ts
new file mode 100644
index 0000000..019a3b7
--- /dev/null
+++ b/website/src/i18n/messages/id/home.ts
@@ -0,0 +1,172 @@
+import type { Messages } from '../en';
+import type { FaqLinks, HomeFaq } from '../en/home';
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const home: Messages['home'] = {
+  title: 'Animasi Mikro & Pustaka Ikon Animasi — useAnimations',
+  description: (count: number) =>
+    `${count} animasi mikro gratis untuk UI: pustaka ikon animasi untuk React, shadcn/ui, dan Lottie dengan hover, klik, dan loop bawaan. MIT.`,
+
+  hero: {
+    badge: (count: number) => `${count} ikon · tanpa dependensi · MIT`,
+    headline: { start: 'Ikon yang ', accent: 'terasa hidup.', end: '' },
+    h1: 'Ikon animasi gratis untuk React, shadcn/ui, dan Lottie',
+    intro: (count: number) =>
+      `${count} animasi mikro buatan tangan dengan interaksi mikro hover, klik, dan loop yang sudah terpasang. Pakai sebagai komponen React, tambahkan lewat shadcn, atau unduh SVG dan Lottie JSON-nya. Berlisensi MIT.`,
+    browse: 'Jelajahi ikon',
+    fieldHint: 'Gerakkan pointer Anda di atas bidang ikon.',
+  },
+
+  numbers: {
+    label: 'Sekilas',
+    icons: 'ikon animasi',
+    interactions: 'interaksi bawaan',
+    size: 'player, setelah gzip',
+    dependencies: 'dependensi',
+  },
+
+  interactions: {
+    eyebrow: 'Interaksi bawaan',
+    title: 'Setiap ikon tahu cara bergerak.',
+    intro:
+      'Setiap ikon hadir dengan interaksi yang dirancang untuknya. Pasang saja dan langsung berfungsi, atau pilih interaksi lain dengan satu prop. Coba sendiri:',
+    demos: {
+      loop: 'Berputar terus, untuk loader dan status yang sedang berlangsung.',
+      'click-toggle': 'Beralih antara dua keadaan: menu dan tutup, play dan pause.',
+      'click-replay': 'Diputar ulang dari awal setiap kali diklik, sebagai umpan balik.',
+      hover: 'Diputar maju saat kursor masuk dan mundur saat kursor keluar.',
+      'hover-loop':
+        'Berputar berulang selama di-hover dan menyelesaikan siklusnya saat kursor keluar.',
+      'hover-replay': 'Diputar sekali dari awal setiap kali kursor masuk.',
+    },
+  },
+
+  browser: {
+    eyebrow: 'Pustaka ikon',
+    title: (count: number) => `${count} ikon animasi gratis`,
+    intro:
+      'Hover atau klik untuk memutar. Buka sebuah ikon untuk melihat kode dan unduhannya: Lottie JSON, SVG, dan ZIP.',
+    search: 'Cari ikon',
+    searchPlaceholder: (count: number) =>
+      `Cari di antara ${count} ikon, coba “eye”, “bell”, atau “arrow”`,
+    interaction: 'Interaksi',
+    allInteractions: 'Semua interaksi',
+    color: 'Warna ikon',
+    colors: {
+      text: 'Warna teks',
+      indigo: 'Indigo',
+      red: 'Merah',
+      amber: 'Kuning amber',
+      teal: 'Hijau toska',
+      violet: 'Ungu',
+    },
+    customColor: 'Warna kustom',
+    size: 'Ukuran',
+    category: 'Kategori',
+    all: 'Semua',
+    count: { other: '{n} ikon' },
+    noMatch: 'Tidak ada ikon yang cocok.',
+    noMatchHintHtml: (href: string) => `Coba kata lain, atau ${link(href, 'usulkan ikon baru')}.`,
+  },
+
+  everywhere: {
+    eyebrow: 'Pakai sesuai kebutuhan',
+    title: 'Instal, import, selesai.',
+    intro:
+      'Komponen React tanpa dependensi, registry shadcn, file yang bisa diunduh dengan URL tetap, dan katalog yang bisa dibaca agen AI.',
+    docs: 'Baca dokumentasi →',
+    tablist: 'Platform',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'File', agents: 'Agen AI' },
+    codeText: {
+      afterAdding: 'lalu',
+      files:
+        'Setiap ikon sebagai SVG, sebagai animasi (Lottie JSON), dan sebagai ZIP berisi keduanya',
+    },
+  },
+
+  features: {
+    title: 'Kecil, aksesibel, dan bebas Anda atur tampilannya.',
+    colors: 'Mengikuti warna Anda',
+    colorsHtml: `Ikon memakai ${code('currentColor')}: warna teks, keadaan hover, dan dark mode langsung terbawa dengan sendirinya. Timpa dengan prop, class, atau CSS biasa.`,
+    tiny: 'Kecil sejak awal',
+    tinyText:
+      'Player bawaan, tanpa dependensi. Setiap ikon adalah modul tersendiri berukuran 2 kB.',
+    accessible: 'Aksesibel secara default',
+    accessibleText:
+      'Menghormati preferensi reduced motion, memutar animasi hover saat mendapat fokus keyboard, dan tidak dibacakan pembaca layar kecuali Anda memberinya label.',
+    ssr: 'Siap untuk server rendering',
+    ssrText:
+      'Client component yang aman di-render di Next.js, Remix, dan Astro. Ikon hanyalah data biasa yang bisa Anda import di mana saja.',
+    agents: 'Dibuat untuk agen AI',
+    agentsHtml: (iconsJson: string, llmsTxt: string) =>
+      `Katalog bertipe dengan kata kunci untuk setiap ikon, ${link(iconsJson, 'icons.json')}, ${link(llmsTxt, 'llms.txt')}, dan dokumentasi Markdown.`,
+  },
+
+  browse: {
+    title: 'Temukan animasi mikro yang tepat.',
+    byCategory: 'Jelajahi berdasarkan kategori',
+    byInteraction: 'Jelajahi berdasarkan interaksi',
+    formats: 'Semua ikon dan format',
+  },
+
+  hubs: {
+    icons: 'Semua ikon animasi',
+    categories: 'Kategori ikon',
+    interactions: 'Ikon berdasarkan interaksi',
+    lottie: 'Ikon Lottie (JSON)',
+    shadcn: 'Ikon animasi shadcn/ui',
+  },
+
+  faqTitle: 'Pertanyaan',
+  faq: (f: { version: string; links: FaqLinks }): HomeFaq => [
+    {
+      question: 'Apa itu animasi mikro dan ikon animasi?',
+      answer:
+        'Animasi mikro adalah gerakan singkat dengan satu tujuan yang merespons aksi pengguna: ikon menu yang berubah menjadi tombol tutup, hati yang terisi saat Anda menyukai postingan, lonceng yang berdering saat ada notifikasi baru. Ikon animasi adalah jenis yang paling umum. Animasi ini membuat antarmuka terasa responsif dan menunjukkan perubahan keadaan tanpa perlu teks tambahan.',
+    },
+    {
+      question: 'Apa bedanya file Lottie dan SVG?',
+      answer:
+        'File Lottie JSON berisi seluruh animasi dan bisa diputar di Lottie player mana pun, termasuk player bawaan react-useanimations. File SVG adalah gambar diam ikon dalam posisi istirahat, satu per keadaan (misalnya eye dan eye-off), untuk tempat yang tidak boleh ada gerakan: email, dokumen, aplikasi desain, atau fallback tanpa JavaScript.',
+    },
+    {
+      question: 'Apakah bisa dipakai dengan Next.js dan server rendering?',
+      answer:
+        "Bisa. Komponennya ditandai 'use client' dan hanya menggambar animasi di browser, sehingga bisa di-render dari server component dan framework SSR seperti Next.js, Remix, dan Astro tanpa dynamic import. Modul ikon hanyalah data biasa yang bisa di-import oleh server component dan diteruskan sebagai props.",
+      link: { href: f.links.serverRendering, label: 'Next.js dan server rendering' },
+    },
+    {
+      question: 'Bolehkah ikon ini dipakai di proyek komersial?',
+      answer:
+        'Boleh. Ikon dan paket react-useanimations berlisensi MIT: Anda bebas memakai, mengubah, dan mendistribusikannya ulang untuk proyek pribadi maupun komersial. Atribusi kami hargai, tetapi tidak wajib.',
+      link: { href: f.links.licence, label: 'Lisensi & Ketentuan' },
+    },
+    {
+      question: 'Bisakah ikon ini dipakai tanpa React?',
+      answer:
+        'Bisa. Setiap ikon adalah file Lottie JSON standar, jadi bisa diputar dengan lottie-web di JavaScript biasa, Vue, Svelte, Angular, atau CMS, serta di Lottie player untuk iOS, Android, dan Flutter. Halaman Ikon Lottie berisi URL file dan snippet lottie-web siap pakai untuk setiap interaksi.',
+      link: { href: f.links.lottie, label: 'Ikon Lottie' },
+    },
+    {
+      question: 'Seberapa besar ikon ini menambah ukuran bundle saya?',
+      answer: `Player di react-useanimations ${f.version} berukuran sekitar 8 kB setelah gzip tanpa dependensi, dan setiap ikon adalah modul tersendiri berukuran 1 sampai 15 kB (median 2 kB), sehingga bundle hanya berisi ikon yang Anda import.`,
+    },
+  ],
+
+  cta: {
+    title: { start: 'Beri antarmuka Anda ', accent: 'sentuhan gerak.', end: '' },
+    text: 'Gratis dan berlisensi MIT, untuk proyek pribadi maupun komersial.',
+    start: 'Mulai sekarang',
+  },
+
+  schema: {
+    software: (count: number) =>
+      `Komponen React dan ${count} ikon animasi (Lottie) dengan interaksi hover, klik, dan loop bawaan. Tanpa dependensi.`,
+    catalogName: 'Katalog ikon useAnimations',
+    catalog: (count: number) =>
+      `Seluruh ${count} ikon useAnimations beserta id, judul, kategori, kata kunci, interaksi, URL Lottie JSON, SVG, dan ZIP, import React, serta perintah shadcn.`,
+  },
+};
diff --git a/website/src/i18n/messages/id/hubs.ts b/website/src/i18n/messages/id/hubs.ts
new file mode 100644
index 0000000..9900de1
--- /dev/null
+++ b/website/src/i18n/messages/id/hubs.ts
@@ -0,0 +1,162 @@
+import type { Messages } from '../en';
+import type { CategoryFacts, Faq, InteractionFacts } from '../en/hubs';
+import { listIn, pluralIn } from '../../format';
+
+const list = listIn('id');
+const plural = pluralIn('id');
+const icons = (n: number) => plural(n, { other: 'ikon' });
+const lower = (text: string) => text[0].toLowerCase() + text.slice(1);
+
+/** Up to `max` titles, then 'dan N lainnya'. */
+const titles = (items: string[], max = 12) =>
+  items.length > max
+    ? `${items.slice(0, max).join(', ')}, dan ${items.length - max} lainnya`
+    : list(items);
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+
+/** What the icons come as, with the static SVGs when there are any. */
+const formats = (f: CategoryFacts) => {
+  const base = 'komponen React, komponen shadcn/ui, dan animasi Lottie JSON';
+  if (f.withSvg === f.count) return `${base}, lengkap dengan SVG statis`;
+  return f.withSvg ? `${base}; ${f.withSvg} di antaranya juga tersedia sebagai SVG statis` : base;
+};
+
+export const hubs: Messages['hubs'] = {
+  titleSuffix: ' — useAnimations',
+  iconCount: icons,
+
+  category: {
+    titles: (f: CategoryFacts) => [
+      `${f.title} untuk React & Lottie`,
+      `${f.title} untuk React`,
+      `${f.title} gratis`,
+      f.title,
+    ],
+    descriptions: (f: CategoryFacts) => {
+      const name = lower(f.title);
+      const examples = list(f.titles.slice(0, 3));
+      return [
+        `${f.count} ${name} gratis, di antaranya ${examples}. Animasi mikro hover, klik, dan loop untuk React, shadcn/ui, dan Lottie JSON, berlisensi MIT.`,
+        `${f.count} ${name} gratis, di antaranya ${examples}. Untuk React, shadcn/ui, dan Lottie JSON, berlisensi MIT.`,
+        `${f.count} ${name} gratis, di antaranya ${examples}. Untuk React, shadcn/ui, dan Lottie, MIT.`,
+        `${f.count} ${name} gratis untuk React, shadcn/ui, dan Lottie JSON, berlisensi MIT.`,
+      ];
+    },
+    summary: (f: CategoryFacts) => {
+      const plays =
+        f.groups.length === 1
+          ? `Semua ${icons(f.count)} di kategori ini ${f.groups[0].plays}.`
+          : `Dari ${icons(f.count)} di kategori ini, ${list(f.groups.map(({ count, plays: phrase }) => `${count} ${phrase}`))}.`;
+      return `${plays} Setiap ikon tersedia sebagai ${formats(f)}. Semuanya gratis untuk penggunaan komersial di bawah lisensi MIT.`;
+    },
+    faq: (f: CategoryFacts): Faq => {
+      const name = lower(f.title);
+      const ex = f.example;
+      const n = f.expressions.length;
+      return [
+        {
+          question: `${f.title} apa saja yang tersedia?`,
+          answer: `${icons(f.count)}: ${titles(f.titles)}. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.`,
+        },
+        {
+          question: `Bagaimana cara memakai ${name} ini di React?`,
+          answer: `Instal react-useanimations, tambahkan ${ex.importLine}, lalu render <UseAnimations animation={${ex.exportName}} size={32} />. Ikon menjalankan interaksi ${ex.interactionLabel.toLowerCase()} bawaannya dan mengikuti warna teks. Jika memakai shadcn/ui, jalankan ${ex.shadcnCommand} sebagai gantinya.`,
+        },
+        {
+          question: `Bisakah ${name} ini dipakai tanpa React?`,
+          answer: `Bisa. Setiap ikon adalah file Lottie JSON di ${f.site}/icons/<id>.json (misalnya ${f.site}/icons/${ex.id}.json) yang bisa diputar dengan lottie-web, lottie-ios, lottie-android, atau paket lottie untuk Flutter${f.withSvg ? '; SVG statis tersedia di halaman masing-masing ikon (halaman ikon hanya dalam bahasa Inggris)' : ''}. ${
+            n
+              ? `${titles(f.expressions, 6)} memakai expression After Effects, jadi di web ${n === 1 ? 'ikon tersebut' : 'ikon-ikon tersebut'} memerlukan build lengkap lottie-web.`
+              : 'Tidak ada yang memakai expression, jadi build ringan lottie-web sudah cukup.'
+          }`,
+        },
+      ];
+    },
+    badge: (n: number) => `${icons(n)} · Berlisensi MIT`,
+    allIcons: (name: string) => `Semua ikon ${name.toLowerCase()}`,
+    whereToUse: 'Tempat memakainya',
+    byInteraction: 'Berdasarkan interaksi',
+    addOne: 'Tambahkan ke aplikasi Anda',
+    addOneHtml: (label: string, name: string) =>
+      `Di React, instal ${code('react-useanimations')} lalu import ikonnya; ikon langsung menjalankan interaksi ${label.toLowerCase()} bawaannya. Semua ikon di kategori ini bekerja dengan cara yang sama: ganti ${code(name)} dengan nama yang tertera di halaman ikonnya.`,
+    shadcnHtml: (href: string) =>
+      `Dengan ${link(href, 'shadcn/ui')}, CLI-nya menambahkan komponen siap pakai:`,
+    noReactHtml: (href: string) =>
+      `Tidak memakai React? Setiap ikon adalah file Lottie JSON di ${code('/icons/&lt;id&gt;.json')}; lihat ${link(href, 'Ikon Lottie')} untuk player web, iOS, Android, dan Flutter.`,
+    more: 'Kategori lainnya',
+    allIconsButton: 'Semua ikon',
+  },
+
+  interaction: {
+    titles: (f: InteractionFacts) => [
+      `${f.title} untuk React & Lottie`,
+      `${f.title} untuk React`,
+      f.title,
+    ],
+    descriptions: (f: InteractionFacts) => [
+      `${f.count} ikon animasi gratis yang ${f.plays}, seperti ${list(f.titles.slice(0, 3))}. Untuk React, shadcn/ui, dan Lottie JSON, berlisensi MIT.`,
+      `${f.count} ikon animasi gratis yang ${f.plays}, seperti ${list(f.titles.slice(0, 3))}. Untuk React, shadcn/ui, dan Lottie, MIT.`,
+      `${f.count} ikon animasi gratis yang ${f.plays}. Untuk React, shadcn/ui, dan Lottie JSON, berlisensi MIT.`,
+    ],
+    faq: (f: InteractionFacts): Faq => [
+      {
+        question: `Ikon mana saja yang memakai interaksi ${lower(f.label)}?`,
+        answer: `${icons(f.count)}: ${titles(f.titles, 15)}. ${f.example}`,
+      },
+      {
+        question: 'Apa yang terjadi jika pengguna memilih reduced motion?',
+        answer: `${f.reducedMotion} Komponen React membaca prefers-reduced-motion dan ikut menyesuaikan saat pengaturannya berubah, jadi Anda tidak perlu menulis kode apa pun untuk itu.`,
+      },
+      {
+        question: 'Bagaimana cara mengganti interaksi sebuah ikon?',
+        answer: `Setiap ikon menjalankan interaksi yang memang dirancang untuknya. Berikan interaction="${f.interaction}" agar ikon lain berperilaku seperti ini, atau nilai lain ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') untuk menggantinya. Props autoplay, loop, dan speed mengatur pemutarannya.${
+          f.interaction === 'click-toggle'
+            ? ' Untuk mengendalikan keadaannya sendiri, berikan active={isOn} dan perbarui nilainya di onClick: klik tidak lagi men-toggle ikon dengan sendirinya.'
+            : ''
+        }`,
+      },
+    ],
+    allIcons: (label: string) => `Semua ikon dengan interaksi ${label.toLowerCase()}`,
+    behaviour: 'Cara kerjanya',
+    hoverNote:
+      ' Ketukan di layar sentuh tidak memulai animasi hover, sedangkan fokus keyboard memulainya jika ikon berada di dalam elemen yang bisa difokus.',
+    handled: 'Komponen React menangani semua ini; Anda cukup memilih ikonnya.',
+    whereToUse: 'Tempat memakainya',
+    byCategory: 'Berdasarkan kategori',
+    useInReact: 'Pakai di React',
+    overrideHtml: `Ikon yang tercantum di sini menjalankan interaksi ini secara default. Ikon lain pun bisa memakainya: cukup berikan prop ${code('interaction')}.`,
+    normallyUses: (title: string, interaction: string) =>
+      `${title} biasanya memakai '${interaction}'`,
+    extra: {
+      loop: 'Ikon loop berputar otomatis dan berhenti sementara saat digulir keluar dari layar. Perlambat dengan speed, putar sekali saja dengan loop={false}, atau biarkan diam dengan autoplay={false}:',
+      'click-toggle':
+        'Klik men-toggle ikon dengan sendirinya. Agar tetap sinkron dengan state Anda, berikan active: ikon beranimasi setiap kali active berubah, dan klik tidak lagi men-toggle-nya sendiri.',
+      'click-replay':
+        'Letakkan ikon di dalam tombol sungguhan dengan render prop, supaya bisa difokus dan dibacakan oleh pembaca layar. onClick Anda dijalankan lebih dulu; panggil event.preventDefault() untuk melewati animasinya.',
+      hover:
+        'Letakkan ikon di dalam tautan atau tombol dengan render prop: animasi juga diputar saat elemen mendapat fokus keyboard, dan ketukan di layar sentuh tidak memicunya.',
+      'hover-replay':
+        'Jadikan seluruh kartu atau tautan sebagai area hover, bukan hanya ikonnya: dengan render prop, event dipasang di elemen Anda, dan fokus keyboard juga memutar animasinya.',
+      'hover-loop':
+        'Pakai render prop agar seluruh tautan memicu loop, termasuk saat mendapat fokus keyboard. Atur temponya dengan speed:',
+    },
+    codeText: {
+      halfSpeed: 'setengah kecepatan',
+      playsOnce: 'diputar sekali, lalu berhenti',
+      staticFrame: 'frame pertama, diam',
+      endState: 'true menampilkan keadaan akhir',
+      closeMenu: 'Tutup menu',
+      openMenu: 'Buka menu',
+      download: 'Unduh',
+      archive: 'Arsipkan',
+      weeklyGrowth: 'Pertumbuhan mingguan',
+    },
+    docsHtml: (docs: string, lottie: string) =>
+      `Semua props dijelaskan di ${link(docs, 'dokumentasi')}. Di luar React, ikon-ikon ini adalah file Lottie JSON; halaman ${link(lottie, 'Ikon Lottie')} menunjukkan cara membuat ulang interaksinya dengan lottie-web.`,
+    other: 'Interaksi lainnya',
+    browseByCategory: 'Jelajahi berdasarkan kategori',
+  },
+};
diff --git a/website/src/i18n/messages/id/index.ts b/website/src/i18n/messages/id/index.ts
new file mode 100644
index 0000000..5d7029d
--- /dev/null
+++ b/website/src/i18n/messages/id/index.ts
@@ -0,0 +1,12 @@
+// Bahasa Indonesia.
+import type { Messages } from '../en';
+import { common } from './common';
+import { docs } from './docs';
+import { home } from './home';
+import { hubs } from './hubs';
+import { islands } from './islands';
+import { licence } from './licence';
+import { pages } from './pages';
+import { taxonomy } from './taxonomy';
+
+export const messages: Messages = { common, taxonomy, hubs, home, docs, licence, pages, islands };
diff --git a/website/src/i18n/messages/id/islands.ts b/website/src/i18n/messages/id/islands.ts
new file mode 100644
index 0000000..b31a45a
--- /dev/null
+++ b/website/src/i18n/messages/id/islands.ts
@@ -0,0 +1,51 @@
+import type { Messages } from '../en';
+
+export const islands: Messages['islands'] = {
+  iconCard: {
+    hints: {
+      loop: 'Loop',
+      'click-toggle': 'Klik',
+      'click-replay': 'Klik',
+      hover: 'Hover',
+      'hover-loop': 'Hover',
+      'hover-replay': 'Hover',
+    },
+  },
+  iconDialog: {
+    hints: {
+      loop: 'Berputar dengan sendirinya',
+      'click-toggle': 'Klik untuk beralih',
+      'click-replay': 'Klik untuk memutar ulang',
+      hover: 'Hover untuk memutar, keluar untuk membalik',
+      'hover-loop': 'Hover untuk memutar berulang',
+      'hover-replay': 'Hover untuk memutar',
+    },
+    preview: 'Pratinjau {title}',
+    colors: 'Warna pratinjau',
+    color: 'Warna {color}',
+    textColor: 'Warna teks',
+    interaction: 'Interaksi',
+    duration: 'Durasi',
+    seconds: '{seconds} dtk',
+    import: 'Import',
+    close: 'Tutup',
+    code: 'Kode',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'File' },
+    copy: 'Salin',
+    download: 'Unduh',
+    iconPage: 'Halaman ikon →',
+  },
+  interactionDemo: {
+    click: 'Klik kartunya',
+    loop: 'Berputar dengan sendirinya',
+    hover: 'Arahkan kursor ke kartu',
+  },
+  mobileMenu: {
+    menu: 'Menu',
+    nav: 'Utama',
+  },
+  themeToggle: {
+    toLight: 'Beralih ke tema terang',
+    toDark: 'Beralih ke tema gelap',
+  },
+};
diff --git a/website/src/i18n/messages/id/licence.ts b/website/src/i18n/messages/id/licence.ts
new file mode 100644
index 0000000..4ee58c2
--- /dev/null
+++ b/website/src/i18n/messages/id/licence.ts
@@ -0,0 +1,26 @@
+import type { Messages } from '../en';
+
+export const licence: Messages['licence'] = {
+  title: 'Lisensi & Ketentuan — useAnimations',
+  description:
+    'Ikon useAnimations dan paket react-useanimations berlisensi MIT: gratis untuk proyek pribadi dan komersial, boleh didistribusikan ulang, tanpa atribusi.',
+  name: 'Lisensi & Ketentuan',
+  heading: 'Bebas dipakai. Berlisensi MIT.',
+  introHtml: (mitHref: string) =>
+    `Ikon useAnimations dan paket <code>react-useanimations</code> dirilis di bawah <a href="${mitHref}">lisensi MIT</a>.`,
+  canDo: 'Yang boleh Anda lakukan',
+  canDoItemsHtml: [
+    '<strong>Memakai</strong> ikon di situs web, aplikasi, dan produk pribadi maupun komersial.',
+    '<strong>Mengubahnya</strong>: warna, ukuran, timing, bahkan gerakannya sendiri.',
+    '<strong>Mendistribusikan ulang</strong>, termasuk di dalam paket ikon, template, tema, UI kit, dan registry komponen.',
+  ],
+  attribution: 'Atribusi',
+  attributionText:
+    'Tidak wajib, tetapi kami hargai. Sertakan pemberitahuan lisensi jika Anda mendistribusikan ulang file-nya, dan jika ingin mencantumkan kredit:',
+  credit: (link: string) => `Ikon animasi oleh ${link}`,
+  noWarranty: 'Tanpa jaminan',
+  noWarrantyText: 'Ikon dan kode disediakan apa adanya, tanpa jaminan dalam bentuk apa pun.',
+  licenseText: 'Teks lisensi',
+  bindingNote:
+    'Teks lisensi di bawah ini adalah versi asli berbahasa Inggris, yang merupakan versi yang mengikat secara hukum.',
+};
diff --git a/website/src/i18n/messages/id/pages.ts b/website/src/i18n/messages/id/pages.ts
new file mode 100644
index 0000000..9d25240
--- /dev/null
+++ b/website/src/i18n/messages/id/pages.ts
@@ -0,0 +1,234 @@
+import type { Messages } from '../en';
+import type { Faq } from '../en/hubs';
+import { listIn } from '../../format';
+
+const list = listIn('id');
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+const strong = (text: string) => `<strong class="font-medium text-fg">${text}</strong>`;
+
+export const pages: Messages['pages'] = {
+  icons: {
+    titles: (count: number) => [
+      `Semua ${count} ikon animasi per kategori`,
+      `Semua ${count} ikon animasi`,
+    ],
+    descriptions: (count: number, categories: number) => [
+      `Semua ikon useAnimations dalam satu halaman: ${count} ikon animasi gratis dalam ${categories} kategori, untuk React, shadcn/ui, Lottie JSON, dan SVG. Berlisensi MIT.`,
+    ],
+    title: 'Semua ikon animasi',
+    badge: (count: number) => `${count} ikon · Berlisensi MIT`,
+    introHtml: (browser: string) =>
+      `Semua ikon dalam koleksi, dikelompokkan per kategori. Buka salah satunya untuk melihat pratinjau langsung, kode React dan shadcn/ui, serta unduhan Lottie JSON, SVG, dan ZIP (halaman ikon tersedia dalam bahasa Inggris). Untuk mencari berdasarkan kata kunci dan mencoba animasinya langsung, pakai ${link(browser, 'penjelajah ikon')}.`,
+    categoriesNav: 'Kategori',
+    byInteraction: 'Berdasarkan interaksi:',
+    categoryLink: (count: number, name: string) => `${count} ikon ${name.toLowerCase()} →`,
+  },
+
+  categories: {
+    titles: (categories: number) => [
+      `Kategori ikon animasi: ${categories} koleksi`,
+      'Kategori ikon animasi',
+    ],
+    descriptions: (icons: number, categories: number) => [
+      `Jelajahi ${icons} ikon animasi gratis dalam ${categories} kategori: navigasi, aksi, media, loading, media sosial, dan lainnya. Untuk React, shadcn/ui, dan Lottie.`,
+    ],
+    title: 'Kategori ikon animasi',
+    badge: (icons: number, categories: number) => `${icons} ikon · ${categories} kategori`,
+    introHtml: (interactions: string) =>
+      `Setiap ikon useAnimations masuk ke satu kategori, mulai dari panah navigasi dan kontrol media hingga loader dan logo media sosial. Buka sebuah kategori untuk melihat semua ikonnya, tempat memakainya, dan kode untuk menambahkannya, atau jelajahi berdasarkan ${link(interactions, 'interaksi')}.`,
+    iconCount: (n: number) => `${n} ikon`,
+  },
+
+  interactions: {
+    titles: ['Interaksi mikro: ikon hover, klik, dan loop', 'Interaksi mikro untuk ikon animasi'],
+    descriptions: (icons: number, interactions: number) => [
+      `${icons} ikon animasi dalam ${interactions} interaksi mikro: loop, toggle dan putar ulang saat klik, hover, serta putar sekali dan loop saat hover. Mendukung reduced motion.`,
+      `${icons} ikon animasi dalam ${interactions} interaksi mikro: loop, klik, dan hover. Mendukung reduced motion.`,
+    ],
+    title: 'Interaksi ikon animasi',
+    badge: (interactions: number, icons: number) => `${interactions} interaksi · ${icons} ikon`,
+    introHtml: `Setiap ikon hadir dengan interaksi mikro yang dirancang untuknya: berputar terus, beralih atau diputar ulang saat diklik, atau diputar saat di-hover. Komponen React mengatur semuanya dan menghormati preferensi reduced motion, sedangkan prop <code class="font-mono text-base text-fg">interaction</code> bisa mengganti interaksi ikon mana pun.`,
+    iconCount: (n: number) => `${n} ikon`,
+    chooseTitle: 'Memilih interaksi',
+    chooseHtml: {
+      loop: (href: string) =>
+        `${strong('Keadaan yang berlangsung lama')}, seperti loading atau peringatan yang aktif: ${link(href, 'loop')}.`,
+      'click-toggle': (href: string) =>
+        `${strong('Kontrol nyala/mati')}, seperti bisukan, menu, atau tampilkan kata sandi: ${link(href, 'toggle saat klik')}, dengan ${code('active')} untuk state yang dikendalikan.`,
+      'click-replay': (href: string) =>
+        `${strong('Aksi sekali jalan')}, seperti kirim, simpan, atau muat ulang: ${link(href, 'putar ulang saat klik')}.`,
+      hover: (href: string) =>
+        `${strong('Petunjuk tentang apa yang dibuka sebuah tautan')}: ${link(href, 'hover')}, yang berbalik saat pointer keluar.`,
+      'hover-replay': (href: string) =>
+        `${strong('Toolbar dan daftar yang sering dilintasi kursor')}: ${link(href, 'putar sekali saat hover')}, yang selesai dengan sendirinya.`,
+      'hover-loop': (href: string) =>
+        `${strong('Tautan yang mengundang untuk dilihat lebih lama')}, seperti ikon media sosial: ${link(href, 'loop saat hover')}.`,
+    },
+    motionTitle: 'Reduced motion',
+    motionHtml: `Komponen React mengikuti ${code('prefers-reduced-motion')} dan ikut menyesuaikan saat pengaturannya berubah. Ketukan di layar sentuh tidak pernah memulai animasi hover.`,
+    reducedMotion: {
+      loop: 'ikon tidak berputar otomatis dan tetap diam di frame pertamanya.',
+      'click-toggle': 'klik langsung memindahkan ikon ke keadaan lainnya, tanpa animasi peralihan.',
+      'click-replay': 'klik tetap sampai ke handler Anda, tetapi animasinya tidak diputar.',
+      hover: 'hover tidak memutar animasinya.',
+      'hover-replay': 'hover tidak memutar animasinya.',
+      'hover-loop': 'ikon tetap diam saat di-hover.',
+    },
+  },
+
+  lottie: {
+    titles: (count: number) => [
+      `Ikon Lottie gratis: ${count} ikon animasi JSON`,
+      'Ikon Lottie gratis',
+    ],
+    descriptions: (count: number) => [
+      `${count} ikon Lottie gratis berupa Lottie JSON, berlisensi MIT. Kode siap salin untuk lottie-web, dotLottie, React, React Native, iOS, Android, dan Flutter.`,
+      `${count} ikon Lottie gratis dalam format Lottie JSON, berlisensi MIT. Kode siap salin untuk web, React, iOS, Android, dan Flutter.`,
+    ],
+    title: 'Ikon Lottie gratis',
+    crumb: 'Ikon Lottie',
+    datasetName: 'Katalog ikon useAnimations',
+    datasetDescription: (count: number) =>
+      `Metadata dan URL file dari ${count} ikon animasi Lottie: id, judul, kategori, kata kunci, interaksi, ukuran, dan durasi.`,
+    badge: (count: number) => `${count} ikon · Lottie JSON · Berlisensi MIT`,
+    intro:
+      'Setiap ikon useAnimations adalah animasi Lottie JSON standar, jadi bisa diputar oleh Lottie player mana pun: lottie-web di web, lottie-ios, lottie-android, Flutter, dan React Native. File-nya gratis di bawah lisensi MIT, tanpa perlu mendaftar, dan disajikan dari URL tetap dengan CORS aktif, sehingga bisa Anda muat langsung atau unduh ke dalam proyek.',
+    popular: 'Ikon Lottie populer',
+    allIcons: (count: number) => `Semua ${count} ikon →`,
+    filesTitle: 'File dan URL',
+    filesIntroHtml: `Setiap ikon punya halaman di ${code('/icons/&lt;id&gt;')} (dalam bahasa Inggris) dengan pratinjau dan unduhan. File-nya sendiri:`,
+    files: {
+      json: 'animasi Lottie JSON',
+      zip: 'JSON dan SVG statis',
+      svg: 'SVG statis untuk setiap keadaan',
+      catalog: 'katalog semua ikon',
+    },
+    catalogHtml: (catalog: string, median: number) =>
+      `${link(catalog, 'icons.json')} memuat daftar semua ikon beserta id, judul, kategori, kata kunci, interaksi, ukuran, durasi, dan URL file-nya, sehingga mudah memilih ikon berdasarkan kata kunci lewat skrip atau membiarkan coding agent memilihkannya. Median ukuran file Lottie adalah ${median} kB.`,
+    players: {
+      web: {
+        title: 'Web: lottie-web',
+        text: 'Player referensi dari Airbnb. Muat dari CDN, arahkan ke URL ikon, dan pilih renderer SVG agar ikon tetap tajam dan warnanya bisa diubah dengan CSS. Pakai build lengkap (lottie.min.js): build light tidak mendukung expression.',
+        cssLabel: 'Mengikuti warna teks (renderer SVG)',
+      },
+      'web-interactions': {
+        title: 'Web: interaksi hover dan klik',
+        text: 'lottie-web hanya memutar dan menghentikan animasi; interaksinya Anda atur sendiri. Contoh berikut adalah toggle klik pada ikon menu dengan dukungan reduced motion. Semua interaksi mengikuti pola yang sama, dan komponen React di bawah ini mengerjakan semuanya untuk Anda.',
+      },
+      dotlottie: {
+        title: 'Web: web component dotLottie',
+        text: 'Player dari LottieFiles ini me-render ke canvas dengan engine WebAssembly dan bisa memutar Lottie JSON biasa maupun file .lottie. Canvas mempertahankan warna dari file, jadi ikon tetap hitam kecuali Anda mengubah warna di JSON-nya.',
+        jsLabel: 'Atau lewat API JavaScript: npm install @lottiefiles/dotlottie-web',
+      },
+      react: {
+        title: 'React: react-useanimations',
+        text: 'Tidak perlu memasang Lottie player: paket ini punya player sendiri berukuran 8 kB, menjalankan interaksi tiap ikon, mengikuti warna teks, dan menghormati preferensi reduced motion. Setiap ikon adalah modul terpisah, jadi hanya ikon yang Anda import yang ikut terkirim.',
+      },
+      'react-native': {
+        title: 'React Native: lottie-react-native',
+        text: 'Bundel JSON-nya dengan require() untuk penggunaan offline, atau muat dari URL-nya.',
+      },
+      ios: {
+        title: 'iOS: lottie-ios (SwiftUI)',
+        text: 'Tambahkan paket dari https://github.com/airbnb/lottie-spm.git lewat Swift Package Manager, lalu masukkan JSON ke dalam bundle aplikasi atau muat dari URL-nya.',
+      },
+      android: {
+        title: 'Android: lottie-android (Jetpack Compose)',
+        text: 'Tambahkan com.airbnb.android:lottie-compose (atau com.airbnb.android:lottie untuk view). Simpan JSON di res/raw untuk penggunaan offline dengan LottieCompositionSpec.RawRes.',
+      },
+      flutter: {
+        title: 'Flutter: lottie',
+        text: 'Paket lottie adalah player murni Dart untuk Android, iOS, web, dan desktop.',
+      },
+    },
+    expressionsTitle: 'Ikon dengan expression',
+    expressionsHtml: (count: number) =>
+      `${count} ikon memakai expression After Effects (${code('loopOut')} atau ${code('wiggle')}). Di web, putar ikon tersebut dengan build lengkap lottie-web, bukan ${code('lottie_light')}. Player native tidak mengevaluasi expression, jadi uji ikon ini di iOS, Android, dan Flutter atau pilih ikon lain; react-useanimations memutarnya sesuai rancangan.`,
+    faq: (f: {
+      count: number;
+      minSize: number;
+      maxSize: number;
+      medianSize: number;
+      expressions: string[];
+    }): Faq => [
+      {
+        question: 'Apakah ikon Lottie ini gratis untuk penggunaan komersial?',
+        answer: `Ya. Semua ${f.count} ikon Lottie berlisensi MIT: Anda bebas memakai, mengubah, dan mendistribusikannya ulang di proyek pribadi maupun komersial, tanpa kewajiban atribusi dan tanpa perlu akun untuk mengunduhnya.`,
+      },
+      {
+        question: 'Apa format file Lottie-nya?',
+        answer: `Lottie JSON standar (format Bodymovin) yang hanya berisi shape layer: tanpa gambar, font, atau aset eksternal. Setiap ikon digambar di artboard 24 atau 32 px, bisa diskalakan ke ukuran berapa pun, dan berukuran ${f.minSize} kB sampai ${f.maxSize} kB, dengan median ${f.medianSize} kB.`,
+      },
+      {
+        question: 'Apakah saya butuh lottie-web untuk memakai ikon ini di React?',
+        answer:
+          'Tidak. react-useanimations punya player sendiri berukuran 8 kB tanpa dependensi, jadi Anda cukup memasang satu paket dan meng-import ikon yang dibutuhkan. lottie-web hanya diperlukan di luar React, yaitu di halaman web biasa atau di framework lain.',
+      },
+      {
+        question: 'Ikon mana yang memerlukan build lengkap lottie-web?',
+        answer: `${f.expressions.length} ikon memakai expression After Effects (loopOut atau wiggle): ${list(f.expressions)}. Di web, ikon-ikon ini memerlukan build lengkap lottie-web; lottie_light mengabaikan expression. Player native (lottie-ios, lottie-android, paket lottie untuk Flutter) juga tidak mengevaluasi expression, jadi gerakan ikon-ikon ini bisa berbeda di sana.`,
+      },
+      {
+        question: 'Bisakah warna ikon Lottie diubah?',
+        answer:
+          'Bisa. Di web, renderer SVG lottie-web menulis warna sebagai atribut, jadi aturan CSS pada path-nya bisa mengubah warna ikon. Player native memakai API dynamic property masing-masing: ColorValueProvider di iOS, LottieProperty.COLOR dan STROKE_COLOR di Android, serta ValueDelegate.color di Flutter.',
+      },
+    ],
+    byCategory: 'Ikon Lottie per kategori',
+  },
+
+  shadcn: {
+    titles: (count: number) => [
+      `Ikon animasi untuk shadcn/ui: ${count} komponen`,
+      'Ikon animasi untuk shadcn/ui',
+    ],
+    descriptions: (count: number) => [
+      `${count} ikon animasi untuk shadcn/ui, masing-masing cukup satu perintah CLI shadcn. Interaksi mikro hover, klik, dan loop, berlisensi MIT, tanpa lottie-web.`,
+      `${count} ikon animasi untuk shadcn/ui: tambahkan ikon apa pun dengan satu perintah CLI shadcn. Berlisensi MIT, tanpa lottie-web.`,
+    ],
+    title: 'Ikon animasi untuk shadcn/ui',
+    crumb: 'shadcn/ui',
+    popularList: 'Ikon animasi shadcn/ui populer',
+    badge: (count: number) => `${count} komponen · registry shadcn · Berlisensi MIT`,
+    intro:
+      'Setiap ikon useAnimations tersedia di registry shadcn. Satu perintah CLI menambahkan komponen React bertipe ke proyek Anda, lengkap dengan interaksi hover, klik, atau loop yang dirancang untuknya, dukungan reduced motion, dan warna yang mengikuti tema Anda. Kodenya masuk ke repositori Anda, sama seperti komponen shadcn/ui lainnya.',
+    addTitle: 'Menambahkan ikon',
+    addIntro: 'Jalankan CLI shadcn dengan URL registry ikonnya:',
+    namingHtml: `Nama komponennya adalah ${code('Animated')} + id ikon dalam PascalCase (${code('check-box')} → ${code('AnimatedCheckBox')}) dan file-nya ditempatkan di ${code('components/animations/&lt;id&gt;.tsx')}. CLI juga menambahkan wrapper bersama ${code('components/use-animation.tsx')} dan memasang ${code('react-useanimations')}, yang sudah membawa player sendiri: tanpa lottie-web.`,
+    namespaceTitle: 'Nama pendek dengan namespace registry',
+    namespaceHtml: `Tambahkan registry ke ${code('components.json')} sekali saja, lalu tambahkan ikon berdasarkan namanya, beberapa sekaligus:`,
+    registryHtml: (registry: string) =>
+      `Indeks registry di ${link(registry, '/r/registry.json')} memuat daftar semua item beserta judul, kategori, dan interaksinya.`,
+    usageTitle: 'Memakainya di Button shadcn',
+    usageHtml: `Komponen-komponen ini menerima props yang sama dengan ${code('UseAnimations')}. Untuk toggle seperti ikon menu, berikan ${code('active')} dan simpan state-nya di tombol Anda; ikon beranimasi setiap kali nilainya berubah:`,
+    colorHtml: (docs: string) =>
+      `Ikon mengikuti warna teks, jadi ${code('text-primary')} atau ${code('text-muted-foreground')} langsung mengubah warnanya, dan dark mode tidak butuh pengaturan tambahan. Props dan pola lainnya ada di ${link(docs, 'dokumentasi')}.`,
+    codeText: { closeMenu: 'Tutup menu', openMenu: 'Buka menu' },
+    popular: 'Ikon populer untuk shadcn/ui',
+    allIcons: (count: number) => `Semua ${count} ikon →`,
+    popularNote: 'Setiap halaman ikon (dalam bahasa Inggris) menampilkan perintah shadcn-nya.',
+    faq: (f: { count: number; version: string }): Faq => [
+      {
+        question: 'Apakah ikon animasi shadcn/ui ini gratis?',
+        answer: `Ya. Semua ${f.count} ikon beserta kode komponennya berlisensi MIT, untuk proyek pribadi maupun komersial. Registry-nya tidak memerlukan akun atau API key.`,
+      },
+      {
+        question: 'Apa saja yang ditambahkan CLI shadcn ke proyek saya?',
+        answer: `Komponen ikon di components/animations/<id>.tsx, wrapper player UseAnimation bersama di components/use-animation.tsx (sekali saja, sebagai dependensi registry), dan react-useanimations@^${f.version} dari npm. lottie-web tidak diperlukan: paketnya punya player sendiri berukuran 8 kB.`,
+      },
+      {
+        question: 'Apakah komponennya bisa dipakai dengan server component Next.js?',
+        answer:
+          'Bisa. Komponennya ditandai "use client" dan hanya menggambar animasi di browser, jadi Anda bisa me-render-nya dari server component dan halaman tanpa dynamic import atau ssr: false.',
+      },
+      {
+        question: 'Bisakah saya mengubah tampilan dan gerakan ikonnya?',
+        answer:
+          'Bisa, kodenya milik Anda dan ada di repositori Anda. Komponen-komponen ini menerima props UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop, dan speed. Ikon mengikuti warna teks, jadi class Tailwind seperti text-primary atau text-muted-foreground bisa mengubah warnanya.',
+      },
+    ],
+    byCategory: 'Jelajahi berdasarkan kategori',
+  },
+};
diff --git a/website/src/i18n/messages/id/taxonomy.ts b/website/src/i18n/messages/id/taxonomy.ts
new file mode 100644
index 0000000..0d3517c
--- /dev/null
+++ b/website/src/i18n/messages/id/taxonomy.ts
@@ -0,0 +1,385 @@
+import type { Messages } from '../en';
+
+export const taxonomy: Messages['taxonomy'] = {
+  categories: {
+    Alerts: {
+      name: 'Peringatan',
+      title: 'Ikon animasi peringatan',
+      intro:
+        'Segitiga peringatan, lingkaran alert, dan rambu stop yang berdenyut cukup untuk menarik perhatian tanpa berkedip-kedip. Taruh di samping field formulir yang gagal divalidasi, di awal banner error, atau di kolom status, tempat ikon diam mudah terlewat saat menggulir.',
+      useCases: [
+        'Pesan error validasi di bawah field formulir',
+        'Banner error dan peringatan di bagian atas halaman',
+        'Baris yang gagal di tabel status deploy atau job',
+        'Dialog konfirmasi untuk aksi yang menghapus data',
+        'Halaman status sistem saat terjadi insiden',
+      ],
+    },
+    Notifications: {
+      name: 'Notifikasi',
+      title: 'Ikon animasi lonceng notifikasi',
+      intro:
+        'Ikon lonceng yang berdering saat ada aktivitas baru atau beralih antara bell dan bell-off. Ayunan singkat pada lonceng menarik mata ke jumlah notifikasi yang belum dibaca, dan versi toggle-nya sekaligus bisa menjadi tombol bisukan untuk channel atau thread.',
+      useCases: [
+        'Tombol pusat notifikasi di header aplikasi',
+        'Badge belum dibaca yang berdering saat pesan baru masuk',
+        'Sakelar bisukan dan aktifkan suara untuk channel atau thread',
+        'Pengaturan notifikasi email dan push',
+        'Tombol berlangganan pengingat dan peringatan',
+      ],
+    },
+    Navigation: {
+      name: 'Navigasi',
+      title: 'Ikon animasi navigasi dan panah',
+      intro:
+        'Menu hamburger yang berubah menjadi tombol tutup, serta panah, chevron, dan panah sudut yang bergeser sedikit ke arahnya saat di-hover. Ikon ini memperjelas ke mana sebuah kontrol membawa pengguna: membuka drawer, kembali, membentangkan baris, atau keluar dari situs.',
+      useCases: [
+        'Menu hamburger yang berubah menjadi tombol tutup di mobile',
+        'Tombol sebelumnya dan berikutnya di carousel dan paginasi',
+        'Chevron pada accordion dan dropdown',
+        'Petunjuk kembali ke atas dan gulir ke bawah',
+        'Tautan masuk dan keluar akun',
+        'Penanda tautan eksternal dan toggle sidebar',
+      ],
+    },
+    Action: {
+      name: 'Aksi',
+      title: 'Ikon animasi aksi',
+      intro:
+        'Kata kerja sebuah antarmuka: simpan, hapus, unduh, muat ulang, suka, bookmark, cari, dan pengaturan. Setiap ikon mengonfirmasi klik atau hover yang menjadi pemicunya, jadi hati terisi saat Anda menyukai postingan dan tutup tempat sampah terangkat sebelum Anda menghapus.',
+      useCases: [
+        'Tombol suka, favorit, dan bookmark di kartu',
+        'Tombol unduh, unggah, dan simpan yang mengonfirmasi aksinya',
+        'Toggle tampilkan dan sembunyikan kata sandi di formulir login',
+        'Tombol muat ulang dan sinkronisasi di dashboard',
+        'Tombol hapus di tabel dan daftar file',
+        'Field pencarian yang berubah menjadi tombol hapus teks',
+      ],
+    },
+    Content: {
+      name: 'Konten',
+      title: 'Ikon animasi file, folder, dan pengguna',
+      intro:
+        'File, folder, buku, surat, lampiran, dan orang. Ikon ini menandai hal-hal yang dikerjakan pengguna, dan varian tambah, hapus, serta centang membuat pengelolaan daftar dan tim terasa responsif.',
+      useCases: [
+        'Pengelola file dan daftar dokumen',
+        'Tombol lampiran dan salin ke clipboard',
+        'Tampilan kotak masuk dan arsip di aplikasi email',
+        'Daftar anggota tim dengan aksi tambah dan hapus pengguna',
+        'Menu berbagi untuk dokumen dan tautan',
+      ],
+    },
+    Form: {
+      name: 'Formulir',
+      title: 'Ikon animasi kontrol formulir',
+      intro:
+        'Checkbox, radio button, dan toggle switch yang beranimasi saat berpindah antara keadaan tercentang dan tidak tercentang. Pakai di tempat input biasa terasa datar, misalnya checklist onboarding dan layar pengaturan, sambil tetap menjaga keadaannya mudah dibaca sekilas.',
+      useCases: [
+        'Sakelar pengaturan untuk fitur dan preferensi',
+        'Checklist onboarding dan daftar tugas',
+        'Pilihan tunggal di survei dan pemilih paket',
+        'Checkbox persetujuan syarat dan ketentuan',
+      ],
+    },
+    Media: {
+      name: 'Media',
+      title: 'Ikon animasi pemutar media',
+      intro:
+        'Play dan pause, volume, mikrofon, kamera, skip, dan shuffle untuk pemutar audio dan video. Ikon toggle beralih di antara dua keadaannya, dari play ke pause atau dari mikrofon ke bisu, sehingga tombol selalu menunjukkan apa yang akan terjadi saat diklik.',
+      useCases: [
+        'Tombol play dan pause di pemutar audio dan video',
+        'Kontrol bisukan dan aktifkan suara di panggilan video',
+        'Toggle kamera nyala dan mati di aplikasi rapat',
+        'Kontrol playlist untuk skip, ulangi, dan acak',
+        'Tombol casting dan AirPlay',
+        'Kontrol aplikasi podcast dan musik',
+      ],
+    },
+    'Text editing': {
+      name: 'Pengeditan teks',
+      title: 'Ikon animasi pengeditan teks',
+      intro:
+        'Ikon tebal, miring, garis bawah, perataan, dan daftar untuk toolbar rich text. Animasi klik yang singkat mengonfirmasi bahwa format sudah diterapkan, yang membantu di editor ketika perubahan pada teksnya sendiri nyaris tak terlihat.',
+      useCases: [
+        'Toolbar editor rich text',
+        'Kolom penulisan komentar dan pesan',
+        'Editor CMS dan postingan blog',
+        'Aplikasi Markdown dan pencatatan',
+        'Kontrol perataan teks di aplikasi desain',
+      ],
+    },
+    Communication: {
+      name: 'Komunikasi',
+      title: 'Ikon animasi komunikasi',
+      intro:
+        'Telepon, balon chat, tombol kirim, pesan suara, dan RSS. Ikon telepon mencakup keadaan panggilan masuk, keluar, tak terjawab, dan diteruskan yang dibutuhkan riwayat panggilan, sementara ikon kirim memberi sedikit gerakan pelepasan saat pesan dikirim.',
+      useCases: [
+        'Tombol kirim di formulir chat dan komentar',
+        'Riwayat panggilan masuk, keluar, dan tak terjawab',
+        'Tombol kontak dan dukungan',
+        'Peluncur widget chat',
+        'Field mention dan alamat email',
+      ],
+    },
+    Devices: {
+      name: 'Perangkat',
+      title: 'Ikon animasi perangkat',
+      intro:
+        'Ponsel, tablet, monitor, jam tangan, dan printer, plus indikator koneksi di sekitarnya: wifi, Bluetooth, dan baterai. Cocok untuk pemilih perangkat, pengalih pratinjau responsif, dan status konektivitas.',
+      useCases: [
+        'Pengalih pratinjau responsif untuk mobile, tablet, dan desktop',
+        'Status koneksi wifi dan Bluetooth',
+        'Indikator baterai dan pengisian daya',
+        'Daftar perangkat di pengaturan keamanan akun',
+        'Tombol cetak di invoice dan laporan',
+      ],
+    },
+    Weather: {
+      name: 'Cuaca',
+      title: 'Ikon animasi cuaca',
+      intro:
+        'Matahari, bulan, awan, hujan, salju, petir, dan angin untuk prakiraan cuaca dan apa pun yang mengikuti waktu dalam sehari. Matahari dan bulan juga pas sebagai sakelar light mode dan dark mode.',
+      useCases: [
+        'Widget cuaca dan kartu prakiraan',
+        'Sakelar tema terang dan gelap',
+        'Waktu matahari terbit dan terbenam di aplikasi perjalanan',
+        'Pembacaan suhu di dashboard rumah pintar',
+        'Indikator status energi dan daya',
+      ],
+    },
+    'Maps & location': {
+      name: 'Peta & lokasi',
+      title: 'Ikon animasi peta dan lokasi',
+      intro:
+        'Pin peta, panah navigasi, globe, target, dan jangkar. Pin yang jatuh saat di-hover membuat pencari lokasi toko atau alamat pengiriman lebih menonjol, dan globe cocok sebagai pengalih bahasa atau wilayah.',
+      useCases: [
+        'Pencari lokasi toko dan field alamat',
+        'Tombol lokasi saat ini dan petunjuk arah',
+        'Pemilih bahasa dan wilayah',
+        'Pelacakan pengiriman dan pesanan',
+        'Aplikasi perjalanan dan pemesanan',
+      ],
+    },
+    Commerce: {
+      name: 'E-commerce',
+      title: 'Ikon animasi e-commerce',
+      intro:
+        'Keranjang belanja, tas, label harga, hadiah, kartu kredit, dan truk pengiriman untuk toko online. Animasi tambah ke keranjang mengonfirmasi klik tanpa perlu toast, dan ikon truk serta paket membuat status pesanan sedikit lebih hidup.',
+      useCases: [
+        'Tombol tambah ke keranjang di kartu produk',
+        'Tombol keranjang dan tas di header toko',
+        'Checkout dan pemilihan metode pembayaran',
+        'Badge diskon, kupon, dan promo',
+        'Tahapan pengiriman dan pelacakan pesanan',
+        'Pilihan kartu hadiah dan bungkus kado',
+      ],
+    },
+    Charts: {
+      name: 'Grafik',
+      title: 'Ikon animasi grafik',
+      intro:
+        'Grafik batang, diagram lingkaran, dan panah tren untuk analitik dan pelaporan. Ikon trending-up dan trending-down menunjukkan sekilas apakah sebuah metrik naik atau turun, cocok untuk kartu KPI dan riwayat perubahan angka.',
+      useCases: [
+        'Kartu KPI dengan metrik yang naik atau turun',
+        'Item navigasi analitik dan laporan',
+        'Empty state dashboard',
+        'Ringkasan keuangan dan portofolio',
+      ],
+    },
+    Development: {
+      name: 'Pengembangan',
+      title: 'Ikon animasi developer',
+      intro:
+        'Kurung kode, terminal, branch Git, commit, merge, dan pull request, plus server dan database. Dibuat untuk developer tools, situs dokumentasi, dan halaman status yang antarmukanya memang memakai istilah Git dan infrastruktur.',
+      useCases: [
+        'Status pull request, merge, dan branch di developer tools',
+        'Tombol cuplikan kode dan embed di dokumentasi',
+        'Bagian terminal dan CLI di landing page',
+        'Kesehatan server dan database di halaman status',
+        'Petunjuk pintasan keyboard dengan tombol Command',
+      ],
+    },
+    'Design & layout': {
+      name: 'Desain & tata letak',
+      title: 'Ikon animasi desain dan tata letak',
+      intro:
+        'Ikon grid, kolom, layer, crop, pen tool, dan kursor untuk editor dan builder. Cocok untuk toolbar tempat pengguna menata konten, beralih antara tampilan grid dan tabel, atau memilih alat gambar.',
+      useCases: [
+        'Pengalih tampilan grid, daftar, dan tabel',
+        'Panel layer di aplikasi desain dan presentasi',
+        'Alat crop dan potong di editor gambar',
+        'Page builder dan pemilih tata letak',
+        'Handle untuk drag-to-move',
+      ],
+    },
+    'Shapes & math': {
+      name: 'Bentuk & matematika',
+      title: 'Ikon animasi bentuk dan matematika',
+      intro:
+        'Lingkaran, persegi, segitiga, segi enam, segi delapan, dan tanda bagi. Pakai sebagai alat bentuk di aplikasi gambar, sebagai operator kalkulator, atau sebagai penanda netral di diagram dan langkah onboarding.',
+      useCases: [
+        'Alat bentuk di aplikasi whiteboard dan gambar',
+        'Operator di kalkulator dan editor rumus',
+        'Penanda poin dan langkah di diagram',
+        'Antarmuka kuis dan game',
+      ],
+    },
+    Loading: {
+      name: 'Loading',
+      title: 'Ikon animasi loading',
+      intro:
+        'Spinner dan loader yang terus berputar selama proses masih berjalan. Taruh di dalam tombol submit selama request berlangsung, di tempat konten yang masih dimuat, atau di splash screen layar penuh; ikon ini diam saat pengguna memilih reduced motion.',
+      useCases: [
+        'Tombol submit yang menunggu respons request',
+        'Placeholder saat daftar atau grafik sedang dimuat',
+        'Indikator infinite scroll dan muat lebih banyak',
+        'Splash screen layar penuh dan transisi antarhalaman',
+        'Progres unggah dan pemrosesan file',
+      ],
+    },
+    'Social media': {
+      name: 'Media sosial',
+      title: 'Ikon animasi media sosial',
+      intro:
+        'Ikon merek untuk jejaring sosial dan platform tempat developer dan desainer berbagi karya: X, Instagram, YouTube, Discord, Telegram, Figma, dan lainnya. Ikon ini beranimasi saat di-hover, sehingga tautan di footer dan profil terasa bisa diklik.',
+      useCases: [
+        'Tautan media sosial di footer situs',
+        'Tombol berbagi di postingan blog',
+        'Tautan profil penulis dan tim',
+        'Tombol undangan komunitas untuk server chat',
+        'Masuk dengan akun media sosial atau akun developer',
+      ],
+    },
+    Other: {
+      name: 'Lainnya',
+      title: 'Ikon animasi lainnya',
+      intro:
+        'Ikon yang tidak masuk ke kelompok yang lebih besar: wajah emoji untuk umpan balik, cangkir kopi, jam, garis denyut, dan petunjuk gulir ke bawah. Ikon gulir ke bawah adalah petunjuk umum di bagian hero bahwa masih ada konten di bawahnya.',
+      useCases: [
+        'Petunjuk gulir ke bawah di bagian bawah hero section',
+        'Wajah senang, netral, dan sedih di widget umpan balik',
+        'Indikator aktivitas dan uptime',
+        'Jam buka dan pemilih waktu',
+        'Tautan Buy Me a Coffee dan dukungan',
+      ],
+    },
+  },
+  interactions: {
+    loop: {
+      label: 'Loop',
+      title: 'Ikon animasi loop',
+      intro:
+        'Ikon ini berputar terus selama tampil di layar, sehingga cocok untuk keadaan yang berlangsung lama: sesuatu sedang dimuat, sebuah peringatan sedang aktif, terminal sedang menunggu. Jika pengguna memilih reduced motion, ikon berhenti di frame pertamanya dan tetap terbaca sebagai ikon biasa.',
+      useCases: [
+        'Spinner loading dan indikator progres',
+        'Keadaan peringatan dan error yang sedang aktif',
+        'Indikator live dan rekaman',
+        'Petunjuk gulir ke bawah di hero section',
+        'Penanda perhatian untuk notifikasi baru',
+      ],
+      example:
+        'Ikon loop biasanya dipakai untuk spinner loading, peringatan yang aktif, lonceng yang berdering, atau petunjuk gulir ke bawah.',
+      description:
+        'Berputar terus-menerus; jika reduced motion dipilih, ikon tetap diam di frame pertama.',
+      reducedMotion:
+        'Jika pengguna memilih reduced motion, ikon tidak berputar otomatis dan tetap diam di frame pertamanya.',
+      plays: 'berputar terus-menerus',
+    },
+    'click-toggle': {
+      label: 'Toggle saat klik',
+      title: 'Ikon animasi toggle saat diklik',
+      intro:
+        'Setiap klik menganimasikan ikon ke keadaan lainnya dan ikon tetap di sana, sehingga ikon ini menjadi bagian visual dari kontrol nyala/mati. Ikon selalu menunjukkan keadaan saat ini; pasangkan dengan aria-pressed atau atribut checked, dan tombolnya sudah menjelaskan dirinya sendiri.',
+      useCases: [
+        'Tombol bisukan dan aktifkan suara',
+        'Field tampilkan dan sembunyikan kata sandi',
+        'Tombol menu hamburger dan tutup',
+        'Kontrol play dan pause',
+        'Toggle suka, bintang, dan bookmark',
+        'Checkbox, radio button, dan switch',
+      ],
+      example:
+        'Ikon toggle saat diklik biasanya dipakai untuk tombol bisukan/aktifkan suara, tampilkan/sembunyikan kata sandi, menu/tutup, play/pause, dan suka.',
+      description:
+        'Beralih antara dua keadaan saat diklik, atau langsung berpindah jika reduced motion dipilih.',
+      reducedMotion:
+        'Jika pengguna memilih reduced motion, klik langsung memindahkan ikon ke keadaan lainnya tanpa animasi peralihan.',
+      plays: 'beralih antara dua keadaan saat diklik',
+    },
+    'click-replay': {
+      label: 'Putar ulang saat klik',
+      title: 'Ikon animasi klik',
+      intro:
+        'Ikon ini diputar sekali dari awal setiap kali diklik, sebagai konfirmasi kecil bahwa aksinya berhasil. Cocok untuk aksi sekali jalan yang tidak meninggalkan keadaan apa pun: kirim, simpan, muat ulang, unduh, cetak, atau hapus.',
+      useCases: [
+        'Tombol kirim di formulir chat dan komentar',
+        'Tombol simpan, unduh, dan unggah',
+        'Tombol muat ulang dan putar',
+        'Tombol tambah ke keranjang',
+        'Tombol format teks di editor',
+      ],
+      example:
+        'Ikon klik biasanya mengonfirmasi tombol kirim, simpan, muat ulang, unduh, tambah ke keranjang, dan format teks.',
+      description:
+        'Diputar ulang sekali dari awal setiap kali diklik, kecuali jika reduced motion dipilih.',
+      reducedMotion:
+        'Jika pengguna memilih reduced motion, klik tetap sampai ke handler Anda, tetapi animasinya tidak diputar.',
+      plays: 'diputar ulang setiap kali diklik',
+    },
+    hover: {
+      label: 'Hover',
+      title: 'Ikon animasi hover',
+      intro:
+        'Ikon ini diputar maju saat pointer masuk dan berjalan mundur saat pointer keluar, sehingga gerakannya mengikuti kursor dan tidak pernah berhenti di tengah jalan. Cocok untuk item navigasi dan tombol yang memberi petunjuk tentang apa yang akan dibukanya: tutup tempat sampah terangkat, roda gigi pengaturan berputar, folder terbuka.',
+      useCases: [
+        'Item sidebar dan menu navigasi',
+        'Tombol hapus yang mengangkat tutupnya sebelum diklik',
+        'Tautan pengaturan dan profil',
+        'Kontrol zoom in dan zoom out',
+        'Tautan media sosial di footer',
+      ],
+      example:
+        'Ikon hover biasanya menandai item navigasi, tombol hapus, pengaturan, kontrol zoom, dan tautan media sosial.',
+      description: 'Diputar maju saat mouseenter dan mundur saat mouseleave.',
+      reducedMotion: 'Jika pengguna memilih reduced motion, hover tidak memutar animasinya.',
+      plays: 'diputar saat di-hover dan berbalik saat kursor keluar',
+    },
+    'hover-replay': {
+      label: 'Putar sekali saat hover',
+      title: 'Ikon animasi yang diputar saat hover',
+      intro:
+        'Ikon ini diputar sekali saat pointer masuk dan selesai dengan sendirinya, sehingga kursor yang melintas cepat di atas toolbar tidak menghasilkan gerakan yang patah-patah. Sebagian besar ikon di koleksi ini bekerja dengan cara ini: panah, file, perangkat, cuaca, dan ikon merek yang menjadi hidup saat di-hover.',
+      useCases: [
+        'Daftar fitur dan tabel harga',
+        'Tautan panah dan tombol call-to-action',
+        'Tombol toolbar di editor dan dashboard',
+        'Kartu di grid landing page',
+        'Tautan footer dan kontak',
+      ],
+      example:
+        'Ikon yang diputar saat hover biasanya menghidupkan tautan panah, daftar fitur, tombol toolbar, dan kartu landing page.',
+      description:
+        'Diputar sekali saat mouseenter, kecuali jika reduced motion dipilih. Keluar dari ikon tidak menghentikannya, dan masuk lagi selama animasi berjalan tidak memulainya ulang.',
+      reducedMotion: 'Jika pengguna memilih reduced motion, hover tidak memutar animasinya.',
+      plays: 'diputar sekali saat di-hover',
+    },
+    'hover-loop': {
+      label: 'Loop saat hover',
+      title: 'Ikon animasi loop saat hover',
+      intro:
+        'Ikon ini berputar berulang selama pointer berada di atasnya dan menyelesaikan siklus yang sedang berjalan setelah pointer keluar, sehingga tidak pernah berhenti di tengah gerakan. Cocok untuk tautan yang mengundang pengguna berlama-lama, kebanyakan ikon media sosial dan komunitas.',
+      useCases: [
+        'Tautan media sosial di header dan footer',
+        'Tombol undangan komunitas dan chat',
+        'Tautan portofolio dan profil',
+        'Pemilih bahasa dan wilayah',
+      ],
+      example:
+        'Ikon loop saat hover biasanya menandai tautan media sosial, undangan komunitas, tautan portofolio, dan pemilih bahasa.',
+      description:
+        'Berputar berulang selama di-hover, menyelesaikan siklusnya setelah mouseleave, dan tetap diam jika reduced motion dipilih.',
+      reducedMotion: 'Jika pengguna memilih reduced motion, ikon tetap diam saat di-hover.',
+      plays: 'berputar berulang selama di-hover',
+    },
+  },
+};
diff --git a/website/src/i18n/messages/ja/common.ts b/website/src/i18n/messages/ja/common.ts
new file mode 100644
index 0000000..0fe5f9c
--- /dev/null
+++ b/website/src/i18n/messages/ja/common.ts
@@ -0,0 +1,45 @@
+import type { Messages } from '../en';
+
+export const common: Messages['common'] = {
+  skipToContent: '本文へスキップ',
+  ogImageAlt: 'useAnimations：React、shadcn/ui、Lottie、SVG で使える無料のアニメーションアイコン',
+  homeLabel: 'useAnimations ホーム',
+  mainNav: 'メイン',
+  browseIcons: 'アイコンを探す',
+  nav: {
+    icons: 'アイコン',
+    categories: 'カテゴリ',
+    documentation: 'ドキュメント',
+    shadcn: 'shadcn',
+    lottie: 'Lottie アイコン',
+    license: 'ライセンス',
+  },
+  footer: {
+    tagline: 'インタラクション内蔵の無料アニメーションアイコン。MIT ライセンス、React 向け。',
+    product: 'プロダクト',
+    developers: '開発者向け',
+    follow: 'フォロー',
+    languages: '言語',
+    allIcons: 'すべてのアイコン',
+    categories: 'カテゴリ',
+    interactions: 'インタラクション',
+    lottieIcons: 'Lottie アイコン',
+    shadcnIcons: 'shadcn/ui アイコン',
+    documentation: 'ドキュメント',
+    licencing: 'ライセンスと利用規約',
+    shadcnRegistry: 'shadcn レジストリ',
+    mitLicense: 'MIT ライセンス',
+    builtWith: 'このサイトは Astro で構築しています',
+  },
+  breadcrumb: 'パンくずリスト',
+  crumbs: { icons: 'アイコン', categories: 'カテゴリ', interactions: 'インタラクション' },
+  faq: 'よくある質問',
+  copy: 'コピー',
+  copied: 'コピーしました',
+  pressCtrlC: 'Ctrl+C でコピー',
+  languageBanner: {
+    text: 'このページは日本語でもご覧いただけます。',
+    action: '日本語に切り替える',
+    dismiss: '閉じる',
+  },
+};
diff --git a/website/src/i18n/messages/ja/docs.ts b/website/src/i18n/messages/ja/docs.ts
new file mode 100644
index 0000000..6204edd
--- /dev/null
+++ b/website/src/i18n/messages/ja/docs.ts
@@ -0,0 +1,35 @@
+import type { Messages } from '../en';
+
+export const docs: Messages['docs'] = {
+  title: 'ドキュメント — useAnimations',
+  description: (iconCount: number) =>
+    `${iconCount} 個のアニメーションアイコンを React と shadcn/ui で使う方法。インタラクション、props、色、ファイル、アクセシビリティを解説。`,
+  badge: 'ドキュメント',
+  onThisPage: 'このページの内容',
+  viewAsMarkdown: 'Markdown で表示',
+  headline: 'useAnimations ドキュメント',
+  summary: 'useAnimations のアニメーションアイコンを React と shadcn/ui で使う方法。',
+  crumb: 'ドキュメント',
+  faq: [
+    {
+      question: 'useAnimations は商用プロジェクトでも無料で使えますか？',
+      answer:
+        'はい。アイコンと React パッケージは MIT ライセンスで、クレジット表記も必要ありません。',
+    },
+    {
+      question: 'useAnimations のアイコンを React で使うには？',
+      answer:
+        'react-useanimations をインストールし、UseAnimations とアイコン（例：react-useanimations/lib/checkmark）をインポートして、<UseAnimations animation={checkmark} size={32} /> をレンダリングします。',
+    },
+    {
+      question: 'アイコンの色を変えるには？',
+      answer:
+        'アイコンはテキストの色に追従します。strokeColor と fillColor、CSS の color、またはパスへのスタイル指定で変更できます。',
+    },
+    {
+      question: 'React なしでも使えますか？',
+      answer:
+        'パッケージは React 向けです。ただし、どのアイコンも標準的な Lottie JSON ファイルなので、Lottie プレーヤー（lottie-web、dotLottie、lottie-react-native、lottie-ios、lottie-android、Flutter）で再生でき、静的 SVG も用意しています。詳しくはドキュメントの「React なしで使う」と useanimations.com/lottie-icons を参照してください。',
+    },
+  ],
+};
diff --git a/website/src/i18n/messages/ja/home.ts b/website/src/i18n/messages/ja/home.ts
new file mode 100644
index 0000000..f51f093
--- /dev/null
+++ b/website/src/i18n/messages/ja/home.ts
@@ -0,0 +1,171 @@
+import type { Messages } from '../en';
+import type { FaqLinks, HomeFaq } from '../en/home';
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const home: Messages['home'] = {
+  title: 'アニメーションアイコンライブラリ — useAnimations',
+  description: (count: number) =>
+    `${count} 個の無料マイクロアニメーション。ホバー・クリック・ループ内蔵のアニメーションアイコン集で、React、shadcn/ui、Lottie に対応。MIT。`,
+
+  hero: {
+    badge: (count: number) => `${count} 個のアイコン · 依存関係ゼロ · MIT`,
+    headline: { start: '', accent: '動き出す', end: 'アイコン。' },
+    h1: 'React、shadcn/ui、Lottie で使える無料のアニメーションアイコン',
+    intro: (count: number) =>
+      `ホバー、クリック、ループのマイクロインタラクションを内蔵した、手作りのマイクロアニメーション ${count} 個。React コンポーネントとして使うことも、shadcn で追加することも、SVG や Lottie JSON をダウンロードすることもできます。MIT ライセンス。`,
+    browse: 'アイコンを探す',
+    fieldHint: 'フィールドの上でポインターを動かしてみてください。',
+  },
+
+  numbers: {
+    label: '概要',
+    icons: 'アニメーションアイコン',
+    interactions: '内蔵インタラクション',
+    size: 'プレーヤー（gzip 圧縮後）',
+    dependencies: '依存関係',
+  },
+
+  interactions: {
+    eyebrow: 'インタラクション内蔵',
+    title: 'どのアイコンも、自分の動き方を知っている。',
+    intro:
+      'どのアイコンにも、デザインしたときに想定したインタラクションが付いています。置くだけでそのまま動き、prop ひとつで別の動きに変えることもできます。試してみてください：',
+    demos: {
+      loop: 'ローダーや常時表示のステータス向けに、再生し続けます。',
+      'click-toggle': 'メニューと閉じる、再生と一時停止のように 2 つの状態を切り替えます。',
+      'click-replay': 'クリックのたびに最初から再生し、操作へのフィードバックになります。',
+      hover: 'ポインターが乗ると順方向に、離れると逆方向に再生します。',
+      'hover-loop': 'ホバー中はループし、離れるとそのサイクルを最後まで再生します。',
+      'hover-replay': 'ポインターが乗るたびに最初から 1 回再生します。',
+    },
+  },
+
+  browser: {
+    eyebrow: 'ライブラリ',
+    title: (count: number) => `${count} 個の無料アニメーションアイコン`,
+    intro:
+      'ホバーやクリックで再生できます。アイコンを開くと、コードとダウンロード（Lottie JSON、SVG、ZIP）が表示されます。',
+    search: 'アイコンを検索',
+    searchPlaceholder: (count: number) =>
+      `${count} 個のアイコンを英語で検索（例：eye、bell、arrow）`,
+    interaction: 'インタラクション',
+    allInteractions: 'すべてのインタラクション',
+    color: 'アイコンの色',
+    colors: {
+      text: 'テキストの色',
+      indigo: 'インディゴ',
+      red: 'レッド',
+      amber: 'アンバー',
+      teal: 'ティール',
+      violet: 'バイオレット',
+    },
+    customColor: 'カスタムカラー',
+    size: 'サイズ',
+    category: 'カテゴリ',
+    all: 'すべて',
+    count: { other: '{n} 個のアイコン' },
+    noMatch: '一致するアイコンはありません。',
+    noMatchHintHtml: (href: string) =>
+      `別のキーワードで試すか、${link(href, 'アイコンをリクエスト')}してください。`,
+  },
+
+  everywhere: {
+    eyebrow: '好きな方法で使う',
+    title: 'インストールして、インポートするだけ。',
+    intro:
+      '依存関係のない React コンポーネント、shadcn レジストリ、URL が固定されたダウンロード用ファイル、そして AI エージェントが読めるカタログを用意しています。',
+    docs: 'ドキュメントを読む →',
+    tablist: 'プラットフォーム',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'ファイル', agents: 'エージェント' },
+    codeText: {
+      afterAdding: '使い方',
+      files: 'すべてのアイコンを SVG、アニメーション（Lottie JSON）、その両方をまとめた ZIP で提供',
+    },
+  },
+
+  features: {
+    title: '軽くて、アクセシブルで、スタイルは自由。',
+    colors: 'テキストの色に追従',
+    colorsHtml: `アイコンは ${code('currentColor')} を使うので、テキストの色、ホバー時の色、ダークモードに自動で合わせます。prop、クラス、素の CSS で上書きすることもできます。`,
+    tiny: '小ささにこだわった設計',
+    tinyText:
+      'プレーヤーを内蔵し、依存関係はゼロ。アイコンはそれぞれ 2 kB の独立したモジュールです。',
+    accessible: '最初からアクセシブル',
+    accessibleText:
+      'モーション軽減の設定を尊重し、キーボードフォーカスでもホバーアニメーションを再生します。ラベルを付けない限り、スクリーンリーダーには読み上げられません。',
+    ssr: 'サーバーサイドレンダリング対応',
+    ssrText:
+      'Next.js、Remix、Astro でも安全にレンダリングできるクライアントコンポーネントです。アイコンはただのデータなので、どこからでもインポートできます。',
+    agents: 'AI エージェント向け',
+    agentsHtml: (iconsJson: string, llmsTxt: string) =>
+      `全アイコンのキーワードを含む型付きカタログ ${link(iconsJson, 'icons.json')}、${link(llmsTxt, 'llms.txt')}、Markdown 版のドキュメントを用意しています。`,
+  },
+
+  browse: {
+    title: 'ぴったりのマイクロアニメーションを見つける。',
+    byCategory: 'カテゴリから探す',
+    byInteraction: 'インタラクションから探す',
+    formats: 'すべてのアイコンと形式',
+  },
+
+  hubs: {
+    icons: 'すべてのアニメーションアイコン',
+    categories: 'アイコンのカテゴリ',
+    interactions: 'インタラクション別のアイコン',
+    lottie: 'Lottie アイコン（JSON）',
+    shadcn: 'shadcn/ui 用アニメーションアイコン',
+  },
+
+  faqTitle: 'よくある質問',
+  faq: (f: { version: string; links: FaqLinks }): HomeFaq => [
+    {
+      question: 'マイクロアニメーションやアニメーションアイコンとは何ですか？',
+      answer:
+        'マイクロアニメーションは、ユーザーの操作に応える短く目的の明確な動きです。メニューアイコンが閉じるボタンに変わる、投稿にいいねするとハートが塗りつぶされる、新しい通知でベルが鳴る、といったものです。アニメーションアイコンはその代表的な例で、インターフェースの反応をよくし、余計なテキストなしで状態の変化を伝えられます。',
+    },
+    {
+      question: 'Lottie ファイルと SVG ファイルの違いは何ですか？',
+      answer:
+        'Lottie JSON ファイルにはアニメーション全体が入っていて、react-useanimations に内蔵のプレーヤーを含め、どの Lottie プレーヤーでも再生できます。SVG ファイルは静止状態のアイコンの画像で、状態ごとに 1 つずつ（たとえば eye と eye-off）あります。メール、ドキュメント、デザインツール、JavaScript が使えない環境のフォールバックなど、動かしたくない場所で使います。',
+    },
+    {
+      question: 'Next.js やサーバーサイドレンダリングでも使えますか？',
+      answer:
+        "はい。コンポーネントには 'use client' が付いていて、アニメーションはブラウザーでのみ描画されます。そのため、サーバーコンポーネントや Next.js、Remix、Astro などの SSR フレームワークから、動的インポートなしでレンダリングできます。アイコンのモジュールはただのデータなので、サーバーコンポーネントでインポートして props として渡せます。",
+      link: { href: f.links.serverRendering, label: 'Next.js とサーバーサイドレンダリング' },
+    },
+    {
+      question: '商用プロジェクトでも使えますか？',
+      answer:
+        'はい。アイコンと react-useanimations パッケージは MIT ライセンスです。個人・商用を問わず、使用、改変、再配布ができます。クレジット表記は歓迎しますが、必須ではありません。',
+      link: { href: f.links.licence, label: 'ライセンスと利用規約' },
+    },
+    {
+      question: 'React なしでもアイコンを使えますか？',
+      answer:
+        'はい。どのアイコンも標準的な Lottie JSON ファイルなので、素の JavaScript、Vue、Svelte、Angular、CMS では lottie-web で、iOS、Android、Flutter ではそれぞれの Lottie プレーヤーで再生できます。Lottie アイコンのページに、ファイルの URL とインタラクションごとの lottie-web のコード例をまとめています。',
+      link: { href: f.links.lottie, label: 'Lottie アイコン' },
+    },
+    {
+      question: 'バンドルサイズはどのくらい増えますか？',
+      answer: `react-useanimations ${f.version} のプレーヤーは gzip 圧縮後で約 8 kB、依存関係はありません。アイコンはそれぞれ 1〜15 kB（中央値 2 kB）の独立したモジュールなので、バンドルに含まれるのはインポートしたアイコンだけです。`,
+    },
+  ],
+
+  cta: {
+    title: { start: 'インターフェースに', accent: '鼓動', end: 'を。' },
+    text: '無料で MIT ライセンス。個人でも商用でも使えます。',
+    start: 'はじめる',
+  },
+
+  schema: {
+    software: (count: number) =>
+      `React コンポーネントと ${count} 個のアニメーションアイコン（Lottie）。ホバー、クリック、ループのインタラクションを内蔵し、依存関係はありません。`,
+    catalogName: 'useAnimations アイコンカタログ',
+    catalog: (count: number) =>
+      `useAnimations の全 ${count} 個のアイコンについて、ID、タイトル、カテゴリ、キーワード、インタラクション、Lottie JSON・SVG・ZIP の URL、React のインポート文、shadcn コマンドをまとめたカタログです。`,
+  },
+};
diff --git a/website/src/i18n/messages/ja/hubs.ts b/website/src/i18n/messages/ja/hubs.ts
new file mode 100644
index 0000000..1be6024
--- /dev/null
+++ b/website/src/i18n/messages/ja/hubs.ts
@@ -0,0 +1,161 @@
+import type { Messages } from '../en';
+import type { CategoryFacts, Faq, InteractionFacts } from '../en/hubs';
+import { listIn, pluralIn } from '../../format';
+
+const list = listIn('ja');
+const plural = pluralIn('ja');
+
+/** 最大 `max` 件の名前を並べ、残りは「ほか N 個」とまとめる。 */
+const titles = (items: string[], max = 12) =>
+  items.length > max ? `${list(items.slice(0, max))} ほか ${items.length - max} 個` : list(items);
+
+/** 英数字で終わる語のあとに半角スペースを入れる（「SNS のアイコン」）。 */
+const spaced = (text: string) => (/[A-Za-z0-9]$/.test(text) ? `${text} ` : text);
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+
+/** 提供形式の一覧（静的 SVG の有無を反映）。 */
+const formats = (f: CategoryFacts) => {
+  const base = ['React コンポーネント', 'shadcn/ui コンポーネント', 'Lottie JSON アニメーション'];
+  if (f.withSvg === f.count) return `${list([...base, '静的 SVG'])} として提供され`;
+  if (f.withSvg) return `${list(base)} として提供され（うち ${f.withSvg} 個は静的 SVG も用意）`;
+  return `${list(base)} として提供され`;
+};
+
+export const hubs: Messages['hubs'] = {
+  titleSuffix: ' — useAnimations',
+  iconCount: (n: number) => plural(n, { other: '個のアイコン' }),
+
+  category: {
+    titles: (f: CategoryFacts) => [
+      `${f.title}（React・Lottie 対応）`,
+      `${f.title}（React 対応）`,
+      `無料の${f.title}`,
+      f.title,
+    ],
+    descriptions: (f: CategoryFacts) => {
+      const examples = list(f.titles.slice(0, 3));
+      return [
+        `${f.title} ${f.count} 個を無料で公開。${examples} など、ホバー・クリック・ループで動くマイクロアニメーションを React、shadcn/ui、Lottie JSON で。MIT ライセンス。`,
+        `${f.title} ${f.count} 個を無料で公開。${examples} など。React、shadcn/ui、Lottie JSON 対応、MIT ライセンス。`,
+        `${f.title} ${f.count} 個を無料で公開。${examples} など。React、shadcn/ui、Lottie 対応。`,
+        `${f.title} ${f.count} 個を無料で公開。React、shadcn/ui、Lottie JSON 対応、MIT ライセンス。`,
+        `${f.title} ${f.count} 個。React、shadcn/ui、Lottie 対応、MIT。`,
+      ];
+    },
+    summary: (f: CategoryFacts) => {
+      const breakdown =
+        f.groups.length === 1
+          ? `${f.count} 個すべてが${f.groups[0].plays}アイコンです。`
+          : `${f.count} 個の内訳は、${list(f.groups.map(({ count, plays }) => `${plays}もの ${count} 個`))}です。`;
+      return `${breakdown}どのアイコンも ${formats(f)}、MIT ライセンスのもと商用利用も無料です。`;
+    },
+    faq: (f: CategoryFacts): Faq => {
+      const ex = f.example;
+      const n = f.expressions.length;
+      return [
+        {
+          question: `${f.title}にはどんなアイコンがありますか？`,
+          answer: `${f.count} 個あります。${titles(f.titles)}です。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。`,
+        },
+        {
+          question: `${f.title}を React で使うには？`,
+          answer: `react-useanimations をインストールし、${ex.importLine} を追加して <UseAnimations animation={${ex.exportName}} size={32} /> をレンダリングします。アイコンは「${ex.interactionLabel}」のインタラクションで動き、テキストの色に合わせて表示されます。shadcn/ui を使う場合は、代わりに ${ex.shadcnCommand} を実行してください。`,
+        },
+        {
+          question: `${f.title}は React なしでも使えますか？`,
+          answer: `はい。各アイコンは ${f.site}/icons/<id>.json（例：${f.site}/icons/${ex.id}.json）にある Lottie JSON ファイルで、lottie-web、lottie-ios、lottie-android、Flutter の lottie パッケージで再生できます${f.withSvg ? '。静的 SVG は各アイコンのページ（英語）からダウンロードできます' : ''}。${
+            n
+              ? `${titles(f.expressions, 6)} は After Effects のエクスプレッションを使っているため、Web では lottie-web のフルビルドが必要です。`
+              : 'エクスプレッションを使うアイコンはないので、lottie-web のライトビルドで十分です。'
+          }`,
+        },
+      ];
+    },
+    badge: (n: number) => `${plural(n, { other: '個のアイコン' })} · MIT ライセンス`,
+    allIcons: (name: string) => `${spaced(name)}のアイコン一覧`,
+    whereToUse: '使いどころ',
+    byInteraction: 'インタラクション別',
+    addOne: 'アプリに追加する',
+    addOneHtml: (label: string, name: string) =>
+      `React では ${code('react-useanimations')} をインストールしてアイコンをインポートするだけで、「${label}」のインタラクションで動きます。このカテゴリのアイコンはどれも使い方が同じなので、${code(name)} を各アイコンのページに載っている名前に置き換えてください。`,
+    shadcnHtml: (href: string) =>
+      `${link(href, 'shadcn/ui')} なら、CLI ですぐに使えるコンポーネントを追加できます：`,
+    noReactHtml: (href: string) =>
+      `React を使わない場合も、各アイコンは ${code('/icons/&lt;id&gt;.json')} にある Lottie JSON ファイルとして使えます。Web、iOS、Android、Flutter 向けのプレーヤーは ${link(href, 'Lottie アイコン')}を参照してください。`,
+    more: 'ほかのカテゴリ',
+    allIconsButton: 'すべてのアイコン',
+  },
+
+  interaction: {
+    titles: (f: InteractionFacts) => [
+      `${f.title}（React・Lottie 対応）`,
+      `${f.title}（React 対応）`,
+      f.title,
+    ],
+    descriptions: (f: InteractionFacts) => [
+      `${f.title} ${f.count} 個を無料で公開。${list(f.titles.slice(0, 3))} など。React、shadcn/ui、Lottie JSON 対応、MIT ライセンス。`,
+      `${f.title} ${f.count} 個を無料で公開。React、shadcn/ui、Lottie JSON 対応、MIT ライセンス。`,
+      `${f.title} ${f.count} 個。React、shadcn/ui、Lottie 対応、MIT。`,
+    ],
+    faq: (f: InteractionFacts): Faq => [
+      {
+        question: `「${f.label}」のインタラクションを使うアイコンは？`,
+        answer: `${f.count} 個あります。${titles(f.titles, 15)}です。${f.example}`,
+      },
+      {
+        question: 'ユーザーがモーション軽減を設定している場合はどうなりますか？',
+        answer: `${f.reducedMotion}React コンポーネントが prefers-reduced-motion を読み取り、設定が変わればそれに追従するので、そのためのコードを書く必要はありません。`,
+      },
+      {
+        question: 'アイコンのインタラクションを変えるには？',
+        answer: `どのアイコンも、デザインされたときのインタラクションで再生されます。interaction="${f.interaction}" を渡せばほかのアイコンにもこの動きを付けられ、別の値（'loop'、'click-toggle'、'click-replay'、'hover'、'hover-loop'、'hover-replay'）を渡せば別の動きに変えられます。再生は autoplay、loop、speed の props で調整できます。${
+          f.interaction === 'click-toggle'
+            ? '状態を自分で管理したい場合は active={isOn} を渡し、onClick で更新してください。そうすると、クリックだけではアイコンは切り替わらなくなります。'
+            : ''
+        }`,
+      },
+    ],
+    allIcons: (label: string) => `「${label}」のアイコン一覧`,
+    behaviour: '動作',
+    hoverNote:
+      'タッチスクリーンでのタップではホバーアニメーションは始まりません。アイコンがフォーカス可能な要素の中にあれば、キーボードフォーカスでも再生されます。',
+    handled: 'これらはすべて React コンポーネントが処理するので、アイコンを選ぶだけで済みます。',
+    whereToUse: '使いどころ',
+    byCategory: 'カテゴリ別',
+    useInReact: 'React で使う',
+    overrideHtml: `ここに並ぶアイコンは、デフォルトでこのインタラクションで再生されます。ほかのアイコンでも ${code('interaction')} prop を渡せば同じ動きにできます。`,
+    normallyUses: (title: string, interaction: string) =>
+      `${title} の本来のインタラクションは '${interaction}'`,
+    extra: {
+      loop: 'ループするアイコンは自動再生され、画面外にスクロールされている間は一時停止します。speed で遅くしたり、loop={false} で 1 回だけ再生したり、autoplay={false} で止めたままにしたりできます：',
+      'click-toggle':
+        'デフォルトでは、クリックするとアイコンが自動で切り替わります。アプリの状態と同期させたい場合は active を渡してください。active が変わるたびにアイコンがアニメーションし、クリックだけでは切り替わらなくなります。',
+      'click-replay':
+        'render prop を使ってアイコンを本物のボタンで包めば、フォーカスでき、スクリーンリーダーにも読み上げられます。渡した onClick が先に実行され、event.preventDefault() を呼ぶとアニメーションをスキップできます。',
+      hover:
+        'render prop を使ってアイコンをリンクやボタンで包むと、要素がキーボードフォーカスを受けたときにもアニメーションが再生され、タッチスクリーンでのタップでは再生されなくなります。',
+      'hover-replay':
+        'アイコンだけでなく、カードやリンク全体でホバーを受けましょう。render prop を使うとイベントが自分の要素に付き、キーボードフォーカスでもアニメーションが再生されます。',
+      'hover-loop':
+        'render prop を使えば、キーボードフォーカスも含めてリンク全体でループを開始できます。速さは speed で変えられます：',
+    },
+    codeText: {
+      halfSpeed: '半分の速度',
+      playsOnce: '1 回再生して停止',
+      staticFrame: '静止した最初のフレーム',
+      endState: 'true で終了状態を表示',
+      closeMenu: 'メニューを閉じる',
+      openMenu: 'メニューを開く',
+      download: 'ダウンロード',
+      archive: 'アーカイブ',
+      weeklyGrowth: '週間の伸び',
+    },
+    docsHtml: (docs: string, lottie: string) =>
+      `すべての props は${link(docs, 'ドキュメント')}にまとめています。React 以外では、アイコンは Lottie JSON ファイルです。lottie-web でインタラクションを再現する方法は ${link(lottie, 'Lottie アイコン')}を参照してください。`,
+    other: 'ほかのインタラクション',
+    browseByCategory: 'カテゴリから探す',
+  },
+};
diff --git a/website/src/i18n/messages/ja/index.ts b/website/src/i18n/messages/ja/index.ts
new file mode 100644
index 0000000..bf33c1d
--- /dev/null
+++ b/website/src/i18n/messages/ja/index.ts
@@ -0,0 +1,11 @@
+import type { Messages } from '../en';
+import { common } from './common';
+import { docs } from './docs';
+import { home } from './home';
+import { hubs } from './hubs';
+import { islands } from './islands';
+import { licence } from './licence';
+import { pages } from './pages';
+import { taxonomy } from './taxonomy';
+
+export const messages: Messages = { common, taxonomy, hubs, home, docs, licence, pages, islands };
diff --git a/website/src/i18n/messages/ja/islands.ts b/website/src/i18n/messages/ja/islands.ts
new file mode 100644
index 0000000..542bab2
--- /dev/null
+++ b/website/src/i18n/messages/ja/islands.ts
@@ -0,0 +1,51 @@
+import type { Messages } from '../en';
+
+export const islands: Messages['islands'] = {
+  iconCard: {
+    hints: {
+      loop: 'ループ',
+      'click-toggle': 'クリック',
+      'click-replay': 'クリック',
+      hover: 'ホバー',
+      'hover-loop': 'ホバー',
+      'hover-replay': 'ホバー',
+    },
+  },
+  iconDialog: {
+    hints: {
+      loop: '自動で再生されます',
+      'click-toggle': 'クリックで切り替え',
+      'click-replay': 'クリックでもう一度再生',
+      hover: 'ホバーで再生、離れると逆再生',
+      'hover-loop': 'ホバー中はループ',
+      'hover-replay': 'ホバーで再生',
+    },
+    preview: '{title} のプレビュー',
+    colors: 'プレビューの色',
+    color: '色 {color}',
+    textColor: 'テキストの色',
+    interaction: 'インタラクション',
+    duration: '再生時間',
+    seconds: '{seconds} 秒',
+    import: 'インポート',
+    close: '閉じる',
+    code: 'コード',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'ファイル' },
+    copy: 'コピー',
+    download: 'ダウンロード',
+    iconPage: 'アイコンのページ →',
+  },
+  interactionDemo: {
+    click: 'カードをクリック',
+    loop: '自動で再生されます',
+    hover: 'カードにホバー',
+  },
+  mobileMenu: {
+    menu: 'メニュー',
+    nav: 'メイン',
+  },
+  themeToggle: {
+    toLight: 'ライトテーマに切り替える',
+    toDark: 'ダークテーマに切り替える',
+  },
+};
diff --git a/website/src/i18n/messages/ja/licence.ts b/website/src/i18n/messages/ja/licence.ts
new file mode 100644
index 0000000..c56df4b
--- /dev/null
+++ b/website/src/i18n/messages/ja/licence.ts
@@ -0,0 +1,25 @@
+import type { Messages } from '../en';
+
+export const licence: Messages['licence'] = {
+  title: 'ライセンスと利用規約 — useAnimations',
+  description:
+    'useAnimations のアイコンと react-useanimations は MIT ライセンス。個人・商用利用も再配布も無料、クレジット表記は不要。',
+  name: 'ライセンスと利用規約',
+  heading: '自由に使える MIT ライセンス。',
+  introHtml: (mitHref: string) =>
+    `useAnimations のアイコンと <code>react-useanimations</code> パッケージは、<a href="${mitHref}">MIT ライセンス</a>で公開しています。`,
+  canDo: 'できること',
+  canDoItemsHtml: [
+    '個人・商用のウェブサイト、アプリ、製品でアイコンを<strong>使用</strong>できます。',
+    '色、サイズ、タイミング、動きそのものを<strong>改変</strong>できます。',
+    'アイコンパック、テンプレート、テーマ、UI キット、コンポーネントレジストリに含めるなど、<strong>再配布</strong>もできます。',
+  ],
+  attribution: 'クレジット表記',
+  attributionText:
+    '必須ではありませんが、表記していただけるとうれしいです。ファイルそのものを再配布する場合はライセンス表示を残してください。クレジットを入れる場合は次のように記載できます：',
+  credit: (link: string) => `アニメーションアイコン提供：${link}`,
+  noWarranty: '無保証',
+  noWarrantyText: 'アイコンとコードは現状のまま提供され、いかなる保証もありません。',
+  licenseText: 'ライセンス本文',
+  bindingNote: '以下のライセンス本文は英語の原文で、こちらが法的拘束力を持ちます。',
+};
diff --git a/website/src/i18n/messages/ja/pages.ts b/website/src/i18n/messages/ja/pages.ts
new file mode 100644
index 0000000..c959094
--- /dev/null
+++ b/website/src/i18n/messages/ja/pages.ts
@@ -0,0 +1,242 @@
+import type { Messages } from '../en';
+import type { Faq } from '../en/hubs';
+import { listIn } from '../../format';
+
+const list = listIn('ja');
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+const strong = (text: string) => `<strong class="font-medium text-fg">${text}</strong>`;
+
+export const pages: Messages['pages'] = {
+  icons: {
+    titles: (count: number) => [
+      `カテゴリ別アニメーションアイコン全 ${count} 個`,
+      `アニメーションアイコン全 ${count} 個`,
+    ],
+    descriptions: (count: number, categories: number) => [
+      `useAnimations の全アイコンを 1 ページに。無料のアニメーションアイコン ${count} 個を ${categories} カテゴリ別に掲載。React、shadcn/ui、Lottie JSON、SVG 対応、MIT ライセンス。`,
+      `無料のアニメーションアイコン ${count} 個を ${categories} カテゴリ別に一覧。React、shadcn/ui、Lottie JSON、SVG 対応、MIT ライセンス。`,
+    ],
+    title: 'すべてのアニメーションアイコン',
+    badge: (count: number) => `${count} 個のアイコン · MIT ライセンス`,
+    introHtml: (browser: string) =>
+      `セットのすべてのアイコンをカテゴリ別に並べています。アイコンを開くと、ライブプレビュー、React と shadcn/ui のコード、Lottie JSON・SVG・ZIP のダウンロードが表示されます。キーワードで検索したり、その場でアニメーションを試したりするには${link(browser, 'アイコンブラウザー')}を使ってください。`,
+    categoriesNav: 'カテゴリ',
+    byInteraction: 'インタラクション別：',
+    categoryLink: (count: number, name: string) =>
+      `${/[A-Za-z0-9]$/.test(name) ? `${name} ` : name}のアイコン ${count} 個 →`,
+  },
+
+  categories: {
+    titles: (categories: number) => [
+      `アニメーションアイコンのカテゴリ（全 ${categories} 種）`,
+      'アニメーションアイコンのカテゴリ',
+    ],
+    descriptions: (icons: number, categories: number) => [
+      `無料のアニメーションアイコン ${icons} 個を ${categories} のカテゴリから探せます。ナビゲーション、アクション、メディア、ローディング、SNS など。React、shadcn/ui、Lottie 対応。`,
+      `無料のアニメーションアイコン ${icons} 個を ${categories} のカテゴリから探せます。React、shadcn/ui、Lottie 対応。`,
+    ],
+    title: 'アニメーションアイコンのカテゴリ',
+    badge: (icons: number, categories: number) => `${icons} 個のアイコン · ${categories} カテゴリ`,
+    introHtml: (interactions: string) =>
+      `useAnimations のアイコンは、ナビゲーションの矢印やメディア操作からローダー、SNS のロゴまで、どれも 1 つのカテゴリに属しています。カテゴリを開くと、そのアイコンの一覧、使いどころ、追加するためのコードが表示されます。${link(interactions, 'インタラクション')}から探すこともできます。`,
+    iconCount: (n: number) => `${n} 個のアイコン`,
+  },
+
+  interactions: {
+    titles: [
+      'マイクロインタラクション：ホバー・クリック・ループで動くアイコン',
+      'アイコンのマイクロインタラクション',
+    ],
+    descriptions: (icons: number, interactions: number) => [
+      `${icons} 個のアニメーションアイコンと ${interactions} 種類のマイクロインタラクション：ループ、クリックでトグル、クリックで再生、ホバー、ホバーで再生、ホバーでループ。モーション軽減にも対応。`,
+      `${icons} 個のアニメーションアイコンを ${interactions} 種類のマイクロインタラクション別に。ループ、クリック、ホバーで動き、モーション軽減にも対応。`,
+    ],
+    title: 'アニメーションアイコンのインタラクション',
+    badge: (interactions: number, icons: number) =>
+      `${interactions} 種類のインタラクション · ${icons} 個のアイコン`,
+    introHtml: `どのアイコンにも、デザイン時に想定したマイクロインタラクションが付いています。ループする、クリックで切り替わる、クリックでもう一度再生する、ホバーで再生する、のいずれかです。React コンポーネントがその仕組みを組み込み、モーション軽減の設定も尊重します。<code class="font-mono text-base text-fg">interaction</code> prop を使えば、どのアイコンも別のインタラクションに切り替えられます。`,
+    iconCount: (n: number) => `${n} 個のアイコン`,
+    chooseTitle: 'インタラクションの選び方',
+    chooseHtml: {
+      loop: (href: string) =>
+        `${strong('続いている状態')}（読み込み中や継続中のアラートなど）：${link(href, 'ループ')}。`,
+      'click-toggle': (href: string) =>
+        `${strong('オン・オフの操作')}（ミュート、メニュー、パスワード表示など）：${link(href, 'クリックでトグル')}。状態を自分で管理するなら ${code('active')} を使います。`,
+      'click-replay': (href: string) =>
+        `${strong('一度きりの操作')}（送信、保存、更新など）：${link(href, 'クリックで再生')}。`,
+      hover: (href: string) =>
+        `${strong('リンク先を予告するヒント')}：${link(href, 'ホバー')}。ポインターが離れると逆再生します。`,
+      'hover-replay': (href: string) =>
+        `${strong('ポインターがさっと横切るツールバーやリスト')}：${link(href, 'ホバーで再生')}。最後まで自動で再生しきります。`,
+      'hover-loop': (href: string) =>
+        `${strong('じっくり見てほしいリンク')}（SNS アイコンなど）：${link(href, 'ホバーでループ')}。`,
+    },
+    motionTitle: 'モーション軽減',
+    motionHtml: `React コンポーネントは ${code('prefers-reduced-motion')} に従い、設定が変わるとそれに追従します。タッチスクリーンでのタップでホバーアニメーションが始まることはありません。`,
+    reducedMotion: {
+      loop: 'アイコンは自動再生されず、静止した最初のフレームのままです。',
+      'click-toggle':
+        'クリックすると、その間のアニメーションなしで、すぐにもう一方の状態に切り替わります。',
+      'click-replay': 'クリックはハンドラーに届きますが、アニメーションは再生されません。',
+      hover: 'ホバーしてもアニメーションは再生されません。',
+      'hover-replay': 'ホバーしてもアニメーションは再生されません。',
+      'hover-loop': 'ホバー中もアイコンは静止したままです。',
+    },
+  },
+
+  lottie: {
+    titles: (count: number) => [
+      `無料の Lottie アイコン：アニメーション JSON ${count} 個`,
+      '無料の Lottie アイコン',
+    ],
+    descriptions: (count: number) => [
+      `無料の Lottie アイコン ${count} 個を標準の Lottie JSON で提供、MIT ライセンス。lottie-web、dotLottie、React、React Native、iOS、Android、Flutter 用のコード付き。`,
+      `無料の Lottie アイコン ${count} 個（MIT ライセンス）。lottie-web、React、iOS、Android、Flutter 用のコード付き。`,
+    ],
+    title: '無料の Lottie アイコン',
+    crumb: 'Lottie アイコン',
+    datasetName: 'useAnimations アイコンカタログ',
+    datasetDescription: (count: number) =>
+      `${count} 個の Lottie アニメーションアイコンのメタデータとファイル URL：ID、タイトル、カテゴリ、キーワード、インタラクション、サイズ、再生時間。`,
+    badge: (count: number) => `${count} 個のアイコン · Lottie JSON · MIT ライセンス`,
+    intro:
+      'useAnimations のアイコンはすべて標準的な Lottie JSON アニメーションなので、Web の lottie-web をはじめ、lottie-ios、lottie-android、Flutter、React Native など、どの Lottie プレーヤーでも再生できます。ファイルは MIT ライセンスで無料、登録も不要です。CORS を有効にした固定の URL から配信しているので、直接読み込むことも、プロジェクトにダウンロードして使うこともできます。',
+    popular: '人気の Lottie アイコン',
+    allIcons: (count: number) => `全 ${count} 個のアイコン →`,
+    filesTitle: 'ファイルと URL',
+    filesIntroHtml: `各アイコンには、プレビューとダウンロードを載せた ${code('/icons/&lt;id&gt;')} のページがあります。ファイル本体は次のとおりです：`,
+    files: {
+      json: 'Lottie JSON アニメーション',
+      zip: 'JSON と静的 SVG',
+      svg: '各状態の静的 SVG',
+      catalog: '全アイコンのカタログ',
+    },
+    catalogHtml: (catalog: string, median: number) =>
+      `${link(catalog, 'icons.json')} には、すべてのアイコンの ID、タイトル、カテゴリ、キーワード、インタラクション、サイズ、再生時間、ファイル URL が載っています。スクリプトでキーワードからアイコンを選んだり、コーディングエージェントに選ばせたりするのに便利です。Lottie ファイルのサイズは中央値で ${median} kB です。`,
+    players: {
+      web: {
+        title: 'Web：lottie-web',
+        text: 'Airbnb が開発したリファレンスとなるプレーヤーです。CDN から読み込み、アイコンの URL を指定して SVG レンダラーを選びます。SVG レンダラーならアイコンがくっきり表示され、CSS で色も変えられます。ライトビルドはエクスプレッションを処理しないので、フルビルド（lottie.min.js）を使ってください。',
+        cssLabel: 'テキストの色に追従させる（SVG レンダラー）',
+      },
+      'web-interactions': {
+        title: 'Web：ホバーとクリックのインタラクション',
+        text: 'lottie-web は再生と停止はできますが、インタラクションは自分で組む必要があります。以下はメニューアイコンのクリックトグルに、モーション軽減への対応を加えた例です。どのインタラクションも同じパターンで書けます。下で紹介する React コンポーネントなら、これをすべて任せられます。',
+      },
+      dotlottie: {
+        title: 'Web：dotLottie Web コンポーネント',
+        text: 'LottieFiles のプレーヤーで、WebAssembly エンジンで canvas に描画し、.lottie ファイルだけでなく通常の Lottie JSON も再生できます。canvas ではファイルの色がそのまま使われるため、JSON の色を書き換えない限りアイコンは黒のままです。',
+        jsLabel: 'または JavaScript API：npm install @lottiefiles/dotlottie-web',
+      },
+      react: {
+        title: 'React：react-useanimations',
+        text: 'Lottie プレーヤーのインストールは不要です。パッケージには 8 kB の独自プレーヤーが入っていて、アイコンごとのインタラクションを再生し、テキストの色に追従し、モーション軽減の設定も尊重します。アイコンは個別のモジュールなので、インポートしたものだけがバンドルに含まれます。',
+      },
+      'react-native': {
+        title: 'React Native：lottie-react-native',
+        text: 'オフラインで使うなら require() で JSON をバンドルし、そうでなければ URL から読み込みます。',
+      },
+      ios: {
+        title: 'iOS：lottie-ios（SwiftUI）',
+        text: 'Swift Package Manager で https://github.com/airbnb/lottie-spm.git からパッケージを追加し、JSON をバンドルに入れるか、URL から読み込みます。',
+      },
+      android: {
+        title: 'Android：lottie-android（Jetpack Compose）',
+        text: 'com.airbnb.android:lottie-compose（View を使う場合は com.airbnb.android:lottie）を追加します。オフラインで使うなら JSON を res/raw に置き、LottieCompositionSpec.RawRes で読み込みます。',
+      },
+      flutter: {
+        title: 'Flutter：lottie',
+        text: 'lottie パッケージは、Android、iOS、Web、デスクトップで動く Pure Dart のプレーヤーです。',
+      },
+    },
+    expressionsTitle: 'エクスプレッションを使うアイコン',
+    expressionsHtml: (count: number) =>
+      `${count} 個のアイコンが After Effects のエクスプレッション（${code('loopOut')} または ${code('wiggle')}）を使っています。Web では ${code('lottie_light')} ではなく lottie-web のフルビルドで再生してください。ネイティブのプレーヤーはエクスプレッションを評価しないので、iOS、Android、Flutter では動きを確認するか、別のアイコンを選んでください。react-useanimations ならデザインどおりに再生されます。`,
+    faq: (f: {
+      count: number;
+      minSize: number;
+      maxSize: number;
+      medianSize: number;
+      expressions: string[];
+    }): Faq => [
+      {
+        question: 'これらの Lottie アイコンは商用利用も無料ですか？',
+        answer: `はい。全 ${f.count} 個の Lottie アイコンは MIT ライセンスです。個人・商用プロジェクトで使用、改変、再配布でき、クレジット表記も、ダウンロードのためのアカウントも必要ありません。`,
+      },
+      {
+        question: 'Lottie ファイルの形式は何ですか？',
+        answer: `シェイプレイヤーだけで構成された標準的な Lottie JSON（Bodymovin 形式）で、画像、フォント、外部アセットは含みません。各アイコンは 24 px または 32 px のアートボードで描かれ、どのサイズにも拡大縮小できます。ファイルサイズは ${f.minSize}〜${f.maxSize} kB（中央値 ${f.medianSize} kB）です。`,
+      },
+      {
+        question: 'React でアイコンを使うのに lottie-web は必要ですか？',
+        answer:
+          'いいえ。react-useanimations には依存関係のない 8 kB の独自プレーヤーが入っているので、パッケージを 1 つインストールして、必要なアイコンをインポートするだけです。lottie-web が必要なのは、素の Web ページやほかのフレームワークなど、React 以外で使う場合だけです。',
+      },
+      {
+        question: 'lottie-web のフルビルドが必要なアイコンは？',
+        answer: `${f.expressions.length} 個のアイコンが After Effects のエクスプレッション（loopOut または wiggle）を使っています：${list(f.expressions)}。Web では lottie-web のフルビルドが必要で、lottie_light はエクスプレッションを無視します。ネイティブのプレーヤー（lottie-ios、lottie-android、Flutter の lottie）もエクスプレッションを評価しないため、これらのアイコンは動きが異なる場合があります。`,
+      },
+      {
+        question: 'Lottie アイコンの色は変えられますか？',
+        answer:
+          'Web では、lottie-web の SVG レンダラーが色を属性として書き出すので、パスに CSS ルールを当てれば色を変えられます。ネイティブのプレーヤーでは動的プロパティの API を使います。iOS では ColorValueProvider、Android では LottieProperty.COLOR と STROKE_COLOR、Flutter では ValueDelegate.color です。',
+      },
+    ],
+    byCategory: 'カテゴリ別の Lottie アイコン',
+  },
+
+  shadcn: {
+    titles: (count: number) => [
+      `shadcn/ui 用アニメーションアイコン ${count} 個`,
+      'shadcn/ui 用アニメーションアイコン',
+    ],
+    descriptions: (count: number) => [
+      `shadcn/ui 用のアニメーションアイコン ${count} 個。shadcn CLI のコマンド 1 つで追加でき、ホバー・クリック・ループのマイクロインタラクション付き。MIT ライセンス、lottie-web 不要。`,
+      `shadcn/ui 用アニメーションアイコン ${count} 個。shadcn CLI のコマンド 1 つで追加でき、lottie-web は不要。MIT ライセンス。`,
+    ],
+    title: 'shadcn/ui 用アニメーションアイコン',
+    crumb: 'shadcn/ui',
+    popularList: '人気の shadcn/ui 用アニメーションアイコン',
+    badge: (count: number) => `${count} 個のコンポーネント · shadcn レジストリ · MIT ライセンス`,
+    intro:
+      'useAnimations のアイコンはすべて shadcn レジストリに登録されています。CLI のコマンド 1 つで、型付きの React コンポーネントがプロジェクトに追加されます。デザイン時に想定したホバー、クリック、ループのインタラクションも、モーション軽減への対応も、テーマに追従する色もそのままです。コードはほかの shadcn/ui コンポーネントと同じく、あなたのリポジトリに置かれます。',
+    addTitle: 'アイコンを追加する',
+    addIntro: 'アイコンのレジストリ URL を指定して shadcn CLI を実行します：',
+    namingHtml: `コンポーネント名は ${code('Animated')} + PascalCase にしたアイコン ID（${code('check-box')} → ${code('AnimatedCheckBox')}）で、${code('components/animations/&lt;id&gt;.tsx')} に追加されます。CLI は共通のラッパー ${code('components/use-animation.tsx')} も追加し、${code('react-useanimations')} をインストールします。このパッケージは独自のプレーヤーを持っているので、lottie-web は不要です。`,
+    namespaceTitle: 'レジストリの名前空間で短く書く',
+    namespaceHtml: `${code('components.json')} に一度レジストリを追加すれば、あとはアイコンを名前で、複数まとめて追加できます：`,
+    registryHtml: (registry: string) =>
+      `レジストリのインデックス ${link(registry, '/r/registry.json')} には、すべてのアイテムがタイトル、カテゴリ、インタラクションとともに載っています。`,
+    usageTitle: 'shadcn の Button で使う',
+    usageHtml: `コンポーネントは ${code('UseAnimations')} と同じ props を受け取ります。メニューアイコンのような切り替え型なら、${code('active')} を渡して状態はボタン側で持ちます。状態が変わるたびにアイコンがアニメーションします：`,
+    colorHtml: (docs: string) =>
+      `アイコンはテキストの色に追従するので、${code('text-primary')} や ${code('text-muted-foreground')} で色が変わり、ダークモードにも追加の対応は要りません。そのほかの props や使い方は${link(docs, 'ドキュメント')}を参照してください。`,
+    codeText: { closeMenu: 'メニューを閉じる', openMenu: 'メニューを開く' },
+    popular: '人気の shadcn/ui 用アイコン',
+    allIcons: (count: number) => `全 ${count} 個のアイコン →`,
+    popularNote: 'shadcn のコマンドは各アイコンのページに載っています。',
+    faq: (f: { count: number; version: string }): Faq => [
+      {
+        question: 'shadcn/ui 用のアニメーションアイコンは無料ですか？',
+        answer: `はい。全 ${f.count} 個のアイコンとコンポーネントのコードは MIT ライセンスで、個人・商用プロジェクトで使えます。レジストリの利用にアカウントや API キーは必要ありません。`,
+      },
+      {
+        question: 'shadcn CLI はプロジェクトに何を追加しますか？',
+        answer: `components/animations/<id>.tsx のアイコンコンポーネント、components/use-animation.tsx の共通プレーヤーラッパー UseAnimation（レジストリの依存関係として初回のみ）、そして npm の react-useanimations@^${f.version} です。パッケージに 8 kB の独自プレーヤーが入っているので、lottie-web は不要です。`,
+      },
+      {
+        question: 'コンポーネントは Next.js のサーバーコンポーネントで使えますか？',
+        answer:
+          'はい。コンポーネントには "use client" が付いていて、アニメーションはブラウザーでのみ描画されます。そのため、動的インポートや ssr: false なしで、サーバーコンポーネントやページからレンダリングできます。',
+      },
+      {
+        question: 'アイコンの見た目や動きは変えられますか？',
+        answer:
+          'コードはあなたのリポジトリにあるので、自由に変更できます。コンポーネントは UseAnimations の props（size、strokeColor、fillColor、interaction、active、autoplay、loop、speed）を受け取ります。アイコンはテキストの色に追従するので、text-primary や text-muted-foreground などの Tailwind クラスで色を変えられます。',
+      },
+    ],
+    byCategory: 'カテゴリから探す',
+  },
+};
diff --git a/website/src/i18n/messages/ja/taxonomy.ts b/website/src/i18n/messages/ja/taxonomy.ts
new file mode 100644
index 0000000..e445e97
--- /dev/null
+++ b/website/src/i18n/messages/ja/taxonomy.ts
@@ -0,0 +1,385 @@
+import type { Messages } from '../en';
+
+export const taxonomy: Messages['taxonomy'] = {
+  categories: {
+    Alerts: {
+      name: 'アラート',
+      title: 'アラートのアニメーションアイコン',
+      intro:
+        '警告の三角形、アラートの丸、停止標識のアイコンです。点滅するほど派手ではなく、それでも目に留まる程度にパルスします。入力エラーのあるフォーム項目の横、エラーバナーの先頭、ステータス列など、静止したアイコンだと読み飛ばされがちな場所に向いています。',
+      useCases: [
+        'フォーム項目の下に出すインラインのバリデーションエラー',
+        'ページ上部のエラー・警告バナー',
+        'デプロイやジョブのステータス表で失敗した行',
+        '削除など取り消せない操作の確認ダイアログ',
+        '障害発生中のシステムステータスページ',
+      ],
+    },
+    Notifications: {
+      name: '通知',
+      title: '通知ベルのアニメーションアイコン',
+      intro:
+        '新着があると揺れるベルと、ベルとミュート状態のベルを切り替えるアイコンです。ベルが軽く揺れることで未読件数に目が向き、切り替え型のアイコンはチャンネルやスレッドのミュートボタンとしてもそのまま使えます。',
+      useCases: [
+        'アプリヘッダーの通知センターボタン',
+        '新着メッセージで揺れる未読バッジ',
+        'チャンネルやスレッドのミュート切り替え',
+        'メール通知・プッシュ通知の設定',
+        'リマインダーやアラートの購読ボタン',
+      ],
+    },
+    Navigation: {
+      name: 'ナビゲーション',
+      title: 'ナビゲーション・矢印のアニメーションアイコン',
+      intro:
+        '閉じるボタンに変形するハンバーガーメニューのほか、ホバーすると向いている方向へ少し動く矢印、シェブロン、斜め矢印があります。ドロワーを開く、前に戻る、行を展開する、サイトの外へ移動するなど、その操作がどこへつながるのかがひと目でわかります。',
+      useCases: [
+        'モバイルで閉じるボタンに変わるハンバーガーメニュー',
+        'カルーセルやページネーションの前へ・次へボタン',
+        'アコーディオンやドロップダウンのシェブロン',
+        'ページトップへ戻る・下へスクロールの合図',
+        'サインイン・サインアウトのリンク',
+        '外部リンクの目印やサイドバーの開閉ボタン',
+      ],
+    },
+    Action: {
+      name: 'アクション',
+      title: 'アクションのアニメーションアイコン',
+      intro:
+        '保存、削除、ダウンロード、更新、いいね、ブックマーク、検索、設定といった、インターフェースの「動詞」にあたるアイコンです。それぞれが対応するクリックやホバーに反応して操作を確かめさせてくれます。投稿にいいねするとハートが塗りつぶされ、削除する前にはゴミ箱のふたが持ち上がります。',
+      useCases: [
+        'カード上のいいね・お気に入り・ブックマークボタン',
+        '操作の完了を伝えるダウンロード・アップロード・保存ボタン',
+        'ログインフォームのパスワード表示・非表示の切り替え',
+        'ダッシュボードの更新・同期ボタン',
+        'テーブルやファイル一覧の削除ボタン',
+        'クリアボタンに変わる検索フィールド',
+      ],
+    },
+    Content: {
+      name: 'コンテンツ',
+      title: 'ファイル・フォルダ・ユーザーのアニメーションアイコン',
+      intro:
+        'ファイル、フォルダ、本、メール、添付ファイル、人物のアイコンです。ユーザーが扱う対象を示すのに使え、追加・削除・チェック付きのバリエーションを使えば、リストやチームの管理画面に手応えのある反応を持たせられます。',
+      useCases: [
+        'ファイルマネージャーやドキュメント一覧',
+        '添付ボタンやクリップボードへのコピーボタン',
+        'メールクライアントの受信トレイ・アーカイブ画面',
+        'ユーザーの追加・削除操作があるチームメンバー一覧',
+        'ドキュメントやリンクの共有メニュー',
+      ],
+    },
+    Form: {
+      name: 'フォーム',
+      title: 'フォーム部品のアニメーションアイコン',
+      intro:
+        'チェック済みと未チェックの状態をアニメーションで切り替えるチェックボックス、ラジオボタン、トグルスイッチです。オンボーディングのチェックリストや設定画面など、素の input では味気ない場所で使えて、状態もひと目で読み取れます。',
+      useCases: [
+        '機能や好みを切り替える設定スイッチ',
+        'オンボーディングや ToDo のチェックリスト',
+        'アンケートや料金プラン選択の単一選択肢',
+        '利用規約・同意のチェックボックス',
+      ],
+    },
+    Media: {
+      name: 'メディア',
+      title: 'メディアプレーヤーのアニメーションアイコン',
+      intro:
+        '音声・動画プレーヤー向けの再生と一時停止、音量、マイク、カメラ、スキップ、シャッフルのアイコンです。切り替え型のアイコンは再生から一時停止、マイクからミュートのように 2 つの状態を行き来するので、ボタンは常に次のクリックで何が起きるかを示します。',
+      useCases: [
+        '音声・動画プレーヤーの再生・一時停止ボタン',
+        'ビデオ通話のミュート・ミュート解除',
+        'ミーティングアプリのカメラのオン・オフ切り替え',
+        'スキップ、リピート、シャッフルなどのプレイリスト操作',
+        'キャストや AirPlay のボタン',
+        'ポッドキャスト・音楽アプリの操作ボタン',
+      ],
+    },
+    'Text editing': {
+      name: 'テキスト編集',
+      title: 'テキスト編集のアニメーションアイコン',
+      intro:
+        'リッチテキストのツールバー向けの太字、斜体、下線、配置、リストのアイコンです。クリック時の短いアニメーションで書式が適用されたことを伝えられるので、テキスト自体の変化がわかりにくいエディターで役立ちます。',
+      useCases: [
+        'リッチテキストエディターのツールバー',
+        'コメントやメッセージの入力欄',
+        'CMS やブログ記事のエディター',
+        'Markdown エディターやメモアプリ',
+        'デザインツールのテキスト配置コントロール',
+      ],
+    },
+    Communication: {
+      name: 'コミュニケーション',
+      title: 'コミュニケーションのアニメーションアイコン',
+      intro:
+        '電話、チャットの吹き出し、送信ボタン、留守番電話、RSS のアイコンです。通話アイコンは着信・発信・不在着信・転送と通話履歴に必要な状態をそろえていて、送信アイコンはクリックするとメッセージを小さく送り出す動きを見せます。',
+      useCases: [
+        'チャットやコメントフォームの送信ボタン',
+        '着信・発信・不在着信を表示する通話履歴',
+        'お問い合わせ・サポートボタン',
+        'チャットウィジェットの起動ボタン',
+        'メンションやメールアドレスの入力欄',
+      ],
+    },
+    Devices: {
+      name: 'デバイス',
+      title: 'デバイスのアニメーションアイコン',
+      intro:
+        'スマートフォン、タブレット、モニター、スマートウォッチ、プリンターと、Wi-Fi、Bluetooth、バッテリーといった接続まわりのインジケーターです。デバイスの選択、レスポンシブプレビューの切り替え、接続状態の表示に使えます。',
+      useCases: [
+        'モバイル・タブレット・デスクトップのレスポンシブプレビュー切り替え',
+        'Wi-Fi や Bluetooth の接続状態',
+        'バッテリー残量・充電中の表示',
+        'アカウントのセキュリティ設定にあるデバイス一覧',
+        '請求書やレポートの印刷ボタン',
+      ],
+    },
+    Weather: {
+      name: '天気',
+      title: '天気のアニメーションアイコン',
+      intro:
+        '太陽、月、雲、雨、雪、雷、風のアイコンで、天気予報や時間帯に合わせた表示に使えます。太陽と月はライトモードとダークモードの切り替えスイッチにもぴったりです。',
+      useCases: [
+        '天気ウィジェットや予報カード',
+        'ライトテーマ・ダークテーマの切り替えスイッチ',
+        '旅行アプリの日の出・日の入り時刻',
+        'スマートホームのダッシュボードに出す気温',
+        'エネルギーや電力の状態表示',
+      ],
+    },
+    'Maps & location': {
+      name: '地図・位置情報',
+      title: '地図・位置情報のアニメーションアイコン',
+      intro:
+        'マップピン、ナビゲーション矢印、地球儀、ターゲット、錨のアイコンです。ホバーで落ちてくるピンは店舗検索や配送先住所を目立たせ、地球儀は言語や地域の切り替えに使えます。',
+      useCases: [
+        '店舗検索や住所の入力欄',
+        '現在地・経路案内ボタン',
+        '言語・地域の選択',
+        '配送・注文状況の追跡',
+        '旅行・予約アプリ',
+      ],
+    },
+    Commerce: {
+      name: 'EC・ショッピング',
+      title: 'EC・ショッピングのアニメーションアイコン',
+      intro:
+        'オンラインストア向けのショッピングカート、買い物袋、値札、ギフト、クレジットカード、配送トラックのアイコンです。カートに追加するアニメーションがあればトースト通知なしでもクリックが伝わり、トラックや荷物のアイコンは注文状況の表示にちょっとした動きを添えます。',
+      useCases: [
+        '商品カードのカートに追加ボタン',
+        'ストアヘッダーのカート・買い物袋ボタン',
+        '購入手続きと支払い方法の選択',
+        '割引・クーポン・セールのバッジ',
+        '配送・注文追跡のステップ表示',
+        'ギフトカードやギフトラッピングの選択肢',
+      ],
+    },
+    Charts: {
+      name: 'グラフ',
+      title: 'グラフのアニメーションアイコン',
+      intro:
+        'アクセス解析やレポート向けの棒グラフ、円グラフ、トレンド矢印のアイコンです。上昇・下降のトレンドアイコンを使えば指標が上がったのか下がったのかがひと目でわかるので、KPI カードや数値の推移を伝える更新履歴に合います。',
+      useCases: [
+        '指標の増減を示す KPI カード',
+        'アクセス解析・レポートのナビゲーション項目',
+        'ダッシュボードの空状態',
+        '財務やポートフォリオのサマリー',
+      ],
+    },
+    Development: {
+      name: '開発',
+      title: '開発者向けのアニメーションアイコン',
+      intro:
+        'コードの括弧、ターミナル、Git のブランチ、コミット、マージ、プルリクエストに加えて、サーバーとデータベースのアイコンがあります。Git やインフラの用語がそのまま UI に登場する開発者ツール、ドキュメントサイト、ステータスページ向けです。',
+      useCases: [
+        '開発者ツールでのプルリクエスト・マージ・ブランチの状態',
+        'ドキュメントのコードスニペット・埋め込みボタン',
+        'ランディングページのターミナル・CLI セクション',
+        'ステータスページでのサーバー・データベースの稼働状況',
+        'Command キーを使ったキーボードショートカットのヒント',
+      ],
+    },
+    'Design & layout': {
+      name: 'デザイン・レイアウト',
+      title: 'デザイン・レイアウトのアニメーションアイコン',
+      intro:
+        'エディターやビルダー向けのグリッド、カラム、レイヤー、切り抜き、ペンツール、カーソルのアイコンです。コンテンツを配置する、グリッド表示とテーブル表示を切り替える、描画ツールを選ぶといった操作のツールバーに合います。',
+      useCases: [
+        'グリッド・リスト・テーブル表示の切り替え',
+        'デザインツールやスライドツールのレイヤーパネル',
+        '画像エディターの切り抜き・カットツール',
+        'ページビルダーやレイアウトの選択',
+        'ドラッグして移動するためのハンドル',
+      ],
+    },
+    'Shapes & math': {
+      name: '図形・数学',
+      title: '図形・数学記号のアニメーションアイコン',
+      intro:
+        '円、正方形、三角形、六角形、八角形、割り算の記号です。描画アプリの図形ツール、電卓の演算子、図やオンボーディングの手順で使う主張しすぎない目印として使えます。',
+      useCases: [
+        'ホワイトボードや描画アプリの図形ツール',
+        '電卓や数式エディターの演算子',
+        '図の中の箇条書きやステップの目印',
+        'クイズやゲームの画面',
+      ],
+    },
+    Loading: {
+      name: 'ローディング',
+      title: 'ローディングのアニメーションアイコン',
+      intro:
+        '処理が続いている間ずっとループするスピナーやローダーです。リクエスト中の送信ボタンの中、読み込み中のコンテンツの代わり、全画面のスプラッシュなどに置けます。ユーザーがモーション軽減を設定している場合は静止します。',
+      useCases: [
+        'リクエストの完了を待つ送信ボタン',
+        'リストやグラフを読み込み中のプレースホルダー',
+        '無限スクロールや「もっと見る」のインジケーター',
+        '全画面のスプラッシュやページ遷移',
+        'ファイルのアップロードや処理の進行状況',
+      ],
+    },
+    'Social media': {
+      name: 'SNS',
+      title: 'SNS のアニメーションアイコン',
+      intro:
+        'SNS や、開発者・デザイナーが作品を共有するサービスのブランドアイコンです。X、Instagram、YouTube、Discord、Telegram、Figma などがあります。ホバーでアニメーションするので、フッターやプロフィールのリンクがクリックできることが伝わりやすくなります。',
+      useCases: [
+        'サイトフッターの SNS リンク',
+        'ブログ記事のシェアボタン',
+        '著者やチームメンバーのプロフィールリンク',
+        'チャットサーバーへのコミュニティ招待ボタン',
+        'SNS アカウントや開発者アカウントでのサインイン',
+      ],
+    },
+    Other: {
+      name: 'その他',
+      title: 'その他のアニメーションアイコン',
+      intro:
+        'ほかの大きなグループに属さないアイコンです。フィードバック用の顔文字、コーヒーカップ、時計、脈拍の線、下へスクロールの合図があります。下へスクロールのアイコンは、ヒーローセクションで続きがあることを示す定番のヒントです。',
+      useCases: [
+        'ヒーローセクション下部の下へスクロールのヒント',
+        'フィードバックウィジェットの笑顔・普通・悲しい顔',
+        'アクティビティや稼働状況のインジケーター',
+        '営業時間や時刻の選択',
+        '「コーヒーをおごる」などの支援リンク',
+      ],
+    },
+  },
+  interactions: {
+    loop: {
+      label: 'ループ',
+      title: 'ループするアニメーションアイコン',
+      intro:
+        '画面に表示されている間ずっと再生し続けるアイコンです。読み込み中、警告が出ている、ターミナルが入力を待っているなど、しばらく続く状態の表示に向いています。モーション軽減が有効な場合は最初のフレームで止まり、通常のアイコンとして読み取れます。',
+      useCases: [
+        'ローディングスピナーや進行状況のインジケーター',
+        '警告やエラーが続いている状態',
+        'ライブ配信中・録画中のインジケーター',
+        'ヒーローセクションの下へスクロールの合図',
+        '新着通知に注意を向ける目印',
+      ],
+      example:
+        'ループするアイコンは、ローディングスピナー、継続中のアラート、鳴っているベル、下へスクロールのヒントによく使われます。',
+      description:
+        '常に再生し続けます。モーション軽減が有効な場合は静止した最初のフレームのままです。',
+      reducedMotion:
+        'モーション軽減が有効な場合、アイコンは自動再生されず、静止した最初のフレームのままになります。',
+      plays: '常にループ再生する',
+    },
+    'click-toggle': {
+      label: 'クリックでトグル',
+      title: 'クリックで切り替わるアニメーションアイコン',
+      intro:
+        'クリックするたびに 2 つの状態の間をアニメーションで移り、その状態にとどまるアイコンです。オン・オフ切り替えの見た目の部分を担います。アイコンが常に現在の状態を表すので、aria-pressed や checked 属性と組み合わせれば、ボタンの意味が自然に伝わります。',
+      useCases: [
+        'ミュート・ミュート解除ボタン',
+        'パスワードの表示・非表示',
+        'ハンバーガーメニューと閉じるボタン',
+        '再生・一時停止の操作',
+        'いいね、スター、ブックマークの切り替え',
+        'チェックボックス、ラジオボタン、スイッチ',
+      ],
+      example:
+        'クリックで切り替わるアイコンは、ミュート／ミュート解除、パスワードの表示／非表示、メニュー／閉じる、再生／一時停止、いいねボタンによく使われます。',
+      description:
+        'クリックで 2 つの状態を切り替えます。モーション軽減が有効な場合はアニメーションせずに即座に切り替わります。',
+      reducedMotion:
+        'モーション軽減が有効な場合、クリックするとその間のアニメーションなしで、すぐにもう一方の状態に切り替わります。',
+      plays: 'クリックで 2 つの状態を切り替える',
+    },
+    'click-replay': {
+      label: 'クリックで再生',
+      title: 'クリックで動くアニメーションアイコン',
+      intro:
+        'クリックするたびに最初から 1 回再生されるアイコンで、操作が受け付けられたことをさりげなく伝えます。送信、保存、更新、ダウンロード、印刷、削除のように、状態を残さない一度きりの操作に合います。',
+      useCases: [
+        'チャットやコメントフォームの送信ボタン',
+        '保存・ダウンロード・アップロードボタン',
+        '更新・回転ボタン',
+        'カートに追加ボタン',
+        'エディターの書式設定ボタン',
+      ],
+      example:
+        'クリックで動くアイコンは、送信、保存、更新、ダウンロード、カートに追加、書式設定ボタンの操作確認によく使われます。',
+      description:
+        'クリックするたびに最初から 1 回再生します。モーション軽減が有効な場合は再生しません。',
+      reducedMotion:
+        'モーション軽減が有効な場合、クリックはハンドラーに届きますが、アニメーションは再生されません。',
+      plays: 'クリックのたびに最初から再生する',
+    },
+    hover: {
+      label: 'ホバー',
+      title: 'ホバーで動くアニメーションアイコン',
+      intro:
+        'ポインターが乗ると順方向に再生し、離れると逆再生するアイコンです。動きがカーソルに追従し、途中で止まったままになることがありません。ゴミ箱のふたが持ち上がる、設定の歯車が回る、フォルダが開くといった具合に、クリックした先を予告するナビゲーション項目やボタンに向いています。',
+      useCases: [
+        'サイドバーやナビゲーションメニューの項目',
+        'クリック前にふたが持ち上がる削除ボタン',
+        '設定やプロフィールへのリンク',
+        'ズームイン・ズームアウトの操作',
+        'フッターの SNS リンク',
+      ],
+      example:
+        'ホバーで動くアイコンは、ナビゲーション項目、削除ボタン、設定、ズーム操作、SNS リンクによく使われます。',
+      description: 'mouseenter で順方向に、mouseleave で逆方向に再生します。',
+      reducedMotion: 'モーション軽減が有効な場合、ホバーしてもアニメーションは再生されません。',
+      plays: 'ホバーで再生し、ポインターが離れると逆再生する',
+    },
+    'hover-replay': {
+      label: 'ホバーで再生',
+      title: 'ホバーで再生するアニメーションアイコン',
+      intro:
+        'ポインターが乗ると 1 回再生し、そのまま最後まで再生しきるアイコンです。ツールバーの上をすばやく横切っても、動きがガタつきません。矢印、ファイル、デバイス、天気、ブランドのアイコンなど、セットの大半がこの動きで、ホバーすると動き出します。',
+      useCases: [
+        '機能一覧や料金表',
+        '矢印付きのリンクや CTA ボタン',
+        'エディターやダッシュボードのツールバーボタン',
+        'ランディングページのグリッドに並ぶカード',
+        'フッターやお問い合わせへのリンク',
+      ],
+      example:
+        'ホバーで再生するアイコンは、矢印付きリンク、機能一覧、ツールバーボタン、ランディングページのカードに動きを添えるのによく使われます。',
+      description:
+        'モーション軽減が有効でなければ、mouseenter で 1 回再生します。離れても止まらず、再生中にもう一度乗っても最初からにはなりません。',
+      reducedMotion: 'モーション軽減が有効な場合、ホバーしてもアニメーションは再生されません。',
+      plays: 'ホバーで 1 回再生する',
+    },
+    'hover-loop': {
+      label: 'ホバーでループ',
+      title: 'ホバー中にループするアニメーションアイコン',
+      intro:
+        'ポインターが乗っている間はループし、離れたあとは今のサイクルを最後まで再生してから止まるアイコンです。動きの途中で止まることはありません。じっくり見てほしいリンク、主に SNS やコミュニティのアイコンに向いています。',
+      useCases: [
+        'ヘッダーやフッターの SNS リンク',
+        'コミュニティやチャットへの招待ボタン',
+        'ポートフォリオやプロフィールへのリンク',
+        '言語・地域の選択',
+      ],
+      example:
+        'ホバー中にループするアイコンは、SNS リンク、コミュニティへの招待、ポートフォリオへのリンク、言語の選択によく使われます。',
+      description:
+        'ホバー中はループし、mouseleave のあとは今のサイクルを最後まで再生します。モーション軽減が有効な場合は静止したままです。',
+      reducedMotion: 'モーション軽減が有効な場合、ホバー中もアイコンは静止したままです。',
+      plays: 'ホバー中にループ再生する',
+    },
+  },
+};
diff --git a/website/src/i18n/messages/ko/common.ts b/website/src/i18n/messages/ko/common.ts
new file mode 100644
index 0000000..84ca934
--- /dev/null
+++ b/website/src/i18n/messages/ko/common.ts
@@ -0,0 +1,46 @@
+// 모든 페이지에 공통으로 쓰이는 텍스트: 레이아웃, 헤더, 푸터, 이동 경로, FAQ, 복사 버튼.
+import type { Messages } from '../en';
+
+export const common: Messages['common'] = {
+  skipToContent: '본문으로 건너뛰기',
+  ogImageAlt: 'useAnimations: React, shadcn/ui, Lottie, SVG용 무료 애니메이션 아이콘',
+  homeLabel: 'useAnimations 홈',
+  mainNav: '주 메뉴',
+  browseIcons: '아이콘 둘러보기',
+  nav: {
+    icons: '아이콘',
+    categories: '카테고리',
+    documentation: '문서',
+    shadcn: 'shadcn',
+    lottie: 'Lottie 아이콘',
+    license: '라이선스',
+  },
+  footer: {
+    tagline: '인터랙션이 내장된 무료 애니메이션 아이콘. React용으로 만들었고 MIT 라이선스입니다.',
+    product: '제품',
+    developers: '개발자',
+    follow: '팔로우',
+    languages: '언어',
+    allIcons: '전체 아이콘',
+    categories: '카테고리',
+    interactions: '인터랙션',
+    lottieIcons: 'Lottie 아이콘',
+    shadcnIcons: 'shadcn/ui 아이콘',
+    documentation: '문서',
+    licencing: '라이선스 및 이용 약관',
+    shadcnRegistry: 'shadcn 레지스트리',
+    mitLicense: 'MIT 라이선스',
+    builtWith: 'Astro로 만든 사이트',
+  },
+  breadcrumb: '이동 경로',
+  crumbs: { icons: '아이콘', categories: '카테고리', interactions: '인터랙션' },
+  faq: '자주 묻는 질문',
+  copy: '복사',
+  copied: '복사됨',
+  pressCtrlC: 'Ctrl+C를 누르세요',
+  languageBanner: {
+    text: '이 페이지는 한국어로도 볼 수 있습니다.',
+    action: '한국어로 보기',
+    dismiss: '닫기',
+  },
+};
diff --git a/website/src/i18n/messages/ko/docs.ts b/website/src/i18n/messages/ko/docs.ts
new file mode 100644
index 0000000..022fc50
--- /dev/null
+++ b/website/src/i18n/messages/ko/docs.ts
@@ -0,0 +1,35 @@
+// 문서 페이지의 틀. 본문은 src/content/documentation.ko.md에 있습니다.
+import type { Messages } from '../en';
+
+export const docs: Messages['docs'] = {
+  title: '문서 — useAnimations',
+  description: (iconCount: number) =>
+    `React와 shadcn/ui에서 애니메이션 아이콘 ${iconCount}개를 쓰는 방법: 인터랙션, props, 색상, 파일, 접근성.`,
+  badge: '문서',
+  onThisPage: '이 페이지의 내용',
+  viewAsMarkdown: '마크다운으로 보기',
+  headline: 'useAnimations 문서',
+  summary: 'React와 shadcn/ui에서 useAnimations 애니메이션 아이콘을 사용하는 방법.',
+  crumb: '문서',
+  faq: [
+    {
+      question: 'useAnimations를 상업용 프로젝트에 무료로 쓸 수 있나요?',
+      answer: '네. 아이콘과 React 패키지는 MIT 라이선스이며, 출처 표기도 필요 없습니다.',
+    },
+    {
+      question: 'React에서 useAnimations 아이콘은 어떻게 쓰나요?',
+      answer:
+        'react-useanimations를 설치하고 UseAnimations와 아이콘(예: react-useanimations/lib/checkmark)을 가져온 뒤 <UseAnimations animation={checkmark} size={32} />를 렌더링하세요.',
+    },
+    {
+      question: '아이콘 색상은 어떻게 바꾸나요?',
+      answer:
+        '아이콘은 텍스트 색상을 따라갑니다. strokeColor와 fillColor, CSS color, 또는 path에 직접 스타일을 지정해 바꿀 수 있습니다.',
+    },
+    {
+      question: 'React 없이도 쓸 수 있나요?',
+      answer:
+        '패키지는 React용입니다. 하지만 모든 아이콘은 표준 Lottie JSON 파일이기도 해서 어떤 Lottie 플레이어(lottie-web, dotLottie, lottie-react-native, lottie-ios, lottie-android, Flutter)로도 재생할 수 있고, 정적 SVG로도 제공됩니다. 문서의 "React 없이 사용하기"와 useanimations.com/lottie-icons를 참고하세요.',
+    },
+  ],
+};
diff --git a/website/src/i18n/messages/ko/home.ts b/website/src/i18n/messages/ko/home.ts
new file mode 100644
index 0000000..6617a79
--- /dev/null
+++ b/website/src/i18n/messages/ko/home.ts
@@ -0,0 +1,174 @@
+// 홈 페이지(/)와 FAQ, 허브 링크. 개수·패키지 버전·링크 주소는 인수로 받아 한국어 문장 전체를 만듭니다.
+import type { Messages } from '../en';
+import type { FaqLinks, HomeFaq } from '../en/home';
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="underline underline-offset-4" href="${href}">${text}</a>`;
+
+// 한국어 명사는 수에 따라 형태가 바뀌지 않으므로 모든 수에 같은 형태를 씁니다.
+const iconCount = { other: '아이콘 {n}개' };
+
+export const home: Messages['home'] = {
+  title: '애니메이션 아이콘 라이브러리 — useAnimations',
+  description: (count: number) =>
+    `무료 마이크로 애니메이션 ${count}개: 호버·클릭·루프가 내장된 React·shadcn/ui·Lottie 애니메이션 아이콘 라이브러리. MIT.`,
+
+  hero: {
+    badge: (count: number) => `아이콘 ${count}개 · 의존성 0 · MIT`,
+    headline: { start: '', accent: '살아 움직이는', end: ' 아이콘.' },
+    h1: 'React, shadcn/ui, Lottie용 무료 애니메이션 아이콘',
+    intro: (count: number) =>
+      `호버, 클릭, 루프 마이크로 인터랙션이 내장된, 직접 디자인한 마이크로 애니메이션 ${count}개. React 컴포넌트로 쓰거나, shadcn으로 추가하거나, SVG와 Lottie JSON으로 내려받으세요. MIT 라이선스입니다.`,
+    browse: '아이콘 둘러보기',
+    fieldHint: '포인터를 아이콘 위로 움직여 보세요.',
+  },
+
+  numbers: {
+    label: '한눈에 보기',
+    icons: '애니메이션 아이콘',
+    interactions: '내장 인터랙션',
+    size: '플레이어 크기(gzip)',
+    dependencies: '의존성',
+  },
+
+  interactions: {
+    eyebrow: '내장 인터랙션',
+    title: '모든 아이콘이 움직이는 법을 압니다.',
+    intro:
+      '각 아이콘에는 디자인할 때 정한 인터랙션이 들어 있습니다. 넣기만 하면 바로 동작하고, prop 하나로 다른 인터랙션을 고를 수도 있습니다. 직접 해 보세요.',
+    demos: {
+      loop: '계속 재생됩니다. 로더와 상시 상태 표시에 어울립니다.',
+      'click-toggle': '메뉴와 닫기, 재생과 일시정지처럼 두 상태 사이를 전환합니다.',
+      'click-replay': '클릭할 때마다 처음부터 다시 재생되어 피드백을 줍니다.',
+      hover: '포인터가 들어오면 정방향, 나가면 역방향으로 재생됩니다.',
+      'hover-loop': '호버하는 동안 반복 재생되고, 벗어나면 현재 사이클을 마저 끝냅니다.',
+      'hover-replay': '포인터가 들어올 때마다 처음부터 한 번 재생됩니다.',
+    },
+  },
+
+  browser: {
+    eyebrow: '라이브러리',
+    title: (count: number) => `무료 애니메이션 아이콘 ${count}개`,
+    intro:
+      '호버하거나 클릭하면 재생됩니다. 아이콘을 열면 코드와 다운로드 파일(Lottie JSON, SVG, ZIP)을 볼 수 있습니다.',
+    search: '아이콘 검색',
+    searchPlaceholder: (count: number) =>
+      `아이콘 ${count}개 검색 — “eye”, “bell”, “arrow”처럼 영어로 입력하세요`,
+    interaction: '인터랙션',
+    allInteractions: '모든 인터랙션',
+    color: '아이콘 색상',
+    colors: {
+      text: '텍스트 색상',
+      indigo: '인디고',
+      red: '빨강',
+      amber: '앰버',
+      teal: '틸',
+      violet: '바이올렛',
+    },
+    customColor: '사용자 지정 색상',
+    size: '크기',
+    category: '카테고리',
+    all: '전체',
+    count: iconCount,
+    noMatch: '일치하는 아이콘이 없습니다.',
+    noMatchHintHtml: (href: string) =>
+      `다른 단어로 검색하거나 ${link(href, '아이콘을 제안해 주세요')}.`,
+  },
+
+  everywhere: {
+    eyebrow: '원하는 방식으로',
+    title: '설치하고, 가져오면 끝.',
+    intro:
+      '의존성 없는 React 컴포넌트, shadcn 레지스트리, 고정 URL로 내려받는 파일, 그리고 AI 에이전트가 읽을 수 있는 카탈로그를 제공합니다.',
+    docs: '문서 읽기 →',
+    tablist: '플랫폼',
+    tabs: { react: 'React', shadcn: 'shadcn', files: '파일', agents: '에이전트' },
+    codeText: {
+      afterAdding: '추가한 뒤',
+      files: '모든 아이콘을 SVG, 애니메이션(Lottie JSON), 둘을 묶은 ZIP으로 제공',
+    },
+  },
+
+  features: {
+    title: '가볍고, 접근성 있고, 스타일은 마음대로.',
+    colors: '내 색상을 따라갑니다',
+    colorsHtml: `아이콘은 ${code('currentColor')}를 사용하므로 텍스트 색상, 호버 상태, 다크 모드를 알아서 따라갑니다. prop, 클래스, 일반 CSS로 덮어쓸 수 있습니다.`,
+    tiny: '작게 설계했습니다',
+    tinyText: '내장 플레이어, 의존성 0. 아이콘 하나하나가 2 kB짜리 개별 모듈입니다.',
+    accessible: '기본으로 접근성 지원',
+    accessibleText:
+      '동작 줄이기 설정을 존중하고, 키보드 포커스에도 호버 애니메이션을 재생하며, 레이블을 지정하지 않으면 스크린 리더에 노출되지 않습니다.',
+    ssr: '서버 렌더링 지원',
+    ssrText:
+      'Next.js, Remix, Astro에서 안전하게 렌더링되는 클라이언트 컴포넌트입니다. 아이콘은 어디서든 가져올 수 있는 순수 데이터입니다.',
+    agents: '에이전트를 위한 설계',
+    agentsHtml: (iconsJson: string, llmsTxt: string) =>
+      `모든 아이콘의 키워드가 담긴 타입 있는 카탈로그, ${link(iconsJson, 'icons.json')}, ${link(llmsTxt, 'llms.txt')}, 마크다운 문서를 제공합니다.`,
+  },
+
+  browse: {
+    title: '알맞은 마이크로 애니메이션 찾기',
+    byCategory: '카테고리별로 보기',
+    byInteraction: '인터랙션별로 보기',
+    formats: '전체 아이콘과 포맷',
+  },
+
+  hubs: {
+    icons: '전체 애니메이션 아이콘',
+    categories: '아이콘 카테고리',
+    interactions: '인터랙션별 아이콘',
+    lottie: 'Lottie 아이콘(JSON)',
+    shadcn: 'shadcn/ui 애니메이션 아이콘',
+  },
+
+  faqTitle: '자주 묻는 질문',
+  faq: (f: { version: string; links: FaqLinks }): HomeFaq => [
+    {
+      question: '마이크로 애니메이션과 애니메이션 아이콘이란 무엇인가요?',
+      answer:
+        '마이크로 애니메이션은 사용자 동작에 반응하는 짧고 목적이 하나인 움직임입니다. 닫기 버튼으로 바뀌는 메뉴 아이콘, 게시물에 좋아요를 누르면 채워지는 하트, 새 알림이 오면 울리는 벨 같은 것들이죠. 애니메이션 아이콘은 그중 가장 흔한 형태입니다. 인터페이스가 즉각 반응하는 느낌을 주고, 추가 텍스트 없이도 상태 변화를 보여 줍니다.',
+    },
+    {
+      question: 'Lottie 파일과 SVG 파일은 무엇이 다른가요?',
+      answer:
+        'Lottie JSON 파일에는 애니메이션 전체가 들어 있어서 react-useanimations에 내장된 플레이어를 비롯해 어떤 Lottie 플레이어로도 재생할 수 있습니다. SVG 파일은 정지 상태의 아이콘 이미지로, 상태마다 하나씩(예: eye와 eye-off) 있습니다. 이메일, 문서, 디자인 도구, JavaScript를 쓸 수 없는 환경의 대체 이미지처럼 움직임이 없어야 하는 곳에 쓰세요.',
+    },
+    {
+      question: 'Next.js와 서버 렌더링에서도 동작하나요?',
+      answer:
+        "네. 컴포넌트에 'use client'가 지정되어 있고 애니메이션은 브라우저에서만 그리므로, 동적 import 없이 서버 컴포넌트와 Next.js, Remix, Astro 같은 SSR 프레임워크에서 렌더링할 수 있습니다. 아이콘 모듈은 순수 데이터라서 서버 컴포넌트에서 가져와 props로 넘길 수 있습니다.",
+      link: { href: f.links.serverRendering, label: 'Next.js와 서버 렌더링' },
+    },
+    {
+      question: '상업용 프로젝트에 아이콘을 써도 되나요?',
+      answer:
+        '네. 아이콘과 react-useanimations 패키지는 MIT 라이선스이므로 개인·상업용 작업에서 사용, 수정, 재배포할 수 있습니다. 출처 표기는 해 주시면 감사하지만 필수는 아닙니다.',
+      link: { href: f.links.licence, label: '라이선스 및 이용 약관' },
+    },
+    {
+      question: 'React 없이도 아이콘을 쓸 수 있나요?',
+      answer:
+        '네. 모든 아이콘은 표준 Lottie JSON 파일이라서 순수 JavaScript, Vue, Svelte, Angular, CMS에서는 lottie-web으로, iOS, Android, Flutter에서는 각 플랫폼의 Lottie 플레이어로 재생할 수 있습니다. Lottie 아이콘 페이지에 파일 URL과 인터랙션별 lottie-web 예제 코드가 있습니다.',
+      link: { href: f.links.lottie, label: 'Lottie 아이콘' },
+    },
+    {
+      question: '아이콘을 쓰면 번들 크기가 얼마나 늘어나나요?',
+      answer: `react-useanimations ${f.version}의 플레이어는 의존성 없이 gzip 기준 약 8 kB이고, 아이콘은 하나하나가 1~15 kB(중앙값 2 kB)의 개별 모듈이므로 번들에는 가져온 아이콘만 포함됩니다.`,
+    },
+  ],
+
+  cta: {
+    title: { start: '인터페이스에 ', accent: '생동감', end: '을 더하세요.' },
+    text: '무료이고 MIT 라이선스입니다. 개인·상업용 작업 모두에 쓸 수 있습니다.',
+    start: '시작하기',
+  },
+
+  schema: {
+    software: (count: number) =>
+      `호버, 클릭, 루프 인터랙션이 내장된 React 컴포넌트와 애니메이션 아이콘(Lottie) ${count}개. 의존성이 없습니다.`,
+    catalogName: 'useAnimations 아이콘 카탈로그',
+    catalog: (count: number) =>
+      `useAnimations 아이콘 ${count}개 전체의 id, 제목, 카테고리, 키워드, 인터랙션, Lottie JSON·SVG·ZIP URL, React import 문, shadcn 명령.`,
+  },
+};
diff --git a/website/src/i18n/messages/ko/hubs.ts b/website/src/i18n/messages/ko/hubs.ts
new file mode 100644
index 0000000..5375eb0
--- /dev/null
+++ b/website/src/i18n/messages/ko/hubs.ts
@@ -0,0 +1,182 @@
+// 카테고리·인터랙션 페이지(/categories/<slug>, /interactions/<slug>)의 문장. 사실(개수, 아이콘 이름,
+// 예시)을 받아 한국어 어순으로 문장을 만듭니다. Html로 끝나는 문자열에는 <code>, <a> 태그가 들어갑니다.
+import type { Interaction } from 'react-useanimations';
+import { listIn } from '../../format';
+import type { Messages } from '../en';
+import type { CategoryFacts, Faq, InteractionFacts } from '../en/hubs';
+
+const list = listIn('ko');
+const count = (n: number) => `${n}개`;
+
+/** 최대 `max`개의 이름, 넘치면 '외 N개'. */
+const titles = (items: string[], max = 12) =>
+  items.length > max ? `${items.slice(0, max).join(', ')} 외 ${items.length - max}개` : list(items);
+
+/** 예시 몇 개: 'Heart, Menu, Eye 등'. */
+const examples = (items: string[]) => `${items.slice(0, 3).join(', ')} 등`;
+
+/** 그룹이 여럿일 때 문장을 잇는 형태('…되고'). 마지막 그룹은 PLAYS의 종결형을 씁니다. */
+const PLAYS_AND: Record<Interaction, string> = {
+  loop: '계속 반복 재생되고',
+  'click-toggle': '클릭하면 두 상태 사이를 전환하고',
+  'click-replay': '클릭할 때마다 다시 재생되고',
+  hover: '호버하면 재생되었다가 포인터가 벗어나면 되돌아가고',
+  'hover-replay': '호버하면 한 번 재생되고',
+  'hover-loop': '호버하는 동안 반복 재생되고',
+};
+
+/** 정적 SVG 안내 문장, 없으면 빈 문자열. */
+const svgNote = (f: CategoryFacts) => {
+  if (f.withSvg === f.count) return ' 모든 아이콘에 정적 SVG도 있습니다.';
+  return f.withSvg ? ` 정적 SVG로도 제공되는 아이콘은 ${count(f.withSvg)}입니다.` : '';
+};
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const hubs: Messages['hubs'] = {
+  titleSuffix: ' — useAnimations',
+  iconCount: (n: number) => `아이콘 ${count(n)}`,
+
+  category: {
+    titles: (f: CategoryFacts) => [
+      `React·Lottie용 ${f.title}`,
+      `React용 ${f.title}`,
+      `무료 ${f.title}`,
+      f.title,
+    ],
+    descriptions: (f: CategoryFacts) => {
+      const ex = examples(f.titles);
+      return [
+        `무료 ${f.title} ${count(f.count)}: ${ex}. 호버·클릭·루프 마이크로 애니메이션, React·shadcn/ui·Lottie JSON 지원, MIT 라이선스.`,
+        `무료 ${f.title} ${count(f.count)}: ${ex}. React·shadcn/ui·Lottie JSON 지원, MIT 라이선스.`,
+        `무료 ${f.title} ${count(f.count)}: ${ex}. React·shadcn/ui·Lottie, MIT.`,
+        `무료 ${f.title} ${count(f.count)}: ${examples(f.titles.slice(0, 2))}. React·Lottie, MIT.`,
+        `무료 ${f.title} ${count(f.count)}. React·shadcn/ui·Lottie JSON 지원, MIT 라이선스.`,
+        `무료 ${f.title} ${count(f.count)}. React·shadcn/ui·Lottie, MIT.`,
+      ];
+    },
+    summary: (f: CategoryFacts) => {
+      const plays =
+        f.groups.length === 1
+          ? `아이콘 ${count(f.count)} 모두 ${f.groups[0].plays}.`
+          : `아이콘 ${count(f.count)} 중 ${f.groups
+              .map(({ interaction, count: n, plays: phrase }, i) =>
+                i === f.groups.length - 1
+                  ? `${count(n)}는 ${phrase}.`
+                  : `${count(n)}는 ${PLAYS_AND[interaction]},`
+              )
+              .join(' ')}`;
+      return `${plays} 각 아이콘은 React 컴포넌트, shadcn/ui 컴포넌트, Lottie JSON 애니메이션으로 제공되며, MIT 라이선스로 상업용 프로젝트에도 무료로 쓸 수 있습니다.${svgNote(f)}`;
+    },
+    faq: (f: CategoryFacts): Faq => {
+      const ex = f.example;
+      const n = f.expressions.length;
+      return [
+        {
+          question: `어떤 ${f.title}이 들어 있나요?`,
+          answer: `아이콘 ${count(f.count)}: ${titles(f.titles)}. 모두 MIT 라이선스로 개인·상업용 프로젝트에 무료로 쓸 수 있고, 출처 표기도 필요 없습니다.`,
+        },
+        {
+          question: `이 ${f.title}을 React에서 어떻게 쓰나요?`,
+          answer: `react-useanimations를 설치하고 import 문(${ex.importLine})을 추가한 뒤 <UseAnimations animation={${ex.exportName}} size={32} />를 렌더링하세요. 아이콘은 ${ex.interactionLabel} 인터랙션으로 재생되고 텍스트 색상을 따라갑니다. shadcn/ui를 쓴다면 대신 ${ex.shadcnCommand} 명령을 실행하세요.`,
+        },
+        {
+          question: `이 ${f.title}을 React 없이 쓸 수 있나요?`,
+          answer: `네. 각 아이콘은 ${f.site}/icons/<id>.json에 있는 Lottie JSON 파일(예: ${f.site}/icons/${ex.id}.json)이라 lottie-web, lottie-ios, lottie-android, Flutter의 lottie 패키지로 재생할 수 있습니다.${
+            f.withSvg ? ' 정적 SVG는 각 아이콘 페이지(영어)에서 받을 수 있습니다.' : ''
+          } ${
+            n
+              ? `${titles(f.expressions, 6)}에는 After Effects 익스프레션이 쓰였으므로, 웹에서는 lottie-web의 full 빌드가 필요합니다.`
+              : '익스프레션을 쓰는 아이콘이 없으므로 lottie-web의 light 빌드로 충분합니다.'
+          }`,
+        },
+      ];
+    },
+    badge: (n: number) => `아이콘 ${count(n)} · MIT 라이선스`,
+    allIcons: (name: string) => `${name} 아이콘 전체`,
+    whereToUse: '이런 곳에 쓰세요',
+    byInteraction: '인터랙션별',
+    addOne: '앱에 추가하기',
+    addOneHtml: (label: string, name: string) =>
+      `React에서는 ${code('react-useanimations')}를 설치하고 아이콘을 가져오면 됩니다. 아이콘은 별도 설정 없이 ${label} 인터랙션으로 재생됩니다. 이 카테고리의 다른 아이콘도 사용법이 같으니 ${code(name)}만 각 아이콘 페이지에 있는 이름으로 바꾸세요.`,
+    shadcnHtml: (href: string) =>
+      `${link(href, 'shadcn/ui')}에서는 CLI가 바로 쓸 수 있는 컴포넌트를 추가해 줍니다.`,
+    noReactHtml: (href: string) =>
+      `React를 쓰지 않나요? 각 아이콘은 ${code('/icons/&lt;id&gt;.json')}에 있는 Lottie JSON 파일입니다. 웹, iOS, Android, Flutter 플레이어는 ${link(href, 'Lottie 아이콘')} 페이지를 참고하세요.`,
+    more: '다른 카테고리',
+    allIconsButton: '전체 아이콘',
+  },
+
+  interaction: {
+    titles: (f: InteractionFacts) => [
+      `React·Lottie용 ${f.title}`,
+      `React용 ${f.title}`,
+      `무료 ${f.title}`,
+      f.title,
+    ],
+    descriptions: (f: InteractionFacts) => [
+      `무료 ${f.title} ${count(f.count)}: ${examples(f.titles)}. ${f.plays}. React·shadcn/ui·Lottie JSON 지원, MIT 라이선스.`,
+      `무료 ${f.title} ${count(f.count)}. ${f.plays}. React·shadcn/ui·Lottie JSON 지원, MIT 라이선스.`,
+      `무료 ${f.title} ${count(f.count)}. React·shadcn/ui·Lottie JSON 지원, MIT 라이선스.`,
+    ],
+    faq: (f: InteractionFacts): Faq => [
+      {
+        question: `${f.label} 인터랙션을 쓰는 아이콘은 무엇인가요?`,
+        answer: `아이콘 ${count(f.count)}: ${titles(f.titles, 15)}. ${f.example}`,
+      },
+      {
+        question: '사용자가 동작 줄이기를 설정했다면 어떻게 되나요?',
+        answer: `${f.reducedMotion} React 컴포넌트가 prefers-reduced-motion을 읽고 설정이 바뀌면 바로 반영하므로, 따로 코드를 작성할 필요가 없습니다.`,
+      },
+      {
+        question: '아이콘의 인터랙션은 어떻게 바꾸나요?',
+        answer: `모든 아이콘은 디자인된 인터랙션으로 재생됩니다. 다른 아이콘에 이 동작을 적용하려면 interaction prop에 "${f.interaction}" 값을 전달하고, 다른 동작으로 바꾸려면 다른 값('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay')을 전달하세요. 재생 방식은 autoplay, loop, speed props로 조정합니다.${
+          f.interaction === 'click-toggle'
+            ? ' 상태를 직접 제어하려면 active={isOn}을 전달하고 onClick에서 값을 갱신하세요. 그러면 클릭만으로는 아이콘이 전환되지 않습니다.'
+            : ''
+        }`,
+      },
+    ],
+    allIcons: (label: string) => `${label} 아이콘 전체`,
+    behaviour: '동작 방식',
+    hoverNote:
+      ' 터치스크린에서 탭해도 호버 애니메이션은 시작되지 않으며, 아이콘이 포커스 가능한 요소 안에 있으면 키보드 포커스로도 재생됩니다.',
+    handled: '이 모든 처리는 React 컴포넌트가 맡으니, 아이콘만 고르면 됩니다.',
+    whereToUse: '이런 곳에 쓰세요',
+    byCategory: '카테고리별',
+    useInReact: 'React에서 사용하기',
+    overrideHtml: `여기에 있는 아이콘은 기본적으로 이 인터랙션으로 재생됩니다. 다른 아이콘도 ${code('interaction')} prop을 전달하면 같은 인터랙션을 쓸 수 있습니다.`,
+    normallyUses: (title: string, interaction: string) =>
+      `${title}의 기본 인터랙션은 '${interaction}'`,
+    extra: {
+      loop: '루프 아이콘은 자동 재생되며, 스크롤해서 화면 밖으로 나가면 일시정지합니다. speed로 속도를 늦추거나, loop={false}로 한 번만 재생하거나, autoplay={false}로 정지 상태로 둘 수 있습니다.',
+      'click-toggle':
+        '클릭하면 아이콘이 알아서 전환됩니다. 상태와 동기화하려면 active를 전달하세요. active가 바뀔 때마다 아이콘이 애니메이션되고, 클릭만으로는 더 이상 전환되지 않습니다.',
+      'click-replay':
+        'render prop으로 아이콘을 실제 버튼 안에 넣으면 포커스를 받을 수 있고 스크린 리더도 읽어 줍니다. 직접 작성한 onClick이 먼저 실행되며, event.preventDefault()를 호출하면 애니메이션을 건너뜁니다.',
+      hover:
+        'render prop으로 아이콘을 링크나 버튼 안에 넣으세요. 그러면 요소가 키보드 포커스를 받을 때도 애니메이션이 재생되고, 터치스크린에서 탭해도 재생되지 않습니다.',
+      'hover-replay':
+        '아이콘만이 아니라 카드나 링크 전체에 호버하게 하세요. render prop을 쓰면 이벤트가 직접 만든 요소에 걸리고, 키보드 포커스로도 애니메이션이 재생됩니다.',
+      'hover-loop':
+        'render prop을 쓰면 키보드 포커스를 포함해 링크 전체가 루프를 시작합니다. 속도는 speed로 바꿉니다.',
+    },
+    codeText: {
+      halfSpeed: '절반 속도',
+      playsOnce: '한 번 재생하고 멈춤',
+      staticFrame: '정지된 첫 프레임',
+      endState: 'true면 끝 상태를 표시',
+      closeMenu: '메뉴 닫기',
+      openMenu: '메뉴 열기',
+      download: '다운로드',
+      archive: '보관',
+      weeklyGrowth: '주간 성장률',
+    },
+    docsHtml: (docs: string, lottie: string) =>
+      `모든 props는 ${link(docs, '문서')}에 정리되어 있습니다. React 밖에서는 아이콘이 Lottie JSON 파일이며, lottie-web으로 인터랙션을 재현하는 방법은 ${link(lottie, 'Lottie 아이콘')} 페이지에서 볼 수 있습니다.`,
+    other: '다른 인터랙션',
+    browseByCategory: '카테고리별로 보기',
+  },
+};
diff --git a/website/src/i18n/messages/ko/index.ts b/website/src/i18n/messages/ko/index.ts
new file mode 100644
index 0000000..bf33c1d
--- /dev/null
+++ b/website/src/i18n/messages/ko/index.ts
@@ -0,0 +1,11 @@
+import type { Messages } from '../en';
+import { common } from './common';
+import { docs } from './docs';
+import { home } from './home';
+import { hubs } from './hubs';
+import { islands } from './islands';
+import { licence } from './licence';
+import { pages } from './pages';
+import { taxonomy } from './taxonomy';
+
+export const messages: Messages = { common, taxonomy, hubs, home, docs, licence, pages, islands };
diff --git a/website/src/i18n/messages/ko/islands.ts b/website/src/i18n/messages/ko/islands.ts
new file mode 100644
index 0000000..39f1627
--- /dev/null
+++ b/website/src/i18n/messages/ko/islands.ts
@@ -0,0 +1,52 @@
+// React 아일랜드(components/*.tsx) 안의 텍스트. '{name}' 자리표시자는 컴포넌트가 채웁니다.
+import type { Messages } from '../en';
+
+export const islands: Messages['islands'] = {
+  iconCard: {
+    hints: {
+      loop: '루프',
+      'click-toggle': '클릭',
+      'click-replay': '클릭',
+      hover: '호버',
+      'hover-loop': '호버',
+      'hover-replay': '호버',
+    },
+  },
+  iconDialog: {
+    hints: {
+      loop: '자동으로 재생됩니다',
+      'click-toggle': '클릭하면 전환됩니다',
+      'click-replay': '클릭하면 다시 재생됩니다',
+      hover: '호버하면 재생되고, 벗어나면 되돌아갑니다',
+      'hover-loop': '호버하는 동안 반복 재생됩니다',
+      'hover-replay': '호버하면 재생됩니다',
+    },
+    preview: '{title} 미리보기',
+    colors: '미리보기 색상',
+    color: '색상 {color}',
+    textColor: '텍스트 색상',
+    interaction: '인터랙션',
+    duration: '재생 시간',
+    seconds: '{seconds}초',
+    import: '가져오기',
+    close: '닫기',
+    code: '코드',
+    tabs: { react: 'React', shadcn: 'shadcn', files: '파일' },
+    copy: '복사',
+    download: '다운로드',
+    iconPage: '아이콘 페이지 →',
+  },
+  interactionDemo: {
+    click: '카드를 클릭해 보세요',
+    loop: '자동으로 재생됩니다',
+    hover: '카드에 마우스를 올려 보세요',
+  },
+  mobileMenu: {
+    menu: '메뉴',
+    nav: '주 메뉴',
+  },
+  themeToggle: {
+    toLight: '라이트 테마로 전환',
+    toDark: '다크 테마로 전환',
+  },
+};
diff --git a/website/src/i18n/messages/ko/licence.ts b/website/src/i18n/messages/ko/licence.ts
new file mode 100644
index 0000000..4961776
--- /dev/null
+++ b/website/src/i18n/messages/ko/licence.ts
@@ -0,0 +1,26 @@
+// 라이선스 페이지(/licencing-and-terms). LICENSE 원문은 모든 언어에서 영어로 표시됩니다.
+import type { Messages } from '../en';
+
+export const licence: Messages['licence'] = {
+  title: '라이선스 및 이용 약관 — useAnimations',
+  description:
+    'MIT 라이선스: useAnimations 아이콘과 react-useanimations는 개인·상업용 사용·재배포 무료, 출처 표기 불필요.',
+  name: '라이선스 및 이용 약관',
+  heading: '자유롭게 쓰세요. MIT 라이선스입니다.',
+  introHtml: (mitHref: string) =>
+    `useAnimations 아이콘과 <code>react-useanimations</code> 패키지는 <a href="${mitHref}">MIT 라이선스</a>로 공개되어 있습니다.`,
+  canDo: '할 수 있는 일',
+  canDoItemsHtml: [
+    '개인·상업용 웹사이트, 앱, 제품에서 아이콘을 <strong>사용</strong>할 수 있습니다.',
+    '색상, 크기, 타이밍, 움직임 자체를 바꾸는 등 자유롭게 <strong>수정</strong>할 수 있습니다.',
+    '아이콘 팩, 템플릿, 테마, UI 키트, 컴포넌트 레지스트리에 포함하는 것을 비롯해 <strong>재배포</strong>할 수 있습니다.',
+  ],
+  attribution: '출처 표기',
+  attributionText:
+    '필수는 아니지만, 해 주시면 감사하겠습니다. 파일 자체를 재배포할 때는 라이선스 고지를 유지하고, 출처를 밝히고 싶다면 다음 문구를 사용하세요.',
+  credit: (link: string) => `애니메이션 아이콘 제공: ${link}`,
+  noWarranty: '보증 없음',
+  noWarrantyText: '아이콘과 코드는 어떠한 종류의 보증도 없이 "있는 그대로" 제공됩니다.',
+  licenseText: '라이선스 원문',
+  bindingNote: '아래 라이선스 원문은 영어 원본이며, 법적 효력은 이 영어 원본에 있습니다.',
+};
diff --git a/website/src/i18n/messages/ko/pages.ts b/website/src/i18n/messages/ko/pages.ts
new file mode 100644
index 0000000..66be137
--- /dev/null
+++ b/website/src/i18n/messages/ko/pages.ts
@@ -0,0 +1,239 @@
+// 허브 페이지: /icons, /categories, /interactions, /lottie-icons, /shadcn-animated-icons.
+// Html로 끝나는 문자열에는 <code>, <a>, <strong> 태그가 들어갑니다. 링크 주소는 인수로 받습니다.
+import type { Messages } from '../en';
+import type { Faq } from '../en/hubs';
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+const strong = (text: string) => `<strong class="font-medium text-fg">${text}</strong>`;
+
+export const pages: Messages['pages'] = {
+  icons: {
+    titles: (count: number) => [
+      `카테고리별 애니메이션 아이콘 ${count}개`,
+      `애니메이션 아이콘 ${count}개`,
+    ],
+    descriptions: (count: number, categories: number) => [
+      `useAnimations 아이콘 전체를 한 페이지에: ${categories}개 카테고리, 무료 애니메이션 아이콘 ${count}개. React·shadcn/ui·Lottie JSON·SVG 지원, MIT.`,
+      `무료 애니메이션 아이콘 ${count}개를 카테고리 ${categories}개로 정리. React·shadcn/ui·Lottie JSON·SVG, MIT.`,
+    ],
+    title: '전체 애니메이션 아이콘',
+    badge: (count: number) => `아이콘 ${count}개 · MIT 라이선스`,
+    introHtml: (browser: string) =>
+      `세트의 모든 아이콘을 카테고리별로 모았습니다. 아이콘을 열면 실시간 미리보기, React·shadcn/ui 코드, Lottie JSON·SVG·ZIP 다운로드가 있습니다(아이콘 페이지는 영어로 제공됩니다). 키워드로 검색하고 애니메이션을 바로 재생해 보려면 ${link(browser, '아이콘 브라우저')}를 이용하세요.`,
+    categoriesNav: '카테고리',
+    byInteraction: '인터랙션별:',
+    categoryLink: (count: number, name: string) => `${name} 아이콘 ${count}개 →`,
+  },
+
+  categories: {
+    titles: (categories: number) => [
+      `애니메이션 아이콘 카테고리 ${categories}개`,
+      '애니메이션 아이콘 카테고리',
+    ],
+    descriptions: (icons: number, categories: number) => [
+      `무료 애니메이션 아이콘 ${icons}개를 카테고리 ${categories}개로: 내비게이션, 액션, 미디어, 로딩, 소셜 미디어 등. React·shadcn/ui·Lottie용.`,
+      `무료 애니메이션 아이콘 ${icons}개, 카테고리 ${categories}개. React·shadcn/ui·Lottie용, MIT.`,
+    ],
+    title: '애니메이션 아이콘 카테고리',
+    badge: (icons: number, categories: number) => `아이콘 ${icons}개 · 카테고리 ${categories}개`,
+    introHtml: (interactions: string) =>
+      `useAnimations의 모든 아이콘은 내비게이션 화살표와 미디어 컨트롤부터 로더와 소셜 미디어 로고까지, 한 카테고리에 속합니다. 카테고리를 열면 해당 아이콘 전체와 쓰기 좋은 곳, 추가하는 코드를 볼 수 있습니다. ${link(interactions, '인터랙션')}별로 둘러볼 수도 있습니다.`,
+    iconCount: (n: number) => `아이콘 ${n}개`,
+  },
+
+  interactions: {
+    titles: ['마이크로 인터랙션: 호버·클릭·루프 아이콘', '마이크로 인터랙션 아이콘'],
+    descriptions: (icons: number, interactions: number) => [
+      `애니메이션 아이콘 ${icons}개, 마이크로 인터랙션 ${interactions}가지: 루프, 클릭 토글, 클릭 재생, 호버, 호버 재생, 호버 루프. 동작 줄이기 지원.`,
+      `애니메이션 아이콘 ${icons}개와 마이크로 인터랙션 ${interactions}가지: 루프, 클릭, 호버. 동작 줄이기 지원.`,
+    ],
+    title: '애니메이션 아이콘 인터랙션',
+    badge: (interactions: number, icons: number) =>
+      `인터랙션 ${interactions}가지 · 아이콘 ${icons}개`,
+    introHtml: `모든 아이콘에는 디자인할 때 정한 마이크로 인터랙션이 있습니다. 반복 재생되거나, 클릭하면 전환되거나 다시 재생되거나, 호버하면 재생됩니다. React 컴포넌트가 이를 연결하고 동작 줄이기 설정을 존중하며, <code class="font-mono text-base text-fg">interaction</code> prop으로 어떤 아이콘이든 다른 인터랙션으로 바꿀 수 있습니다.`,
+    iconCount: (n: number) => `아이콘 ${n}개`,
+    chooseTitle: '인터랙션 고르기',
+    chooseHtml: {
+      loop: (href: string) =>
+        `${strong('지속되는 상태')}(로딩, 활성 경고 등): ${link(href, '루프')}.`,
+      'click-toggle': (href: string) =>
+        `${strong('켜기·끄기 컨트롤')}(음소거, 메뉴, 비밀번호 표시 등): ${link(href, '클릭 토글')}. 상태를 직접 제어하려면 ${code('active')}를 쓰세요.`,
+      'click-replay': (href: string) =>
+        `${strong('일회성 동작')}(보내기, 저장, 새로고침 등): ${link(href, '클릭 재생')}.`,
+      hover: (href: string) =>
+        `${strong('링크가 무엇을 여는지 암시할 때')}: ${link(href, '호버')}. 포인터가 벗어나면 되돌아갑니다.`,
+      'hover-replay': (href: string) =>
+        `${strong('포인터가 훑고 지나가는 툴바와 목록')}: ${link(href, '호버 재생')}. 스스로 끝까지 재생됩니다.`,
+      'hover-loop': (href: string) =>
+        `${strong('오래 머물러 보게 하는 링크')}(소셜 아이콘 등): ${link(href, '호버 루프')}.`,
+    },
+    motionTitle: '동작 줄이기',
+    motionHtml: `React 컴포넌트는 ${code('prefers-reduced-motion')}을 따르고 설정이 바뀌면 바로 반영합니다. 터치스크린에서 탭해도 호버 애니메이션은 시작되지 않습니다.`,
+    reducedMotion: {
+      loop: '아이콘이 자동 재생되지 않고 정지된 첫 프레임에 머뭅니다.',
+      'click-toggle': '클릭하면 중간 애니메이션 없이 바로 다른 상태로 전환됩니다.',
+      'click-replay': '클릭은 여전히 핸들러에 전달되지만 애니메이션은 재생되지 않습니다.',
+      hover: '호버해도 애니메이션이 재생되지 않습니다.',
+      'hover-replay': '호버해도 애니메이션이 재생되지 않습니다.',
+      'hover-loop': '호버하는 동안에도 아이콘이 움직이지 않습니다.',
+    },
+  },
+
+  lottie: {
+    titles: (count: number) => [
+      `무료 Lottie 아이콘: 애니메이션 JSON 아이콘 ${count}개`,
+      `무료 Lottie 아이콘 ${count}개`,
+      '무료 Lottie 아이콘',
+    ],
+    descriptions: (count: number) => [
+      `무료 Lottie 아이콘 ${count}개, 순수 Lottie JSON, MIT. lottie-web, dotLottie, React, React Native, iOS, Android, Flutter 예제 코드.`,
+      `무료 Lottie 아이콘 ${count}개(Lottie JSON, MIT). 웹, React, iOS, Android, Flutter용 예제 코드 포함.`,
+    ],
+    title: '무료 Lottie 아이콘',
+    crumb: 'Lottie 아이콘',
+    datasetName: 'useAnimations 아이콘 카탈로그',
+    datasetDescription: (count: number) =>
+      `Lottie 애니메이션 아이콘 ${count}개의 메타데이터와 파일 URL: id, 제목, 카테고리, 키워드, 인터랙션, 크기, 재생 시간.`,
+    badge: (count: number) => `아이콘 ${count}개 · Lottie JSON · MIT 라이선스`,
+    intro:
+      'useAnimations의 모든 아이콘은 표준 Lottie JSON 애니메이션이라서 웹의 lottie-web, lottie-ios, lottie-android, Flutter, React Native 등 어떤 Lottie 플레이어로도 재생할 수 있습니다. 파일은 MIT 라이선스로 무료이고 가입도 필요 없습니다. CORS가 허용된 고정 URL로 제공되므로 직접 불러오거나 프로젝트에 내려받아 쓰면 됩니다.',
+    popular: '인기 Lottie 아이콘',
+    allIcons: (count: number) => `아이콘 ${count}개 전체 →`,
+    filesTitle: '파일과 URL',
+    filesIntroHtml: `각 아이콘에는 미리보기와 다운로드가 있는 ${code('/icons/&lt;id&gt;')} 페이지가 있습니다. 파일은 다음과 같습니다.`,
+    files: {
+      json: 'Lottie JSON 애니메이션',
+      zip: 'JSON과 정적 SVG',
+      svg: '상태별 정적 SVG',
+      catalog: '전체 아이콘 카탈로그',
+    },
+    catalogHtml: (catalog: string, median: number) =>
+      `${link(catalog, 'icons.json')}에는 모든 아이콘의 id, 제목, 카테고리, 키워드, 인터랙션, 크기, 재생 시간, 파일 URL이 들어 있어서 스크립트에서 키워드로 아이콘을 고르거나 코딩 에이전트에게 고르게 하기 쉽습니다. Lottie 파일 크기의 중앙값은 ${median} kB입니다.`,
+    players: {
+      web: {
+        title: '웹: lottie-web',
+        text: 'Airbnb가 만든 레퍼런스 플레이어입니다. CDN에서 불러와 아이콘 URL을 지정하고 SVG 렌더러를 선택하세요. SVG 렌더러를 쓰면 아이콘이 선명하게 유지되고 CSS로 색을 바꿀 수 있습니다. light 빌드는 익스프레션을 건너뛰므로 full 빌드(lottie.min.js)를 쓰세요.',
+        cssLabel: '텍스트 색상 따라가기(SVG 렌더러)',
+      },
+      'web-interactions': {
+        title: '웹: 호버·클릭 인터랙션',
+        text: 'lottie-web은 재생과 정지만 할 뿐, 인터랙션은 직접 구현해야 합니다. 아래는 동작 줄이기를 지원하는 menu 아이콘의 클릭 토글입니다. 다른 인터랙션도 모두 같은 패턴을 따르며, 아래의 React 컴포넌트는 이 모든 것을 대신 처리해 줍니다.',
+      },
+      dotlottie: {
+        title: '웹: dotLottie 웹 컴포넌트',
+        text: 'LottieFiles의 플레이어로, WebAssembly 엔진으로 캔버스에 렌더링하며 .lottie 파일뿐 아니라 일반 Lottie JSON도 재생합니다. 캔버스는 파일의 색상을 그대로 쓰므로, JSON의 색을 바꾸지 않으면 아이콘은 검은색으로 표시됩니다.',
+        jsLabel: '또는 JavaScript API: npm install @lottiefiles/dotlottie-web',
+      },
+      react: {
+        title: 'React: react-useanimations',
+        text: '별도의 Lottie 플레이어를 설치할 필요가 없습니다. 패키지에 8 kB짜리 자체 플레이어가 있어서 각 아이콘의 인터랙션을 재생하고, 텍스트 색상을 따라가며, 동작 줄이기 설정을 존중합니다. 아이콘마다 별도 모듈이라 가져온 아이콘만 번들에 포함됩니다.',
+      },
+      'react-native': {
+        title: 'React Native: lottie-react-native',
+        text: '오프라인에서 쓰려면 require()로 JSON을 번들에 포함하고, 아니면 URL에서 불러오세요.',
+      },
+      ios: {
+        title: 'iOS: lottie-ios (SwiftUI)',
+        text: 'Swift Package Manager로 https://github.com/airbnb/lottie-spm.git 패키지를 추가한 뒤, JSON을 번들에 넣거나 URL에서 불러오세요.',
+      },
+      android: {
+        title: 'Android: lottie-android (Jetpack Compose)',
+        text: 'com.airbnb.android:lottie-compose(뷰 기반이라면 com.airbnb.android:lottie)를 추가하세요. 오프라인에서 쓰려면 JSON을 res/raw에 넣고 LottieCompositionSpec.RawRes로 불러옵니다.',
+      },
+      flutter: {
+        title: 'Flutter: lottie',
+        text: 'lottie 패키지는 Android, iOS, 웹, 데스크톱을 지원하는 순수 Dart 플레이어입니다.',
+      },
+    },
+    expressionsTitle: '익스프레션을 쓰는 아이콘',
+    expressionsHtml: (count: number) =>
+      `아이콘 ${count}개에 After Effects 익스프레션(${code('loopOut')} 또는 ${code('wiggle')})이 쓰였습니다. 웹에서는 ${code('lottie_light')}가 아닌 lottie-web의 full 빌드로 재생하세요. 네이티브 플레이어는 익스프레션을 평가하지 않으므로 iOS, Android, Flutter에서는 직접 테스트하거나 다른 아이콘을 고르세요. react-useanimations는 디자인된 그대로 재생합니다.`,
+    faq: (f: {
+      count: number;
+      minSize: number;
+      maxSize: number;
+      medianSize: number;
+      expressions: string[];
+    }): Faq => [
+      {
+        question: '이 Lottie 아이콘을 상업적으로 무료로 쓸 수 있나요?',
+        answer: `네. Lottie 아이콘 ${f.count}개 모두 MIT 라이선스입니다. 개인·상업용 프로젝트에서 사용, 수정, 재배포할 수 있고, 출처 표기도 다운로드용 계정도 필요 없습니다.`,
+      },
+      {
+        question: 'Lottie 파일은 어떤 포맷인가요?',
+        answer: `셰이프 레이어로만 이루어진 표준 Lottie JSON(Bodymovin 포맷)입니다. 이미지, 폰트, 외부 에셋은 없습니다. 각 아이콘은 24 px 또는 32 px 아트보드에 그려져 어떤 크기로도 확대·축소되며, 파일 크기는 ${f.minSize}~${f.maxSize} kB, 중앙값 ${f.medianSize} kB입니다.`,
+      },
+      {
+        question: 'React에서 아이콘을 쓰려면 lottie-web이 필요한가요?',
+        answer:
+          '아니요. react-useanimations에는 의존성 없는 8 kB짜리 자체 플레이어가 있으므로, 패키지 하나를 설치하고 필요한 아이콘만 가져오면 됩니다. lottie-web은 React 밖, 즉 일반 웹 페이지나 다른 프레임워크에서만 필요합니다.',
+      },
+      {
+        question: 'lottie-web의 full 빌드가 필요한 아이콘은 무엇인가요?',
+        answer: `아이콘 ${f.expressions.length}개에 After Effects 익스프레션(loopOut 또는 wiggle)이 쓰였습니다: ${f.expressions.join(', ')}. 웹에서는 lottie-web의 full 빌드가 필요하며, lottie_light는 익스프레션을 무시합니다. 네이티브 플레이어(lottie-ios, lottie-android, Flutter의 lottie)도 익스프레션을 평가하지 않으므로 이 아이콘들은 움직임이 다를 수 있습니다.`,
+      },
+      {
+        question: 'Lottie 아이콘의 색상을 바꿀 수 있나요?',
+        answer:
+          '웹에서는 lottie-web의 SVG 렌더러가 색상을 속성으로 쓰기 때문에 path에 CSS 규칙을 적용하면 색이 바뀝니다. 네이티브 플레이어에서는 동적 속성 API를 씁니다. iOS는 ColorValueProvider, Android는 LottieProperty.COLOR와 STROKE_COLOR, Flutter는 ValueDelegate.color입니다.',
+      },
+    ],
+    byCategory: '카테고리별 Lottie 아이콘',
+  },
+
+  shadcn: {
+    titles: (count: number) => [
+      `shadcn/ui용 애니메이션 아이콘: 컴포넌트 ${count}개`,
+      'shadcn/ui용 애니메이션 아이콘',
+      'shadcn/ui 애니메이션 아이콘',
+    ],
+    descriptions: (count: number) => [
+      `shadcn/ui용 애니메이션 아이콘 ${count}개. shadcn CLI 명령 하나로 추가. 호버·클릭·루프 마이크로 인터랙션, MIT, lottie-web 불필요.`,
+      `shadcn/ui용 애니메이션 아이콘 ${count}개. CLI 명령 하나로 추가하고, lottie-web 없이 동작. MIT.`,
+    ],
+    title: 'shadcn/ui용 애니메이션 아이콘',
+    crumb: 'shadcn/ui',
+    popularList: '인기 shadcn/ui 애니메이션 아이콘',
+    badge: (count: number) => `컴포넌트 ${count}개 · shadcn 레지스트리 · MIT 라이선스`,
+    intro:
+      'useAnimations의 모든 아이콘은 shadcn 레지스트리에 있습니다. CLI 명령 하나로 타입이 지정된 React 컴포넌트가 프로젝트에 추가되며, 디자인된 호버·클릭·루프 인터랙션, 동작 줄이기 지원, 테마를 따라가는 색상이 함께 들어갑니다. 다른 shadcn/ui 컴포넌트처럼 코드는 내 저장소에 들어갑니다.',
+    addTitle: '아이콘 추가하기',
+    addIntro: '아이콘의 레지스트리 URL로 shadcn CLI를 실행하세요.',
+    namingHtml: `컴포넌트 이름은 ${code('Animated')} + PascalCase로 쓴 아이콘 id(${code('check-box')} → ${code('AnimatedCheckBox')})이고, ${code('components/animations/&lt;id&gt;.tsx')}에 생성됩니다. CLI는 공용 래퍼 ${code('components/use-animation.tsx')}도 추가하고 ${code('react-useanimations')}를 설치합니다. 이 패키지에 자체 플레이어가 있으므로 lottie-web은 필요 없습니다.`,
+    namespaceTitle: '레지스트리 네임스페이스로 짧게 쓰기',
+    namespaceHtml: `${code('components.json')}에 레지스트리를 한 번만 추가하면, 이후에는 이름으로 여러 아이콘을 한꺼번에 추가할 수 있습니다.`,
+    registryHtml: (registry: string) =>
+      `레지스트리 인덱스 ${link(registry, '/r/registry.json')}에는 모든 항목의 제목, 카테고리, 인터랙션이 나열되어 있습니다.`,
+    usageTitle: 'shadcn Button 안에서 쓰기',
+    usageHtml: `컴포넌트는 ${code('UseAnimations')}와 같은 props를 받습니다. menu 아이콘 같은 토글이라면 ${code('active')}를 전달하고 상태는 버튼에서 관리하세요. 값이 바뀔 때마다 아이콘이 애니메이션됩니다.`,
+    colorHtml: (docs: string) =>
+      `아이콘은 텍스트 색상을 따라가므로 ${code('text-primary')}나 ${code('text-muted-foreground')}로 색을 바꿀 수 있고, 다크 모드에도 따로 할 일이 없습니다. 다른 props와 패턴은 ${link(docs, '문서')}에 있습니다.`,
+    codeText: { closeMenu: '메뉴 닫기', openMenu: '메뉴 열기' },
+    popular: 'shadcn/ui 인기 아이콘',
+    allIcons: (count: number) => `아이콘 ${count}개 전체 →`,
+    popularNote: '각 아이콘 페이지에 shadcn 명령이 나와 있습니다.',
+    faq: (f: { count: number; version: string }): Faq => [
+      {
+        question: 'shadcn/ui 애니메이션 아이콘은 무료인가요?',
+        answer: `네. 아이콘 ${f.count}개와 컴포넌트 코드 모두 MIT 라이선스로 개인·상업용 프로젝트에 쓸 수 있습니다. 레지스트리에는 계정도 API 키도 필요 없습니다.`,
+      },
+      {
+        question: 'shadcn CLI는 프로젝트에 무엇을 추가하나요?',
+        answer: `components/animations/<id>.tsx의 아이콘 컴포넌트, components/use-animation.tsx의 공용 UseAnimation 플레이어 래퍼(레지스트리 의존성으로 한 번만), 그리고 npm의 react-useanimations@^${f.version}입니다. 패키지에 8 kB짜리 자체 플레이어가 있으므로 lottie-web은 필요 없습니다.`,
+      },
+      {
+        question: 'Next.js 서버 컴포넌트에서도 동작하나요?',
+        answer:
+          '네. 컴포넌트에 "use client"가 지정되어 있고 애니메이션은 브라우저에서만 그리므로, 동적 import나 ssr: false 없이 서버 컴포넌트와 페이지에서 렌더링할 수 있습니다.',
+      },
+      {
+        question: '아이콘의 모양과 움직임을 바꿀 수 있나요?',
+        answer:
+          '코드는 내 저장소에 있는 내 코드입니다. 컴포넌트는 UseAnimations의 props(size, strokeColor, fillColor, interaction, active, autoplay, loop, speed)를 받습니다. 아이콘은 텍스트 색상을 따라가므로 text-primary나 text-muted-foreground 같은 Tailwind 클래스로 색을 바꿀 수 있습니다.',
+      },
+    ],
+    byCategory: '카테고리별로 보기',
+  },
+};
diff --git a/website/src/i18n/messages/ko/taxonomy.ts b/website/src/i18n/messages/ko/taxonomy.ts
new file mode 100644
index 0000000..4aca8e4
--- /dev/null
+++ b/website/src/i18n/messages/ko/taxonomy.ts
@@ -0,0 +1,385 @@
+// 카테고리와 인터랙션의 한국어 표기. 키는 영어(카탈로그 이름, 인터랙션 값) 그대로 둡니다.
+import type { Messages } from '../en';
+
+export const taxonomy: Messages['taxonomy'] = {
+  categories: {
+    Alerts: {
+      name: '경고',
+      title: '경고 애니메이션 아이콘',
+      intro:
+        '경고 삼각형, 경고 원, 정지 표지판 아이콘이 깜빡이지 않고 눈에 띌 만큼만 맥동합니다. 정지된 아이콘은 스크롤하다 놓치기 쉬운 곳, 예를 들어 검증에 실패한 폼 필드 옆, 오류 배너의 맨 앞, 상태 열에 두세요.',
+      useCases: [
+        '폼 필드 아래의 인라인 검증 오류',
+        '페이지 상단의 오류·경고 배너',
+        '배포나 작업 상태 표에서 실패한 행',
+        '삭제처럼 되돌릴 수 없는 작업의 확인 대화상자',
+        '장애 발생 시의 시스템 상태 페이지',
+      ],
+    },
+    Notifications: {
+      name: '알림',
+      title: '알림 벨 애니메이션 아이콘',
+      intro:
+        '새 활동이 있으면 울리거나 벨과 벨 끄기 상태 사이를 전환하는 벨 아이콘입니다. 벨이 짧게 흔들리면 읽지 않은 개수에 시선이 가고, 토글형 아이콘은 채널이나 스레드의 알림 끄기 버튼으로도 쓸 수 있습니다.',
+      useCases: [
+        '앱 헤더의 알림 센터 버튼',
+        '새 메시지가 오면 울리는 읽지 않음 배지',
+        '채널이나 스레드의 알림 끄기·켜기 스위치',
+        '이메일·푸시 알림 설정',
+        '리마인더와 알림 구독 버튼',
+      ],
+    },
+    Navigation: {
+      name: '내비게이션',
+      title: '내비게이션·화살표 애니메이션 아이콘',
+      intro:
+        '닫기 버튼으로 바뀌는 햄버거 메뉴, 그리고 호버하면 가리키는 방향으로 살짝 움직이는 화살표, 셰브론, 모서리 화살표입니다. 드로어 열기, 뒤로 가기, 행 펼치기, 사이트 나가기처럼 컨트롤이 어디로 이어지는지 분명하게 보여 줍니다.',
+      useCases: [
+        '모바일에서 닫기 버튼으로 바뀌는 햄버거 메뉴',
+        '캐러셀과 페이지네이션의 이전·다음 버튼',
+        '아코디언과 드롭다운의 셰브론',
+        '맨 위로 가기, 아래로 스크롤 안내',
+        '로그인·로그아웃 링크',
+        '외부 링크 표시와 사이드바 토글',
+      ],
+    },
+    Action: {
+      name: '액션',
+      title: '액션 애니메이션 아이콘',
+      intro:
+        '저장, 삭제, 다운로드, 새로고침, 좋아요, 북마크, 검색, 설정처럼 인터페이스의 동사에 해당하는 아이콘입니다. 각 아이콘이 해당 클릭이나 호버에 반응해 동작을 확인해 줍니다. 게시물에 좋아요를 누르면 하트가 채워지고, 삭제하기 전에는 휴지통 뚜껑이 열립니다.',
+      useCases: [
+        '카드의 좋아요·즐겨찾기·북마크 버튼',
+        '동작을 확인해 주는 다운로드·업로드·저장 버튼',
+        '로그인 폼의 비밀번호 표시·숨기기 토글',
+        '대시보드의 새로고침·동기화 버튼',
+        '표와 파일 목록의 삭제 버튼',
+        '지우기 버튼으로 바뀌는 검색 필드',
+      ],
+    },
+    Content: {
+      name: '콘텐츠',
+      title: '파일·폴더·사용자 애니메이션 아이콘',
+      intro:
+        '파일, 폴더, 책, 메일, 첨부 파일, 사람 아이콘입니다. 사용자가 다루는 대상을 표시하고, 추가·삭제·체크 변형 덕분에 목록과 팀 관리 화면이 즉각 반응하는 느낌을 줍니다.',
+      useCases: [
+        '파일 관리자와 문서 목록',
+        '첨부 파일 버튼과 클립보드 복사 버튼',
+        '메일 클라이언트의 받은편지함·보관함 화면',
+        '사용자 추가·삭제가 있는 팀원 목록',
+        '문서와 링크 공유 메뉴',
+      ],
+    },
+    Form: {
+      name: '폼',
+      title: '폼 컨트롤 애니메이션 아이콘',
+      intro:
+        '체크된 상태와 해제된 상태 사이를 애니메이션으로 전환하는 체크박스, 라디오 버튼, 토글 스위치입니다. 온보딩 체크리스트나 설정 화면처럼 기본 입력 요소가 밋밋해 보이는 곳에 쓰면서도, 상태는 한눈에 읽을 수 있습니다.',
+      useCases: [
+        '기능과 환경설정의 설정 스위치',
+        '온보딩·할 일 체크리스트',
+        '설문과 요금제 선택의 단일 선택 옵션',
+        '약관·동의 체크박스',
+      ],
+    },
+    Media: {
+      name: '미디어',
+      title: '미디어 플레이어 애니메이션 아이콘',
+      intro:
+        '오디오·비디오 플레이어를 위한 재생과 일시정지, 볼륨, 마이크, 카메라, 건너뛰기, 셔플 아이콘입니다. 토글형 아이콘은 재생에서 일시정지로, 마이크에서 음소거로 두 상태 사이를 전환하므로, 버튼은 항상 클릭했을 때 일어날 일을 보여 줍니다.',
+      useCases: [
+        '오디오·비디오 플레이어의 재생·일시정지 버튼',
+        '화상 통화의 음소거·음소거 해제 컨트롤',
+        '회의 앱의 카메라 켜기·끄기 토글',
+        '건너뛰기, 반복, 셔플 같은 재생 목록 컨트롤',
+        '캐스트와 AirPlay 버튼',
+        '팟캐스트·음악 앱 컨트롤',
+      ],
+    },
+    'Text editing': {
+      name: '텍스트 편집',
+      title: '텍스트 편집 애니메이션 아이콘',
+      intro:
+        '리치 텍스트 툴바를 위한 굵게, 기울임꼴, 밑줄, 정렬, 목록 아이콘입니다. 텍스트 자체의 변화가 미묘한 편집기에서, 짧은 클릭 애니메이션이 서식이 적용됐음을 확인해 줍니다.',
+      useCases: [
+        '리치 텍스트 에디터 툴바',
+        '댓글·메시지 작성창',
+        'CMS와 블로그 글 편집기',
+        '마크다운·메모 앱',
+        '디자인 도구의 텍스트 정렬 컨트롤',
+      ],
+    },
+    Communication: {
+      name: '커뮤니케이션',
+      title: '커뮤니케이션 애니메이션 아이콘',
+      intro:
+        '전화, 말풍선, 보내기 버튼, 음성 메일, RSS 아이콘입니다. 통화 아이콘은 통화 기록에 필요한 수신, 발신, 부재중, 착신 전환 상태를 모두 갖추고 있고, 보내기 아이콘은 클릭할 때 메시지를 가볍게 날려 보냅니다.',
+      useCases: [
+        '채팅·댓글 폼의 보내기 버튼',
+        '수신·발신·부재중 통화가 있는 통화 기록',
+        '문의·고객 지원 버튼',
+        '채팅 위젯 실행 버튼',
+        '멘션과 이메일 주소 입력 필드',
+      ],
+    },
+    Devices: {
+      name: '기기',
+      title: '기기 애니메이션 아이콘',
+      intro:
+        '휴대폰, 태블릿, 모니터, 스마트워치, 프린터와 함께 그 주변의 연결 상태를 나타내는 Wi-Fi, 블루투스, 배터리 아이콘입니다. 기기 선택기, 반응형 미리보기 전환, 연결 상태 표시에 어울립니다.',
+      useCases: [
+        '모바일·태블릿·데스크톱 반응형 미리보기 전환',
+        'Wi-Fi·블루투스 연결 상태',
+        '배터리·충전 표시',
+        '계정 보안 설정의 기기 목록',
+        '청구서와 보고서의 인쇄 버튼',
+      ],
+    },
+    Weather: {
+      name: '날씨',
+      title: '날씨 애니메이션 아이콘',
+      intro:
+        '일기예보나 시간대에 따라 바뀌는 화면을 위한 해, 달, 구름, 비, 눈, 번개, 바람 아이콘입니다. 해와 달은 라이트 모드·다크 모드 전환 스위치로도 자연스럽게 쓸 수 있습니다.',
+      useCases: [
+        '날씨 위젯과 예보 카드',
+        '라이트·다크 테마 전환 스위치',
+        '여행 앱의 일출·일몰 시각',
+        '스마트 홈 대시보드의 온도 표시',
+        '에너지·전원 상태 표시',
+      ],
+    },
+    'Maps & location': {
+      name: '지도·위치',
+      title: '지도·위치 애니메이션 아이콘',
+      intro:
+        '지도 핀, 내비게이션 화살표, 지구본, 과녁, 닻 아이콘입니다. 호버하면 떨어지는 핀은 매장 찾기나 배송 주소를 돋보이게 하고, 지구본은 언어·지역 전환 버튼으로 잘 어울립니다.',
+      useCases: [
+        '매장 찾기와 주소 입력 필드',
+        '현재 위치·길찾기 버튼',
+        '언어·지역 선택기',
+        '배송·주문 추적',
+        '여행·예약 앱',
+      ],
+    },
+    Commerce: {
+      name: '커머스',
+      title: '쇼핑몰 애니메이션 아이콘',
+      intro:
+        '온라인 쇼핑몰을 위한 장바구니, 쇼핑백, 가격표, 선물, 신용카드, 배송 트럭 아이콘입니다. 장바구니 담기 애니메이션은 토스트 없이도 클릭을 확인해 주고, 트럭과 상자 아이콘은 주문 상태에 생기를 더합니다.',
+      useCases: [
+        '상품 카드의 장바구니 담기 버튼',
+        '쇼핑몰 헤더의 장바구니·쇼핑백 버튼',
+        '결제와 결제 수단 선택',
+        '할인·쿠폰·세일 배지',
+        '배송·주문 추적 단계',
+        '기프트 카드와 선물 포장 옵션',
+      ],
+    },
+    Charts: {
+      name: '차트',
+      title: '차트 애니메이션 아이콘',
+      intro:
+        '분석과 리포트를 위한 막대 차트, 원형 차트, 추세 화살표입니다. 상승·하락 추세 아이콘은 지표가 올랐는지 내렸는지 한눈에 보여 주므로 KPI 카드나 수치 변경 내역에 잘 맞습니다.',
+      useCases: [
+        '지표의 상승·하락을 보여 주는 KPI 카드',
+        '분석·리포트 메뉴 항목',
+        '대시보드의 빈 상태 화면',
+        '금융·포트폴리오 요약',
+      ],
+    },
+    Development: {
+      name: '개발',
+      title: '개발자 애니메이션 아이콘',
+      intro:
+        '코드 괄호, 터미널, Git 브랜치, 커밋, 머지, 풀 리퀘스트, 그리고 서버와 데이터베이스 아이콘입니다. Git과 인프라 용어가 인터페이스의 일부인 개발자 도구, 문서 사이트, 상태 페이지를 위해 만들었습니다.',
+      useCases: [
+        '개발자 도구의 풀 리퀘스트·머지·브랜치 상태',
+        '문서의 코드 스니펫·임베드 버튼',
+        '랜딩 페이지의 터미널·CLI 섹션',
+        '상태 페이지의 서버·데이터베이스 상태',
+        'Command 키가 들어간 단축키 안내',
+      ],
+    },
+    'Design & layout': {
+      name: '디자인·레이아웃',
+      title: '디자인·레이아웃 애니메이션 아이콘',
+      intro:
+        '편집기와 빌더를 위한 그리드, 열, 레이어, 자르기, 펜 도구, 커서 아이콘입니다. 콘텐츠를 배치하거나, 그리드 보기와 표 보기를 전환하거나, 그리기 도구를 고르는 툴바에 어울립니다.',
+      useCases: [
+        '그리드·목록·표 보기 전환',
+        '디자인·슬라이드 도구의 레이어 패널',
+        '이미지 편집기의 자르기·잘라내기 도구',
+        '페이지 빌더와 레이아웃 선택기',
+        '드래그해서 옮기는 핸들',
+      ],
+    },
+    'Shapes & math': {
+      name: '도형·수학',
+      title: '도형·수학 애니메이션 아이콘',
+      intro:
+        '원, 사각형, 삼각형, 육각형, 팔각형과 나눗셈 기호입니다. 그리기 앱의 도형 도구, 계산기의 연산자, 다이어그램이나 온보딩 단계의 중립적인 표시로 쓸 수 있습니다.',
+      useCases: [
+        '화이트보드·그리기 앱의 도형 도구',
+        '계산기와 수식 편집기의 연산자',
+        '다이어그램의 글머리 기호와 단계 표시',
+        '퀴즈·게임 인터페이스',
+      ],
+    },
+    Loading: {
+      name: '로딩',
+      title: '로딩 애니메이션 아이콘',
+      intro:
+        '작업이 진행되는 동안 계속 반복되는 스피너와 로더입니다. 요청이 처리되는 동안 제출 버튼 안에, 아직 로딩 중인 콘텐츠 자리에, 또는 전체 화면 스플래시에 넣으세요. 사용자가 동작 줄이기를 설정했다면 움직이지 않습니다.',
+      useCases: [
+        '요청 응답을 기다리는 제출 버튼',
+        '목록이나 차트가 로딩되는 동안의 플레이스홀더',
+        '무한 스크롤과 더 보기 표시',
+        '전체 화면 스플래시와 라우트 전환',
+        '파일 업로드·처리 진행 상황',
+      ],
+    },
+    'Social media': {
+      name: '소셜 미디어',
+      title: '소셜 미디어 애니메이션 아이콘',
+      intro:
+        '소셜 네트워크, 그리고 개발자와 디자이너가 작업을 공유하는 서비스의 브랜드 아이콘입니다. X, Instagram, YouTube, Discord, Telegram, Figma 등이 있습니다. 호버하면 움직이므로 푸터와 프로필 링크가 클릭할 수 있는 요소로 느껴집니다.',
+      useCases: [
+        '사이트 푸터의 소셜 링크',
+        '블로그 글의 공유 버튼',
+        '작성자·팀 프로필 링크',
+        '채팅 서버 커뮤니티 초대 버튼',
+        '소셜·개발자 계정으로 로그인',
+      ],
+    },
+    Other: {
+      name: '기타',
+      title: '기타 애니메이션 아이콘',
+      intro:
+        '더 큰 그룹에 속하지 않는 아이콘입니다. 피드백용 이모지 얼굴, 커피잔, 시계, 맥박 선, 아래로 스크롤 안내가 있습니다. 아래로 스크롤 아이콘은 히어로 섹션 아래에 내용이 더 있다는 것을 알리는 흔한 장치입니다.',
+      useCases: [
+        '히어로 섹션 하단의 아래로 스크롤 안내',
+        '피드백 위젯의 웃는·무표정·슬픈 얼굴',
+        '활동·가동 시간 표시',
+        '영업시간과 시간 선택기',
+        '커피 한 잔 후원 같은 후원 링크',
+      ],
+    },
+  },
+  interactions: {
+    loop: {
+      label: '루프',
+      title: '루프 애니메이션 아이콘',
+      intro:
+        '화면에 보이는 동안 계속 재생되는 아이콘입니다. 로딩 중, 경고가 활성화된 상태, 입력을 기다리는 터미널처럼 지속되는 상태에 어울립니다. 동작 줄이기가 설정되어 있으면 첫 프레임에서 멈추며, 평범한 아이콘으로 읽힙니다.',
+      useCases: [
+        '로딩 스피너와 진행 표시',
+        '활성화된 경고·오류 상태',
+        '라이브·녹화 중 표시',
+        '히어로 섹션의 아래로 스크롤 안내',
+        '새 알림을 알리는 주목 표시',
+      ],
+      example:
+        '루프 아이콘은 주로 로딩 스피너, 활성 경고, 울리는 벨, 아래로 스크롤 안내에 쓰입니다.',
+      description: '계속 재생됩니다. 동작 줄이기가 설정되어 있으면 정지된 첫 프레임에 머뭅니다.',
+      reducedMotion:
+        '동작 줄이기가 설정되어 있으면 아이콘이 자동 재생되지 않고 정지된 첫 프레임에 머뭅니다.',
+      plays: '계속 반복 재생됩니다',
+    },
+    'click-toggle': {
+      label: '클릭 토글',
+      title: '클릭 토글 애니메이션 아이콘',
+      intro:
+        '클릭할 때마다 두 상태 사이를 애니메이션으로 전환하고 그 상태에 머무는 아이콘으로, 켜기·끄기 컨트롤의 상태를 눈으로 보여 줍니다. 아이콘이 항상 현재 상태를 보여 주므로 aria-pressed나 checked 속성과 함께 쓰면 버튼만으로 의미가 전달됩니다.',
+      useCases: [
+        '음소거·음소거 해제 버튼',
+        '비밀번호 표시·숨기기 필드',
+        '햄버거 메뉴와 닫기 버튼',
+        '재생·일시정지 컨트롤',
+        '좋아요·별표·북마크 토글',
+        '체크박스, 라디오 버튼, 스위치',
+      ],
+      example:
+        '클릭 토글 아이콘은 주로 음소거/해제, 비밀번호 표시/숨기기, 메뉴/닫기, 재생/일시정지, 좋아요 버튼에 쓰입니다.',
+      description:
+        '클릭하면 두 상태 사이를 전환합니다. 동작 줄이기가 설정되어 있으면 즉시 전환됩니다.',
+      reducedMotion:
+        '동작 줄이기가 설정되어 있으면 클릭할 때 중간 애니메이션 없이 바로 다른 상태로 전환됩니다.',
+      plays: '클릭하면 두 상태 사이를 전환합니다',
+    },
+    'click-replay': {
+      label: '클릭 재생',
+      title: '클릭 애니메이션 아이콘',
+      intro:
+        '클릭할 때마다 처음부터 한 번 재생되어, 동작이 처리됐음을 작게 확인해 주는 아이콘입니다. 보내기, 저장, 새로고침, 다운로드, 인쇄, 삭제처럼 상태를 남기지 않는 일회성 동작에 어울립니다.',
+      useCases: [
+        '채팅·댓글 폼의 보내기 버튼',
+        '저장·다운로드·업로드 버튼',
+        '새로고침·회전 버튼',
+        '장바구니 담기 버튼',
+        '편집기의 텍스트 서식 버튼',
+      ],
+      example:
+        '클릭 아이콘은 주로 보내기, 저장, 새로고침, 다운로드, 장바구니 담기, 서식 버튼의 동작을 확인해 줍니다.',
+      description:
+        '클릭할 때마다 처음부터 한 번 재생됩니다. 동작 줄이기가 설정되어 있으면 재생되지 않습니다.',
+      reducedMotion:
+        '동작 줄이기가 설정되어 있으면 클릭은 여전히 핸들러에 전달되지만 애니메이션은 재생되지 않습니다.',
+      plays: '클릭할 때마다 다시 재생됩니다',
+    },
+    hover: {
+      label: '호버',
+      title: '호버 애니메이션 아이콘',
+      intro:
+        '포인터가 올라오면 정방향으로 재생되고 벗어나면 역방향으로 되돌아가는 아이콘입니다. 움직임이 커서를 따라가므로 중간에 어색하게 끊기지 않습니다. 휴지통 뚜껑이 열리고, 설정 톱니바퀴가 돌고, 폴더가 열리듯 무엇을 여는지 암시하는 내비게이션 항목과 버튼에 어울립니다.',
+      useCases: [
+        '사이드바와 내비게이션 메뉴 항목',
+        '클릭 전에 뚜껑이 열리는 삭제 버튼',
+        '설정·프로필 링크',
+        '확대·축소 컨트롤',
+        '푸터의 소셜 링크',
+      ],
+      example:
+        '호버 아이콘은 주로 내비게이션 항목, 삭제 버튼, 설정, 확대·축소 컨트롤, 소셜 링크에 쓰입니다.',
+      description: 'mouseenter에서 정방향으로, mouseleave에서 역방향으로 재생됩니다.',
+      reducedMotion: '동작 줄이기가 설정되어 있으면 호버해도 애니메이션이 재생되지 않습니다.',
+      plays: '호버하면 재생되고 포인터가 벗어나면 되돌아갑니다',
+    },
+    'hover-replay': {
+      label: '호버 재생',
+      title: '호버 재생 애니메이션 아이콘',
+      intro:
+        '포인터가 올라오면 한 번 재생되고 스스로 끝까지 재생되는 아이콘이라, 툴바 위를 빠르게 지나가도 움직임이 산만해지지 않습니다. 화살표, 파일, 기기, 날씨, 브랜드 아이콘 등 세트의 대부분이 이렇게 호버하면 살아 움직입니다.',
+      useCases: [
+        '기능 목록과 요금제 표',
+        '화살표 링크와 CTA 버튼',
+        '편집기·대시보드의 툴바 버튼',
+        '랜딩 페이지 그리드의 카드',
+        '푸터와 문의 링크',
+      ],
+      example:
+        '호버 재생 아이콘은 주로 화살표 링크, 기능 목록, 툴바 버튼, 랜딩 페이지 카드에 생기를 더합니다.',
+      description:
+        'mouseenter에서 한 번 재생됩니다(동작 줄이기가 설정되어 있으면 재생되지 않음). 포인터가 벗어나도 멈추지 않고, 재생 중에 다시 들어와도 처음부터 다시 시작하지 않습니다.',
+      reducedMotion: '동작 줄이기가 설정되어 있으면 호버해도 애니메이션이 재생되지 않습니다.',
+      plays: '호버하면 한 번 재생됩니다',
+    },
+    'hover-loop': {
+      label: '호버 루프',
+      title: '호버 루프 애니메이션 아이콘',
+      intro:
+        '포인터가 올라와 있는 동안 반복 재생되고, 벗어나면 현재 사이클을 마저 끝내는 아이콘이라 움직임 중간에 멈추지 않습니다. 오래 머물러 보게 만드는 링크, 주로 소셜·커뮤니티 아이콘에 어울립니다.',
+      useCases: [
+        '헤더와 푸터의 소셜 미디어 링크',
+        '커뮤니티·채팅 초대 버튼',
+        '포트폴리오·프로필 링크',
+        '언어·지역 선택기',
+      ],
+      example:
+        '호버 루프 아이콘은 주로 소셜 링크, 커뮤니티 초대, 포트폴리오 링크, 언어 선택기에 쓰입니다.',
+      description:
+        '호버하는 동안 반복 재생되고, mouseleave 후에는 현재 사이클을 마저 끝냅니다. 동작 줄이기가 설정되어 있으면 정지 상태로 있습니다.',
+      reducedMotion: '동작 줄이기가 설정되어 있으면 호버하는 동안에도 아이콘이 움직이지 않습니다.',
+      plays: '호버하는 동안 반복 재생됩니다',
+    },
+  },
+};
diff --git a/website/src/i18n/messages/pt-br/common.ts b/website/src/i18n/messages/pt-br/common.ts
new file mode 100644
index 0000000..d000d00
--- /dev/null
+++ b/website/src/i18n/messages/pt-br/common.ts
@@ -0,0 +1,45 @@
+import type { Messages } from '../en';
+
+export const common: Messages['common'] = {
+  skipToContent: 'Pular para o conteúdo',
+  ogImageAlt: 'useAnimations: ícones animados gratuitos para React, shadcn/ui, Lottie e SVG',
+  homeLabel: 'Página inicial do useAnimations',
+  mainNav: 'Principal',
+  browseIcons: 'Ver ícones',
+  nav: {
+    icons: 'Ícones',
+    categories: 'Categorias',
+    documentation: 'Documentação',
+    shadcn: 'shadcn',
+    lottie: 'Ícones Lottie',
+    license: 'Licença',
+  },
+  footer: {
+    tagline: 'Ícones animados gratuitos com interações prontas. Licença MIT, feitos para React.',
+    product: 'Produto',
+    developers: 'Desenvolvedores',
+    follow: 'Siga',
+    languages: 'Idiomas',
+    allIcons: 'Todos os ícones',
+    categories: 'Categorias',
+    interactions: 'Interações',
+    lottieIcons: 'Ícones Lottie',
+    shadcnIcons: 'Ícones para shadcn/ui',
+    documentation: 'Documentação',
+    licencing: 'Licença e termos',
+    shadcnRegistry: 'Registry do shadcn',
+    mitLicense: 'Licença MIT',
+    builtWith: 'Site feito com Astro',
+  },
+  breadcrumb: 'Trilha de navegação',
+  crumbs: { icons: 'Ícones', categories: 'Categorias', interactions: 'Interações' },
+  faq: 'Perguntas frequentes',
+  copy: 'Copiar',
+  copied: 'Copiado',
+  pressCtrlC: 'Pressione Ctrl+C',
+  languageBanner: {
+    text: 'Esta página também está disponível em português.',
+    action: 'Ver em português',
+    dismiss: 'Dispensar',
+  },
+};
diff --git a/website/src/i18n/messages/pt-br/docs.ts b/website/src/i18n/messages/pt-br/docs.ts
new file mode 100644
index 0000000..0ea805f
--- /dev/null
+++ b/website/src/i18n/messages/pt-br/docs.ts
@@ -0,0 +1,34 @@
+import type { Messages } from '../en';
+
+export const docs: Messages['docs'] = {
+  title: 'Documentação — useAnimations',
+  description: (iconCount: number) =>
+    `Como usar ${iconCount} ícones animados no React e no shadcn/ui: interações, props, cores, arquivos e acessibilidade.`,
+  badge: 'Documentação',
+  onThisPage: 'Nesta página',
+  viewAsMarkdown: 'Ver em Markdown',
+  headline: 'Documentação do useAnimations',
+  summary: 'Como usar os ícones animados do useAnimations no React e no shadcn/ui.',
+  crumb: 'Documentação',
+  faq: [
+    {
+      question: 'O useAnimations é gratuito para projetos comerciais?',
+      answer: 'Sim. Os ícones e o pacote React têm licença MIT, sem exigência de atribuição.',
+    },
+    {
+      question: 'Como uso os ícones do useAnimations no React?',
+      answer:
+        'Instale o react-useanimations, importe UseAnimations e um ícone (por exemplo, react-useanimations/lib/checkmark) e renderize <UseAnimations animation={checkmark} size={32} />.',
+    },
+    {
+      question: 'Como mudo a cor de um ícone?',
+      answer:
+        'Os ícones seguem a cor do texto. Mude com strokeColor e fillColor, com a propriedade color do CSS ou estilizando os paths.',
+    },
+    {
+      question: 'Funciona sem React?',
+      answer:
+        'O pacote é para React. Cada ícone também é um arquivo Lottie JSON padrão que qualquer player Lottie consegue tocar (lottie-web, dotLottie, lottie-react-native, lottie-ios, lottie-android, Flutter), além de um SVG estático. Veja a seção Uso sem React e useanimations.com/lottie-icons.',
+    },
+  ],
+};
diff --git a/website/src/i18n/messages/pt-br/home.ts b/website/src/i18n/messages/pt-br/home.ts
new file mode 100644
index 0000000..0c5dced
--- /dev/null
+++ b/website/src/i18n/messages/pt-br/home.ts
@@ -0,0 +1,169 @@
+import type { Messages } from '../en';
+import type { FaqLinks, HomeFaq } from '../en/home';
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const home: Messages['home'] = {
+  title: 'Ícones animados e microanimações grátis — useAnimations',
+  description: (count: number) =>
+    `${count} microanimações gratuitas para UI: uma biblioteca de ícones animados para React, shadcn/ui e Lottie, com hover, clique e loop prontos. MIT.`,
+
+  hero: {
+    badge: (count: number) => `${count} ícones · zero dependências · MIT`,
+    headline: { start: 'Ícones que ', accent: 'ganham vida.', end: '' },
+    h1: 'Ícones animados grátis para React, shadcn/ui e Lottie',
+    intro: (count: number) =>
+      `${count} microanimações feitas à mão, com microinterações de hover, clique e loop já incluídas. Use como componente React, adicione com o shadcn ou baixe em SVG e Lottie JSON. Licença MIT.`,
+    browse: 'Ver ícones',
+    fieldHint: 'Passe o ponteiro pelo campo de ícones.',
+  },
+
+  numbers: {
+    label: 'Em resumo',
+    icons: 'ícones animados',
+    interactions: 'interações prontas',
+    size: 'player, com gzip',
+    dependencies: 'dependências',
+  },
+
+  interactions: {
+    eyebrow: 'Interações prontas',
+    title: 'Cada ícone sabe como se mover.',
+    intro:
+      'Cada ícone vem com a interação para a qual foi desenhado. É só colocar na página e funciona — ou escolha outra com uma única prop. Experimente:',
+    demos: {
+      loop: 'Toca continuamente, para loaders e status em segundo plano.',
+      'click-toggle': 'Alterna entre dois estados: menu e fechar, play e pause.',
+      'click-replay': 'Toca de novo desde o início a cada clique, como feedback.',
+      hover: 'Toca para a frente ao entrar e volta ao sair.',
+      'hover-loop': 'Fica em loop durante o hover e termina o ciclo ao sair.',
+      'hover-replay': 'Toca uma vez desde o início a cada entrada do ponteiro.',
+    },
+  },
+
+  browser: {
+    eyebrow: 'A biblioteca',
+    title: (count: number) => `${count} ícones animados grátis`,
+    intro:
+      'Passe o mouse ou clique para tocar. Abra um ícone para ver o código e os downloads — Lottie JSON, SVG e ZIP.',
+    search: 'Buscar ícones',
+    searchPlaceholder: (count: number) =>
+      `Busque entre ${count} ícones — tente “eye”, “bell” ou “arrow”`,
+    interaction: 'Interação',
+    allInteractions: 'Todas as interações',
+    color: 'Cor do ícone',
+    colors: {
+      text: 'Cor do texto',
+      indigo: 'Índigo',
+      red: 'Vermelho',
+      amber: 'Âmbar',
+      teal: 'Verde-azulado',
+      violet: 'Violeta',
+    },
+    customColor: 'Cor personalizada',
+    size: 'Tamanho',
+    category: 'Categoria',
+    all: 'Todos',
+    count: { one: '{n} ícone', other: '{n} ícones' },
+    noMatch: 'Nenhum ícone encontrado.',
+    noMatchHintHtml: (href: string) => `Tente outra palavra ou ${link(href, 'sugira um ícone')}.`,
+  },
+
+  everywhere: {
+    eyebrow: 'Use do seu jeito',
+    title: 'Instale, importe, pronto.',
+    intro:
+      'Um componente React sem dependências, um registry do shadcn, arquivos para download com URLs estáveis e um catálogo que agentes de IA conseguem ler.',
+    docs: 'Leia a documentação →',
+    tablist: 'Plataforma',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Arquivos', agents: 'Agentes' },
+    codeText: {
+      afterAdding: 'depois',
+      files: 'Cada ícone em SVG, como animação (Lottie JSON) e num ZIP com os dois',
+    },
+  },
+
+  features: {
+    title: 'Leves, acessíveis e fáceis de estilizar.',
+    colors: 'Segue as suas cores',
+    colorsHtml: `Os ícones usam ${code('currentColor')}: assumem sozinhos a cor do texto, os estados de hover e o modo escuro. Para mudar, use uma prop, uma classe ou CSS puro.`,
+    tiny: 'Leve de propósito',
+    tinyText: 'Player embutido, zero dependências. Cada ícone é um módulo próprio de 2 kB.',
+    accessible: 'Acessível por padrão',
+    accessibleText:
+      'Respeita o movimento reduzido, toca as animações de hover no foco pelo teclado e fica fora dos leitores de tela, a menos que você dê um rótulo ao ícone.',
+    ssr: 'Pronto para renderização no servidor',
+    ssrText:
+      'Um client component que renderiza sem problemas em Next.js, Remix e Astro. Os ícones são dados simples que você pode importar em qualquer lugar.',
+    agents: 'Feito para agentes',
+    agentsHtml: (iconsJson: string, llmsTxt: string) =>
+      `Um catálogo tipado com palavras-chave para cada ícone, ${link(iconsJson, 'icons.json')}, ${link(llmsTxt, 'llms.txt')} e documentação em Markdown.`,
+  },
+
+  browse: {
+    title: 'Encontre a microanimação certa.',
+    byCategory: 'Navegue por categoria',
+    byInteraction: 'Navegue por interação',
+    formats: 'Todos os ícones e formatos',
+  },
+
+  hubs: {
+    icons: 'Todos os ícones animados',
+    categories: 'Categorias de ícones',
+    interactions: 'Ícones por interação',
+    lottie: 'Ícones Lottie (JSON)',
+    shadcn: 'Ícones animados para shadcn/ui',
+  },
+
+  faqTitle: 'Perguntas frequentes',
+  faq: (f: { version: string; links: FaqLinks }): HomeFaq => [
+    {
+      question: 'O que são microanimações e ícones animados?',
+      answer:
+        'Microanimações são movimentos curtos, com um único propósito, que respondem a uma ação do usuário: um ícone de menu que vira botão de fechar, um coração que se preenche quando você curte um post, um sino que toca quando chega uma notificação. Os ícones animados são o tipo mais comum. Eles deixam a interface mais responsiva e mostram mudanças de estado sem precisar de texto extra.',
+    },
+    {
+      question: 'Qual é a diferença entre os arquivos Lottie e SVG?',
+      answer:
+        'O arquivo Lottie JSON contém a animação inteira e toca em qualquer player Lottie, inclusive no que vem embutido no react-useanimations. Os arquivos SVG são imagens estáticas do ícone em repouso, uma por estado (por exemplo, eye e eye-off), para lugares em que nada deve se mexer: e-mails, documentos, ferramentas de design ou um fallback sem JavaScript.',
+    },
+    {
+      question: 'Funciona com Next.js e renderização no servidor?',
+      answer:
+        "Sim. O componente é marcado com 'use client' e desenha a animação só no navegador, então pode ser renderizado a partir de server components e de frameworks com SSR, como Next.js, Remix e Astro, sem imports dinâmicos. Os módulos dos ícones são dados simples que os server components podem importar e passar como props.",
+      link: { href: f.links.serverRendering, label: 'Next.js e renderização no servidor' },
+    },
+    {
+      question: 'Posso usar os ícones em projetos comerciais?',
+      answer:
+        'Sim. Os ícones e o pacote react-useanimations têm licença MIT: você pode usar, modificar e redistribuir em trabalhos pessoais e comerciais. A atribuição é bem-vinda, mas não é obrigatória.',
+      link: { href: f.links.licence, label: 'Licença e termos' },
+    },
+    {
+      question: 'Posso usar os ícones sem React?',
+      answer:
+        'Sim. Cada ícone é um arquivo Lottie JSON padrão, então toca com lottie-web em JavaScript puro, Vue, Svelte, Angular ou num CMS, e nos players Lottie para iOS, Android e Flutter. A página de ícones Lottie traz as URLs dos arquivos e snippets prontos de lottie-web para cada interação.',
+      link: { href: f.links.lottie, label: 'Ícones Lottie' },
+    },
+    {
+      question: 'Quanto os ícones aumentam o meu bundle?',
+      answer: `O player do react-useanimations ${f.version} tem cerca de 8 kB com gzip e nenhuma dependência, e cada ícone é um módulo próprio de 1 a 15 kB (mediana de 2 kB), então o bundle inclui só os ícones que você importa.`,
+    },
+  ],
+
+  cta: {
+    title: { start: 'Deixe a sua interface ', accent: 'pulsar.', end: '' },
+    text: 'Grátis e com licença MIT, para uso pessoal e comercial.',
+    start: 'Começar',
+  },
+
+  schema: {
+    software: (count: number) =>
+      `Componente React e ${count} ícones animados (Lottie) com interações de hover, clique e loop prontas. Sem dependências.`,
+    catalogName: 'Catálogo de ícones do useAnimations',
+    catalog: (count: number) =>
+      `Todos os ${count} ícones do useAnimations com id, título, categoria, palavras-chave, interação, URLs de Lottie JSON, SVG e ZIP, import para React e comando do shadcn.`,
+  },
+};
diff --git a/website/src/i18n/messages/pt-br/hubs.ts b/website/src/i18n/messages/pt-br/hubs.ts
new file mode 100644
index 0000000..83d5311
--- /dev/null
+++ b/website/src/i18n/messages/pt-br/hubs.ts
@@ -0,0 +1,179 @@
+import type { Messages } from '../en';
+import type { CategoryFacts, Faq, InteractionFacts } from '../en/hubs';
+import { formIn, listIn, pluralIn } from '../../format';
+import { PLAYS } from './taxonomy';
+
+const list = listIn('pt-BR');
+const plural = pluralIn('pt-BR');
+const form = formIn('pt-BR');
+const lower = (text: string) => text[0].toLowerCase() + text.slice(1);
+const icons = (n: number) => plural(n, { one: 'ícone', other: 'ícones' });
+
+/** Up to `max` titles, then 'e mais N'. */
+const titles = (items: string[], max = 12) =>
+  items.length > max
+    ? `${items.slice(0, max).join(', ')} e mais ${items.length - max}`
+    : list(items);
+
+/** The category as a noun phrase inside a sentence: 'ícones animados de alerta'. */
+const noun = (f: CategoryFacts) =>
+  f.name === 'Outros' ? 'outros ícones animados' : lower(f.title);
+
+/** ', além de SVGs estáticos' when every icon has them, else how many do. */
+const svgNote = (f: CategoryFacts) => {
+  if (f.withSvg === f.count) return ', além de SVGs estáticos';
+  return f.withSvg
+    ? ` (${f.withSvg} ${form(f.withSvg, { one: 'deles também como SVG estático', other: 'deles também como SVGs estáticos' })})`
+    : '';
+};
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const hubs: Messages['hubs'] = {
+  titleSuffix: ' — useAnimations',
+  iconCount: icons,
+
+  category: {
+    titles: (f: CategoryFacts) => [
+      `${f.title} para React e Lottie`,
+      `${f.title} para React`,
+      `${f.title} grátis`,
+      f.title,
+    ],
+    descriptions: (f: CategoryFacts) => {
+      const name = noun(f);
+      const examples = list(f.titles.slice(0, 3));
+      return [
+        `${f.count} ${name} gratuitos, como ${examples}. Microanimações de hover, clique e loop para React, shadcn/ui e Lottie JSON, com licença MIT.`,
+        `${f.count} ${name} gratuitos, como ${examples}. Para React, shadcn/ui e Lottie JSON, com licença MIT.`,
+        `${f.count} ${name} gratuitos, como ${examples}. Para React, shadcn/ui e Lottie, MIT.`,
+        `${f.count} ${name} gratuitos para React, shadcn/ui e Lottie JSON, com licença MIT.`,
+      ];
+    },
+    summary: (f: CategoryFacts) => {
+      const plays = list(
+        f.groups.map(({ interaction, count }) => `${count} ${form(count, PLAYS[interaction])}`)
+      );
+      const intro =
+        f.groups.length === 1
+          ? f.count === 1
+            ? `O único ícone ${PLAYS[f.groups[0].interaction].one}`
+            : `Todos os ${f.count} ícones ${PLAYS[f.groups[0].interaction].other}`
+          : `Dos ${f.count} ícones, ${plays}`;
+      return `${intro}. Cada um vem como componente React, componente shadcn/ui e animação Lottie JSON${svgNote(f)}, e é gratuito para uso comercial sob a licença MIT.`;
+    },
+    faq: (f: CategoryFacts): Faq => {
+      const name = noun(f);
+      const ex = f.example;
+      const n = f.expressions.length;
+      return [
+        {
+          question: `Quais ${name} estão incluídos?`,
+          answer: `${icons(f.count)}: ${titles(f.titles)}. Todos são gratuitos para projetos pessoais e comerciais sob a licença MIT, sem exigência de atribuição.`,
+        },
+        {
+          question: `Como uso estes ${name} no React?`,
+          answer: `Instale o react-useanimations, adicione ${ex.importLine} e renderize <UseAnimations animation={${ex.exportName}} size={32} />. O ícone executa a interação “${ex.interactionLabel}” e segue a cor do texto. Se você usa shadcn/ui, rode ${ex.shadcnCommand}.`,
+        },
+        {
+          question: `Posso usar estes ${name} sem React?`,
+          answer: `Sim. Cada ícone é um arquivo Lottie JSON em ${f.site}/icons/<id>.json (por exemplo, ${f.site}/icons/${ex.id}.json), que pode ser reproduzido com lottie-web, lottie-ios, lottie-android ou o pacote lottie do Flutter${f.withSvg ? '; os SVGs estáticos ficam na página de cada ícone (em inglês)' : ''}. ${
+            n
+              ? `${titles(f.expressions, 6)} ${n === 1 ? 'usa' : 'usam'} expressões do After Effects, então na web ${n === 1 ? 'precisa' : 'precisam'} do build completo do lottie-web.`
+              : 'Nenhum deles usa expressões, então o build light do lottie-web é suficiente.'
+          }`,
+        },
+      ];
+    },
+    badge: (n: number) => `${icons(n)} · licença MIT`,
+    allIcons: (name: string) =>
+      name === 'Outros' ? 'Todos os outros ícones' : `Todos os ícones de ${lower(name)}`,
+    whereToUse: 'Onde usar',
+    byInteraction: 'Por interação',
+    addOne: 'Adicione um ao seu app',
+    addOneHtml: (label: string, name: string) =>
+      `Com React, instale o ${code('react-useanimations')} e importe o ícone; ele executa a interação “${label}” sozinho. Todos os ícones desta categoria funcionam do mesmo jeito: troque ${code(name)} pelo nome que aparece na página do ícone.`,
+    shadcnHtml: (href: string) =>
+      `Com o ${link(href, 'shadcn/ui')}, a CLI adiciona um componente pronto:`,
+    noReactHtml: (href: string) =>
+      `Não usa React? Cada ícone é um arquivo Lottie JSON em ${code('/icons/&lt;id&gt;.json')}; veja em ${link(href, 'Ícones Lottie')} os players para web, iOS, Android e Flutter.`,
+    more: 'Mais categorias',
+    allIconsButton: 'Todos os ícones',
+  },
+
+  interaction: {
+    titles: (f: InteractionFacts) => [
+      `${f.title} para React e Lottie`,
+      `${f.title} para React`,
+      f.title,
+    ],
+    descriptions: (f: InteractionFacts) => {
+      const plays = form(f.count, PLAYS[f.interaction]);
+      return [
+        `${f.count} ícones animados gratuitos que ${plays}, como ${list(f.titles.slice(0, 3))}. Para React, shadcn/ui e Lottie JSON, com licença MIT.`,
+        `${f.count} ícones animados gratuitos que ${plays}, como ${list(f.titles.slice(0, 3))}. Para React, shadcn/ui e Lottie, MIT.`,
+        `${f.count} ícones animados gratuitos que ${plays}. Para React, shadcn/ui e Lottie JSON, com licença MIT.`,
+        `${f.count} ${lower(f.title)} gratuitos para React, shadcn/ui e Lottie JSON, com licença MIT.`,
+      ];
+    },
+    faq: (f: InteractionFacts): Faq => [
+      {
+        question: `Quais ícones usam a interação “${f.label}”?`,
+        answer: `${icons(f.count)}: ${titles(f.titles, 15)}. ${f.example}`,
+      },
+      {
+        question: 'O que acontece quando o usuário prefere movimento reduzido?',
+        answer: `${f.reducedMotion} O componente React lê prefers-reduced-motion e se atualiza quando a configuração muda, então você não precisa escrever nenhum código para isso.`,
+      },
+      {
+        question: 'Como mudo a interação de um ícone?',
+        answer: `Cada ícone executa a interação para a qual foi desenhado. Passe interaction="${f.interaction}" para dar esse comportamento a qualquer outro ícone, ou outro valor ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') para trocá-la. As props autoplay, loop e speed ajustam a reprodução.${
+          f.interaction === 'click-toggle'
+            ? ' Para controlar o estado você mesmo, passe active={isOn} e atualize o valor no onClick: a partir daí, os cliques não alternam mais o ícone por conta própria.'
+            : ''
+        }`,
+      },
+    ],
+    allIcons: (label: string) => `Todos os ícones com a interação “${label}”`,
+    behaviour: 'Como funciona',
+    hoverNote:
+      ' Toques em telas sensíveis ao toque não iniciam animações de hover; já o foco pelo teclado inicia, quando o ícone está dentro de um elemento focável.',
+    handled: 'O componente React cuida de tudo isso; você só escolhe o ícone.',
+    whereToUse: 'Onde usar',
+    byCategory: 'Por categoria',
+    useInReact: 'Use no React',
+    overrideHtml: `Os ícones listados aqui usam esta interação por padrão. Qualquer outro ícone também pode usá-la: basta passar a prop ${code('interaction')}.`,
+    normallyUses: (title: string, interaction: string) =>
+      `${title} normalmente usa '${interaction}'`,
+    extra: {
+      loop: 'Os loops começam sozinhos e pausam quando saem da área visível. Deixe um mais lento com speed, toque uma única vez com loop={false} ou mantenha parado com autoplay={false}:',
+      'click-toggle':
+        'Os cliques alternam o ícone sozinhos. Para mantê-lo em sincronia com o seu estado, passe active: o ícone anima sempre que active muda, e os cliques deixam de alterná-lo por conta própria.',
+      'click-replay':
+        'Coloque o ícone num botão de verdade com a render prop, para que ele possa receber foco e ser anunciado por leitores de tela. O seu onClick roda primeiro; chame event.preventDefault() para pular a animação.',
+      hover:
+        'Coloque o ícone num link ou botão com a render prop: assim a animação também toca quando o elemento recebe foco pelo teclado, e toques em telas sensíveis ao toque não a disparam.',
+      'hover-replay':
+        'Faça o hover valer para o card ou o link inteiro, não só para o ícone: com a render prop, os eventos ficam no seu elemento, e o foco pelo teclado também toca a animação.',
+      'hover-loop':
+        'Use a render prop para que o link inteiro dispare o loop, inclusive com foco pelo teclado. Ajuste o ritmo com speed:',
+    },
+    codeText: {
+      halfSpeed: 'metade da velocidade',
+      playsOnce: 'toca uma vez e para',
+      staticFrame: 'primeiro frame, estático',
+      endState: 'true mostra o estado final',
+      closeMenu: 'Fechar menu',
+      openMenu: 'Abrir menu',
+      download: 'Baixar',
+      archive: 'Arquivar',
+      weeklyGrowth: 'Crescimento semanal',
+    },
+    docsHtml: (docs: string, lottie: string) =>
+      `Todas as props estão na ${link(docs, 'documentação')}. Fora do React, os ícones são arquivos Lottie JSON; a página ${link(lottie, 'Ícones Lottie')} mostra como recriar as interações com lottie-web.`,
+    other: 'Outras interações',
+    browseByCategory: 'Navegue por categoria',
+  },
+};
diff --git a/website/src/i18n/messages/pt-br/index.ts b/website/src/i18n/messages/pt-br/index.ts
new file mode 100644
index 0000000..bf33c1d
--- /dev/null
+++ b/website/src/i18n/messages/pt-br/index.ts
@@ -0,0 +1,11 @@
+import type { Messages } from '../en';
+import { common } from './common';
+import { docs } from './docs';
+import { home } from './home';
+import { hubs } from './hubs';
+import { islands } from './islands';
+import { licence } from './licence';
+import { pages } from './pages';
+import { taxonomy } from './taxonomy';
+
+export const messages: Messages = { common, taxonomy, hubs, home, docs, licence, pages, islands };
diff --git a/website/src/i18n/messages/pt-br/islands.ts b/website/src/i18n/messages/pt-br/islands.ts
new file mode 100644
index 0000000..bcd4dcd
--- /dev/null
+++ b/website/src/i18n/messages/pt-br/islands.ts
@@ -0,0 +1,51 @@
+import type { Messages } from '../en';
+
+export const islands: Messages['islands'] = {
+  iconCard: {
+    hints: {
+      loop: 'Loop',
+      'click-toggle': 'Clique',
+      'click-replay': 'Clique',
+      hover: 'Hover',
+      'hover-loop': 'Hover',
+      'hover-replay': 'Hover',
+    },
+  },
+  iconDialog: {
+    hints: {
+      loop: 'Toca sozinho',
+      'click-toggle': 'Clique para alternar',
+      'click-replay': 'Clique para tocar de novo',
+      hover: 'Passe o mouse para tocar e tire para voltar',
+      'hover-loop': 'Passe o mouse para tocar em loop',
+      'hover-replay': 'Passe o mouse para tocar',
+    },
+    preview: 'Prévia de {title}',
+    colors: 'Cor da prévia',
+    color: 'Cor {color}',
+    textColor: 'Cor do texto',
+    interaction: 'Interação',
+    duration: 'Duração',
+    seconds: '{seconds} s',
+    import: 'Import',
+    close: 'Fechar',
+    code: 'Código',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Arquivos' },
+    copy: 'Copiar',
+    download: 'Baixar',
+    iconPage: 'Página do ícone →',
+  },
+  interactionDemo: {
+    click: 'Clique no card',
+    loop: 'Toca sozinho',
+    hover: 'Passe o mouse no card',
+  },
+  mobileMenu: {
+    menu: 'Menu',
+    nav: 'Principal',
+  },
+  themeToggle: {
+    toLight: 'Mudar para o tema claro',
+    toDark: 'Mudar para o tema escuro',
+  },
+};
diff --git a/website/src/i18n/messages/pt-br/licence.ts b/website/src/i18n/messages/pt-br/licence.ts
new file mode 100644
index 0000000..8056548
--- /dev/null
+++ b/website/src/i18n/messages/pt-br/licence.ts
@@ -0,0 +1,27 @@
+import type { Messages } from '../en';
+
+export const licence: Messages['licence'] = {
+  title: 'Licença e termos — useAnimations',
+  description:
+    'Os ícones do useAnimations e o pacote react-useanimations têm licença MIT: uso e redistribuição livres em projetos pessoais e comerciais, sem atribuição.',
+  name: 'Licença e termos',
+  heading: 'Livre para usar. Licença MIT.',
+  introHtml: (mitHref: string) =>
+    `Os ícones do useAnimations e o pacote <code>react-useanimations</code> são distribuídos sob a <a href="${mitHref}">licença MIT</a>.`,
+  canDo: 'O que você pode fazer',
+  canDoItemsHtml: [
+    '<strong>Usar</strong> os ícones em sites, apps e produtos pessoais e comerciais.',
+    '<strong>Modificar</strong> os ícones: mudar cores, tamanhos, tempo ou o próprio movimento.',
+    '<strong>Redistribuir</strong> os ícones, inclusive dentro de pacotes de ícones, templates, temas, UI kits e registries de componentes.',
+  ],
+  attribution: 'Atribuição',
+  attributionText:
+    'Não é obrigatória, mas é bem-vinda. Mantenha o aviso de licença ao redistribuir os próprios arquivos e, se quiser nos dar o crédito:',
+  credit: (link: string) => `Ícones animados por ${link}`,
+  noWarranty: 'Sem garantia',
+  noWarrantyText:
+    'Os ícones e o código são fornecidos no estado em que se encontram, sem garantia de qualquer tipo.',
+  licenseText: 'Texto da licença',
+  bindingNote:
+    'O texto da licença abaixo é a versão original em inglês, que é a juridicamente vinculante.',
+};
diff --git a/website/src/i18n/messages/pt-br/pages.ts b/website/src/i18n/messages/pt-br/pages.ts
new file mode 100644
index 0000000..a6fa980
--- /dev/null
+++ b/website/src/i18n/messages/pt-br/pages.ts
@@ -0,0 +1,243 @@
+import type { Messages } from '../en';
+import type { Faq } from '../en/hubs';
+import { listIn, pluralIn } from '../../format';
+
+const list = listIn('pt-BR');
+const plural = pluralIn('pt-BR');
+const icons = (n: number) => plural(n, { one: 'ícone', other: 'ícones' });
+const lower = (text: string) => text[0].toLowerCase() + text.slice(1);
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+const strong = (text: string) => `<strong class="font-medium text-fg">${text}</strong>`;
+
+export const pages: Messages['pages'] = {
+  icons: {
+    titles: (count: number) => [
+      `Todos os ${count} ícones animados por categoria`,
+      `Todos os ${count} ícones animados`,
+    ],
+    descriptions: (count: number, categories: number) => [
+      `Todos os ícones do useAnimations numa só página: ${count} ícones animados gratuitos em ${categories} categorias, para React, shadcn/ui, Lottie JSON e SVG. Licença MIT.`,
+      `${count} ícones animados gratuitos em ${categories} categorias, para React, shadcn/ui, Lottie JSON e SVG. Licença MIT.`,
+    ],
+    title: 'Todos os ícones animados',
+    badge: (count: number) => `${icons(count)} · licença MIT`,
+    introHtml: (browser: string) =>
+      `Todos os ícones do conjunto, agrupados por categoria. Abra um deles para ver a prévia ao vivo, o código para React e shadcn/ui e os downloads em Lottie JSON, SVG e ZIP (as páginas dos ícones estão em inglês). Para buscar por palavra-chave e testar as animações aqui mesmo, use o ${link(browser, 'navegador de ícones')}.`,
+    categoriesNav: 'Categorias',
+    byInteraction: 'Por interação:',
+    categoryLink: (count: number, name: string) =>
+      name === 'Outros' ? `${count} outros ícones →` : `${icons(count)} de ${lower(name)} →`,
+  },
+
+  categories: {
+    titles: (categories: number) => [
+      `Categorias de ícones animados: ${categories} coleções`,
+      'Categorias de ícones animados',
+    ],
+    descriptions: (iconCount: number, categories: number) => [
+      `Explore ${iconCount} ícones animados gratuitos em ${categories} categorias: navegação, ações, mídia, carregamento, redes sociais e mais. Para React, shadcn/ui e Lottie.`,
+    ],
+    title: 'Categorias de ícones animados',
+    badge: (iconCount: number, categories: number) =>
+      `${icons(iconCount)} · ${plural(categories, { one: 'categoria', other: 'categorias' })}`,
+    introHtml: (interactions: string) =>
+      `Cada ícone do useAnimations pertence a uma categoria, de setas de navegação e controles de mídia a loaders e logos de redes sociais. Abra uma categoria para ver todos os ícones dela, onde usá-los e o código para adicionar um, ou navegue por ${link(interactions, 'interação')}.`,
+    iconCount: icons,
+  },
+
+  interactions: {
+    titles: ['Microinterações de hover, clique e loop', 'Microinterações para ícones animados'],
+    descriptions: (iconCount: number, interactions: number) => [
+      `${iconCount} ícones animados em ${interactions} microinterações: loop, alternar e reproduzir no clique, hover, reproduzir e loop no hover. Com suporte a movimento reduzido.`,
+      `${iconCount} ícones animados em ${interactions} microinterações de hover, clique e loop, com suporte a movimento reduzido.`,
+    ],
+    title: 'Interações dos ícones animados',
+    badge: (interactions: number, iconCount: number) =>
+      `${plural(interactions, { one: 'interação', other: 'interações' })} · ${icons(iconCount)}`,
+    introHtml: `Cada ícone vem com a microinteração para a qual foi desenhado: fica em loop, alterna ou toca de novo no clique, ou toca no hover. O componente React faz toda a ligação e respeita o movimento reduzido, e a prop <code class="font-mono text-base text-fg">interaction</code> troca a interação de qualquer ícone.`,
+    iconCount: icons,
+    chooseTitle: 'Como escolher uma interação',
+    chooseHtml: {
+      loop: (href: string) =>
+        `${strong('Um estado que dura')}, como carregamento ou um alerta ativo: ${link(href, 'loop')}.`,
+      'click-toggle': (href: string) =>
+        `${strong('Um controle liga/desliga')}, como mudo, menu ou mostrar senha: ${link(href, 'alternar no clique')}, com ${code('active')} para estado controlado.`,
+      'click-replay': (href: string) =>
+        `${strong('Uma ação pontual')}, como enviar, salvar ou atualizar: ${link(href, 'reproduzir no clique')}.`,
+      hover: (href: string) =>
+        `${strong('Uma dica do que o link abre')}: ${link(href, 'hover')}, que volta ao contrário quando o ponteiro sai.`,
+      'hover-replay': (href: string) =>
+        `${strong('Barras de ferramentas e listas que o usuário percorre rapidamente')}: ${link(href, 'reproduzir no hover')}, que termina sozinho.`,
+      'hover-loop': (href: string) =>
+        `${strong('Links que convidam a olhar com mais calma')}, como ícones de redes sociais: ${link(href, 'loop no hover')}.`,
+    },
+    motionTitle: 'Movimento reduzido',
+    motionHtml: `O componente React segue ${code('prefers-reduced-motion')} e se atualiza quando a configuração muda. Toques em telas sensíveis ao toque nunca iniciam animações de hover.`,
+    reducedMotion: {
+      loop: 'o ícone não inicia sozinho e fica no primeiro frame, estático.',
+      'click-toggle': 'o clique troca para o outro estado na hora, sem a animação de transição.',
+      'click-replay': 'os cliques continuam chegando ao seu handler, mas a animação não toca.',
+      hover: 'o hover não toca a animação.',
+      'hover-replay': 'o hover não toca a animação.',
+      'hover-loop': 'o ícone fica estático durante o hover.',
+    },
+  },
+
+  lottie: {
+    titles: (count: number) => [
+      `Ícones Lottie grátis: ${count} ícones animados em JSON`,
+      'Ícones Lottie grátis',
+    ],
+    descriptions: (count: number) => [
+      `${count} ícones Lottie gratuitos em JSON puro, com licença MIT. Código pronto para lottie-web, dotLottie, React, React Native, iOS, Android e Flutter.`,
+      `${count} ícones Lottie gratuitos em Lottie JSON, com licença MIT. Código pronto para lottie-web, React, React Native, iOS, Android e Flutter.`,
+    ],
+    title: 'Ícones Lottie grátis',
+    crumb: 'Ícones Lottie',
+    datasetName: 'Catálogo de ícones do useAnimations',
+    datasetDescription: (count: number) =>
+      `Metadados e URLs dos arquivos de ${count} ícones Lottie animados: id, título, categoria, palavras-chave, interação, tamanho e duração.`,
+    badge: (count: number) => `${icons(count)} · Lottie JSON · licença MIT`,
+    intro:
+      'Cada ícone do useAnimations é uma animação Lottie JSON padrão, então qualquer player Lottie consegue tocá-la: lottie-web na web, lottie-ios, lottie-android, Flutter e React Native. Os arquivos são gratuitos sob a licença MIT, sem cadastro, e servidos em URLs estáveis com CORS habilitado, então você pode carregá-los direto ou baixá-los para o seu projeto.',
+    popular: 'Ícones Lottie populares',
+    allIcons: (count: number) => `Todos os ${count} ícones →`,
+    filesTitle: 'Arquivos e URLs',
+    filesIntroHtml: `Cada ícone tem uma página em ${code('/icons/&lt;id&gt;')} (em inglês) com prévia e downloads. Os arquivos em si:`,
+    files: {
+      json: 'animação Lottie JSON',
+      zip: 'o JSON e os SVGs estáticos',
+      svg: 'SVG estático de cada estado',
+      catalog: 'catálogo de todos os ícones',
+    },
+    catalogHtml: (catalog: string, median: number) =>
+      `O ${link(catalog, 'icons.json')} lista cada ícone com id, título, categoria, palavras-chave, interação, tamanho, duração e URLs dos arquivos, o que facilita escolher ícones por palavra-chave num script ou deixar um agente de código escolher. A mediana dos arquivos Lottie é de ${median} kB.`,
+    players: {
+      web: {
+        title: 'Web: lottie-web',
+        text: 'O player de referência, do Airbnb. Carregue-o de uma CDN, aponte para a URL de um ícone e escolha o renderer SVG, que mantém o ícone nítido e permite mudar a cor via CSS. Use o build completo (lottie.min.js): o build light ignora expressões.',
+        cssLabel: 'Seguir a cor do texto (renderer SVG)',
+      },
+      'web-interactions': {
+        title: 'Web: interações de hover e clique',
+        text: 'O lottie-web toca e para, mas as interações ficam por sua conta. Este é o “alternar no clique” do ícone de menu, com suporte a movimento reduzido; todas as interações seguem o mesmo padrão, e o componente React mais abaixo faz tudo isso por você.',
+      },
+      dotlottie: {
+        title: 'Web: web component dotLottie',
+        text: 'O player da LottieFiles renderiza num canvas com um motor em WebAssembly e toca tanto Lottie JSON puro quanto arquivos .lottie. Um canvas mantém as cores do arquivo, então os ícones ficam pretos, a menos que você mude as cores no JSON.',
+        jsLabel: 'Ou a API JavaScript: npm install @lottiefiles/dotlottie-web',
+      },
+      react: {
+        title: 'React: react-useanimations',
+        text: 'Nenhum player Lottie para instalar: o pacote tem o próprio player de 8 kB, executa a interação de cada ícone, segue a cor do texto e respeita o movimento reduzido. Cada ícone é um módulo separado, então só vão para produção os que você importa.',
+      },
+      'react-native': {
+        title: 'React Native: lottie-react-native',
+        text: 'Inclua o JSON no bundle com require() para uso offline ou carregue-o pela URL.',
+      },
+      ios: {
+        title: 'iOS: lottie-ios (SwiftUI)',
+        text: 'Adicione o pacote https://github.com/airbnb/lottie-spm.git com o Swift Package Manager e depois coloque o JSON no bundle do app ou carregue-o pela URL.',
+      },
+      android: {
+        title: 'Android: lottie-android (Jetpack Compose)',
+        text: 'Adicione com.airbnb.android:lottie-compose (ou com.airbnb.android:lottie para views). Coloque o JSON em res/raw para uso offline com LottieCompositionSpec.RawRes.',
+      },
+      flutter: {
+        title: 'Flutter: lottie',
+        text: 'O pacote lottie é um player escrito em Dart puro para Android, iOS, web e desktop.',
+      },
+    },
+    expressionsTitle: 'Ícones com expressões',
+    expressionsHtml: (count: number) =>
+      `${icons(count)} ${count === 1 ? 'usa' : 'usam'} expressões do After Effects (${code('loopOut')} ou ${code('wiggle')}). Na web, toque-os com o build completo do lottie-web, não com o ${code('lottie_light')}. Os players nativos não avaliam expressões, então teste esses ícones no iOS, no Android e no Flutter ou escolha outro; o react-useanimations os toca como foram desenhados.`,
+    faq: (f: {
+      count: number;
+      minSize: number;
+      maxSize: number;
+      medianSize: number;
+      expressions: string[];
+    }): Faq => [
+      {
+        question: 'Estes ícones Lottie são gratuitos para uso comercial?',
+        answer: `Sim. Todos os ${f.count} ícones Lottie têm licença MIT: você pode usar, modificar e redistribuir em projetos pessoais e comerciais, sem exigência de atribuição e sem precisar de conta para baixar.`,
+      },
+      {
+        question: 'Em que formato estão os arquivos Lottie?',
+        answer: `Lottie JSON padrão (o formato Bodymovin), só com shape layers: sem imagens, fontes ou assets externos. Cada ícone é desenhado numa prancheta de 24 ou 32 px, escala para qualquer tamanho e pesa de ${f.minSize} kB a ${f.maxSize} kB, com mediana de ${f.medianSize} kB.`,
+      },
+      {
+        question: 'Preciso do lottie-web para usar os ícones no React?',
+        answer:
+          'Não. O react-useanimations tem o próprio player de 8 kB, sem dependências, então você instala um único pacote e importa os ícones de que precisa. O lottie-web só é necessário fora do React, em páginas web comuns ou em outros frameworks.',
+      },
+      {
+        question: 'Quais ícones precisam do build completo do lottie-web?',
+        answer: `${icons(f.expressions.length)} ${f.expressions.length === 1 ? 'usa' : 'usam'} expressões do After Effects (loopOut ou wiggle): ${list(f.expressions)}. Na web, eles precisam do build completo do lottie-web; o lottie_light ignora expressões. Os players nativos (lottie-ios, lottie-android e o lottie do Flutter) também não avaliam expressões, então esses ícones podem se mover de outro jeito neles.`,
+      },
+      {
+        question: 'Posso mudar a cor de um ícone Lottie?',
+        answer:
+          'Na web, o renderer SVG do lottie-web escreve as cores como atributos, então uma regra CSS nos paths muda a cor do ícone. Os players nativos usam suas APIs de propriedades dinâmicas: ColorValueProvider no iOS, LottieProperty.COLOR e STROKE_COLOR no Android e ValueDelegate.color no Flutter.',
+      },
+    ],
+    byCategory: 'Ícones Lottie por categoria',
+  },
+
+  shadcn: {
+    titles: (count: number) => [
+      `Ícones animados para shadcn/ui: ${count} componentes`,
+      'Ícones animados para shadcn/ui',
+    ],
+    descriptions: (count: number) => [
+      `${count} ícones animados para shadcn/ui: adicione qualquer um com um comando da CLI. Microinterações de hover, clique e loop, licença MIT, sem lottie-web.`,
+      `${count} ícones animados para shadcn/ui, adicionados com um único comando da CLI. Hover, clique e loop, licença MIT, sem lottie-web.`,
+    ],
+    title: 'Ícones animados para shadcn/ui',
+    crumb: 'shadcn/ui',
+    popularList: 'Ícones animados populares para shadcn/ui',
+    badge: (count: number) =>
+      `${plural(count, { one: 'componente', other: 'componentes' })} · registry do shadcn · licença MIT`,
+    intro:
+      'Todos os ícones do useAnimations estão num registry do shadcn. Um comando da CLI adiciona ao seu projeto um componente React tipado, com a interação de hover, clique ou loop para a qual o ícone foi desenhado, suporte a movimento reduzido e cores que seguem o seu tema. O código fica no seu repositório, como qualquer outro componente do shadcn/ui.',
+    addTitle: 'Adicionar um ícone',
+    addIntro: 'Rode a CLI do shadcn com a URL do ícone no registry:',
+    namingHtml: `O componente se chama ${code('Animated')} + o id do ícone em PascalCase (${code('check-box')} → ${code('AnimatedCheckBox')}) e vai para ${code('components/animations/&lt;id&gt;.tsx')}. A CLI também adiciona o wrapper compartilhado ${code('components/use-animation.tsx')} e instala o ${code('react-useanimations')}, que traz o próprio player: nada de lottie-web.`,
+    namespaceTitle: 'Nomes curtos com um namespace de registry',
+    namespaceHtml: `Adicione o registry ao ${code('components.json')} uma vez e depois adicione ícones pelo nome, vários de uma vez:`,
+    registryHtml: (registry: string) =>
+      `O índice do registry em ${link(registry, '/r/registry.json')} lista cada item com título, categoria e interação.`,
+    usageTitle: 'Use num Button do shadcn',
+    usageHtml: `Os componentes recebem as mesmas props que o ${code('UseAnimations')}. Para um toggle como o ícone de menu, passe ${code('active')} e mantenha o estado no botão; o ícone anima sempre que ele muda:`,
+    colorHtml: (docs: string) =>
+      `Os ícones seguem a cor do texto, então ${code('text-primary')} ou ${code('text-muted-foreground')} mudam a cor deles, e o modo escuro não precisa de nada extra. Mais props e padrões estão na ${link(docs, 'documentação')}.`,
+    codeText: { closeMenu: 'Fechar menu', openMenu: 'Abrir menu' },
+    popular: 'Ícones populares para shadcn/ui',
+    allIcons: (count: number) => `Todos os ${count} ícones →`,
+    popularNote: 'A página de cada ícone (em inglês) mostra o comando do shadcn.',
+    faq: (f: { count: number; version: string }): Faq => [
+      {
+        question: 'Os ícones animados para shadcn/ui são gratuitos?',
+        answer: `Sim. Todos os ${f.count} ícones e o código dos componentes têm licença MIT, para projetos pessoais e comerciais. O registry não exige conta nem chave de API.`,
+      },
+      {
+        question: 'O que a CLI do shadcn adiciona ao meu projeto?',
+        answer: `O componente do ícone em components/animations/<id>.tsx, o wrapper compartilhado do player UseAnimation em components/use-animation.tsx (uma única vez, como dependência do registry) e o react-useanimations@^${f.version} do npm. O lottie-web não é necessário: o pacote tem o próprio player de 8 kB.`,
+      },
+      {
+        question: 'Os componentes funcionam com server components do Next.js?',
+        answer:
+          'Sim. Os componentes são marcados com "use client" e desenham a animação só no navegador, então você pode renderizá-los a partir de server components e páginas sem imports dinâmicos nem ssr: false.',
+      },
+      {
+        question: 'Posso mudar a aparência e o movimento dos ícones?',
+        answer:
+          'O código é seu e fica no seu repositório. Os componentes recebem as props do UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop e speed. Os ícones seguem a cor do texto, então classes do Tailwind como text-primary ou text-muted-foreground mudam a cor deles.',
+      },
+    ],
+    byCategory: 'Navegue por categoria',
+  },
+};
diff --git a/website/src/i18n/messages/pt-br/taxonomy.ts b/website/src/i18n/messages/pt-br/taxonomy.ts
new file mode 100644
index 0000000..cd9f0bc
--- /dev/null
+++ b/website/src/i18n/messages/pt-br/taxonomy.ts
@@ -0,0 +1,402 @@
+import type { Interaction } from 'react-useanimations';
+import type { Messages } from '../en';
+
+/** How icons play, by number: "<n> ícone fica em loop" / "<n> ícones ficam em loop". */
+export const PLAYS: Record<Interaction, { one: string; other: string }> = {
+  loop: { one: 'fica em loop contínuo', other: 'ficam em loop contínuo' },
+  'click-toggle': {
+    one: 'alterna entre dois estados no clique',
+    other: 'alternam entre dois estados no clique',
+  },
+  'click-replay': { one: 'toca de novo a cada clique', other: 'tocam de novo a cada clique' },
+  hover: {
+    one: 'toca no hover e volta ao contrário quando o mouse sai',
+    other: 'tocam no hover e voltam ao contrário quando o mouse sai',
+  },
+  'hover-replay': { one: 'toca uma vez no hover', other: 'tocam uma vez no hover' },
+  'hover-loop': { one: 'fica em loop durante o hover', other: 'ficam em loop durante o hover' },
+};
+
+export const taxonomy: Messages['taxonomy'] = {
+  categories: {
+    Alerts: {
+      name: 'Alertas',
+      title: 'Ícones animados de alerta',
+      intro:
+        'Triângulos de aviso, círculos de alerta e placas de pare que pulsam só o bastante para chamar a atenção, sem piscar. Use-os ao lado de um campo de formulário com erro, no início de um banner de erro ou numa coluna de status, onde um ícone estático passa despercebido na rolagem.',
+      useCases: [
+        'Erros de validação logo abaixo dos campos de formulário',
+        'Banners de erro e de aviso no topo da página',
+        'Linhas com falha numa tabela de status de deploys ou jobs',
+        'Diálogos de confirmação de ações destrutivas',
+        'Páginas de status do sistema durante um incidente',
+      ],
+    },
+    Notifications: {
+      name: 'Notificações',
+      title: 'Ícones animados de sino de notificação',
+      intro:
+        'Sinos que tocam quando há novidades ou que alternam entre sino e sino silenciado. Um balanço curto do sino leva o olhar até o contador de não lidas, e as versões que alternam servem também como controle para silenciar um canal ou uma conversa.',
+      useCases: [
+        'Botão da central de notificações no cabeçalho do app',
+        'Badge de não lidas que toca quando chega uma nova mensagem',
+        'Botão para silenciar e reativar um canal ou uma conversa',
+        'Configurações de notificações por e-mail e push',
+        'Botões de inscrição em lembretes e alertas',
+      ],
+    },
+    Navigation: {
+      name: 'Navegação',
+      title: 'Ícones animados de navegação e setas',
+      intro:
+        'Menus hambúrguer que se transformam em botão de fechar, além de setas, chevrons e setas de canto que se deslocam na própria direção no hover. Eles deixam claro para onde um controle leva: abrir a gaveta, voltar, expandir a linha, sair do site.',
+      useCases: [
+        'Menu hambúrguer que vira botão de fechar no mobile',
+        'Botões de anterior e próximo em carrosséis e paginação',
+        'Chevrons de accordions e dropdowns',
+        'Indicações de voltar ao topo e de rolar para baixo',
+        'Links de entrar e sair',
+        'Marcadores de link externo e botões de abrir a sidebar',
+      ],
+    },
+    Action: {
+      name: 'Ações',
+      title: 'Ícones animados de ação',
+      intro:
+        'Os verbos da interface: salvar, excluir, baixar, atualizar, curtir, favoritar, buscar e configurar. Cada um confirma o clique ou o hover a que pertence: o coração se preenche quando você curte um post, e a tampa da lixeira se levanta antes de você excluir.',
+      useCases: [
+        'Botões de curtir, favoritar e salvar em cards',
+        'Botões de baixar, enviar e salvar que confirmam a ação',
+        'Botão de mostrar e ocultar senha num formulário de login',
+        'Botões de atualizar e sincronizar em dashboards',
+        'Botões de excluir em tabelas e listas de arquivos',
+        'Campo de busca que vira botão de limpar',
+      ],
+    },
+    Content: {
+      name: 'Conteúdo',
+      title: 'Ícones animados de arquivos, pastas e usuários',
+      intro:
+        'Arquivos, pastas, livros, e-mail, anexos e pessoas. Eles identificam aquilo com que o usuário trabalha, e as variantes de adicionar, remover e confirmar fazem o gerenciamento de listas e equipes parecer mais responsivo.',
+      useCases: [
+        'Gerenciadores de arquivos e listas de documentos',
+        'Botões de anexar e de copiar para a área de transferência',
+        'Caixa de entrada e arquivo em clientes de e-mail',
+        'Listas de membros da equipe com ações de adicionar e remover usuários',
+        'Menus de compartilhamento de documentos e links',
+      ],
+    },
+    Form: {
+      name: 'Formulários',
+      title: 'Ícones animados de controles de formulário',
+      intro:
+        'Um checkbox, um radio button e um switch que animam entre os estados marcado e desmarcado. Use-os onde um input comum parece sem graça, como checklists de onboarding e telas de configurações, sem perder a leitura do estado num relance.',
+      useCases: [
+        'Switches de recursos e preferências nas configurações',
+        'Checklists de onboarding e listas de tarefas',
+        'Opções de escolha única em pesquisas e seletores de plano',
+        'Checkboxes de termos e consentimento',
+      ],
+    },
+    Media: {
+      name: 'Mídia',
+      title: 'Ícones animados de player de mídia',
+      intro:
+        'Play e pause, volume, microfone, câmera, pular e aleatório para players de áudio e vídeo. Os ícones que alternam trocam entre seus dois estados, de play para pause ou de microfone ligado para mudo, então o botão sempre mostra o que o clique vai fazer.',
+      useCases: [
+        'Botões de play e pause em players de áudio e vídeo',
+        'Controles de mudo em chamadas de vídeo',
+        'Botões de ligar e desligar a câmera em apps de reunião',
+        'Controles de playlist para pular, repetir e ordem aleatória',
+        'Botões de transmissão e AirPlay',
+        'Controles de apps de podcast e música',
+      ],
+    },
+    'Text editing': {
+      name: 'Edição de texto',
+      title: 'Ícones animados de edição de texto',
+      intro:
+        'Negrito, itálico, sublinhado, alinhamento e listas para barras de ferramentas de rich text. Uma animação rápida no clique confirma que a formatação foi aplicada, o que ajuda em editores em que a mudança no próprio texto é sutil.',
+      useCases: [
+        'Barras de ferramentas de editores de rich text',
+        'Caixas de escrita de comentários e mensagens',
+        'Editores de CMS e de posts de blog',
+        'Apps de Markdown e de anotações',
+        'Controles de alinhamento de texto em ferramentas de design',
+      ],
+    },
+    Communication: {
+      name: 'Comunicação',
+      title: 'Ícones animados de comunicação',
+      intro:
+        'Telefones, balões de chat, botões de enviar, correio de voz e RSS. Os ícones de chamada cobrem os estados de que um histórico de ligações precisa (recebida, efetuada, perdida e encaminhada), e o ícone de enviar dá à mensagem uma pequena despedida no clique.',
+      useCases: [
+        'Botão de enviar em formulários de chat e comentários',
+        'Histórico de chamadas recebidas, efetuadas e perdidas',
+        'Botões de contato e suporte',
+        'Botões que abrem o widget de chat',
+        'Campos de menção e de endereço de e-mail',
+      ],
+    },
+    Devices: {
+      name: 'Dispositivos',
+      title: 'Ícones animados de dispositivos',
+      intro:
+        'Celulares, tablets, monitores, relógios e impressoras, além dos indicadores de conexão ao redor deles: wifi, Bluetooth e bateria. Servem para seletores de dispositivo, alternadores de preview responsivo e status de conectividade.',
+      useCases: [
+        'Alternadores de preview responsivo entre mobile, tablet e desktop',
+        'Status da conexão wifi e Bluetooth',
+        'Indicadores de bateria e carregamento',
+        'Listas de dispositivos nas configurações de segurança da conta',
+        'Botões de imprimir em faturas e relatórios',
+      ],
+    },
+    Weather: {
+      name: 'Clima',
+      title: 'Ícones animados de clima',
+      intro:
+        'Sol, lua, nuvens, chuva, neve, raios e vento para previsões do tempo e tudo o que acompanha a hora do dia. O sol e a lua também formam um seletor natural entre modo claro e modo escuro.',
+      useCases: [
+        'Widgets de clima e cards de previsão do tempo',
+        'Seletores de tema claro e escuro',
+        'Horários de nascer e pôr do sol em apps de viagem',
+        'Leituras de temperatura em dashboards de casa inteligente',
+        'Indicadores de energia e status de alimentação',
+      ],
+    },
+    'Maps & location': {
+      name: 'Mapas e localização',
+      title: 'Ícones animados de mapa e localização',
+      intro:
+        'Pins de mapa, setas de navegação, globos, alvos e âncoras. Um pin que cai no hover destaca um localizador de lojas ou um endereço de entrega, e o globo funciona como seletor de idioma ou região.',
+      useCases: [
+        'Localizadores de lojas e campos de endereço',
+        'Botões de localização atual e de rotas',
+        'Seletores de idioma e região',
+        'Entrega e rastreamento de pedidos',
+        'Apps de viagem e reservas',
+      ],
+    },
+    Commerce: {
+      name: 'E-commerce',
+      title: 'Ícones animados de e-commerce',
+      intro:
+        'Carrinhos, sacolas, etiquetas de preço, presentes, cartões de crédito e caminhões de entrega para lojas virtuais. Uma animação de adicionar ao carrinho confirma o clique sem precisar de toast, e os ícones de caminhão e de pacote dão um pouco de vida ao status do pedido.',
+      useCases: [
+        'Botões de adicionar ao carrinho nos cards de produto',
+        'Botões de carrinho e sacola no cabeçalho da loja',
+        'Checkout e escolha da forma de pagamento',
+        'Selos de desconto, cupom e promoção',
+        'Etapas de envio e rastreamento do pedido',
+        'Vale-presente e opções de embrulho para presente',
+      ],
+    },
+    Charts: {
+      name: 'Gráficos',
+      title: 'Ícones animados de gráficos',
+      intro:
+        'Gráficos de barras, um gráfico de pizza e setas de tendência para analytics e relatórios. Os ícones de tendência de alta e de baixa mostram num relance se uma métrica subiu ou caiu, o que combina com cards de KPI e históricos de números.',
+      useCases: [
+        'Cards de KPI com métricas em alta ou em queda',
+        'Itens de navegação de analytics e relatórios',
+        'Estados vazios de dashboards',
+        'Resumos financeiros e de portfólio',
+      ],
+    },
+    Development: {
+      name: 'Desenvolvimento',
+      title: 'Ícones animados para desenvolvedores',
+      intro:
+        'Chaves de código, terminal, branches do Git, commits, merges e pull requests, além de servidores e bancos de dados. Feitos para ferramentas de desenvolvimento, sites de documentação e páginas de status em que termos de Git e de infraestrutura fazem parte da interface.',
+      useCases: [
+        'Status de pull requests, merges e branches em ferramentas de desenvolvimento',
+        'Botões de snippet de código e de embed na documentação',
+        'Seções de terminal e CLI em landing pages',
+        'Saúde de servidores e bancos de dados em páginas de status',
+        'Dicas de atalhos de teclado com a tecla Command',
+      ],
+    },
+    'Design & layout': {
+      name: 'Design e layout',
+      title: 'Ícones animados de design e layout',
+      intro:
+        'Grades, colunas, camadas, recorte, caneta e cursor para editores e builders. Eles cabem em barras de ferramentas em que o usuário organiza conteúdo, alterna entre visualização em grade e em tabela ou escolhe uma ferramenta de desenho.',
+      useCases: [
+        'Alternadores de visualização em grade, lista e tabela',
+        'Painéis de camadas em ferramentas de design e de slides',
+        'Ferramentas de recortar e cortar em editores de imagem',
+        'Page builders e seletores de layout',
+        'Alças para arrastar e mover',
+      ],
+    },
+    'Shapes & math': {
+      name: 'Formas e matemática',
+      title: 'Ícones animados de formas e matemática',
+      intro:
+        'Círculos, quadrados, triângulos, hexágonos, um octógono e sinais de divisão. Use-os como ferramentas de forma em apps de desenho, como operadores de calculadora ou como marcadores neutros em diagramas e etapas de onboarding.',
+      useCases: [
+        'Ferramentas de forma em apps de whiteboard e desenho',
+        'Operadores de calculadoras e editores de fórmulas',
+        'Marcadores de tópicos e etapas em diagramas',
+        'Interfaces de quizzes e jogos',
+      ],
+    },
+    Loading: {
+      name: 'Carregamento',
+      title: 'Ícones animados de carregamento',
+      intro:
+        'Spinners e loaders que ficam em loop enquanto algo está em andamento. Coloque um dentro do botão de enviar enquanto a requisição roda, no lugar de um conteúdo que ainda está carregando ou numa splash screen; eles ficam parados quando o usuário prefere movimento reduzido.',
+      useCases: [
+        'Botões de enviar aguardando uma requisição',
+        'Placeholders enquanto uma lista ou um gráfico carrega',
+        'Indicadores de scroll infinito e de carregar mais',
+        'Splash screens e transições de rota',
+        'Progresso de upload e processamento de arquivos',
+      ],
+    },
+    'Social media': {
+      name: 'Redes sociais',
+      title: 'Ícones animados de redes sociais',
+      intro:
+        'Ícones de marca de redes sociais e das ferramentas em que desenvolvedores e designers compartilham trabalho: X, Instagram, YouTube, Discord, Telegram, Figma e outras. Eles animam no hover, o que deixa os links do rodapé e do perfil com mais cara de clicáveis.',
+      useCases: [
+        'Links de redes sociais no rodapé do site',
+        'Botões de compartilhar em posts de blog',
+        'Links de perfil de autores e da equipe',
+        'Botões de convite para servidores de comunidade',
+        'Login com conta de rede social ou de desenvolvedor',
+      ],
+    },
+    Other: {
+      name: 'Outros',
+      title: 'Mais ícones animados',
+      intro:
+        'Ícones que não pertencem a um grupo maior: carinhas de emoji para feedback, uma xícara de café, um relógio, uma linha de pulso e uma indicação de rolar para baixo. O ícone de rolar para baixo é uma dica comum na seção hero de que há mais conteúdo abaixo.',
+      useCases: [
+        'Dicas de rolar para baixo no fim da seção hero',
+        'Carinhas feliz, neutra e triste em widgets de feedback',
+        'Indicadores de atividade e uptime',
+        'Horário de funcionamento e seletores de hora',
+        'Links de “buy me a coffee” e de apoio',
+      ],
+    },
+  },
+  interactions: {
+    loop: {
+      label: 'Loop',
+      title: 'Ícones animados em loop',
+      intro:
+        'Estes ícones tocam sem parar enquanto estão na tela, por isso combinam com estados que duram: algo carregando, um aviso ativo, um terminal esperando. Quando o usuário prefere movimento reduzido, eles param no primeiro frame e continuam funcionando como um ícone comum.',
+      useCases: [
+        'Spinners de carregamento e indicadores de progresso',
+        'Estados ativos de aviso e de erro',
+        'Indicadores de ao vivo e de gravação',
+        'Indicações de rolar para baixo em seções hero',
+        'Marcadores que chamam a atenção para novas notificações',
+      ],
+      example:
+        'Ícones em loop costumam aparecer em spinners de carregamento, alertas ativos, um sino tocando ou uma dica de rolar para baixo.',
+      description:
+        'Toca continuamente; fica no primeiro frame estático quando o usuário prefere movimento reduzido.',
+      reducedMotion:
+        'Com movimento reduzido, o ícone não inicia sozinho e fica no primeiro frame, estático.',
+      plays: PLAYS.loop.other,
+    },
+    'click-toggle': {
+      label: 'Alternar no clique',
+      title: 'Ícones animados que alternam no clique',
+      intro:
+        'Cada clique anima a passagem entre dois estados, e o ícone permanece no novo estado. Isso faz desses ícones a parte visual de um controle liga/desliga. O ícone sempre mostra o estado atual; combine-o com aria-pressed ou com um atributo checked e o botão se explica sozinho.',
+      useCases: [
+        'Botões de mudo',
+        'Campos de senha com mostrar e ocultar',
+        'Botões de menu hambúrguer e de fechar',
+        'Controles de play e pause',
+        'Botões de curtir, dar estrela e salvar',
+        'Checkboxes, radio buttons e switches',
+      ],
+      example:
+        'Ícones que alternam no clique costumam controlar botões de mudo, mostrar/ocultar senha, menu/fechar, play/pause e curtir.',
+      description:
+        'Alterna entre dois estados no clique, ou troca na hora quando o usuário prefere movimento reduzido.',
+      reducedMotion:
+        'Com movimento reduzido, o clique troca para o outro estado na hora, sem a animação de transição.',
+      plays: PLAYS['click-toggle'].other,
+    },
+    'click-replay': {
+      label: 'Reproduzir no clique',
+      title: 'Ícones animados no clique',
+      intro:
+        'Estes ícones tocam uma vez, desde o início, a cada clique: uma pequena confirmação de que a ação deu certo. Combinam com ações pontuais que não deixam um estado para trás: enviar, salvar, atualizar, baixar, imprimir ou excluir.',
+      useCases: [
+        'Botões de enviar em formulários de chat e comentários',
+        'Botões de salvar, baixar e enviar arquivos',
+        'Botões de atualizar e girar',
+        'Botões de adicionar ao carrinho',
+        'Botões de formatação de texto em editores',
+      ],
+      example:
+        'Ícones de clique costumam confirmar botões de enviar, salvar, atualizar, baixar, adicionar ao carrinho e formatar.',
+      description:
+        'Toca de novo desde o início a cada clique, a menos que o usuário prefira movimento reduzido.',
+      reducedMotion:
+        'Com movimento reduzido, os cliques continuam chegando ao seu handler, mas a animação não toca.',
+      plays: PLAYS['click-replay'].other,
+    },
+    hover: {
+      label: 'Hover',
+      title: 'Ícones animados no hover',
+      intro:
+        'Estes ícones tocam para a frente quando o ponteiro entra e voltam ao contrário quando ele sai, então o movimento acompanha o cursor e nunca termina pela metade. Combinam com itens de navegação e botões que antecipam o que abrem: a tampa da lixeira se levanta, a engrenagem de configurações gira, a pasta se abre.',
+      useCases: [
+        'Itens da sidebar e do menu de navegação',
+        'Botões de excluir que levantam a tampa antes do clique',
+        'Links de configurações e de perfil',
+        'Controles de aumentar e diminuir zoom',
+        'Links de redes sociais no rodapé',
+      ],
+      example:
+        'Ícones de hover costumam marcar itens de navegação, botões de excluir, configurações, controles de zoom e links de redes sociais.',
+      description: 'Toca para a frente no mouseenter e ao contrário no mouseleave.',
+      reducedMotion: 'Com movimento reduzido, o hover não toca a animação.',
+      plays: PLAYS.hover.other,
+    },
+    'hover-replay': {
+      label: 'Reproduzir no hover',
+      title: 'Ícones animados que tocam no hover',
+      intro:
+        'Estes ícones tocam uma vez quando o ponteiro entra e terminam sozinhos, o que evita que passadas rápidas por uma barra de ferramentas virem um movimento nervoso. A maior parte do conjunto funciona assim: setas, arquivos, dispositivos, clima e ícones de marcas que ganham vida no hover.',
+      useCases: [
+        'Listas de recursos e tabelas de preços',
+        'Links com seta e botões de call to action',
+        'Botões de barras de ferramentas em editores e dashboards',
+        'Cards numa grade de landing page',
+        'Links de rodapé e de contato',
+      ],
+      example:
+        'Ícones que tocam no hover costumam dar vida a links com seta, listas de recursos, botões de barras de ferramentas e cards de landing page.',
+      description:
+        'Toca uma vez no mouseenter, a menos que o usuário prefira movimento reduzido. Sair não interrompe a animação, e entrar durante a reprodução não a reinicia.',
+      reducedMotion: 'Com movimento reduzido, o hover não toca a animação.',
+      plays: PLAYS['hover-replay'].other,
+    },
+    'hover-loop': {
+      label: 'Loop no hover',
+      title: 'Ícones animados em loop no hover',
+      intro:
+        'Estes ícones ficam em loop enquanto o ponteiro está sobre eles e terminam o ciclo atual depois que ele sai, então nunca param no meio do movimento. Funcionam bem em links que convidam a olhar com mais calma, principalmente ícones de redes sociais e de comunidades.',
+      useCases: [
+        'Links de redes sociais no cabeçalho e no rodapé',
+        'Botões de convite para comunidades e chats',
+        'Links de portfólio e de perfil',
+        'Seletores de idioma e região',
+      ],
+      example:
+        'Ícones em loop no hover costumam marcar links de redes sociais, convites para comunidades, links de portfólio e seletores de idioma.',
+      description:
+        'Fica em loop durante o hover, termina o ciclo atual depois do mouseleave e fica estático quando o usuário prefere movimento reduzido.',
+      reducedMotion: 'Com movimento reduzido, o ícone fica estático durante o hover.',
+      plays: PLAYS['hover-loop'].other,
+    },
+  },
+};
diff --git a/website/src/i18n/messages/ru/common.ts b/website/src/i18n/messages/ru/common.ts
new file mode 100644
index 0000000..e2e3b5d
--- /dev/null
+++ b/website/src/i18n/messages/ru/common.ts
@@ -0,0 +1,46 @@
+import type { Messages } from '../en';
+
+export const common: Messages['common'] = {
+  skipToContent: 'Перейти к содержимому',
+  ogImageAlt: 'useAnimations: бесплатные анимированные иконки для React, shadcn/ui, Lottie и SVG',
+  homeLabel: 'Главная страница useAnimations',
+  mainNav: 'Основная навигация',
+  browseIcons: 'Смотреть иконки',
+  nav: {
+    icons: 'Иконки',
+    categories: 'Категории',
+    documentation: 'Документация',
+    shadcn: 'shadcn',
+    lottie: 'Lottie-иконки',
+    license: 'Лицензия',
+  },
+  footer: {
+    tagline:
+      'Бесплатные анимированные иконки со встроенными взаимодействиями. Лицензия MIT, сделаны для React.',
+    product: 'Продукт',
+    developers: 'Разработчикам',
+    follow: 'Мы в сети',
+    languages: 'Языки',
+    allIcons: 'Все иконки',
+    categories: 'Категории',
+    interactions: 'Взаимодействия',
+    lottieIcons: 'Lottie-иконки',
+    shadcnIcons: 'Иконки для shadcn/ui',
+    documentation: 'Документация',
+    licencing: 'Лицензия и условия',
+    shadcnRegistry: 'Реестр shadcn',
+    mitLicense: 'Лицензия MIT',
+    builtWith: 'Сайт сделан на Astro',
+  },
+  breadcrumb: 'Навигационная цепочка',
+  crumbs: { icons: 'Иконки', categories: 'Категории', interactions: 'Взаимодействия' },
+  faq: 'Частые вопросы',
+  copy: 'Копировать',
+  copied: 'Скопировано',
+  pressCtrlC: 'Нажмите Ctrl+C',
+  languageBanner: {
+    text: 'Эта страница есть и на русском языке.',
+    action: 'Открыть на русском',
+    dismiss: 'Закрыть',
+  },
+};
diff --git a/website/src/i18n/messages/ru/docs.ts b/website/src/i18n/messages/ru/docs.ts
new file mode 100644
index 0000000..28291b9
--- /dev/null
+++ b/website/src/i18n/messages/ru/docs.ts
@@ -0,0 +1,44 @@
+import type { Messages } from '../en';
+import { pluralIn } from '../../format';
+
+const animated = (n: number) =>
+  pluralIn('ru')(n, {
+    one: 'анимированную иконку',
+    few: 'анимированные иконки',
+    many: 'анимированных иконок',
+    other: 'анимированной иконки',
+  });
+
+export const docs: Messages['docs'] = {
+  title: 'Документация — useAnimations',
+  description: (iconCount: number) =>
+    `Как использовать ${animated(iconCount)} в React и shadcn/ui: взаимодействия, пропсы, цвета, файлы и доступность.`,
+  badge: 'Документация',
+  onThisPage: 'На этой странице',
+  viewAsMarkdown: 'Открыть в Markdown',
+  headline: 'Документация useAnimations',
+  summary: 'Как использовать анимированные иконки useAnimations в React и shadcn/ui.',
+  crumb: 'Документация',
+  faq: [
+    {
+      question: 'Можно ли бесплатно использовать useAnimations в коммерческих проектах?',
+      answer:
+        'Да. Иконки и React-пакет распространяются по лицензии MIT, указывать авторство не нужно.',
+    },
+    {
+      question: 'Как использовать иконки useAnimations в React?',
+      answer:
+        'Установите react-useanimations, импортируйте UseAnimations и иконку (например, react-useanimations/lib/checkmark), затем отрендерите <UseAnimations animation={checkmark} size={32} />.',
+    },
+    {
+      question: 'Как изменить цвет иконки?',
+      answer:
+        'Иконки берут цвет текста. Его можно поменять через strokeColor и fillColor, CSS-свойство color или стили для path.',
+    },
+    {
+      question: 'Работает ли это без React?',
+      answer:
+        'Сам пакет сделан для React. Но каждая иконка есть и в виде стандартного файла Lottie JSON, который воспроизводит любой Lottie-плеер (lottie-web, dotLottie, lottie-react-native, lottie-ios, lottie-android, Flutter), и в виде статичного SVG. Подробнее — в разделе «Использование без React» и на useanimations.com/lottie-icons.',
+    },
+  ],
+};
diff --git a/website/src/i18n/messages/ru/home.ts b/website/src/i18n/messages/ru/home.ts
new file mode 100644
index 0000000..02f10d0
--- /dev/null
+++ b/website/src/i18n/messages/ru/home.ts
@@ -0,0 +1,174 @@
+import { pluralIn } from '../../format';
+import type { Messages } from '../en';
+import type { FaqLinks, HomeFaq } from '../en/home';
+import { freeAnimated, icons, iconsOf } from './hubs';
+
+const plural = pluralIn('ru');
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const home: Messages['home'] = {
+  title: 'Микроанимации и анимированные иконки — useAnimations',
+  description: (count: number) =>
+    `${plural(count, { one: 'бесплатная микроанимация', few: 'бесплатные микроанимации', many: 'бесплатных микроанимаций', other: 'бесплатной микроанимации' })} для UI: библиотека анимированных иконок для React, shadcn/ui и Lottie с hover, кликом и циклом. MIT.`,
+
+  hero: {
+    badge: (count: number) => `${icons(count)} · без зависимостей · MIT`,
+    headline: { start: 'Иконки, которые ', accent: 'оживают.', end: '' },
+    h1: 'Бесплатные анимированные иконки для React, shadcn/ui и Lottie',
+    intro: (count: number) =>
+      `${plural(count, { one: 'микроанимация', few: 'микроанимации', many: 'микроанимаций', other: 'микроанимации' })} ручной работы со встроенными микровзаимодействиями: при наведении, по клику и в цикле. Используйте их как React-компонент, добавляйте через shadcn или скачивайте SVG и Lottie JSON. Лицензия MIT.`,
+    browse: 'Смотреть иконки',
+    fieldHint: 'Проведите курсором по полю.',
+  },
+
+  numbers: {
+    label: 'Коротко',
+    icons: 'анимированных иконок',
+    interactions: 'встроенных взаимодействий',
+    size: 'размер плеера (gzip)',
+    dependencies: 'зависимостей',
+  },
+
+  interactions: {
+    eyebrow: 'Встроенные взаимодействия',
+    title: 'Каждая иконка знает, как двигаться.',
+    intro:
+      'Каждая иконка поставляется со взаимодействием, для которого её нарисовали. Вставьте её в разметку — и всё работает, а другое поведение задаётся одним пропом. Попробуйте:',
+    demos: {
+      loop: 'Проигрывается непрерывно — для лоадеров и фоновых статусов.',
+      'click-toggle': 'Переключается между двумя состояниями: меню и закрытие, play и пауза.',
+      'click-replay': 'Проигрывается с начала при каждом клике — как отклик на действие.',
+      hover: 'Проигрывается вперёд при наведении и назад, когда курсор уходит.',
+      'hover-loop': 'Крутится в цикле при наведении и доигрывает цикл, когда курсор уходит.',
+      'hover-replay': 'Проигрывается с начала при каждом наведении.',
+    },
+  },
+
+  browser: {
+    eyebrow: 'Библиотека',
+    title: (count: number) => freeAnimated(count),
+    intro:
+      'Наведите курсор или кликните, чтобы запустить анимацию. Откройте иконку, чтобы получить код и файлы: Lottie JSON, SVG и ZIP.',
+    search: 'Поиск иконок',
+    searchPlaceholder: (count: number) =>
+      `Поиск среди ${iconsOf(count)} — например, «eye», «bell» или «arrow»`,
+    interaction: 'Взаимодействие',
+    allInteractions: 'Все взаимодействия',
+    color: 'Цвет иконок',
+    colors: {
+      text: 'Цвет текста',
+      indigo: 'Индиго',
+      red: 'Красный',
+      amber: 'Янтарный',
+      teal: 'Бирюзовый',
+      violet: 'Фиолетовый',
+    },
+    customColor: 'Свой цвет',
+    size: 'Размер',
+    category: 'Категория',
+    all: 'Все',
+    count: { one: '{n} иконка', few: '{n} иконки', many: '{n} иконок', other: '{n} иконки' },
+    noMatch: 'Ничего не найдено.',
+    noMatchHintHtml: (href: string) =>
+      `Попробуйте другое слово или ${link(href, 'предложите иконку')}.`,
+  },
+
+  everywhere: {
+    eyebrow: 'Как вам удобно',
+    title: 'Установили, импортировали, готово.',
+    intro:
+      'React-компонент без зависимостей, shadcn-реестр, файлы для скачивания по постоянным URL и каталог, который умеют читать ИИ-агенты.',
+    docs: 'Читать документацию →',
+    tablist: 'Платформа',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Файлы', agents: 'Агенты' },
+    codeText: {
+      afterAdding: 'затем',
+      files: 'Каждая иконка в виде SVG, анимации (Lottie JSON) и ZIP-архива с тем и другим',
+    },
+  },
+
+  features: {
+    title: 'Маленькие, доступные и легко стилизуются.',
+    colors: 'Берут ваши цвета',
+    colorsHtml: `Иконки используют ${code('currentColor')}: они сами подхватывают цвет текста, hover-состояния и тёмную тему. Цвет можно переопределить пропом, классом или обычным CSS.`,
+    tiny: 'Минимальный вес',
+    tinyText: 'Встроенный плеер и ноль зависимостей. Каждая иконка — отдельный модуль на 2 КБ.',
+    accessible: 'Доступность из коробки',
+    accessibleText:
+      'Учитывают настройку уменьшения движения, проигрывают hover-анимации при фокусе с клавиатуры и не мешают скринридерам, пока вы не добавите подпись.',
+    ssr: 'Готовы к серверному рендерингу',
+    ssrText:
+      'Клиентский компонент, который без проблем рендерится в Next.js, Remix и Astro. Иконки — это обычные данные, их можно импортировать где угодно.',
+    agents: 'Сделаны для ИИ-агентов',
+    agentsHtml: (iconsJson: string, llmsTxt: string) =>
+      `Типизированный каталог с ключевыми словами для каждой иконки, ${link(iconsJson, 'icons.json')}, ${link(llmsTxt, 'llms.txt')} и документация в Markdown.`,
+  },
+
+  browse: {
+    title: 'Найдите подходящую микроанимацию.',
+    byCategory: 'По категориям',
+    byInteraction: 'По взаимодействиям',
+    formats: 'Все иконки и форматы',
+  },
+
+  hubs: {
+    icons: 'Все анимированные иконки',
+    categories: 'Категории иконок',
+    interactions: 'Иконки по взаимодействиям',
+    lottie: 'Lottie-иконки (JSON)',
+    shadcn: 'Анимированные иконки для shadcn/ui',
+  },
+
+  faqTitle: 'Вопросы',
+  faq: (f: { version: string; links: FaqLinks }): HomeFaq => [
+    {
+      question: 'Что такое микроанимации и анимированные иконки?',
+      answer:
+        'Микроанимации — это короткие движения с одной задачей, которые отвечают на действие пользователя: иконка меню превращается в кнопку закрытия, сердечко заполняется, когда вы лайкаете пост, колокольчик звенит при новом уведомлении. Анимированные иконки — самый распространённый их вид. С ними интерфейс ощущается отзывчивым, а смена состояния видна без лишнего текста.',
+    },
+    {
+      question: 'Чем файлы Lottie отличаются от SVG?',
+      answer:
+        'Файл Lottie JSON содержит всю анимацию и проигрывается в любом Lottie-плеере, в том числе во встроенном плеере react-useanimations. Файлы SVG — это статичные изображения иконки в покое, по одному на состояние (например, eye и eye-off), для мест, где ничего не должно двигаться: писем, документов, графических редакторов или фолбэка без JavaScript.',
+    },
+    {
+      question: 'Работает ли это с Next.js и серверным рендерингом?',
+      answer:
+        "Да. Компонент помечен 'use client' и рисует анимацию только в браузере, поэтому рендерится из серверных компонентов и SSR-фреймворков вроде Next.js, Remix и Astro без динамического импорта. Модули иконок — обычные данные: серверные компоненты могут их импортировать и передавать как пропсы.",
+      link: { href: f.links.serverRendering, label: 'Next.js и серверный рендеринг' },
+    },
+    {
+      question: 'Можно ли использовать иконки в коммерческих проектах?',
+      answer:
+        'Да. Иконки и пакет react-useanimations распространяются по лицензии MIT: их можно использовать, изменять и распространять в личных и коммерческих проектах. Указывать авторство не обязательно, но мы будем благодарны.',
+      link: { href: f.links.licence, label: 'Лицензия и условия' },
+    },
+    {
+      question: 'Можно ли использовать иконки без React?',
+      answer:
+        'Да. Каждая иконка — это стандартный файл Lottie JSON, поэтому она проигрывается через lottie-web на чистом JavaScript, во Vue, Svelte, Angular или CMS, а также в Lottie-плеерах для iOS, Android и Flutter. На странице «Lottie-иконки» есть URL файлов и готовые сниппеты lottie-web для каждого взаимодействия.',
+      link: { href: f.links.lottie, label: 'Lottie-иконки' },
+    },
+    {
+      question: 'Насколько иконки увеличат бандл?',
+      answer: `Плеер в react-useanimations ${f.version} весит около 8 КБ в gzip и не имеет зависимостей, а каждая иконка — отдельный модуль от 1 до 15 КБ (медиана — 2 КБ), так что в бандл попадают только те иконки, которые вы импортировали.`,
+    },
+  ],
+
+  cta: {
+    title: { start: 'Добавьте интерфейсу ', accent: 'жизни.', end: '' },
+    text: 'Бесплатно и по лицензии MIT — для личных и коммерческих проектов.',
+    start: 'Начать',
+  },
+
+  schema: {
+    software: (count: number) =>
+      `React-компонент и ${plural(count, { one: 'анимированная иконка', few: 'анимированные иконки', many: 'анимированных иконок', other: 'анимированной иконки' })} (Lottie) со встроенными взаимодействиями: при наведении, по клику и в цикле. Без зависимостей.`,
+    catalogName: 'Каталог иконок useAnimations',
+    catalog: (count: number) =>
+      `Все ${icons(count)} useAnimations: id, название, категория, ключевые слова, взаимодействие, URL файлов Lottie JSON, SVG и ZIP, импорт для React и команда shadcn.`,
+  },
+};
diff --git a/website/src/i18n/messages/ru/hubs.ts b/website/src/i18n/messages/ru/hubs.ts
new file mode 100644
index 0000000..fc46f2d
--- /dev/null
+++ b/website/src/i18n/messages/ru/hubs.ts
@@ -0,0 +1,192 @@
+import type { Interaction } from 'react-useanimations';
+import { formIn, listIn, pluralIn } from '../../format';
+import type { Messages } from '../en';
+import type { CategoryFacts, Faq, InteractionFacts } from '../en/hubs';
+import { CATEGORY_TOPIC, PLAYS } from './taxonomy';
+
+const list = listIn('ru');
+const plural = pluralIn('ru');
+const form = formIn('ru');
+
+export const icons = (n: number) =>
+  plural(n, { one: 'иконка', few: 'иконки', many: 'иконок', other: 'иконки' });
+/** Genitive after «из», «среди»: «из 21 иконки», «из 12 иконок». */
+export const iconsOf = (n: number) =>
+  plural(n, { one: 'иконки', few: 'иконок', many: 'иконок', other: 'иконки' });
+export const freeAnimated = (n: number) =>
+  plural(n, {
+    one: 'бесплатная анимированная иконка',
+    few: 'бесплатные анимированные иконки',
+    many: 'бесплатных анимированных иконок',
+    other: 'бесплатной анимированной иконки',
+  });
+const plays = (interaction: Interaction, n: number) =>
+  form(n, { one: PLAYS[interaction].one, other: PLAYS[interaction].other });
+const lower = (text: string) => text[0].toLowerCase() + text.slice(1);
+const topic = (f: CategoryFacts) => CATEGORY_TOPIC[f.name] ?? `категории «${f.name}»`;
+
+/** Up to `max` titles, then «и ещё N». */
+const titles = (items: string[], max = 12) =>
+  items.length > max
+    ? `${items.slice(0, max).join(', ')} и ещё ${items.length - max}`
+    : list(items);
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+
+/** The formats every icon comes in, ending with the SVG note. */
+const formats = (f: CategoryFacts) => {
+  const base = ['React-компонента', 'компонента shadcn/ui', 'анимации Lottie JSON'];
+  if (f.withSvg === f.count) return `в виде ${list([...base, 'статичных SVG'])}`;
+  const svg = f.withSvg ? `, а ${f.withSvg} из них есть ещё и в виде статичных SVG` : '';
+  return `в виде ${list(base)}${svg}`;
+};
+
+export const hubs: Messages['hubs'] = {
+  titleSuffix: ' — useAnimations',
+  iconCount: icons,
+
+  category: {
+    titles: (f: CategoryFacts) => [
+      `${f.title} для React и Lottie`,
+      `${f.title} для React`,
+      `Бесплатные анимированные иконки ${topic(f)}`,
+      f.title,
+    ],
+    descriptions: (f: CategoryFacts) => {
+      const head = `${freeAnimated(f.count)} ${topic(f)}`;
+      const examples = list(f.titles.slice(0, 3));
+      return [
+        `${head}, среди них ${examples}. Микроанимации при наведении, по клику и в цикле для React, shadcn/ui и Lottie JSON, лицензия MIT.`,
+        `${head}, среди них ${examples}. Для React, shadcn/ui и Lottie JSON, лицензия MIT.`,
+        `${head}, среди них ${examples}. Для React, shadcn/ui и Lottie, MIT.`,
+        `${head} для React, shadcn/ui и Lottie JSON, лицензия MIT.`,
+      ];
+    },
+    summary: (f: CategoryFacts) => {
+      const how =
+        f.groups.length > 1
+          ? `Из ${iconsOf(f.count)} ${list(f.groups.map((g) => `${g.count} ${plays(g.interaction, g.count)}`))}.`
+          : f.count === 1
+            ? `Единственная иконка категории ${plays(f.groups[0].interaction, 1)}.`
+            : `Все ${icons(f.count)} ${plays(f.groups[0].interaction, f.count)}.`;
+      const each = f.count === 1 ? 'Она доступна' : 'Каждая доступна';
+      return `${how} ${each} ${formats(f)}. Всё бесплатно, в том числе для коммерческих проектов, по лицензии MIT.`;
+    },
+    faq: (f: CategoryFacts): Faq => {
+      const name = lower(f.title);
+      const ex = f.example;
+      const n = f.expressions.length;
+      const svg = f.withSvg
+        ? '; статичные SVG лежат на странице каждой иконки (страницы иконок — на английском)'
+        : '';
+      const expressions = n
+        ? n === 1
+          ? `${f.expressions[0]} использует выражения After Effects, поэтому в браузере ей нужна полная сборка lottie-web.`
+          : `${titles(f.expressions, 6)} используют выражения After Effects, поэтому в браузере им нужна полная сборка lottie-web.`
+        : 'Ни одна иконка этой категории не использует выражения, так что достаточно облегчённой сборки lottie-web.';
+      return [
+        {
+          question: `Какие ${name} есть в наборе?`,
+          answer: `${icons(f.count)}: ${titles(f.titles)}. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.`,
+        },
+        {
+          question: `Как использовать эти ${name} в React?`,
+          answer: `Установите react-useanimations, добавьте ${ex.importLine} и отрендерите <UseAnimations animation={${ex.exportName}} size={32} />. Иконка проигрывает своё взаимодействие («${ex.interactionLabel}») и берёт цвет текста. Если у вас shadcn/ui, вместо этого выполните ${ex.shadcnCommand}.`,
+        },
+        {
+          question: `Можно ли использовать эти ${name} без React?`,
+          answer: `Да. Каждая иконка — это файл Lottie JSON по адресу ${f.site}/icons/<id>.json (например, ${f.site}/icons/${ex.id}.json), который воспроизводят lottie-web, lottie-ios, lottie-android и пакет lottie для Flutter${svg}. ${expressions}`,
+        },
+      ];
+    },
+    badge: (n: number) => `${icons(n)} · лицензия MIT`,
+    allIcons: (name: string) => `Все иконки категории «${name}»`,
+    whereToUse: 'Где их использовать',
+    byInteraction: 'По взаимодействию',
+    addOne: 'Добавьте иконку в приложение',
+    addOneHtml: (label: string, name: string) =>
+      `В React установите ${code('react-useanimations')} и импортируйте иконку: она сама проигрывает своё взаимодействие («${label}»). Все иконки этой категории подключаются так же — замените ${code(name)} на имя со страницы нужной иконки.`,
+    shadcnHtml: (href: string) =>
+      `С ${link(href, 'shadcn/ui')} готовый компонент добавляется через CLI:`,
+    noReactHtml: (href: string) =>
+      `Не используете React? Каждая иконка — это файл Lottie JSON по адресу ${code('/icons/&lt;id&gt;.json')}; плееры для веба, iOS, Android и Flutter описаны на странице ${link(href, 'Lottie-иконки')}.`,
+    more: 'Другие категории',
+    allIconsButton: 'Все иконки',
+  },
+
+  interaction: {
+    titles: (f: InteractionFacts) => [
+      `${f.title} для React и Lottie`,
+      `${f.title} для React`,
+      f.title,
+    ],
+    descriptions: (f: InteractionFacts) => {
+      const which = form(f.count, { one: 'которая', other: 'которые' });
+      const head = `${freeAnimated(f.count)}, ${which} ${plays(f.interaction, f.count)}`;
+      return [
+        `${head}, например ${list(f.titles.slice(0, 3))}. Для React, shadcn/ui и Lottie JSON, MIT.`,
+        `${head}. Для React, shadcn/ui и Lottie JSON, лицензия MIT.`,
+        `${head}. Для React, shadcn/ui и Lottie, MIT.`,
+      ];
+    },
+    faq: (f: InteractionFacts): Faq => [
+      {
+        question: `Какие иконки используют взаимодействие «${f.label}»?`,
+        answer: `${icons(f.count)}: ${titles(f.titles, 15)}. ${f.example}`,
+      },
+      {
+        question: 'Что происходит, если у пользователя включено уменьшение движения?',
+        answer: `${f.reducedMotion} React-компонент читает prefers-reduced-motion и реагирует на изменение настройки, так что писать для этого код не нужно.`,
+      },
+      {
+        question: 'Как изменить взаимодействие иконки?',
+        answer: `Каждая иконка проигрывает то взаимодействие, для которого её нарисовали. Передайте interaction="${f.interaction}", чтобы так же вела себя любая другая иконка, или другое значение ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay'), чтобы сменить его. Воспроизведение настраивается пропсами autoplay, loop и speed.${
+          f.interaction === 'click-toggle'
+            ? ' Чтобы управлять состоянием самостоятельно, передайте active={isOn} и меняйте его в onClick: тогда клики сами по себе иконку больше не переключают.'
+            : ''
+        }`,
+      },
+    ],
+    allIcons: (label: string) => `Все иконки со взаимодействием «${label}»`,
+    behaviour: 'Как это работает',
+    hoverNote:
+      ' Касание сенсорного экрана hover-анимацию не запускает, а фокус с клавиатуры запускает, если иконка находится внутри фокусируемого элемента.',
+    handled: 'Всё это берёт на себя React-компонент — вам остаётся только выбрать иконку.',
+    whereToUse: 'Где использовать',
+    byCategory: 'По категориям',
+    useInReact: 'Использование в React',
+    overrideHtml: `Перечисленные здесь иконки проигрывают это взаимодействие по умолчанию. Его можно задать и любой другой иконке — через проп ${code('interaction')}.`,
+    normallyUses: (title: string, interaction: string) =>
+      `${title} по умолчанию использует '${interaction}'`,
+    extra: {
+      loop: 'Зацикленные иконки запускаются сами и встают на паузу, когда уходят за пределы экрана. Замедлите анимацию через speed, проиграйте её один раз с loop={false} или оставьте неподвижной с autoplay={false}:',
+      'click-toggle':
+        'По умолчанию иконка переключается от кликов. Чтобы синхронизировать её с вашим состоянием, передайте active: иконка анимируется при каждом изменении active, а клики её больше не переключают.',
+      'click-replay':
+        'Поместите иконку в настоящую кнопку через render-проп, чтобы на неё можно было перевести фокус и чтобы скринридеры её объявляли. Ваш onClick выполняется первым; вызовите event.preventDefault(), чтобы пропустить анимацию.',
+      hover:
+        'Оберните иконку в ссылку или кнопку через render-проп: тогда анимация проигрывается и при фокусе с клавиатуры, а касания сенсорного экрана её не запускают.',
+      'hover-replay':
+        'Пусть на наведение реагирует вся карточка или ссылка, а не только иконка: с render-пропом события вешаются на ваш элемент, и фокус с клавиатуры тоже запускает анимацию.',
+      'hover-loop':
+        'Используйте render-проп, чтобы цикл запускала вся ссылка, в том числе при фокусе с клавиатуры. Темп меняется через speed:',
+    },
+    codeText: {
+      halfSpeed: 'вдвое медленнее',
+      playsOnce: 'проигрывается один раз и останавливается',
+      staticFrame: 'статичный первый кадр',
+      endState: 'true показывает конечное состояние',
+      closeMenu: 'Закрыть меню',
+      openMenu: 'Открыть меню',
+      download: 'Скачать',
+      archive: 'В архив',
+      weeklyGrowth: 'Рост за неделю',
+    },
+    docsHtml: (docs: string, lottie: string) =>
+      `Все пропсы описаны в ${link(docs, 'документации')}. Вне React иконки — это файлы Lottie JSON; на странице ${link(lottie, 'Lottie-иконки')} показано, как воссоздать взаимодействия с помощью lottie-web.`,
+    other: 'Другие взаимодействия',
+    browseByCategory: 'Смотреть по категориям',
+  },
+};
diff --git a/website/src/i18n/messages/ru/index.ts b/website/src/i18n/messages/ru/index.ts
new file mode 100644
index 0000000..b8890cd
--- /dev/null
+++ b/website/src/i18n/messages/ru/index.ts
@@ -0,0 +1,12 @@
+// Russian.
+import type { Messages } from '../en';
+import { common } from './common';
+import { docs } from './docs';
+import { home } from './home';
+import { hubs } from './hubs';
+import { islands } from './islands';
+import { licence } from './licence';
+import { pages } from './pages';
+import { taxonomy } from './taxonomy';
+
+export const messages: Messages = { common, taxonomy, hubs, home, docs, licence, pages, islands };
diff --git a/website/src/i18n/messages/ru/islands.ts b/website/src/i18n/messages/ru/islands.ts
new file mode 100644
index 0000000..3d007a5
--- /dev/null
+++ b/website/src/i18n/messages/ru/islands.ts
@@ -0,0 +1,51 @@
+import type { Messages } from '../en';
+
+export const islands: Messages['islands'] = {
+  iconCard: {
+    hints: {
+      loop: 'Цикл',
+      'click-toggle': 'Клик',
+      'click-replay': 'Клик',
+      hover: 'Наведение',
+      'hover-loop': 'Наведение',
+      'hover-replay': 'Наведение',
+    },
+  },
+  iconDialog: {
+    hints: {
+      loop: 'Проигрывается сама',
+      'click-toggle': 'Кликните, чтобы переключить',
+      'click-replay': 'Кликните, чтобы повторить',
+      hover: 'Наведите, чтобы запустить, уведите — чтобы вернуть назад',
+      'hover-loop': 'Наведите, чтобы запустить цикл',
+      'hover-replay': 'Наведите, чтобы запустить',
+    },
+    preview: 'Превью {title}',
+    colors: 'Цвет превью',
+    color: 'Цвет {color}',
+    textColor: 'Цвет текста',
+    interaction: 'Взаимодействие',
+    duration: 'Длительность',
+    seconds: '{seconds} с',
+    import: 'Импорт',
+    close: 'Закрыть',
+    code: 'Код',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Файлы' },
+    copy: 'Копировать',
+    download: 'Скачать',
+    iconPage: 'Страница иконки →',
+  },
+  interactionDemo: {
+    click: 'Кликните по карточке',
+    loop: 'Проигрывается сама',
+    hover: 'Наведите на карточку',
+  },
+  mobileMenu: {
+    menu: 'Меню',
+    nav: 'Основная навигация',
+  },
+  themeToggle: {
+    toLight: 'Включить светлую тему',
+    toDark: 'Включить тёмную тему',
+  },
+};
diff --git a/website/src/i18n/messages/ru/licence.ts b/website/src/i18n/messages/ru/licence.ts
new file mode 100644
index 0000000..f89fb8f
--- /dev/null
+++ b/website/src/i18n/messages/ru/licence.ts
@@ -0,0 +1,26 @@
+import type { Messages } from '../en';
+
+export const licence: Messages['licence'] = {
+  title: 'Лицензия и условия — useAnimations',
+  description:
+    'Иконки useAnimations и пакет react-useanimations: лицензия MIT, бесплатно для личных и коммерческих проектов, можно распространять, без указания авторства.',
+  name: 'Лицензия и условия',
+  heading: 'Пользуйтесь бесплатно. Лицензия MIT.',
+  introHtml: (mitHref: string) =>
+    `Иконки useAnimations и пакет <code>react-useanimations</code> распространяются по <a href="${mitHref}">лицензии MIT</a>.`,
+  canDo: 'Что можно делать',
+  canDoItemsHtml: [
+    '<strong>Использовать</strong> иконки в личных и коммерческих сайтах, приложениях и продуктах.',
+    '<strong>Изменять</strong> их: цвета, размеры, тайминги и саму анимацию.',
+    '<strong>Распространять</strong> их, в том числе в составе наборов иконок, шаблонов, тем, UI-китов и реестров компонентов.',
+  ],
+  attribution: 'Указание авторства',
+  attributionText:
+    'Не обязательно, но мы будем благодарны. Если распространяете сами файлы, сохраните уведомление о лицензии, а если хотите упомянуть нас — вот готовая строка:',
+  credit: (link: string) => `Анимированные иконки от ${link}`,
+  noWarranty: 'Без гарантий',
+  noWarrantyText: 'Иконки и код предоставляются «как есть», без каких-либо гарантий.',
+  licenseText: 'Текст лицензии',
+  bindingNote:
+    'Ниже приведён оригинальный текст лицензии на английском языке — юридическую силу имеет именно он.',
+};
diff --git a/website/src/i18n/messages/ru/pages.ts b/website/src/i18n/messages/ru/pages.ts
new file mode 100644
index 0000000..cbe31c5
--- /dev/null
+++ b/website/src/i18n/messages/ru/pages.ts
@@ -0,0 +1,278 @@
+import { listIn, pluralIn } from '../../format';
+import type { Messages } from '../en';
+import type { Faq } from '../en/hubs';
+import { freeAnimated, icons, iconsOf } from './hubs';
+
+const plural = pluralIn('ru');
+const animated = (n: number) =>
+  plural(n, {
+    one: 'анимированная иконка',
+    few: 'анимированные иконки',
+    many: 'анимированных иконок',
+    other: 'анимированной иконки',
+  });
+const categoriesCount = (n: number) =>
+  plural(n, { one: 'категория', few: 'категории', many: 'категорий', other: 'категории' });
+/** «в 20 категориях», «в 21 категории». */
+const inCategories = (n: number) =>
+  plural(n, { one: 'категории', few: 'категориях', many: 'категориях', other: 'категории' });
+/** Genitive: «для 300 анимированных иконок». */
+const ofAnimated = (n: number) =>
+  plural(n, {
+    one: 'анимированной иконки',
+    few: 'анимированных иконок',
+    many: 'анимированных иконок',
+    other: 'анимированной иконки',
+  });
+const microInteractions = (n: number) =>
+  plural(n, {
+    one: 'микровзаимодействие',
+    few: 'микровзаимодействия',
+    many: 'микровзаимодействий',
+    other: 'микровзаимодействия',
+  });
+const interactionsCount = (n: number) =>
+  plural(n, {
+    one: 'взаимодействие',
+    few: 'взаимодействия',
+    many: 'взаимодействий',
+    other: 'взаимодействия',
+  });
+const components = (n: number) =>
+  plural(n, { one: 'компонент', few: 'компонента', many: 'компонентов', other: 'компонента' });
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+const strong = (text: string) => `<strong class="font-medium text-fg">${text}</strong>`;
+
+export const pages: Messages['pages'] = {
+  icons: {
+    titles: (count: number) => [`Все ${animated(count)} по категориям`, `Все ${animated(count)}`],
+    descriptions: (count: number, categories: number) => [
+      `Все иконки useAnimations на одной странице: ${freeAnimated(count)} в ${inCategories(categories)} для React, shadcn/ui, Lottie JSON и SVG. Лицензия MIT.`,
+    ],
+    title: 'Все анимированные иконки',
+    badge: (count: number) => `${icons(count)} · лицензия MIT`,
+    introHtml: (browser: string) =>
+      `Все иконки набора, сгруппированные по категориям. Откройте любую, чтобы увидеть живое превью, код для React и shadcn/ui и скачать Lottie JSON, SVG или ZIP. Чтобы искать по ключевым словам и пробовать анимации прямо на месте, используйте ${link(browser, 'поиск по иконкам')}.`,
+    categoriesNav: 'Категории',
+    byInteraction: 'По взаимодействию:',
+    categoryLink: (count: number, name: string) => `${icons(count)} в категории «${name}» →`,
+  },
+
+  categories: {
+    titles: (categories: number) => [
+      `Категории анимированных иконок: ${categoriesCount(categories)}`,
+      'Категории анимированных иконок',
+    ],
+    descriptions: (count: number, categories: number) => [
+      `${freeAnimated(count)} в ${inCategories(categories)}: навигация, действия, медиа, загрузка, соцсети и другие. Для React, shadcn/ui и Lottie.`,
+    ],
+    title: 'Категории анимированных иконок',
+    badge: (count: number, categories: number) =>
+      `${icons(count)} · ${categoriesCount(categories)}`,
+    introHtml: (interactions: string) =>
+      `Каждая иконка useAnimations относится к одной категории — от стрелок навигации и кнопок медиаплеера до лоадеров и логотипов соцсетей. Откройте категорию, чтобы увидеть все её иконки, где их использовать и код для подключения, или выберите иконки по ${link(interactions, 'взаимодействию')}.`,
+    iconCount: icons,
+  },
+
+  interactions: {
+    titles: [
+      'Микровзаимодействия: иконки с hover, кликом и циклом',
+      'Микровзаимодействия для анимированных иконок',
+    ],
+    descriptions: (count: number, interactions: number) => [
+      `${microInteractions(interactions)} для ${ofAnimated(count)}: цикл, переключение и повтор по клику, наведение, повтор и цикл при наведении. С учётом уменьшения движения.`,
+      `${microInteractions(interactions)} для ${iconsOf(count)}: цикл, переключение и повтор по клику, наведение, повтор и цикл при наведении. С учётом уменьшения движения.`,
+    ],
+    title: 'Взаимодействия анимированных иконок',
+    badge: (interactions: number, count: number) =>
+      `${interactionsCount(interactions)} · ${icons(count)}`,
+    introHtml: `Каждая иконка поставляется с микровзаимодействием, для которого её нарисовали: она крутится в цикле, переключается или повторяется по клику либо проигрывается при наведении. React-компонент всё это подключает и учитывает уменьшение движения, а проп <code class="font-mono text-base text-fg">interaction</code> переключает любую иконку на другое взаимодействие.`,
+    iconCount: icons,
+    chooseTitle: 'Как выбрать взаимодействие',
+    chooseHtml: {
+      loop: (href: string) =>
+        `${strong('Длящееся состояние')}, например загрузка или активное предупреждение: ${link(href, 'цикл')}.`,
+      'click-toggle': (href: string) =>
+        `${strong('Элемент «вкл/выкл»')}, например звук, меню или показ пароля: ${link(href, 'переключение по клику')}, с ${code('active')} для контролируемого состояния.`,
+      'click-replay': (href: string) =>
+        `${strong('Разовое действие')}, например отправка, сохранение или обновление: ${link(href, 'повтор по клику')}.`,
+      hover: (href: string) =>
+        `${strong('Намёк на то, что откроет ссылка')}: ${link(href, 'наведение')}, анимация откатывается назад, когда курсор уходит.`,
+      'hover-replay': (href: string) =>
+        `${strong('Панели инструментов и списки, по которым быстро проводят курсором')}: ${link(
+          href,
+          'повтор при наведении'
+        )}, анимация доигрывает сама.`,
+      'hover-loop': (href: string) =>
+        `${strong('Ссылки, на которых хочется задержаться')}, например иконки соцсетей: ${link(href, 'цикл при наведении')}.`,
+    },
+    motionTitle: 'Уменьшение движения',
+    motionHtml: `React-компонент учитывает ${code('prefers-reduced-motion')} и реагирует на изменение настройки. Касания сенсорного экрана никогда не запускают hover-анимации.`,
+    reducedMotion: {
+      loop: 'иконка не запускается автоматически и остаётся на статичном первом кадре.',
+      'click-toggle':
+        'клик сразу переключает иконку в другое состояние, без промежуточной анимации.',
+      'click-replay':
+        'клики по-прежнему доходят до вашего обработчика, но анимация не проигрывается.',
+      hover: 'наведение не запускает анимацию.',
+      'hover-replay': 'наведение не запускает анимацию.',
+      'hover-loop': 'иконка при наведении остаётся статичной.',
+    },
+  },
+
+  lottie: {
+    titles: (count: number) => [
+      `Бесплатные Lottie-иконки: ${animated(count)} в JSON`,
+      'Бесплатные Lottie-иконки',
+    ],
+    descriptions: (count: number) => [
+      `${plural(count, { one: 'бесплатная Lottie-иконка', few: 'бесплатные Lottie-иконки', many: 'бесплатных Lottie-иконок', other: 'бесплатной Lottie-иконки' })} в обычном Lottie JSON, лицензия MIT. Готовый код для lottie-web, dotLottie, React, React Native, iOS, Android и Flutter.`,
+    ],
+    title: 'Бесплатные Lottie-иконки',
+    crumb: 'Lottie-иконки',
+    datasetName: 'Каталог иконок useAnimations',
+    datasetDescription: (count: number) =>
+      `Метаданные и URL файлов: ${animated(count)} в формате Lottie с id, названием, категорией, ключевыми словами, взаимодействием, размером и длительностью.`,
+    badge: (count: number) => `${icons(count)} · Lottie JSON · лицензия MIT`,
+    intro:
+      'Каждая иконка useAnimations — это стандартная анимация Lottie JSON, поэтому её воспроизводит любой Lottie-плеер: lottie-web в браузере, lottie-ios, lottie-android, Flutter и React Native. Файлы бесплатны по лицензии MIT, без регистрации, и отдаются по постоянным URL с включённым CORS, так что их можно загружать напрямую или скачать в свой проект.',
+    popular: 'Популярные Lottie-иконки',
+    allIcons: (count: number) => `Все ${icons(count)} →`,
+    filesTitle: 'Файлы и URL',
+    filesIntroHtml: `У каждой иконки есть страница ${code('/icons/&lt;id&gt;')} с превью и файлами для скачивания (на английском). Сами файлы:`,
+    files: {
+      json: 'анимация Lottie JSON',
+      zip: 'JSON и статичные SVG',
+      svg: 'статичный SVG каждого состояния',
+      catalog: 'каталог всех иконок',
+    },
+    catalogHtml: (catalog: string, median: number) =>
+      `${link(catalog, 'icons.json')} содержит все иконки с id, названием, категорией, ключевыми словами, взаимодействием, размером, длительностью и URL файлов — так иконки легко подбирать по ключевому слову в скрипте или доверить выбор ИИ-агенту. Медианный размер файла Lottie — ${median} КБ.`,
+    players: {
+      web: {
+        title: 'Веб: lottie-web',
+        text: 'Эталонный плеер от Airbnb. Подключите его с CDN, укажите URL иконки и выберите SVG-рендерер: так иконка остаётся чёткой, а цвет можно менять через CSS. Используйте полную сборку (lottie.min.js): облегчённая не поддерживает выражения.',
+        cssLabel: 'Иконка в цвет текста (SVG-рендерер)',
+      },
+      'web-interactions': {
+        title: 'Веб: взаимодействия при наведении и по клику',
+        text: 'lottie-web умеет запускать и останавливать анимацию, а взаимодействия придётся писать самим. Ниже — переключение по клику для иконки меню с поддержкой уменьшения движения; остальные взаимодействия устроены так же, а React-компонент ниже делает всё это за вас.',
+      },
+      dotlottie: {
+        title: 'Веб: веб-компонент dotLottie',
+        text: 'Плеер от LottieFiles рендерит на canvas с помощью движка на WebAssembly и воспроизводит как обычный Lottie JSON, так и файлы .lottie. На canvas сохраняются цвета из файла, поэтому иконки останутся чёрными, если не перекрасить сам JSON.',
+        jsLabel: 'Или JavaScript API: npm install @lottiefiles/dotlottie-web',
+      },
+      react: {
+        title: 'React: react-useanimations',
+        text: 'Lottie-плеер устанавливать не нужно: у пакета есть собственный плеер на 8 КБ, который проигрывает взаимодействие каждой иконки, берёт цвет текста и учитывает уменьшение движения. Каждая иконка — отдельный модуль, поэтому в сборку попадают только импортированные.',
+      },
+      'react-native': {
+        title: 'React Native: lottie-react-native',
+        text: 'Подключите JSON через require(), чтобы он работал офлайн, или загружайте его по URL.',
+      },
+      ios: {
+        title: 'iOS: lottie-ios (SwiftUI)',
+        text: 'Добавьте пакет https://github.com/airbnb/lottie-spm.git через Swift Package Manager, затем положите JSON в бандл приложения или загружайте его по URL.',
+      },
+      android: {
+        title: 'Android: lottie-android (Jetpack Compose)',
+        text: 'Добавьте com.airbnb.android:lottie-compose (или com.airbnb.android:lottie для View). Для офлайн-работы положите JSON в res/raw и используйте LottieCompositionSpec.RawRes.',
+      },
+      flutter: {
+        title: 'Flutter: lottie',
+        text: 'Пакет lottie — плеер на чистом Dart для Android, iOS, веба и десктопа.',
+      },
+    },
+    expressionsTitle: 'Иконки с выражениями',
+    expressionsHtml: (count: number) =>
+      `${plural(count, { one: 'иконка использует', few: 'иконки используют', many: 'иконок используют', other: 'иконки используют' })} выражения After Effects (${code('loopOut')} или ${code('wiggle')}). В браузере воспроизводите их полной сборкой lottie-web, а не ${code('lottie_light')}. Нативные плееры выражения не вычисляют, поэтому проверьте такие иконки на iOS, Android и Flutter или выберите другие; react-useanimations проигрывает их так, как задумано.`,
+    faq: (f: {
+      count: number;
+      minSize: number;
+      maxSize: number;
+      medianSize: number;
+      expressions: string[];
+    }): Faq => [
+      {
+        question: 'Можно ли бесплатно использовать эти Lottie-иконки в коммерческих проектах?',
+        answer: `Да. Все ${plural(f.count, { one: 'Lottie-иконка распространяется', few: 'Lottie-иконки распространяются', many: 'Lottie-иконок распространяются', other: 'Lottie-иконки распространяются' })} по лицензии MIT: их можно использовать, изменять и распространять в личных и коммерческих проектах, без указания авторства и без регистрации для скачивания.`,
+      },
+      {
+        question: 'В каком формате файлы Lottie?',
+        answer: `Стандартный Lottie JSON (формат Bodymovin) только со слоями фигур: без изображений, шрифтов и внешних ресурсов. Каждая иконка нарисована на артборде 24 или 32 px, масштабируется до любого размера и весит от ${f.minSize} до ${f.maxSize} КБ, медиана — ${f.medianSize} КБ.`,
+      },
+      {
+        question: 'Нужен ли lottie-web, чтобы использовать иконки в React?',
+        answer:
+          'Нет. У react-useanimations есть собственный плеер на 8 КБ без зависимостей, так что вы устанавливаете один пакет и импортируете нужные иконки. lottie-web нужен только вне React — на обычных веб-страницах или в других фреймворках.',
+      },
+      {
+        question: 'Каким иконкам нужна полная сборка lottie-web?',
+        answer: `${plural(f.expressions.length, { one: 'иконка использует', few: 'иконки используют', many: 'иконок используют', other: 'иконки используют' })} выражения After Effects (loopOut или wiggle): ${listIn('ru')(f.expressions)}. В браузере им нужна полная сборка lottie-web, lottie_light выражения игнорирует. Нативные плееры (lottie-ios, lottie-android, lottie для Flutter) выражения тоже не вычисляют, поэтому там эти иконки могут двигаться иначе.`,
+      },
+      {
+        question: 'Можно ли изменить цвет Lottie-иконки?',
+        answer:
+          'В браузере SVG-рендерер lottie-web записывает цвета в атрибуты, поэтому иконку перекрашивает CSS-правило для path. В нативных плеерах есть API динамических свойств: ColorValueProvider на iOS, LottieProperty.COLOR и STROKE_COLOR на Android и ValueDelegate.color во Flutter.',
+      },
+    ],
+    byCategory: 'Lottie-иконки по категориям',
+  },
+
+  shadcn: {
+    titles: (count: number) => [
+      `Анимированные иконки для shadcn/ui: ${components(count)}`,
+      'Анимированные иконки для shadcn/ui',
+    ],
+    descriptions: (count: number) => [
+      `${animated(count)} для shadcn/ui: любая добавляется одной командой shadcn CLI. Микровзаимодействия при наведении, по клику и в цикле, лицензия MIT, без lottie-web.`,
+      `${animated(count)} для shadcn/ui: любая добавляется одной командой shadcn CLI. Анимация при наведении, по клику и в цикле, MIT, без lottie-web.`,
+    ],
+    title: 'Анимированные иконки для shadcn/ui',
+    crumb: 'shadcn/ui',
+    popularList: 'Популярные анимированные иконки для shadcn/ui',
+    badge: (count: number) => `${components(count)} · реестр shadcn · лицензия MIT`,
+    intro:
+      'Все иконки useAnimations есть в реестре shadcn. Одна команда CLI добавляет в проект типизированный React-компонент со взаимодействием, для которого иконку нарисовали (при наведении, по клику или в цикле), поддержкой уменьшения движения и цветами, которые следуют вашей теме. Код попадает в ваш репозиторий, как и любой другой компонент shadcn/ui.',
+    addTitle: 'Добавьте иконку',
+    addIntro: 'Запустите shadcn CLI с URL иконки в реестре:',
+    namingHtml: `Компонент называется ${code('Animated')} + id иконки в PascalCase (${code('check-box')} → ${code('AnimatedCheckBox')}) и попадает в ${code('components/animations/&lt;id&gt;.tsx')}. CLI также добавляет общую обёртку ${code('components/use-animation.tsx')} и устанавливает ${code('react-useanimations')} со своим плеером — lottie-web не нужен.`,
+    namespaceTitle: 'Короткие имена через неймспейс реестра',
+    namespaceHtml: `Один раз добавьте реестр в ${code('components.json')}, и иконки можно будет добавлять по имени, по несколько сразу:`,
+    registryHtml: (registry: string) =>
+      `Индекс реестра ${link(registry, '/r/registry.json')} содержит все элементы с названием, категорией и взаимодействием.`,
+    usageTitle: 'Использование в shadcn Button',
+    usageHtml: `Компоненты принимают те же пропсы, что и ${code('UseAnimations')}. Для переключателя вроде иконки меню передайте ${code('active')} и храните состояние в кнопке — иконка анимируется при каждом его изменении:`,
+    colorHtml: (docs: string) =>
+      `Иконки берут цвет текста, поэтому их перекрашивают ${code('text-primary')} или ${code('text-muted-foreground')}, а для тёмной темы ничего дополнительно делать не нужно. Остальные пропсы и приёмы — в ${link(docs, 'документации')}.`,
+    codeText: { closeMenu: 'Закрыть меню', openMenu: 'Открыть меню' },
+    popular: 'Популярные иконки для shadcn/ui',
+    allIcons: (count: number) => `Все ${icons(count)} →`,
+    popularNote: 'Команда shadcn есть на странице каждой иконки.',
+    faq: (f: { count: number; version: string }): Faq => [
+      {
+        question: 'Анимированные иконки для shadcn/ui бесплатны?',
+        answer: `Да. Все ${icons(f.count)} и код компонентов распространяются по лицензии MIT — для личных и коммерческих проектов. Для реестра не нужны ни аккаунт, ни API-ключ.`,
+      },
+      {
+        question: 'Что shadcn CLI добавляет в проект?',
+        answer: `Компонент иконки в components/animations/<id>.tsx, общую обёртку плеера UseAnimation в components/use-animation.tsx (один раз, как зависимость из реестра) и react-useanimations@^${f.version} из npm. lottie-web не нужен: у пакета собственный плеер на 8 КБ.`,
+      },
+      {
+        question: 'Работают ли компоненты с серверными компонентами Next.js?',
+        answer:
+          'Да. Компоненты помечены "use client" и рисуют анимацию только в браузере, поэтому их можно рендерить из серверных компонентов и страниц без динамического импорта и ssr: false.',
+      },
+      {
+        question: 'Можно ли изменить внешний вид и анимацию иконок?',
+        answer:
+          'Код ваш и лежит в вашем репозитории. Компоненты принимают пропсы UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop и speed. Иконки берут цвет текста, поэтому их перекрашивают Tailwind-классы вроде text-primary или text-muted-foreground.',
+      },
+    ],
+    byCategory: 'Смотреть по категориям',
+  },
+};
diff --git a/website/src/i18n/messages/ru/taxonomy.ts b/website/src/i18n/messages/ru/taxonomy.ts
new file mode 100644
index 0000000..a6392f9
--- /dev/null
+++ b/website/src/i18n/messages/ru/taxonomy.ts
@@ -0,0 +1,407 @@
+// Categories and interactions in Russian. Keys are the English category names and interaction values.
+import type { Interaction } from 'react-useanimations';
+import type { Messages } from '../en';
+import type { CategoryText, InteractionText } from '../en/taxonomy';
+
+/**
+ * What a category's icons show, as the words after «анимированные иконки» (genitive or with a
+ * preposition), so counted phrases agree with the number: «12 анимированных иконок погоды».
+ * Keyed by the Russian category name (CategoryText.name).
+ */
+export const CATEGORY_TOPIC: Record<string, string> = {};
+
+const category = (topic: string, text: Omit<CategoryText, 'title'> & { title?: string }) => {
+  CATEGORY_TOPIC[text.name] = topic;
+  return { ...text, title: text.title ?? `Анимированные иконки ${topic}` };
+};
+
+const categories: Record<string, CategoryText> = {
+  Alerts: category('предупреждений', {
+    name: 'Предупреждения',
+    intro:
+      'Треугольники с восклицательным знаком, круги с предупреждением и знаки «стоп», которые пульсируют ровно настолько, чтобы их заметили, но не мигают. Ставьте их рядом с полем формы, где произошла ошибка, в начале баннера об ошибке или в колонке статуса — там, где статичную иконку легко пропустить при прокрутке.',
+    useCases: [
+      'Ошибки валидации под полями формы',
+      'Баннеры с ошибками и предупреждениями вверху страницы',
+      'Упавшие строки в таблице статусов деплоя или задач',
+      'Диалоги подтверждения необратимых действий',
+      'Статус-страницы во время инцидента',
+    ],
+  }),
+  Notifications: category('уведомлений', {
+    name: 'Уведомления',
+    intro:
+      'Колокольчики, которые звенят при новой активности или переключаются между «колокольчиком» и «перечёркнутым колокольчиком». Короткое покачивание привлекает внимание к счётчику непрочитанного, а версии-переключатели заодно служат кнопкой, отключающей уведомления канала или ветки.',
+    useCases: [
+      'Кнопка центра уведомлений в шапке приложения',
+      'Бейдж непрочитанного, который звенит при новом сообщении',
+      'Включение и отключение уведомлений канала или ветки',
+      'Настройки email- и push-уведомлений',
+      'Кнопки подписки на напоминания и оповещения',
+    ],
+  }),
+  Navigation: category('навигации и стрелок', {
+    name: 'Навигация',
+    intro:
+      'Бургер-меню, которое превращается в кнопку закрытия, стрелки, шевроны и угловые стрелки, которые при наведении слегка сдвигаются в свою сторону. С ними сразу понятно, куда ведёт элемент управления: открыть боковую панель, вернуться назад, развернуть строку или уйти на другой сайт.',
+    useCases: [
+      'Бургер-меню, которое на мобильных превращается в кнопку закрытия',
+      'Кнопки «назад» и «вперёд» в каруселях и пагинации',
+      'Шевроны аккордеонов и выпадающих списков',
+      'Кнопки «наверх» и подсказки «листайте вниз»',
+      'Ссылки входа и выхода',
+      'Метки внешних ссылок и переключатели боковой панели',
+    ],
+  }),
+  Action: category('действий', {
+    name: 'Действия',
+    intro:
+      'Глаголы интерфейса: сохранить, удалить, скачать, обновить, лайкнуть, добавить в закладки, найти, открыть настройки. Каждая иконка подтверждает клик или наведение, к которому относится: сердечко заполняется, когда вы лайкаете пост, а крышка корзины приподнимается перед удалением.',
+    useCases: [
+      'Кнопки лайка, избранного и закладок на карточках',
+      'Кнопки скачивания, загрузки и сохранения, подтверждающие действие',
+      'Переключатель «показать/скрыть пароль» в форме входа',
+      'Кнопки обновления и синхронизации в дашбордах',
+      'Кнопки удаления в таблицах и списках файлов',
+      'Поле поиска, которое превращается в кнопку очистки',
+    ],
+  }),
+  Content: category('файлов, папок и пользователей', {
+    name: 'Контент',
+    intro:
+      'Файлы, папки, книги, почта, вложения и люди. Эти иконки обозначают то, с чем работает пользователь, а варианты с добавлением, удалением и галочкой делают управление списками и командой отзывчивее.',
+    useCases: [
+      'Файловые менеджеры и списки документов',
+      'Кнопки вложений и копирования в буфер обмена',
+      'Входящие и архив в почтовых клиентах',
+      'Списки участников команды с добавлением и удалением пользователей',
+      'Меню «Поделиться» для документов и ссылок',
+    ],
+  }),
+  Form: category('элементов форм', {
+    name: 'Формы',
+    intro:
+      'Чекбокс, радиокнопка и переключатель, которые анимируют переход между отмеченным и неотмеченным состоянием. Используйте их там, где обычный input выглядит плоско, например в чек-листах онбординга и на экранах настроек: состояние при этом по-прежнему считывается с первого взгляда.',
+    useCases: [
+      'Переключатели функций и параметров в настройках',
+      'Чек-листы онбординга и списки задач',
+      'Выбор одного варианта в опросах и при выборе тарифа',
+      'Чекбоксы согласия с условиями',
+    ],
+  }),
+  Media: category('медиаплеера', {
+    name: 'Медиа',
+    intro:
+      'Воспроизведение и пауза, громкость, микрофон, камера, перемотка и перемешивание для аудио- и видеоплееров. Иконки-переключатели меняют одно состояние на другое — play на паузу, микрофон на выключенный, — поэтому кнопка всегда показывает, что произойдёт по клику.',
+    useCases: [
+      'Кнопки play и паузы в аудио- и видеоплеерах',
+      'Включение и выключение микрофона в видеозвонках',
+      'Включение и выключение камеры в приложениях для встреч',
+      'Управление плейлистом: перемотка, повтор и перемешивание',
+      'Кнопки трансляции и AirPlay',
+      'Управление в приложениях для подкастов и музыки',
+    ],
+  }),
+  'Text editing': category('редактирования текста', {
+    name: 'Редактирование текста',
+    intro:
+      'Жирный, курсив, подчёркивание, выравнивание и списки для панелей форматирования. Короткая анимация по клику подтверждает, что форматирование применилось, — это помогает в редакторах, где само изменение текста едва заметно.',
+    useCases: [
+      'Панели инструментов WYSIWYG-редакторов',
+      'Формы комментариев и сообщений',
+      'Редакторы CMS и блогов',
+      'Markdown-редакторы и приложения для заметок',
+      'Выравнивание текста в графических редакторах',
+    ],
+  }),
+  Communication: category('связи и общения', {
+    name: 'Связь и общение',
+    intro:
+      'Телефоны, облачка чата, кнопки отправки, голосовая почта и RSS. Иконки звонков покрывают все состояния, которые нужны журналу вызовов: входящий, исходящий, пропущенный и переадресованный, а иконка отправки по клику красиво провожает сообщение.',
+    useCases: [
+      'Кнопка отправки в чатах и формах комментариев',
+      'Журнал вызовов с входящими, исходящими и пропущенными звонками',
+      'Кнопки связи и поддержки',
+      'Кнопки запуска чат-виджета',
+      'Поля для упоминаний и адресов email',
+    ],
+  }),
+  Devices: category('устройств', {
+    name: 'Устройства',
+    intro:
+      'Телефоны, планшеты, мониторы, часы и принтеры, а также индикаторы подключения рядом с ними: Wi-Fi, Bluetooth и батарея. Подходят для выбора устройства, переключателей адаптивного превью и статуса подключения.',
+    useCases: [
+      'Переключатели превью: мобильный, планшет, десктоп',
+      'Статус подключения Wi-Fi и Bluetooth',
+      'Индикаторы заряда и зарядки батареи',
+      'Списки устройств в настройках безопасности аккаунта',
+      'Кнопки печати в счетах и отчётах',
+    ],
+  }),
+  Weather: category('погоды', {
+    name: 'Погода',
+    intro:
+      'Солнце, луна, облака, дождь, снег, молния и ветер для прогнозов и всего, что зависит от времени суток. Солнце и луна к тому же естественно смотрятся в переключателе светлой и тёмной темы.',
+    useCases: [
+      'Погодные виджеты и карточки прогноза',
+      'Переключатели светлой и тёмной темы',
+      'Время восхода и заката в приложениях для путешествий',
+      'Показания температуры в дашбордах умного дома',
+      'Индикаторы энергопотребления и питания',
+    ],
+  }),
+  'Maps & location': category('карт и геолокации', {
+    name: 'Карты и геолокация',
+    intro:
+      'Метки на карте, стрелки навигации, глобусы, мишени и якоря. Метка, которая опускается при наведении, выделяет поиск магазинов или адрес доставки, а глобус подходит для переключателя языка или региона.',
+    useCases: [
+      'Поиск магазинов и поля адреса',
+      'Кнопки «Моё местоположение» и «Маршрут»',
+      'Выбор языка и региона',
+      'Доставка и отслеживание заказа',
+      'Приложения для путешествий и бронирования',
+    ],
+  }),
+  Commerce: category('для интернет-магазина', {
+    name: 'Интернет-магазин',
+    intro:
+      'Тележки, сумки, ценники, подарки, банковские карты и грузовики доставки для интернет-магазинов. Анимация добавления в корзину подтверждает клик без всплывающего уведомления, а грузовик и коробка немного оживляют статус заказа.',
+    useCases: [
+      'Кнопки «В корзину» на карточках товаров',
+      'Кнопка корзины в шапке магазина',
+      'Оформление заказа и выбор способа оплаты',
+      'Бейджи скидок, промокодов и распродаж',
+      'Этапы доставки и отслеживания заказа',
+      'Подарочные карты и подарочная упаковка',
+    ],
+  }),
+  Charts: category('графиков', {
+    name: 'Графики',
+    intro:
+      'Столбчатые диаграммы, круговая диаграмма и стрелки тренда для аналитики и отчётов. Иконки роста и падения сразу показывают, вырос показатель или упал, поэтому хорошо подходят для KPI-карточек и сводок изменений в цифрах.',
+    useCases: [
+      'KPI-карточки с растущими или падающими показателями',
+      'Пункты меню аналитики и отчётов',
+      'Пустые состояния дашбордов',
+      'Финансовые сводки и сводки по портфелю',
+    ],
+  }),
+  Development: category('для разработчиков', {
+    name: 'Разработка',
+    intro:
+      'Скобки кода, терминал, ветки Git, коммиты, слияния и пул-реквесты, а также серверы и базы данных. Сделаны для инструментов разработчика, сайтов документации и статус-страниц, где термины Git и инфраструктуры — часть интерфейса.',
+    useCases: [
+      'Статус пул-реквестов, слияний и веток в инструментах разработчика',
+      'Кнопки сниппетов кода и встраивания в документации',
+      'Разделы про терминал и CLI на лендингах',
+      'Состояние серверов и баз данных на статус-страницах',
+      'Подсказки горячих клавиш с клавишей Command',
+    ],
+  }),
+  'Design & layout': category('дизайна и макетов', {
+    name: 'Дизайн и макеты',
+    intro:
+      'Сетки, колонки, слои, кадрирование, перо и курсор для редакторов и конструкторов. Подходят для панелей инструментов, где пользователь расставляет контент, переключается между сеткой и таблицей или выбирает инструмент рисования.',
+    useCases: [
+      'Переключатели вида: сетка, список, таблица',
+      'Панели слоёв в графических редакторах и редакторах презентаций',
+      'Инструменты кадрирования и обрезки в фоторедакторах',
+      'Конструкторы страниц и выбор макета',
+      'Ручки для перетаскивания',
+    ],
+  }),
+  'Shapes & math': category('фигур и математических знаков', {
+    name: 'Фигуры и математика',
+    intro:
+      'Круги, квадраты, треугольники, шестиугольники, восьмиугольник и знаки деления. Используйте их как инструменты фигур в редакторах рисования, как операторы калькулятора или как нейтральные маркеры в схемах и шагах онбординга.',
+    useCases: [
+      'Инструменты фигур в онлайн-досках и редакторах рисования',
+      'Операторы в калькуляторах и редакторах формул',
+      'Маркеры пунктов и шагов в схемах',
+      'Интерфейсы викторин и игр',
+    ],
+  }),
+  Loading: category('загрузки', {
+    name: 'Загрузка',
+    intro:
+      'Спиннеры и лоадеры, которые крутятся, пока что-то выполняется. Поставьте такой в кнопку отправки на время запроса, на место ещё не загруженного контента или на полноэкранную заставку; если пользователь включил уменьшение движения, они остаются неподвижными.',
+    useCases: [
+      'Кнопки отправки, ожидающие ответа на запрос',
+      'Заглушки, пока загружается список или график',
+      'Индикаторы бесконечной прокрутки и кнопки «Показать ещё»',
+      'Полноэкранные заставки и переходы между страницами',
+      'Прогресс загрузки и обработки файлов',
+    ],
+  }),
+  'Social media': category('соцсетей', {
+    name: 'Соцсети',
+    intro:
+      'Логотипы соцсетей и сервисов, где разработчики и дизайнеры делятся работами: X, Instagram, YouTube, Discord, Telegram, Figma и другие. Они анимируются при наведении, и ссылки в футере и профиле сразу выглядят кликабельными.',
+    useCases: [
+      'Ссылки на соцсети в футере сайта',
+      'Кнопки «Поделиться» в статьях блога',
+      'Ссылки на профили автора и команды',
+      'Кнопки приглашения в сообщество на чат-серверах',
+      'Вход через соцсеть или аккаунт разработчика',
+    ],
+  }),
+  Other: category('без категории', {
+    name: 'Другое',
+    title: 'Другие анимированные иконки',
+    intro:
+      'Иконки, которые не входят в более крупные группы: смайлики для отзывов, чашка кофе, часы, линия пульса и подсказка «листайте вниз». Иконка прокрутки вниз — привычная подсказка в hero-блоке, что ниже есть ещё контент.',
+    useCases: [
+      'Подсказки «листайте вниз» внизу hero-блока',
+      'Весёлый, нейтральный и грустный смайлики в виджетах отзывов',
+      'Индикаторы активности и аптайма',
+      'Часы работы и выбор времени',
+      'Ссылки «Купить кофе» и поддержки автора',
+    ],
+  }),
+};
+
+/** How a group of icons plays: the verb form for one icon and for several («1 иконка …», «5 иконок …»). */
+export const PLAYS: Record<Interaction, { one: string; other: string }> = {
+  loop: { one: 'непрерывно проигрывается в цикле', other: 'непрерывно проигрываются в цикле' },
+  'click-toggle': {
+    one: 'переключается между двумя состояниями по клику',
+    other: 'переключаются между двумя состояниями по клику',
+  },
+  'click-replay': {
+    one: 'проигрывается заново при каждом клике',
+    other: 'проигрываются заново при каждом клике',
+  },
+  hover: {
+    one: 'проигрывается при наведении и в обратную сторону, когда курсор уходит',
+    other: 'проигрываются при наведении и в обратную сторону, когда курсор уходит',
+  },
+  'hover-replay': {
+    one: 'проигрывается один раз при наведении',
+    other: 'проигрываются один раз при наведении',
+  },
+  'hover-loop': {
+    one: 'проигрывается в цикле, пока на неё наведён курсор',
+    other: 'проигрываются в цикле, пока на них наведён курсор',
+  },
+};
+
+const interactions: Record<Interaction, InteractionText> = {
+  loop: {
+    label: 'Цикл',
+    title: 'Иконки с циклической анимацией',
+    intro:
+      'Эти иконки проигрываются непрерывно, пока они на экране, поэтому подходят для длящихся состояний: что-то загружается, действует предупреждение, терминал ждёт ввода. Если пользователь включил уменьшение движения, они останавливаются на первом кадре и выглядят как обычная иконка.',
+    useCases: [
+      'Спиннеры загрузки и индикаторы прогресса',
+      'Активные предупреждения и ошибки',
+      'Индикаторы прямого эфира и записи',
+      'Подсказки «листайте вниз» в hero-блоках',
+      'Маркеры, привлекающие внимание к новым уведомлениям',
+    ],
+    example:
+      'Циклическую анимацию обычно используют для спиннеров загрузки, активных предупреждений, звенящего колокольчика и подсказки «листайте вниз».',
+    description:
+      'Проигрывается непрерывно; если включено уменьшение движения, остаётся на статичном первом кадре.',
+    reducedMotion:
+      'Если пользователь включил уменьшение движения, иконка не запускается автоматически и остаётся на статичном первом кадре.',
+    plays: PLAYS.loop.other,
+  },
+  'click-toggle': {
+    label: 'Переключение по клику',
+    title: 'Иконки-переключатели с анимацией по клику',
+    intro:
+      'Каждый клик анимирует переход между двумя состояниями, и иконка остаётся в новом, поэтому такие иконки — визуальная часть элемента «вкл/выкл». Иконка всегда показывает текущее состояние: добавьте кнопке aria-pressed или атрибут checked, и она будет говорить сама за себя.',
+    useCases: [
+      'Кнопки включения и отключения звука',
+      'Поля с кнопкой «показать/скрыть пароль»',
+      'Бургер-меню и кнопки закрытия',
+      'Кнопки воспроизведения и паузы',
+      'Переключатели лайка, звёздочки и закладки',
+      'Чекбоксы, радиокнопки и переключатели',
+    ],
+    example:
+      'Иконки-переключатели обычно управляют звуком, показом пароля, открытием меню, воспроизведением и лайками.',
+    description:
+      'Переключается между двумя состояниями по клику, а при включённом уменьшении движения — сразу, без анимации.',
+    reducedMotion:
+      'Если включено уменьшение движения, клик сразу переключает иконку в другое состояние, без промежуточной анимации.',
+    plays: PLAYS['click-toggle'].other,
+  },
+  'click-replay': {
+    label: 'Повтор по клику',
+    title: 'Иконки с анимацией по клику',
+    intro:
+      'Эти иконки проигрываются с начала при каждом клике — небольшое подтверждение, что действие выполнено. Они подходят для разовых действий, после которых не остаётся состояния: отправить, сохранить, обновить, скачать, распечатать или удалить.',
+    useCases: [
+      'Кнопки отправки в чатах и формах комментариев',
+      'Кнопки сохранения, скачивания и загрузки',
+      'Кнопки обновления и поворота',
+      'Кнопки «В корзину»',
+      'Кнопки форматирования текста в редакторах',
+    ],
+    example:
+      'Анимация по клику обычно подтверждает отправку, сохранение, обновление, скачивание, добавление в корзину и форматирование.',
+    description:
+      'Проигрывается заново с начала при каждом клике, если не включено уменьшение движения.',
+    reducedMotion:
+      'Если включено уменьшение движения, клики по-прежнему доходят до вашего обработчика, но анимация не проигрывается.',
+    plays: PLAYS['click-replay'].other,
+  },
+  hover: {
+    label: 'Наведение',
+    title: 'Иконки с анимацией при наведении',
+    intro:
+      'Эти иконки проигрываются вперёд, когда курсор наводится на них, и назад, когда он уходит, поэтому движение следует за курсором и никогда не обрывается на полпути. Они подходят для пунктов навигации и кнопок, которые намекают, что откроют: крышка корзины приподнимается, шестерёнка настроек поворачивается, папка открывается.',
+    useCases: [
+      'Пункты боковой панели и меню навигации',
+      'Кнопки удаления, которые приподнимают крышку ещё до клика',
+      'Ссылки на настройки и профиль',
+      'Кнопки увеличения и уменьшения масштаба',
+      'Ссылки на соцсети в футере',
+    ],
+    example:
+      'Анимацию при наведении обычно используют для пунктов навигации, кнопок удаления, настроек, управления масштабом и ссылок на соцсети.',
+    description: 'Проигрывается вперёд на mouseenter и назад на mouseleave.',
+    reducedMotion: 'Если включено уменьшение движения, наведение не запускает анимацию.',
+    plays: PLAYS.hover.other,
+  },
+  'hover-replay': {
+    label: 'Повтор при наведении',
+    title: 'Иконки с разовой анимацией при наведении',
+    intro:
+      'Эти иконки проигрываются один раз, когда на них наводится курсор, и доигрывают сами, поэтому быстрое движение мыши по панели инструментов не превращается в дёрганую анимацию. Так устроена большая часть набора: стрелки, файлы, устройства, погода и логотипы брендов, которые оживают при наведении.',
+    useCases: [
+      'Списки возможностей и таблицы тарифов',
+      'Ссылки со стрелками и кнопки призыва к действию',
+      'Кнопки панелей инструментов в редакторах и дашбордах',
+      'Карточки в сетке лендинга',
+      'Ссылки в футере и контакты',
+    ],
+    example:
+      'Разовая анимация при наведении обычно оживляет ссылки со стрелками, списки возможностей, кнопки панелей инструментов и карточки лендинга.',
+    description:
+      'Проигрывается один раз на mouseenter, если не включено уменьшение движения. Уход курсора анимацию не останавливает, а повторное наведение во время проигрывания не запускает её заново.',
+    reducedMotion: 'Если включено уменьшение движения, наведение не запускает анимацию.',
+    plays: PLAYS['hover-replay'].other,
+  },
+  'hover-loop': {
+    label: 'Цикл при наведении',
+    title: 'Иконки с циклической анимацией при наведении',
+    intro:
+      'Эти иконки проигрываются в цикле, пока на них наведён курсор, а когда он уходит, доигрывают текущий цикл, поэтому никогда не замирают посреди движения. Они подходят для ссылок, на которых хочется задержаться, — в основном это иконки соцсетей и сообществ.',
+    useCases: [
+      'Ссылки на соцсети в шапке и футере',
+      'Кнопки приглашения в сообщество и чат',
+      'Ссылки на портфолио и профиль',
+      'Выбор языка и региона',
+    ],
+    example:
+      'Циклическую анимацию при наведении обычно используют для ссылок на соцсети, приглашений в сообщество, ссылок на портфолио и выбора языка.',
+    description:
+      'Проигрывается в цикле, пока на иконку наведён курсор, после mouseleave доигрывает текущий цикл, а при уменьшении движения остаётся статичной.',
+    reducedMotion: 'Если включено уменьшение движения, иконка при наведении остаётся статичной.',
+    plays: PLAYS['hover-loop'].other,
+  },
+};
+
+export const taxonomy: Messages['taxonomy'] = { categories, interactions };
diff --git a/website/src/i18n/messages/tr/common.ts b/website/src/i18n/messages/tr/common.ts
new file mode 100644
index 0000000..7a2c49a
--- /dev/null
+++ b/website/src/i18n/messages/tr/common.ts
@@ -0,0 +1,46 @@
+import type { Messages } from '../en';
+
+export const common: Messages['common'] = {
+  skipToContent: 'İçeriğe geç',
+  ogImageAlt: 'useAnimations: React, shadcn/ui, Lottie ve SVG için ücretsiz animasyonlu ikonlar',
+  homeLabel: 'useAnimations ana sayfa',
+  mainNav: 'Ana menü',
+  browseIcons: 'İkonlara göz at',
+  nav: {
+    icons: 'İkonlar',
+    categories: 'Kategoriler',
+    documentation: 'Dokümantasyon',
+    shadcn: 'shadcn',
+    lottie: 'Lottie ikonları',
+    license: 'Lisans',
+  },
+  footer: {
+    tagline:
+      'Etkileşimleri hazır gelen ücretsiz animasyonlu ikonlar. MIT lisanslı, React için yapıldı.',
+    product: 'Ürün',
+    developers: 'Geliştiriciler',
+    follow: 'Takip edin',
+    languages: 'Diller',
+    allIcons: 'Tüm ikonlar',
+    categories: 'Kategoriler',
+    interactions: 'Etkileşimler',
+    lottieIcons: 'Lottie ikonları',
+    shadcnIcons: 'shadcn/ui ikonları',
+    documentation: 'Dokümantasyon',
+    licencing: 'Lisans ve koşullar',
+    shadcnRegistry: 'shadcn registry',
+    mitLicense: 'MIT lisansı',
+    builtWith: 'Site Astro ile yapıldı',
+  },
+  breadcrumb: 'Sayfa yolu',
+  crumbs: { icons: 'İkonlar', categories: 'Kategoriler', interactions: 'Etkileşimler' },
+  faq: 'Sık sorulan sorular',
+  copy: 'Kopyala',
+  copied: 'Kopyalandı',
+  pressCtrlC: 'Ctrl+C tuşlarına basın',
+  languageBanner: {
+    text: 'Bu sayfanın Türkçe sürümü de var.',
+    action: 'Türkçeye geç',
+    dismiss: 'Kapat',
+  },
+};
diff --git a/website/src/i18n/messages/tr/docs.ts b/website/src/i18n/messages/tr/docs.ts
new file mode 100644
index 0000000..213efed
--- /dev/null
+++ b/website/src/i18n/messages/tr/docs.ts
@@ -0,0 +1,34 @@
+import type { Messages } from '../en';
+
+export const docs: Messages['docs'] = {
+  title: 'Dokümantasyon — useAnimations',
+  description: (iconCount: number) =>
+    `${iconCount} animasyonlu ikonu React ve shadcn/ui’da kullanma rehberi: etkileşimler, prop’lar, renkler, dosyalar ve erişilebilirlik.`,
+  badge: 'Dokümantasyon',
+  onThisPage: 'Bu sayfada',
+  viewAsMarkdown: 'Markdown olarak görüntüle',
+  headline: 'useAnimations dokümantasyonu',
+  summary: 'useAnimations animasyonlu ikonlarını React ve shadcn/ui’da kullanma rehberi.',
+  crumb: 'Dokümantasyon',
+  faq: [
+    {
+      question: 'useAnimations ticari projelerde ücretsiz mi?',
+      answer: 'Evet. İkonlar ve React paketi MIT lisanslıdır; atıf gerekmez.',
+    },
+    {
+      question: 'useAnimations ikonlarını React’te nasıl kullanırım?',
+      answer:
+        'react-useanimations paketini kurun, UseAnimations’ı ve bir ikonu (ör. react-useanimations/lib/checkmark) import edin, ardından <UseAnimations animation={checkmark} size={32} /> ile render edin.',
+    },
+    {
+      question: 'Bir ikonun rengini nasıl değiştiririm?',
+      answer:
+        'İkonlar metin rengini izler. Rengi strokeColor ve fillColor ile, CSS color ile ya da path’lere stil vererek değiştirebilirsiniz.',
+    },
+    {
+      question: 'React olmadan da çalışır mı?',
+      answer:
+        'Paket React içindir. Ancak her ikon aynı zamanda herhangi bir Lottie oynatıcısının (lottie-web, dotLottie, lottie-react-native, lottie-ios, lottie-android, Flutter) oynatabildiği standart bir Lottie JSON dosyası ve statik bir SVG’dir. Ayrıntılar “React olmadan kullanım” bölümünde ve useanimations.com/lottie-icons sayfasında.',
+    },
+  ],
+};
diff --git a/website/src/i18n/messages/tr/home.ts b/website/src/i18n/messages/tr/home.ts
new file mode 100644
index 0000000..2408201
--- /dev/null
+++ b/website/src/i18n/messages/tr/home.ts
@@ -0,0 +1,170 @@
+import type { Messages } from '../en';
+import type { FaqLinks, HomeFaq } from '../en/home';
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const home: Messages['home'] = {
+  title: 'Mikro animasyonlar ve animasyonlu ikonlar — useAnimations',
+  description: (count: number) =>
+    `UI için ${count} ücretsiz mikro animasyon: React, shadcn/ui ve Lottie için hover, tıklama ve döngü hazır gelen animasyonlu ikon kütüphanesi. MIT.`,
+
+  hero: {
+    badge: (count: number) => `${count} ikon · sıfır bağımlılık · MIT`,
+    headline: { start: 'İkonlarınız ', accent: 'canlansın.', end: '' },
+    h1: 'React, shadcn/ui ve Lottie için ücretsiz animasyonlu ikonlar',
+    intro: (count: number) =>
+      `Hover, tıklama ve döngü mikro etkileşimleri hazır gelen, elle tasarlanmış ${count} mikro animasyon. React bileşeni olarak kullanın, shadcn ile ekleyin ya da SVG ve Lottie JSON olarak indirin. MIT lisanslı.`,
+    browse: 'İkonlara göz at',
+    fieldHint: 'İmleci alanın üzerinde gezdirin.',
+  },
+
+  numbers: {
+    label: 'Kısaca',
+    icons: 'animasyonlu ikon',
+    interactions: 'hazır etkileşim',
+    size: 'oynatıcı, gzip ile',
+    dependencies: 'bağımlılık',
+  },
+
+  interactions: {
+    eyebrow: 'Hazır etkileşimler',
+    title: 'Her ikon nasıl hareket edeceğini bilir.',
+    intro:
+      'Her ikon kendisi için tasarlanan etkileşimle gelir. Sayfaya koyun, çalışsın; ya da tek bir prop ile başka bir etkileşim seçin. Deneyin:',
+    demos: {
+      loop: 'Kesintisiz oynar; loader’lar ve arka plandaki durumlar için.',
+      'click-toggle': 'İki durum arasında geçiş yapar: menü ve kapat, oynat ve duraklat.',
+      'click-replay': 'Geri bildirim olarak her tıklamada baştan oynar.',
+      hover: 'İmleç gelince ileri, ayrılınca geri oynar.',
+      'hover-loop': 'Hover süresince döngüde oynar, imleç ayrılınca turunu tamamlar.',
+      'hover-replay': 'İmleç her geldiğinde baştan bir kez oynar.',
+    },
+  },
+
+  browser: {
+    eyebrow: 'Kütüphane',
+    title: (count: number) => `${count} ücretsiz animasyonlu ikon`,
+    intro:
+      'Oynatmak için üzerine gelin ya da tıklayın. Kodu ve indirmeler (Lottie JSON, SVG ve ZIP) için bir ikonu açın.',
+    search: 'İkonlarda ara',
+    searchPlaceholder: (count: number) =>
+      `${count} ikonda arayın: “eye”, “bell” ya da “arrow” deneyin`,
+    interaction: 'Etkileşim',
+    allInteractions: 'Tüm etkileşimler',
+    color: 'İkon rengi',
+    colors: {
+      text: 'Metin rengi',
+      indigo: 'Çivit mavisi',
+      red: 'Kırmızı',
+      amber: 'Kehribar',
+      teal: 'Camgöbeği',
+      violet: 'Mor',
+    },
+    customColor: 'Özel renk',
+    size: 'Boyut',
+    category: 'Kategori',
+    all: 'Tümü',
+    count: { one: '{n} ikon', other: '{n} ikon' },
+    noMatch: 'Eşleşen ikon yok.',
+    noMatchHintHtml: (href: string) =>
+      `Başka bir kelime deneyin ya da ${link(href, 'bir ikon önerin')}.`,
+  },
+
+  everywhere: {
+    eyebrow: 'İstediğiniz gibi kullanın',
+    title: 'Kur, import et, bitti.',
+    intro:
+      'Bağımlılığı olmayan bir React bileşeni, bir shadcn registry, kalıcı URL’lerden indirilebilen dosyalar ve yapay zekâ ajanlarının okuyabildiği bir katalog.',
+    docs: 'Dokümantasyonu okuyun →',
+    tablist: 'Platform',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Dosyalar', agents: 'Ajanlar' },
+    codeText: {
+      afterAdding: 'ardından',
+      files: 'Her ikon SVG olarak, animasyon (Lottie JSON) olarak ve ikisini içeren bir ZIP olarak',
+    },
+  },
+
+  features: {
+    title: 'Küçük, erişilebilir ve stili tamamen sizde.',
+    colors: 'Renklerinizi izler',
+    colorsHtml: `İkonlar ${code('currentColor')} kullanır: metin rengini, hover durumlarını ve karanlık modu kendiliğinden alırlar. Bir prop, bir class ya da düz CSS ile değiştirebilirsiniz.`,
+    tiny: 'Bilerek küçük',
+    tinyText: 'Dahili oynatıcı, sıfır bağımlılık. Her ikon 2 kB’lık ayrı bir modül.',
+    accessible: 'Varsayılan olarak erişilebilir',
+    accessibleText:
+      'Azaltılmış hareket tercihine uyar, hover animasyonlarını klavye odağında da oynatır ve siz etiketlemedikçe ekran okuyuculara görünmez.',
+    ssr: 'Sunucu tarafı render’a hazır',
+    ssrText:
+      'Next.js, Remix ve Astro’da sorunsuz render edilen bir client bileşeni. İkonlar her yerde import edebileceğiniz düz verilerdir.',
+    agents: 'Ajanlar için yapıldı',
+    agentsHtml: (iconsJson: string, llmsTxt: string) =>
+      `Her ikon için anahtar kelimeler içeren tipli bir katalog, ${link(iconsJson, 'icons.json')}, ${link(llmsTxt, 'llms.txt')} ve Markdown dokümantasyon.`,
+  },
+
+  browse: {
+    title: 'Doğru mikro animasyonu bulun.',
+    byCategory: 'Kategoriye göre göz at',
+    byInteraction: 'Etkileşime göre göz at',
+    formats: 'Tüm ikonlar ve formatlar',
+  },
+
+  hubs: {
+    icons: 'Tüm animasyonlu ikonlar',
+    categories: 'İkon kategorileri',
+    interactions: 'Etkileşime göre ikonlar',
+    lottie: 'Lottie ikonları (JSON)',
+    shadcn: 'shadcn/ui animasyonlu ikonları',
+  },
+
+  faqTitle: 'Sorular',
+  faq: (f: { version: string; links: FaqLinks }): HomeFaq => [
+    {
+      question: 'Mikro animasyon ve animasyonlu ikon nedir?',
+      answer:
+        'Mikro animasyonlar, bir kullanıcı eylemine yanıt veren kısa ve tek amaçlı hareketlerdir: kapatma düğmesine dönüşen bir menü ikonu, bir gönderiyi beğendiğinizde dolan bir kalp, yeni bildirimde çalan bir zil. Animasyonlu ikonlar bunların en yaygın türüdür. Arayüzün tepki verdiğini hissettirir ve durum değişikliklerini ek metne gerek kalmadan gösterirler.',
+    },
+    {
+      question: 'Lottie ve SVG dosyaları arasındaki fark nedir?',
+      answer:
+        'Lottie JSON dosyası animasyonun tamamını içerir ve react-useanimations’ın dahili oynatıcısı dahil her Lottie oynatıcısında oynar. SVG dosyaları ise ikonun durağan hâlinin görselleridir, her durum için bir tane (örneğin eye ve eye-off). Hiçbir şeyin hareket etmemesi gereken yerler içindir: e-postalar, belgeler, tasarım araçları ya da JavaScript’siz bir yedek.',
+    },
+    {
+      question: 'Next.js ve sunucu tarafı render ile çalışır mı?',
+      answer:
+        "Evet. Bileşen 'use client' olarak işaretlidir ve animasyonu yalnızca tarayıcıda çizer; bu yüzden server component’lerden ve Next.js, Remix, Astro gibi SSR framework’lerinden dynamic import kullanmadan render edilir. İkon modülleri, server component’lerin import edip prop olarak geçebileceği düz verilerdir.",
+      link: { href: f.links.serverRendering, label: 'Next.js ve sunucu tarafı render' },
+    },
+    {
+      question: 'İkonları ticari projelerde kullanabilir miyim?',
+      answer:
+        'Evet. İkonlar ve react-useanimations paketi MIT lisanslıdır: kişisel ve ticari işlerde kullanabilir, değiştirebilir ve yeniden dağıtabilirsiniz. Atıf memnuniyetle karşılanır ama zorunlu değildir.',
+      link: { href: f.links.licence, label: 'Lisans ve koşullar' },
+    },
+    {
+      question: 'İkonları React olmadan kullanabilir miyim?',
+      answer:
+        'Evet. Her ikon standart bir Lottie JSON dosyasıdır; düz JavaScript, Vue, Svelte, Angular ya da bir CMS içinde lottie-web ile, iOS, Android ve Flutter’da ise Lottie oynatıcılarıyla oynar. Lottie ikonları sayfasında dosya URL’leri ve her etkileşim için hazır lottie-web kod parçacıkları var.',
+      link: { href: f.links.lottie, label: 'Lottie ikonları' },
+    },
+    {
+      question: 'İkonlar bundle boyutuma ne kadar ekler?',
+      answer: `react-useanimations ${f.version} içindeki oynatıcı gzip ile yaklaşık 8 kB’tır ve bağımlılığı yoktur. Her ikon, boyutu 1 ile 15 kB arasında (medyan 2 kB) değişen ayrı bir modüldür; bundle yalnızca import ettiğiniz ikonları içerir.`,
+    },
+  ],
+
+  cta: {
+    title: { start: 'Arayüzünüze ', accent: 'hayat', end: ' katın.' },
+    text: 'Ücretsiz ve MIT lisanslı; kişisel ve ticari işler için.',
+    start: 'Hemen başlayın',
+  },
+
+  schema: {
+    software: (count: number) =>
+      `React bileşeni ve hover, tıklama ve döngü etkileşimleri hazır gelen ${count} animasyonlu ikon (Lottie). Bağımlılık yok.`,
+    catalogName: 'useAnimations ikon kataloğu',
+    catalog: (count: number) =>
+      `${count} useAnimations ikonunun tamamı: id, başlık, kategori, anahtar kelimeler, etkileşim, Lottie JSON, SVG ve ZIP URL’leri, React import’u ve shadcn komutu.`,
+  },
+};
diff --git a/website/src/i18n/messages/tr/hubs.ts b/website/src/i18n/messages/tr/hubs.ts
new file mode 100644
index 0000000..9259423
--- /dev/null
+++ b/website/src/i18n/messages/tr/hubs.ts
@@ -0,0 +1,168 @@
+import type { Messages } from '../en';
+import type { CategoryFacts, Faq, InteractionFacts } from '../en/hubs';
+import { listIn, pluralIn } from '../../format';
+
+const list = listIn('tr');
+const plural = pluralIn('tr');
+/** In Turkish a noun after a number stays singular: '1 ikon', '12 ikon'. */
+const icons = (n: number) => plural(n, { one: 'ikon', other: 'ikon' });
+/** 'Animasyonlu uyarı ikonları' -> 'animasyonlu uyarı ikonları' (Turkish dotted/dotless i aware). */
+const lower = (text: string) => text[0].toLocaleLowerCase('tr') + text.slice(1);
+
+/** Up to `max` titles, then 'and N more'. */
+const titles = (items: string[], max = 12) =>
+  items.length > max
+    ? `${items.slice(0, max).join(', ')} ve ${items.length - max} ikon daha`
+    : list(items);
+
+/** How the category's files are offered, with or without static SVGs. */
+const formats = (f: CategoryFacts) => {
+  if (f.withSvg === f.count)
+    return 'Her biri React bileşeni, shadcn/ui bileşeni, Lottie JSON animasyonu ve statik SVG olarak sunulur';
+  const base =
+    'Her biri React bileşeni, shadcn/ui bileşeni ve Lottie JSON animasyonu olarak sunulur';
+  return f.withSvg ? `${base}; ${f.withSvg} tanesi statik SVG olarak da mevcuttur` : base;
+};
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const hubs: Messages['hubs'] = {
+  titleSuffix: ' — useAnimations',
+  iconCount: icons,
+
+  category: {
+    titles: (f: CategoryFacts) => [
+      `React ve Lottie için ${lower(f.title)}`,
+      `React için ${lower(f.title)}`,
+      `Ücretsiz ${lower(f.title)}`,
+      f.title,
+    ],
+    descriptions: (f: CategoryFacts) => {
+      const examples = list(f.titles.slice(0, 3));
+      return [
+        `${f.title}: ${f.count} ücretsiz ikon, örneğin ${examples}. React, shadcn/ui ve Lottie JSON için hover, tıklama ve döngü mikro animasyonları; MIT lisanslı.`,
+        `${f.title}: ${f.count} ücretsiz ikon, örneğin ${examples}. React, shadcn/ui ve Lottie JSON için, MIT lisanslı.`,
+        `${f.title}: ${f.count} ücretsiz ikon, örneğin ${examples}. React, shadcn/ui ve Lottie için, MIT.`,
+        `${f.title}: React, shadcn/ui ve Lottie JSON için ${f.count} ücretsiz ikon, MIT lisanslı.`,
+      ];
+    },
+    summary: (f: CategoryFacts) => {
+      const plays =
+        f.groups.length === 1
+          ? `${f.count} ikonun tamamı ${f.groups[0].plays}`
+          : `${f.count} ikondan ${list(f.groups.map(({ count, plays: phrase }) => `${count} tanesi ${phrase}`))}`;
+      return `${plays}. ${formats(f)}. MIT lisansı sayesinde ticari projelerde de ücretsiz kullanılabilir.`;
+    },
+    faq: (f: CategoryFacts): Faq => {
+      const name = lower(f.title);
+      const ex = f.example;
+      const n = f.expressions.length;
+      return [
+        {
+          question: `${f.name} kategorisinde hangi ikonlar var?`,
+          answer: `${icons(f.count)}: ${titles(f.titles)}. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.`,
+        },
+        {
+          question: `Bu ${name} React’te nasıl kullanılır?`,
+          answer: `react-useanimations paketini kurun, ${ex.importLine} satırını ekleyin ve <UseAnimations animation={${ex.exportName}} size={32} /> ile render edin. İkon kendi etkileşimini (${ex.interactionLabel}) oynatır ve metin rengini izler. shadcn/ui kullanıyorsanız bunun yerine ${ex.shadcnCommand} komutunu çalıştırın.`,
+        },
+        {
+          question: `Bu ${name} React olmadan kullanılabilir mi?`,
+          answer: `Evet. Her ikon ${f.site}/icons/<id>.json adresinde bir Lottie JSON dosyasıdır (örneğin ${f.site}/icons/${ex.id}.json) ve lottie-web, lottie-ios, lottie-android ya da Flutter’ın lottie paketiyle oynatılabilir${
+            f.withSvg
+              ? '; statik SVG’ler her ikonun kendi sayfasında (ikon sayfaları yalnızca İngilizce)'
+              : ''
+          }. ${
+            n
+              ? `${titles(f.expressions, 6)} After Effects ifadeleri (expressions) kullandığı için web’de lottie-web’in tam sürümü (full build) gerekir.`
+              : 'Hiçbiri ifade (expression) kullanmadığı için lottie-web’in hafif sürümü (light build) yeterlidir.'
+          }`,
+        },
+      ];
+    },
+    badge: (n: number) => `${icons(n)} · MIT lisanslı`,
+    allIcons: (name: string) => `${name} kategorisindeki tüm ikonlar`,
+    whereToUse: 'Nerede kullanılır',
+    byInteraction: 'Etkileşime göre',
+    addOne: 'Uygulamanıza ekleyin',
+    addOneHtml: (label: string, name: string) =>
+      `React’te ${code('react-useanimations')} paketini kurup ikonu import etmeniz yeterli; ikon kendi etkileşimini (${label}) kendiliğinden oynatır. Bu kategorideki her ikon aynı şekilde çalışır: ${code(name)} yerine ikonun sayfasındaki adı yazın.`,
+    shadcnHtml: (href: string) => `${link(href, 'shadcn/ui')} ile CLI hazır bir bileşen ekler:`,
+    noReactHtml: (href: string) =>
+      `React kullanmıyor musunuz? Her ikon ${code('/icons/&lt;id&gt;.json')} adresinde bir Lottie JSON dosyasıdır; web, iOS, Android ve Flutter oynatıcıları için ${link(href, 'Lottie ikonları')} sayfasına bakın.`,
+    more: 'Diğer kategoriler',
+    allIconsButton: 'Tüm ikonlar',
+  },
+
+  interaction: {
+    titles: (f: InteractionFacts) => [
+      `React ve Lottie için ${lower(f.title)}`,
+      `React için ${lower(f.title)}`,
+      f.title,
+    ],
+    descriptions: (f: InteractionFacts) => [
+      `${f.title}: ${f.count} ücretsiz ikon, hepsi ${f.plays}. Örneğin ${list(f.titles.slice(0, 3))}. React, shadcn/ui ve Lottie JSON için, MIT lisanslı.`,
+      `${f.title}: ${f.count} ücretsiz ikon, hepsi ${f.plays}. React, shadcn/ui ve Lottie JSON için, MIT lisanslı.`,
+      `${f.title}: ${f.count} ücretsiz ikon. React, shadcn/ui ve Lottie JSON için, MIT lisanslı.`,
+    ],
+    faq: (f: InteractionFacts): Faq => [
+      {
+        question: `Hangi ikonlar “${f.label}” etkileşimini kullanır?`,
+        answer: `${icons(f.count)}: ${titles(f.titles, 15)}. ${f.example}`,
+      },
+      {
+        question: 'Kullanıcı azaltılmış hareketi tercih ederse ne olur?',
+        answer: `${f.reducedMotion} React bileşeni prefers-reduced-motion ayarını okur ve ayar değiştiğinde güncellenir; bunun için kod yazmanız gerekmez.`,
+      },
+      {
+        question: 'Bir ikonun etkileşimini nasıl değiştiririm?',
+        answer: `Her ikon kendisi için tasarlanan etkileşimi oynatır. Herhangi bir ikona bu davranışı vermek için interaction="${f.interaction}" geçin; başka bir davranış için başka bir değer ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') kullanın. Oynatmayı autoplay, loop ve speed prop’larıyla ayarlayabilirsiniz.${
+          f.interaction === 'click-toggle'
+            ? ' Durumu kendiniz yönetmek için active={isOn} geçin ve onClick içinde güncelleyin: tıklamalar artık ikonu kendiliğinden değiştirmez.'
+            : ''
+        }`,
+      },
+    ],
+    allIcons: (label: string) => `“${label}” etkileşimli tüm ikonlar`,
+    behaviour: 'Nasıl davranır',
+    hoverNote:
+      ' Dokunmatik ekranlarda dokunmak hover animasyonlarını başlatmaz; ikon odaklanabilir bir öğenin içindeyse klavye odağı başlatır.',
+    handled: 'Bunların hepsini React bileşeni halleder; siz yalnızca ikonu seçersiniz.',
+    whereToUse: 'Nerede kullanılır',
+    byCategory: 'Kategoriye göre',
+    useInReact: 'React’te kullanın',
+    overrideHtml: `Burada listelenen ikonlar varsayılan olarak bu etkileşimi oynatır. Diğer ikonlar da kullanabilir: ${code('interaction')} prop’unu geçmeniz yeterli.`,
+    normallyUses: (title: string, interaction: string) =>
+      `${title} normalde '${interaction}' kullanır`,
+    extra: {
+      loop: 'Döngüler otomatik oynar ve ekranın dışına kaydırıldıklarında duraklar. speed ile yavaşlatabilir, loop={false} ile bir kez oynatabilir ya da autoplay={false} ile sabit tutabilirsiniz:',
+      'click-toggle':
+        'Tıklamalar ikonu kendiliğinden değiştirir. İkonu kendi state’inizle senkron tutmak için active geçin: ikon active her değiştiğinde animasyon oynatır ve tıklamalar artık onu kendi başına değiştirmez.',
+      'click-replay':
+        'Odaklanabilmesi ve ekran okuyucuların duyurabilmesi için ikonu render prop’uyla gerçek bir düğmenin içine koyun. Sizin onClick’iniz önce çalışır; animasyonu atlamak için event.preventDefault() çağırın.',
+      hover:
+        'İkonu render prop’uyla bir bağlantı ya da düğmenin içine koyun: animasyon, öğe klavye odağı aldığında da oynar ve dokunmatik ekranlardaki dokunuşlar onu tetiklemez.',
+      'hover-replay':
+        'Yalnızca ikonu değil, kartın ya da bağlantının tamamını hover alanı yapın: render prop’uyla olaylar sizin öğenize bağlanır ve klavye odağı da animasyonu oynatır.',
+      'hover-loop':
+        'Döngüyü klavye odağı da dahil bağlantının tamamının tetiklemesi için render prop’unu kullanın. Hızı speed ile değiştirin:',
+    },
+    codeText: {
+      halfSpeed: 'yarı hız',
+      playsOnce: 'bir kez oynar, sonra durur',
+      staticFrame: 'statik ilk kare',
+      endState: 'true bitiş durumunu gösterir',
+      closeMenu: 'Menüyü kapat',
+      openMenu: 'Menüyü aç',
+      download: 'İndir',
+      archive: 'Arşiv',
+      weeklyGrowth: 'Haftalık büyüme',
+    },
+    docsHtml: (docs: string, lottie: string) =>
+      `Tüm prop’lar ${link(docs, 'dokümantasyonda')}. React dışında ikonlar Lottie JSON dosyalarıdır; etkileşimlerin lottie-web ile nasıl yeniden oluşturulacağını ${link(lottie, 'Lottie ikonları')} sayfası gösterir.`,
+    other: 'Diğer etkileşimler',
+    browseByCategory: 'Kategoriye göre göz at',
+  },
+};
diff --git a/website/src/i18n/messages/tr/index.ts b/website/src/i18n/messages/tr/index.ts
new file mode 100644
index 0000000..ce7e556
--- /dev/null
+++ b/website/src/i18n/messages/tr/index.ts
@@ -0,0 +1,12 @@
+// Turkish.
+import type { Messages } from '../en';
+import { common } from './common';
+import { docs } from './docs';
+import { home } from './home';
+import { hubs } from './hubs';
+import { islands } from './islands';
+import { licence } from './licence';
+import { pages } from './pages';
+import { taxonomy } from './taxonomy';
+
+export const messages: Messages = { common, taxonomy, hubs, home, docs, licence, pages, islands };
diff --git a/website/src/i18n/messages/tr/islands.ts b/website/src/i18n/messages/tr/islands.ts
new file mode 100644
index 0000000..ce12a97
--- /dev/null
+++ b/website/src/i18n/messages/tr/islands.ts
@@ -0,0 +1,51 @@
+import type { Messages } from '../en';
+
+export const islands: Messages['islands'] = {
+  iconCard: {
+    hints: {
+      loop: 'Döngü',
+      'click-toggle': 'Tıkla',
+      'click-replay': 'Tıkla',
+      hover: 'Hover',
+      'hover-loop': 'Hover',
+      'hover-replay': 'Hover',
+    },
+  },
+  iconDialog: {
+    hints: {
+      loop: 'Kendiliğinden oynar',
+      'click-toggle': 'Durumu değiştirmek için tıklayın',
+      'click-replay': 'Tekrar oynatmak için tıklayın',
+      hover: 'Hover’da oynar, imleç ayrılınca geri sarar',
+      'hover-loop': 'Hover süresince döngüde oynar',
+      'hover-replay': 'Hover’da oynar',
+    },
+    preview: '{title} önizlemesi',
+    colors: 'Önizleme rengi',
+    color: 'Renk {color}',
+    textColor: 'Metin rengi',
+    interaction: 'Etkileşim',
+    duration: 'Süre',
+    seconds: '{seconds} sn',
+    import: 'Import',
+    close: 'Kapat',
+    code: 'Kod',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Dosyalar' },
+    copy: 'Kopyala',
+    download: 'İndir',
+    iconPage: 'İkon sayfası →',
+  },
+  interactionDemo: {
+    click: 'Karta tıklayın',
+    loop: 'Kendiliğinden oynar',
+    hover: 'İmleci kartın üzerine getirin',
+  },
+  mobileMenu: {
+    menu: 'Menü',
+    nav: 'Ana menü',
+  },
+  themeToggle: {
+    toLight: 'Açık temaya geç',
+    toDark: 'Koyu temaya geç',
+  },
+};
diff --git a/website/src/i18n/messages/tr/licence.ts b/website/src/i18n/messages/tr/licence.ts
new file mode 100644
index 0000000..7b1d2c0
--- /dev/null
+++ b/website/src/i18n/messages/tr/licence.ts
@@ -0,0 +1,25 @@
+import type { Messages } from '../en';
+
+export const licence: Messages['licence'] = {
+  title: 'Lisans ve koşullar — useAnimations',
+  description:
+    'useAnimations ikonları ve react-useanimations paketi MIT lisanslıdır: kişisel ve ticari kullanım ile yeniden dağıtım ücretsizdir, atıf gerekmez.',
+  name: 'Lisans ve koşullar',
+  heading: 'Kullanımı ücretsiz. MIT lisanslı.',
+  introHtml: (mitHref: string) =>
+    `useAnimations ikonları ve <code>react-useanimations</code> paketi <a href="${mitHref}">MIT lisansı</a> ile yayımlanır.`,
+  canDo: 'Neler yapabilirsiniz',
+  canDoItemsHtml: [
+    'İkonları kişisel ve ticari web sitelerinde, uygulamalarda ve ürünlerde <strong>kullanabilirsiniz</strong>.',
+    'İkonları <strong>değiştirebilirsiniz</strong>: renkleri, boyutları, zamanlamayı ya da hareketin kendisini.',
+    'İkonları ikon paketleri, şablonlar, temalar, UI kitleri ve bileşen registry’leri içinde de olmak üzere <strong>yeniden dağıtabilirsiniz</strong>.',
+  ],
+  attribution: 'Atıf',
+  attributionText:
+    'Zorunlu değil ama memnun oluruz. Dosyaların kendisini yeniden dağıtırken lisans bildirimini koruyun; bize atıf yapmak isterseniz:',
+  credit: (link: string) => `Animasyonlu ikonlar: ${link}`,
+  noWarranty: 'Garanti yok',
+  noWarrantyText: 'İkonlar ve kod, hiçbir türde garanti verilmeksizin “olduğu gibi” sunulur.',
+  licenseText: 'Lisans metni',
+  bindingNote: 'Aşağıdaki lisans metni orijinal İngilizce sürümdür ve hukuken bağlayıcı olan odur.',
+};
diff --git a/website/src/i18n/messages/tr/pages.ts b/website/src/i18n/messages/tr/pages.ts
new file mode 100644
index 0000000..0a79238
--- /dev/null
+++ b/website/src/i18n/messages/tr/pages.ts
@@ -0,0 +1,239 @@
+import type { Messages } from '../en';
+import type { Faq } from '../en/hubs';
+import { pluralIn } from '../../format';
+
+/** In Turkish a noun after a number stays singular: '12 ikon'. */
+const icons = (n: number) => pluralIn('tr')(n, { one: 'ikon', other: 'ikon' });
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+const strong = (text: string) => `<strong class="font-medium text-fg">${text}</strong>`;
+
+export const pages: Messages['pages'] = {
+  icons: {
+    titles: (count: number) => [
+      `Kategorilere göre ${count} animasyonlu ikonun tamamı`,
+      `${count} animasyonlu ikonun tamamı`,
+      'Tüm animasyonlu ikonlar',
+    ],
+    descriptions: (count: number, categories: number) => [
+      `Tüm useAnimations ikonları tek sayfada: ${categories} kategoride ${count} ücretsiz animasyonlu ikon; React, shadcn/ui, Lottie JSON ve SVG için. MIT lisanslı.`,
+    ],
+    title: 'Tüm animasyonlu ikonlar',
+    badge: (count: number) => `${icons(count)} · MIT lisanslı`,
+    introHtml: (browser: string) =>
+      `Setteki her ikon, kategorilere göre gruplanmış hâlde. Canlı önizleme, React ve shadcn/ui kodu ile Lottie JSON, SVG ve ZIP indirmeleri için bir ikonu açın. Anahtar kelimeyle aramak ve animasyonları yerinde denemek için ${link(browser, 'ikon tarayıcısını')} kullanın.`,
+    categoriesNav: 'Kategoriler',
+    byInteraction: 'Etkileşime göre:',
+    categoryLink: (count: number, name: string) => `${name} kategorisindeki ${icons(count)} →`,
+  },
+
+  categories: {
+    titles: (categories: number) => [
+      `Animasyonlu ikon kategorileri: ${categories} koleksiyon`,
+      'Animasyonlu ikon kategorileri',
+    ],
+    descriptions: (iconCount: number, categories: number) => [
+      `${categories} kategoride ${iconCount} ücretsiz animasyonlu ikon: navigasyon, eylemler, medya, yükleme, sosyal medya ve daha fazlası. React, shadcn/ui ve Lottie için.`,
+    ],
+    title: 'Animasyonlu ikon kategorileri',
+    badge: (iconCount: number, categories: number) =>
+      `${icons(iconCount)} · ${categories} kategori`,
+    introHtml: (interactions: string) =>
+      `Her useAnimations ikonu, navigasyon oklarından medya kontrollerine, loader’lardan sosyal medya logolarına kadar tek bir kategoriye aittir. Bir kategoriyi açtığınızda tüm ikonlarını, nerede kullanılacaklarını ve birini eklemek için gereken kodu görürsünüz; isterseniz ${link(interactions, 'etkileşime')} göre de göz atabilirsiniz.`,
+    iconCount: icons,
+  },
+
+  interactions: {
+    titles: [
+      'Mikro etkileşimler: hover, tıklama ve döngü ikonları',
+      'Animasyonlu ikonlar için mikro etkileşimler',
+    ],
+    descriptions: (iconCount: number, interactions: number) => [
+      `${interactions} mikro etkileşimde ${iconCount} animasyonlu ikon: döngü, tıklayınca geçiş ve tekrar, hover, hover’da tekrar ve döngü. Azaltılmış hareket desteğiyle.`,
+    ],
+    title: 'Animasyonlu ikon etkileşimleri',
+    badge: (interactions: number, iconCount: number) =>
+      `${interactions} etkileşim · ${icons(iconCount)}`,
+    introHtml: `Her ikon kendisi için tasarlanan mikro etkileşimle gelir: döngüde oynar, tıklandığında durum değiştirir ya da baştan oynar veya hover’da oynar. React bileşeni bunu kendisi bağlar ve azaltılmış hareket tercihine uyar; <code class="font-mono text-base text-fg">interaction</code> prop’u da herhangi bir ikonu başka bir etkileşime geçirir.`,
+    iconCount: icons,
+    chooseTitle: 'Etkileşim seçimi',
+    chooseHtml: {
+      loop: (href: string) =>
+        `${strong('Süren bir durum')}, örneğin yükleme ya da aktif bir uyarı: ${link(href, 'döngü')}.`,
+      'click-toggle': (href: string) =>
+        `${strong('Bir aç/kapa kontrolü')}, örneğin sesi kapatma, menü ya da şifreyi gösterme: ${link(href, 'tıklayınca geçiş')}; kontrollü state için ${code('active')} ile.`,
+      'click-replay': (href: string) =>
+        `${strong('Tek seferlik bir işlem')}, örneğin gönder, kaydet ya da yenile: ${link(href, 'tıklayınca tekrar')}.`,
+      hover: (href: string) =>
+        `${strong('Bir bağlantının ne açacağına dair ipucu')}: ${link(href, 'hover')}; imleç ayrılınca geri oynar.`,
+      'hover-replay': (href: string) =>
+        `${strong('İmlecin hızla üzerinden geçtiği araç çubukları ve listeler')}: ${link(href, 'hover’da tekrar')}; kendiliğinden tamamlanır.`,
+      'hover-loop': (href: string) =>
+        `${strong('Daha uzun bakmaya davet eden bağlantılar')}, örneğin sosyal medya ikonları: ${link(href, 'hover’da döngü')}.`,
+    },
+    motionTitle: 'Azaltılmış hareket',
+    motionHtml: `React bileşeni ${code('prefers-reduced-motion')} ayarını izler ve ayar değiştiğinde güncellenir. Dokunmatik ekranlarda dokunmak hover animasyonlarını asla başlatmaz.`,
+    reducedMotion: {
+      loop: 'ikon otomatik oynamaz ve statik ilk karesinde kalır.',
+      'click-toggle': 'tıklama, aradaki animasyon olmadan anında diğer duruma geçer.',
+      'click-replay': 'tıklamalar yine handler’ınıza ulaşır, ancak animasyon oynamaz.',
+      hover: 'hover animasyonu oynatmaz.',
+      'hover-replay': 'hover animasyonu oynatmaz.',
+      'hover-loop': 'ikon hover sırasında statik kalır.',
+    },
+  },
+
+  lottie: {
+    titles: (count: number) => [
+      `Ücretsiz Lottie ikonları: ${count} animasyonlu JSON ikon`,
+      'Ücretsiz Lottie ikonları',
+    ],
+    descriptions: (count: number) => [
+      `Düz Lottie JSON olarak ${count} ücretsiz Lottie ikonu, MIT lisanslı. lottie-web, dotLottie, React, React Native, iOS, Android ve Flutter için hazır kod.`,
+    ],
+    title: 'Ücretsiz Lottie ikonları',
+    crumb: 'Lottie ikonları',
+    datasetName: 'useAnimations ikon kataloğu',
+    datasetDescription: (count: number) =>
+      `${count} animasyonlu Lottie ikonunun meta verileri ve dosya URL’leri: id, başlık, kategori, anahtar kelimeler, etkileşim, boyut ve süre.`,
+    badge: (count: number) => `${icons(count)} · Lottie JSON · MIT lisanslı`,
+    intro:
+      'Her useAnimations ikonu standart bir Lottie JSON animasyonudur, yani her Lottie oynatıcısı onu oynatabilir: web’de lottie-web, ayrıca lottie-ios, lottie-android, Flutter ve React Native. Dosyalar MIT lisansıyla ücretsizdir, kayıt gerektirmez ve CORS açık, kalıcı URL’lerden sunulur; doğrudan yükleyebilir ya da projenize indirebilirsiniz.',
+    popular: 'Popüler Lottie ikonları',
+    allIcons: (count: number) => `${count} ikonun tamamı →`,
+    filesTitle: 'Dosyalar ve URL’ler',
+    filesIntroHtml: `Her ikonun ${code('/icons/&lt;id&gt;')} adresinde önizleme ve indirmeler içeren bir sayfası vardır (ikon sayfaları İngilizcedir). Dosyaların kendisi:`,
+    files: {
+      json: 'Lottie JSON animasyonu',
+      zip: 'JSON ve statik SVG’ler',
+      svg: 'her durumun statik SVG’si',
+      catalog: 'tüm ikonların kataloğu',
+    },
+    catalogHtml: (catalog: string, median: number) =>
+      `${link(catalog, 'icons.json')} her ikonu id, başlık, kategori, anahtar kelimeler, etkileşim, boyut, süre ve dosya URL’leriyle listeler. Böylece bir script’te anahtar kelimeyle ikon seçmek ya da seçimi bir kodlama ajanına bırakmak kolaylaşır. Lottie dosyalarının medyan boyutu ${median} kB’tır.`,
+    players: {
+      web: {
+        title: 'Web: lottie-web',
+        text: 'Airbnb’nin referans oynatıcısı. Bir CDN’den yükleyin, bir ikon URL’sini gösterin ve SVG renderer’ı seçin; böylece ikon keskin kalır ve CSS ile yeniden renklendirilebilir. Tam sürümü (lottie.min.js) kullanın: hafif sürüm ifadeleri (expressions) atlar.',
+        cssLabel: 'Metin rengini izle (SVG renderer)',
+      },
+      'web-interactions': {
+        title: 'Web: hover ve tıklama etkileşimleri',
+        text: 'lottie-web oynatır ve durdurur, ama etkileşimler size kalmış. Aşağıdaki örnek, menü ikonunun azaltılmış hareket destekli tıklayınca geçiş etkileşimidir. Her etkileşim aynı kalıbı izler; daha aşağıda anlatılan React bileşeni ise bunların hepsini sizin yerinize yapar.',
+      },
+      dotlottie: {
+        title: 'Web: dotLottie web component',
+        text: 'LottieFiles’ın oynatıcısı bir WebAssembly motoruyla canvas’a çizer ve .lottie dosyalarının yanı sıra düz Lottie JSON da oynatır. Canvas dosyadaki renkleri korur; JSON’u yeniden renklendirmediğiniz sürece ikonlar siyah kalır.',
+        jsLabel: 'Ya da JavaScript API’si: npm install @lottiefiles/dotlottie-web',
+      },
+      react: {
+        title: 'React: react-useanimations',
+        text: 'Kurmanız gereken bir Lottie oynatıcısı yok: paketin kendi 8 kB’lık oynatıcısı var; her ikonun etkileşimini oynatır, metin rengini izler ve azaltılmış hareket tercihine uyar. Her ikon ayrı bir modüldür, yalnızca import ettikleriniz bundle’a girer.',
+      },
+      'react-native': {
+        title: 'React Native: lottie-react-native',
+        text: 'Çevrimdışı kullanım için JSON’u require() ile bundle’a ekleyin ya da URL’sinden yükleyin.',
+      },
+      ios: {
+        title: 'iOS: lottie-ios (SwiftUI)',
+        text: 'Paketi Swift Package Manager ile https://github.com/airbnb/lottie-spm.git adresinden ekleyin, ardından JSON’u bundle’ınıza koyun ya da URL’sinden yükleyin.',
+      },
+      android: {
+        title: 'Android: lottie-android (Jetpack Compose)',
+        text: 'com.airbnb.android:lottie-compose ekleyin (view’lar için com.airbnb.android:lottie). Çevrimdışı kullanım için JSON’u res/raw klasörüne koyup LottieCompositionSpec.RawRes ile yükleyin.',
+      },
+      flutter: {
+        title: 'Flutter: lottie',
+        text: 'lottie paketi Android, iOS, web ve masaüstü için saf Dart ile yazılmış bir oynatıcıdır.',
+      },
+    },
+    expressionsTitle: 'İfade (expression) kullanan ikonlar',
+    expressionsHtml: (count: number) =>
+      `${icons(count)} After Effects ifadeleri (${code('loopOut')} ya da ${code('wiggle')}) kullanır. Web’de bunları ${code('lottie_light')} ile değil, lottie-web’in tam sürümüyle oynatın. Native oynatıcılar ifadeleri işlemez; bu ikonları iOS, Android ve Flutter’da test edin ya da başka bir ikon seçin. react-useanimations bunları tasarlandığı gibi oynatır.`,
+    faq: (f: {
+      count: number;
+      minSize: number;
+      maxSize: number;
+      medianSize: number;
+      expressions: string[];
+    }): Faq => [
+      {
+        question: 'Bu Lottie ikonları ticari kullanım için ücretsiz mi?',
+        answer: `Evet. ${f.count} Lottie ikonunun tamamı MIT lisanslıdır: kişisel ve ticari projelerde kullanabilir, değiştirebilir ve yeniden dağıtabilirsiniz. Atıf gerekmez, indirmek için hesap da gerekmez.`,
+      },
+      {
+        question: 'Lottie dosyaları hangi formatta?',
+        answer: `Yalnızca shape layer’lardan oluşan standart Lottie JSON (Bodymovin formatı): görsel, font ya da harici dosya yok. Her ikon 24 ya da 32 px’lik bir artboard üzerinde çizilmiştir, her boyuta ölçeklenir ve ${f.minSize} kB ile ${f.maxSize} kB arasındadır (medyan ${f.medianSize} kB).`,
+      },
+      {
+        question: 'İkonları React’te kullanmak için lottie-web gerekli mi?',
+        answer:
+          'Hayır. react-useanimations’ın bağımlılığı olmayan, kendi 8 kB’lık oynatıcısı var; tek bir paket kurup ihtiyacınız olan ikonları import edersiniz. lottie-web yalnızca React dışında, düz web sayfalarında ya da başka framework’lerde gerekir.',
+      },
+      {
+        question: 'Hangi ikonlar lottie-web’in tam sürümünü gerektirir?',
+        answer: `${icons(f.expressions.length)} After Effects ifadeleri (loopOut ya da wiggle) kullanır: ${f.expressions.join(', ')}. Web’de bunlar lottie-web’in tam sürümünü gerektirir; lottie_light ifadeleri yok sayar. Native oynatıcılar (lottie-ios, lottie-android, Flutter’ın lottie paketi) da ifadeleri işlemediği için bu ikonlar orada farklı hareket edebilir.`,
+      },
+      {
+        question: 'Bir Lottie ikonunun rengini değiştirebilir miyim?',
+        answer:
+          'Web’de lottie-web’in SVG renderer’ı renkleri öznitelik olarak yazar; path’lere uygulanan bir CSS kuralı ikonu yeniden renklendirir. Native oynatıcılar kendi dinamik özellik API’lerini kullanır: iOS’ta ColorValueProvider, Android’de LottieProperty.COLOR ve STROKE_COLOR, Flutter’da ValueDelegate.color.',
+      },
+    ],
+    byCategory: 'Kategoriye göre Lottie ikonları',
+  },
+
+  shadcn: {
+    titles: (count: number) => [
+      `shadcn/ui için animasyonlu ikonlar: ${count} bileşen`,
+      'shadcn/ui için animasyonlu ikonlar',
+    ],
+    descriptions: (count: number) => [
+      `shadcn/ui için ${count} animasyonlu ikon, her biri tek shadcn CLI komutuyla eklenir. Hover, tıklama ve döngü mikro etkileşimleri; MIT, lottie-web’siz.`,
+    ],
+    title: 'shadcn/ui için animasyonlu ikonlar',
+    crumb: 'shadcn/ui',
+    popularList: 'Popüler shadcn/ui animasyonlu ikonları',
+    badge: (count: number) => `${count} bileşen · shadcn registry · MIT lisanslı`,
+    intro:
+      'Her useAnimations ikonu bir shadcn registry’sinde yer alır. Tek bir CLI komutu projenize tipli bir React bileşeni ekler: ikonun kendisi için tasarlanan hover, tıklama ya da döngü etkileşimi, azaltılmış hareket desteği ve temanızı izleyen renklerle. Kod, diğer shadcn/ui bileşenleri gibi doğrudan sizin repository’nize girer.',
+    addTitle: 'İkon ekleme',
+    addIntro: 'shadcn CLI’ı ikonun registry URL’siyle çalıştırın:',
+    namingHtml: `Bileşenin adı ${code('Animated')} + PascalCase yazılmış ikon id’sidir (${code('check-box')} → ${code('AnimatedCheckBox')}) ve ${code('components/animations/&lt;id&gt;.tsx')} dosyasına eklenir. CLI ayrıca ortak ${code('components/use-animation.tsx')} wrapper’ını ekler ve kendi oynatıcısıyla gelen ${code('react-useanimations')} paketini kurar: lottie-web gerekmez.`,
+    namespaceTitle: 'Registry namespace’iyle kısa adlar',
+    namespaceHtml: `Registry’yi bir kez ${code('components.json')} dosyasına ekleyin, sonra ikonları adlarıyla, birkaçını birden ekleyin:`,
+    registryHtml: (registry: string) =>
+      `${link(registry, '/r/registry.json')} adresindeki registry dizini her öğeyi başlığı, kategorisi ve etkileşimiyle listeler.`,
+    usageTitle: 'shadcn Button içinde kullanım',
+    usageHtml: `Bileşenler ${code('UseAnimations')} ile aynı prop’ları alır. Menü ikonu gibi bir geçiş ikonu için ${code('active')} geçin ve state’i düğmenizde tutun; ikon her değişiklikte animasyon oynatır:`,
+    colorHtml: (docs: string) =>
+      `İkonlar metin rengini izler; ${code('text-primary')} ya da ${code('text-muted-foreground')} onları yeniden renklendirir ve karanlık mod için ek bir şey gerekmez. Diğer prop’lar ve kalıplar ${link(docs, 'dokümantasyonda')}.`,
+    codeText: { closeMenu: 'Menüyü kapat', openMenu: 'Menüyü aç' },
+    popular: 'shadcn/ui için popüler ikonlar',
+    allIcons: (count: number) => `${count} ikonun tamamı →`,
+    popularNote: 'Her ikon sayfası kendi shadcn komutunu gösterir.',
+    faq: (f: { count: number; version: string }): Faq => [
+      {
+        question: 'shadcn/ui animasyonlu ikonları ücretsiz mi?',
+        answer: `Evet. ${f.count} ikonun tamamı ve bileşen kodu MIT lisanslıdır; kişisel ve ticari projelerde kullanılabilir. Registry için hesap ya da API anahtarı gerekmez.`,
+      },
+      {
+        question: 'shadcn CLI projeme neler ekler?',
+        answer: `components/animations/<id>.tsx içinde ikon bileşenini, components/use-animation.tsx içinde ortak UseAnimation oynatıcı wrapper’ını (registry bağımlılığı olarak, bir kez) ve npm’den react-useanimations@^${f.version} paketini. lottie-web gerekmez: paketin kendi 8 kB’lık oynatıcısı var.`,
+      },
+      {
+        question: 'Bileşenler Next.js server component’leriyle çalışır mı?',
+        answer:
+          'Evet. Bileşenler "use client" olarak işaretlidir ve animasyonu yalnızca tarayıcıda çizer; bu yüzden onları server component’lerden ve sayfalardan dynamic import ya da ssr: false olmadan render edebilirsiniz.',
+      },
+      {
+        question: 'İkonların görünümünü ve hareketini değiştirebilir miyim?',
+        answer:
+          'Kod sizin, kendi repository’nizde. Bileşenler UseAnimations’ın prop’larını alır: size, strokeColor, fillColor, interaction, active, autoplay, loop ve speed. İkonlar metin rengini izlediği için text-primary ya da text-muted-foreground gibi Tailwind class’ları onları yeniden renklendirir.',
+      },
+    ],
+    byCategory: 'Kategoriye göre göz at',
+  },
+};
diff --git a/website/src/i18n/messages/tr/taxonomy.ts b/website/src/i18n/messages/tr/taxonomy.ts
new file mode 100644
index 0000000..3cd4f07
--- /dev/null
+++ b/website/src/i18n/messages/tr/taxonomy.ts
@@ -0,0 +1,385 @@
+import type { Messages } from '../en';
+
+export const taxonomy: Messages['taxonomy'] = {
+  categories: {
+    Alerts: {
+      name: 'Uyarılar',
+      title: 'Animasyonlu uyarı ikonları',
+      intro:
+        'Yanıp sönmeden, tam fark edilecek kadar hafifçe atan uyarı üçgenleri, uyarı daireleri ve dur işaretleri. Hatalı bir form alanının yanına, bir hata banner’ının başına ya da durum sütununa koyun; sabit bir ikonu kaydırırken gözden kaçırmak kolaydır.',
+      useCases: [
+        'Form alanlarının altındaki satır içi doğrulama hataları',
+        'Sayfanın üstündeki hata ve uyarı banner’ları',
+        'Deploy ya da iş durumu tablolarındaki başarısız satırlar',
+        'Geri alınamaz işlemler için onay diyalogları',
+        'Bir kesinti sırasında sistem durum sayfaları',
+      ],
+    },
+    Notifications: {
+      name: 'Bildirimler',
+      title: 'Animasyonlu bildirim zili ikonları',
+      intro:
+        'Yeni bir hareket olduğunda çalan ya da zil ile sessiz zil arasında geçiş yapan zil ikonları. Zilin kısa bir sallanışı gözü okunmamış sayısına çeker; geçiş yapan sürümler aynı zamanda bir kanalın ya da konunun sessize alma düğmesi olarak işe yarar.',
+      useCases: [
+        'Uygulama başlığındaki bildirim merkezi düğmesi',
+        'Yeni mesaj geldiğinde çalan okunmamış rozeti',
+        'Bir kanal ya da konu için sessize alma ve sesi açma anahtarı',
+        'E-posta ve push bildirimi ayarları',
+        'Hatırlatıcı ve uyarı abonelik düğmeleri',
+      ],
+    },
+    Navigation: {
+      name: 'Navigasyon',
+      title: 'Animasyonlu navigasyon ve ok ikonları',
+      intro:
+        'Kapatma düğmesine dönüşen hamburger menüler; hover’da kendi yönüne doğru hafifçe kayan oklar, chevron’lar ve köşe okları. Bir kontrolün nereye götürdüğünü açıkça gösterirler: çekmeceyi aç, geri dön, satırı genişlet, siteden çık.',
+      useCases: [
+        'Mobilde kapatma düğmesine dönüşen hamburger menü',
+        'Carousel ve sayfalamada önceki ve sonraki düğmeleri',
+        'Accordion ve açılır menü chevron’ları',
+        'Başa dön ve aşağı kaydır ipuçları',
+        'Giriş ve çıkış bağlantıları',
+        'Harici bağlantı işaretleri ve kenar çubuğu açma/kapama düğmeleri',
+      ],
+    },
+    Action: {
+      name: 'Eylemler',
+      title: 'Animasyonlu eylem ikonları',
+      intro:
+        'Arayüzün fiilleri: kaydet, sil, indir, yenile, beğen, yer imine ekle, ara ve ayarlar. Her biri ait olduğu tıklamayı ya da hover’ı onaylar; bir gönderiyi beğendiğinizde kalp dolar, silmeden önce çöp kutusunun kapağı kalkar.',
+      useCases: [
+        'Kartlardaki beğen, favori ve yer imi düğmeleri',
+        'İşlemi onaylayan indir, yükle ve kaydet düğmeleri',
+        'Giriş formunda şifreyi göster ve gizle düğmesi',
+        'Dashboard’lardaki yenile ve senkronize et düğmeleri',
+        'Tablolarda ve dosya listelerinde sil düğmeleri',
+        'Temizle düğmesine dönüşen arama alanı',
+      ],
+    },
+    Content: {
+      name: 'İçerik',
+      title: 'Animasyonlu dosya, klasör ve kullanıcı ikonları',
+      intro:
+        'Dosyalar, klasörler, kitaplar, posta, ekler ve kişiler. Kullanıcının üzerinde çalıştığı şeyleri etiketlerler; ekleme, çıkarma ve onay varyantları da liste ve ekip yönetimini daha canlı hissettirir.',
+      useCases: [
+        'Dosya yöneticileri ve belge listeleri',
+        'Ek ve panoya kopyala düğmeleri',
+        'E-posta istemcilerinde gelen kutusu ve arşiv görünümleri',
+        'Kullanıcı ekleme ve çıkarma işlemleri olan ekip üyesi listeleri',
+        'Belgeler ve bağlantılar için paylaşım menüleri',
+      ],
+    },
+    Form: {
+      name: 'Form',
+      title: 'Animasyonlu form kontrolü ikonları',
+      intro:
+        'İşaretli ve işaretsiz durumları arasında animasyonla geçen bir onay kutusu, bir radyo düğmesi ve bir toggle switch. Sıradan bir input’un yavan kaldığı yerlerde, örneğin onboarding kontrol listelerinde ve ayar ekranlarında kullanın; durum yine tek bakışta okunur.',
+      useCases: [
+        'Özellikler ve tercihler için ayar anahtarları',
+        'Onboarding ve yapılacaklar kontrol listeleri',
+        'Anketlerde ve plan seçicilerde tek seçimli seçenekler',
+        'Kullanım koşulları ve onay kutuları',
+      ],
+    },
+    Media: {
+      name: 'Medya',
+      title: 'Animasyonlu medya oynatıcı ikonları',
+      intro:
+        'Ses ve video oynatıcılar için oynat ve duraklat, ses düzeyi, mikrofon, kamera, atla ve karıştır. Geçiş yapan ikonlar iki durumu arasında değişir (oynattan duraklata ya da mikrofondan sessize), böylece düğme her zaman bir tıklamanın ne yapacağını gösterir.',
+      useCases: [
+        'Ses ve video oynatıcılarda oynat ve duraklat düğmeleri',
+        'Görüntülü görüşmelerde sesi kapat ve aç kontrolleri',
+        'Toplantı uygulamalarında kamerayı aç ve kapat düğmeleri',
+        'Atla, tekrarla ve karıştır için çalma listesi kontrolleri',
+        'Yayınlama (cast) ve AirPlay düğmeleri',
+        'Podcast ve müzik uygulaması kontrolleri',
+      ],
+    },
+    'Text editing': {
+      name: 'Metin düzenleme',
+      title: 'Animasyonlu metin düzenleme ikonları',
+      intro:
+        'Zengin metin araç çubukları için kalın, italik, altı çizili, hizalama ve liste ikonları. Kısa bir tıklama animasyonu biçimlendirmenin uygulandığını onaylar; metnin kendisindeki değişikliğin zor fark edildiği editörlerde bu işe yarar.',
+      useCases: [
+        'Zengin metin editörü araç çubukları',
+        'Yorum ve mesaj yazma alanları',
+        'CMS ve blog yazısı editörleri',
+        'Markdown ve not alma uygulamaları',
+        'Tasarım araçlarında metin hizalama kontrolleri',
+      ],
+    },
+    Communication: {
+      name: 'İletişim',
+      title: 'Animasyonlu iletişim ikonları',
+      intro:
+        'Telefonlar, sohbet balonları, gönder düğmeleri, sesli mesaj ve RSS. Arama ikonları bir arama geçmişinin ihtiyaç duyduğu gelen, giden, cevapsız ve yönlendirilmiş durumları karşılar; gönder ikonu da tıklandığında mesajı küçük bir hareketle uğurlar.',
+      useCases: [
+        'Sohbet ve yorum formlarındaki gönder düğmesi',
+        'Gelen, giden ve cevapsız aramaları gösteren arama geçmişi',
+        'İletişim ve destek düğmeleri',
+        'Sohbet widget’ı açma düğmeleri',
+        'Bahsetme (mention) ve e-posta adresi alanları',
+      ],
+    },
+    Devices: {
+      name: 'Cihazlar',
+      title: 'Animasyonlu cihaz ikonları',
+      intro:
+        'Telefonlar, tabletler, monitörler, saatler ve yazıcılar; bunların yanında wifi, Bluetooth ve pil gibi bağlantı göstergeleri. Cihaz seçicilerde, responsive önizleme geçişlerinde ve bağlantı durumunda işe yarar.',
+      useCases: [
+        'Mobil, tablet ve masaüstü için responsive önizleme geçişleri',
+        'Wifi ve Bluetooth bağlantı durumu',
+        'Pil ve şarj göstergeleri',
+        'Hesap güvenliği ayarlarındaki cihaz listeleri',
+        'Faturalarda ve raporlarda yazdır düğmeleri',
+      ],
+    },
+    Weather: {
+      name: 'Hava durumu',
+      title: 'Animasyonlu hava durumu ikonları',
+      intro:
+        'Hava tahminleri ve günün saatine bağlı her şey için güneş, ay, bulutlar, yağmur, kar, şimşek ve rüzgâr. Güneş ve ay aynı zamanda doğal bir açık/karanlık mod anahtarı oluşturur.',
+      useCases: [
+        'Hava durumu widget’ları ve tahmin kartları',
+        'Açık ve koyu tema anahtarları',
+        'Seyahat uygulamalarında gün doğumu ve gün batımı saatleri',
+        'Akıllı ev dashboard’larında sıcaklık değerleri',
+        'Enerji ve güç durumu göstergeleri',
+      ],
+    },
+    'Maps & location': {
+      name: 'Harita ve konum',
+      title: 'Animasyonlu harita ve konum ikonları',
+      intro:
+        'Harita pinleri, navigasyon okları, küreler, hedefler ve çapalar. Hover’da düşen bir pin, mağaza bulucuyu ya da teslimat adresini öne çıkarır; küre ise dil veya bölge seçici olarak kullanılabilir.',
+      useCases: [
+        'Mağaza bulucular ve adres alanları',
+        'Mevcut konum ve yol tarifi düğmeleri',
+        'Dil ve bölge seçiciler',
+        'Teslimat ve sipariş takibi',
+        'Seyahat ve rezervasyon uygulamaları',
+      ],
+    },
+    Commerce: {
+      name: 'E-ticaret',
+      title: 'Animasyonlu e-ticaret ikonları',
+      intro:
+        'Online mağazalar için alışveriş sepetleri, çantalar, fiyat etiketleri, hediyeler, kredi kartları ve kargo kamyonları. Sepete ekle animasyonu tıklamayı bir toast’a gerek kalmadan onaylar; kamyon ve paket ikonları da sipariş durumuna biraz hayat katar.',
+      useCases: [
+        'Ürün kartlarında sepete ekle düğmeleri',
+        'Mağaza başlığında sepet ve çanta düğmeleri',
+        'Ödeme adımı ve ödeme yöntemi seçimi',
+        'İndirim, kupon ve kampanya rozetleri',
+        'Kargo ve sipariş takibi adımları',
+        'Hediye kartları ve hediye paketi seçenekleri',
+      ],
+    },
+    Charts: {
+      name: 'Grafikler',
+      title: 'Animasyonlu grafik ikonları',
+      intro:
+        'Analitik ve raporlama için sütun grafikler, bir pasta grafik ve trend okları. Yükselen ve düşen trend ikonları bir metriğin arttığını mı azaldığını mı tek bakışta gösterir; KPI kartlarına ve sayı değişikliklerinin listelendiği sayfalara uyar.',
+      useCases: [
+        'Yükselen ya da düşen metrikleri gösteren KPI kartları',
+        'Analitik ve rapor menü öğeleri',
+        'Dashboard’ların boş durumları',
+        'Finans ve portföy özetleri',
+      ],
+    },
+    Development: {
+      name: 'Geliştirme',
+      title: 'Animasyonlu geliştirici ikonları',
+      intro:
+        'Kod parantezleri, bir terminal, Git branch’leri, commit’ler, merge’ler ve pull request’ler; ayrıca sunucular ve veritabanları. Git ve altyapı terimlerinin arayüzün parçası olduğu geliştirici araçları, dokümantasyon siteleri ve durum sayfaları için tasarlandı.',
+      useCases: [
+        'Geliştirici araçlarında pull request, merge ve branch durumu',
+        'Dokümantasyonda kod parçacığı ve embed düğmeleri',
+        'Landing page’lerde terminal ve CLI bölümleri',
+        'Durum sayfalarında sunucu ve veritabanı sağlığı',
+        'Command tuşuyla klavye kısayolu ipuçları',
+      ],
+    },
+    'Design & layout': {
+      name: 'Tasarım ve yerleşim',
+      title: 'Animasyonlu tasarım ve yerleşim ikonları',
+      intro:
+        'Editörler ve sayfa oluşturucular için grid, sütun, katman, kırpma, kalem aracı ve imleç ikonları. Kullanıcıların içerik düzenlediği, grid ile tablo görünümü arasında geçtiği ya da bir çizim aracı seçtiği araç çubuklarına uyar.',
+      useCases: [
+        'Grid, liste ve tablo görünümü geçişleri',
+        'Tasarım ve sunum araçlarında katman panelleri',
+        'Görsel editörlerde kırpma ve kesme araçları',
+        'Sayfa oluşturucular ve yerleşim seçiciler',
+        'Sürükleyerek taşıma tutamaçları',
+      ],
+    },
+    'Shapes & math': {
+      name: 'Şekiller ve matematik',
+      title: 'Animasyonlu şekil ve matematik ikonları',
+      intro:
+        'Daireler, kareler, üçgenler, altıgenler, bir sekizgen ve bölme işaretleri. Çizim uygulamalarında şekil aracı, hesap makinesinde operatör ya da diyagramlarda ve onboarding adımlarında nötr işaret olarak kullanın.',
+      useCases: [
+        'Beyaz tahta ve çizim uygulamalarında şekil araçları',
+        'Hesap makinesi ve formül editörü operatörleri',
+        'Diyagramlarda madde ve adım işaretleri',
+        'Quiz ve oyun arayüzleri',
+      ],
+    },
+    Loading: {
+      name: 'Yükleme',
+      title: 'Animasyonlu yükleme ikonları',
+      intro:
+        'Bir işlem sürdüğü müddetçe döngüde oynayan spinner’lar ve loader’lar. Bir istek çalışırken gönder düğmesinin içine, hâlâ yüklenen içeriğin yerine ya da tam ekran bir açılış ekranına koyun; kullanıcı azaltılmış hareketi tercih ettiğinde sabit kalırlar.',
+      useCases: [
+        'Bir isteğin yanıtını bekleyen gönder düğmeleri',
+        'Liste ya da grafik yüklenirken yer tutucular',
+        'Sonsuz kaydırma ve daha fazla yükle göstergeleri',
+        'Tam ekran açılış ekranları ve sayfa geçişleri',
+        'Dosya yükleme ve işleme ilerlemesi',
+      ],
+    },
+    'Social media': {
+      name: 'Sosyal medya',
+      title: 'Animasyonlu sosyal medya ikonları',
+      intro:
+        'Sosyal ağların ve geliştiricilerle tasarımcıların işlerini paylaştığı araçların marka ikonları: X, Instagram, YouTube, Discord, Telegram, Figma ve daha fazlası. Hover’da canlanırlar; bu da footer ve profil bağlantılarının tıklanabilir olduğunu hissettirir.',
+      useCases: [
+        'Site footer’ındaki sosyal medya bağlantıları',
+        'Blog yazılarında paylaş düğmeleri',
+        'Yazar ve ekip profili bağlantıları',
+        'Sohbet sunucuları için topluluk davet düğmeleri',
+        'Sosyal medya ya da geliştirici hesabıyla giriş',
+      ],
+    },
+    Other: {
+      name: 'Diğer',
+      title: 'Diğer animasyonlu ikonlar',
+      intro:
+        'Daha büyük bir gruba girmeyen ikonlar: geri bildirim için emoji yüzler, bir kahve fincanı, bir saat, bir nabız çizgisi ve bir aşağı kaydır ipucu. Aşağı kaydır ikonu, hero bölümlerinde aşağıda daha fazlası olduğunu gösteren yaygın bir ipucudur.',
+      useCases: [
+        'Hero bölümünün altında aşağı kaydır ipuçları',
+        'Geri bildirim widget’larında mutlu, nötr ve üzgün yüzler',
+        'Aktivite ve uptime göstergeleri',
+        'Çalışma saatleri ve saat seçiciler',
+        '“Bana bir kahve ısmarla” ve destek bağlantıları',
+      ],
+    },
+  },
+  interactions: {
+    loop: {
+      label: 'Döngü',
+      title: 'Döngüsel animasyonlu ikonlar',
+      intro:
+        'Bu ikonlar ekranda kaldıkları sürece kesintisiz oynar; bu yüzden süren durumlara uyarlar: bir şey yükleniyor, bir uyarı aktif, bir terminal bekliyor. Azaltılmış hareket tercih edildiğinde ilk karede durur ve normal bir ikon gibi okunurlar.',
+      useCases: [
+        'Yükleme spinner’ları ve ilerleme göstergeleri',
+        'Aktif uyarı ve hata durumları',
+        'Canlı yayın ve kayıt göstergeleri',
+        'Hero bölümlerinde aşağı kaydır ipuçları',
+        'Yeni bildirimler için dikkat işaretleri',
+      ],
+      example:
+        'Döngüsel ikonlar genellikle yükleme spinner’larında, aktif uyarılarda, çalan bir zilde ya da aşağı kaydır ipucunda kullanılır.',
+      description:
+        'Kesintisiz oynar; azaltılmış hareket tercih edildiğinde statik ilk karede kalır.',
+      reducedMotion:
+        'Azaltılmış hareket tercih edildiğinde ikon otomatik oynamaz ve statik ilk karesinde kalır.',
+      plays: 'kesintisiz döngüde oynar',
+    },
+    'click-toggle': {
+      label: 'Tıklayınca geçiş',
+      title: 'Tıklayınca durum değiştiren animasyonlu ikonlar',
+      intro:
+        'Her tıklamada iki durum arasında animasyonla geçer ve yeni durumda kalırlar; bu da onları bir aç/kapa kontrolünün görsel yarısı yapar. İkon her zaman mevcut durumu gösterdiği için aria-pressed ya da checked özniteliğiyle birlikte kullanın, düğme kendini anlatsın.',
+      useCases: [
+        'Sesi kapat ve aç düğmeleri',
+        'Şifreyi göster ve gizle alanları',
+        'Hamburger menü ve kapat düğmeleri',
+        'Oynat ve duraklat kontrolleri',
+        'Beğen, yıldız ve yer imi düğmeleri',
+        'Onay kutuları, radyo düğmeleri ve switch’ler',
+      ],
+      example:
+        'Tıklayınca durum değiştiren ikonlar genellikle sesi kapat/aç, şifreyi göster/gizle, menü/kapat, oynat/duraklat ve beğen düğmelerinde kullanılır.',
+      description:
+        'Tıklandığında iki durum arasında geçiş yapar; azaltılmış hareket tercih edildiğinde ise animasyonsuz, anında geçer.',
+      reducedMotion:
+        'Azaltılmış hareket tercih edildiğinde tıklama, aradaki animasyon olmadan anında diğer duruma geçer.',
+      plays: 'tıklandığında iki durum arasında geçiş yapar',
+    },
+    'click-replay': {
+      label: 'Tıklayınca tekrar',
+      title: 'Tıklamalı animasyonlu ikonlar',
+      intro:
+        'Bu ikonlar her tıklandıklarında baştan bir kez oynar; işlemin gerçekleştiğine dair küçük bir onaydır. Geride bir durum bırakmayan tek seferlik işlemlere uyarlar: gönder, kaydet, yenile, indir, yazdır ya da sil.',
+      useCases: [
+        'Sohbet ve yorum formlarında gönder düğmeleri',
+        'Kaydet, indir ve yükle düğmeleri',
+        'Yenile ve döndür düğmeleri',
+        'Sepete ekle düğmeleri',
+        'Editörlerde metin biçimlendirme düğmeleri',
+      ],
+      example:
+        'Tıklamalı ikonlar genellikle gönder, kaydet, yenile, indir, sepete ekle ve biçimlendirme düğmelerinde işlemi onaylar.',
+      description:
+        'Azaltılmış hareket tercih edilmediği sürece her tıklamada baştan bir kez oynar.',
+      reducedMotion:
+        'Azaltılmış hareket tercih edildiğinde tıklamalar yine handler’ınıza ulaşır, ancak animasyon oynamaz.',
+      plays: 'her tıklamada baştan oynar',
+    },
+    hover: {
+      label: 'Hover',
+      title: 'Hover efektli animasyonlu ikonlar',
+      intro:
+        'Bu ikonlar imleç üzerlerine geldiğinde ileri, ayrıldığında geri oynar; böylece hareket imleci izler ve asla yarıda kalmaz. Ne açtığını ima eden navigasyon öğelerine ve düğmelere uyarlar: çöp kutusunun kapağı kalkar, ayarlar dişlisi döner, klasör açılır.',
+      useCases: [
+        'Kenar çubuğu ve navigasyon menüsü öğeleri',
+        'Tıklamadan önce kapağı kaldıran sil düğmeleri',
+        'Ayarlar ve profil bağlantıları',
+        'Yakınlaştır ve uzaklaştır kontrolleri',
+        'Footer’daki sosyal medya bağlantıları',
+      ],
+      example:
+        'Hover efektli ikonlar genellikle navigasyon öğelerinde, sil düğmelerinde, ayarlarda, yakınlaştırma kontrollerinde ve sosyal medya bağlantılarında kullanılır.',
+      description: 'mouseenter’da ileri, mouseleave’de geri oynar.',
+      reducedMotion: 'Azaltılmış hareket tercih edildiğinde hover animasyonu oynatmaz.',
+      plays: 'hover’da ileri, imleç ayrılınca geri oynar',
+    },
+    'hover-replay': {
+      label: 'Hover’da tekrar',
+      title: 'Hover’da oynayan animasyonlu ikonlar',
+      intro:
+        'Bu ikonlar imleç üzerlerine geldiğinde bir kez oynar ve kendiliğinden tamamlanır; böylece araç çubuğunun üzerinden hızlıca geçmek titrek bir harekete dönüşmez. Setin büyük kısmı böyle çalışır: hover’da canlanan oklar, dosyalar, cihazlar, hava durumu ve marka ikonları.',
+      useCases: [
+        'Özellik listeleri ve fiyatlandırma tabloları',
+        'Ok bağlantıları ve call-to-action düğmeleri',
+        'Editörlerde ve dashboard’larda araç çubuğu düğmeleri',
+        'Landing page grid’indeki kartlar',
+        'Footer ve iletişim bağlantıları',
+      ],
+      example:
+        'Hover’da oynayan ikonlar genellikle ok bağlantılarına, özellik listelerine, araç çubuğu düğmelerine ve landing page kartlarına canlılık katar.',
+      description:
+        'Azaltılmış hareket tercih edilmediği sürece mouseenter’da bir kez oynar. İmlecin ayrılması animasyonu durdurmaz; oynarken yeniden üzerine gelmek de baştan başlatmaz.',
+      reducedMotion: 'Azaltılmış hareket tercih edildiğinde hover animasyonu oynatmaz.',
+      plays: 'hover’da bir kez oynar',
+    },
+    'hover-loop': {
+      label: 'Hover’da döngü',
+      title: 'Hover’da döngüye giren animasyonlu ikonlar',
+      intro:
+        'Bu ikonlar imleç üzerlerinde kaldığı sürece döngüde oynar ve imleç ayrıldıktan sonra mevcut turu tamamlar; böylece hareketin ortasında asla durmazlar. Daha uzun bakmaya davet eden bağlantılara, çoğunlukla sosyal medya ve topluluk ikonlarına uyarlar.',
+      useCases: [
+        'Header ve footer’lardaki sosyal medya bağlantıları',
+        'Topluluk ve sohbet davet düğmeleri',
+        'Portföy ve profil bağlantıları',
+        'Dil ve bölge seçiciler',
+      ],
+      example:
+        'Hover’da döngüye giren ikonlar genellikle sosyal medya bağlantılarında, topluluk davetlerinde, portföy bağlantılarında ve dil seçicilerde kullanılır.',
+      description:
+        'Hover süresince döngüde oynar, mouseleave’den sonra mevcut turu tamamlar ve azaltılmış hareket tercih edildiğinde statik kalır.',
+      reducedMotion: 'Azaltılmış hareket tercih edildiğinde ikon hover sırasında statik kalır.',
+      plays: 'hover süresince döngüde oynar',
+    },
+  },
+};
diff --git a/website/src/i18n/messages/vi/common.ts b/website/src/i18n/messages/vi/common.ts
new file mode 100644
index 0000000..5ad7466
--- /dev/null
+++ b/website/src/i18n/messages/vi/common.ts
@@ -0,0 +1,46 @@
+// Văn bản dùng chung cho mọi trang: layout, header, footer, breadcrumb, FAQ và nút sao chép.
+import type { Messages } from '../en';
+
+export const common: Messages['common'] = {
+  skipToContent: 'Chuyển đến nội dung chính',
+  ogImageAlt: 'useAnimations: icon động miễn phí cho React, shadcn/ui, Lottie và SVG',
+  homeLabel: 'Trang chủ useAnimations',
+  mainNav: 'Điều hướng chính',
+  browseIcons: 'Xem icon',
+  nav: {
+    icons: 'Icon',
+    categories: 'Danh mục',
+    documentation: 'Tài liệu',
+    shadcn: 'shadcn',
+    lottie: 'Icon Lottie',
+    license: 'Giấy phép',
+  },
+  footer: {
+    tagline: 'Icon động miễn phí, có sẵn tương tác. Giấy phép MIT, làm cho React.',
+    product: 'Sản phẩm',
+    developers: 'Lập trình viên',
+    follow: 'Theo dõi',
+    languages: 'Ngôn ngữ',
+    allIcons: 'Tất cả icon',
+    categories: 'Danh mục',
+    interactions: 'Tương tác',
+    lottieIcons: 'Icon Lottie',
+    shadcnIcons: 'Icon cho shadcn/ui',
+    documentation: 'Tài liệu',
+    licencing: 'Giấy phép & Điều khoản',
+    shadcnRegistry: 'shadcn registry',
+    mitLicense: 'Giấy phép MIT',
+    builtWith: 'Trang web xây dựng bằng Astro',
+  },
+  breadcrumb: 'Đường dẫn',
+  crumbs: { icons: 'Icon', categories: 'Danh mục', interactions: 'Tương tác' },
+  faq: 'Câu hỏi thường gặp',
+  copy: 'Sao chép',
+  copied: 'Đã sao chép',
+  pressCtrlC: 'Nhấn Ctrl+C',
+  languageBanner: {
+    text: 'Trang này cũng có bản tiếng Việt.',
+    action: 'Chuyển sang tiếng Việt',
+    dismiss: 'Đóng',
+  },
+};
diff --git a/website/src/i18n/messages/vi/docs.ts b/website/src/i18n/messages/vi/docs.ts
new file mode 100644
index 0000000..5522663
--- /dev/null
+++ b/website/src/i18n/messages/vi/docs.ts
@@ -0,0 +1,35 @@
+// Khung của trang tài liệu. Nội dung chính nằm ở src/content/documentation.vi.md.
+import type { Messages } from '../en';
+
+export const docs: Messages['docs'] = {
+  title: 'Tài liệu — useAnimations',
+  description: (iconCount: number) =>
+    `Cách dùng ${iconCount} icon động trong React và shadcn/ui: tương tác, prop, màu sắc, tệp và khả năng truy cập.`,
+  badge: 'Tài liệu',
+  onThisPage: 'Trên trang này',
+  viewAsMarkdown: 'Xem dạng Markdown',
+  headline: 'Tài liệu useAnimations',
+  summary: 'Cách dùng bộ icon động useAnimations trong React và shadcn/ui.',
+  crumb: 'Tài liệu',
+  faq: [
+    {
+      question: 'useAnimations có miễn phí cho dự án thương mại không?',
+      answer: 'Có. Bộ icon và package React đều dùng giấy phép MIT, không bắt buộc ghi nguồn.',
+    },
+    {
+      question: 'Dùng icon useAnimations trong React như thế nào?',
+      answer:
+        'Cài react-useanimations, import UseAnimations và một icon (ví dụ react-useanimations/lib/checkmark), rồi render <UseAnimations animation={checkmark} size={32} />.',
+    },
+    {
+      question: 'Đổi màu icon bằng cách nào?',
+      answer:
+        'Icon tự lấy theo màu chữ. Bạn có thể đổi màu bằng strokeColor và fillColor, bằng thuộc tính CSS color, hoặc style trực tiếp các path.',
+    },
+    {
+      question: 'Có dùng được khi không có React không?',
+      answer:
+        'Package này dành cho React. Tuy vậy, mỗi icon còn là một tệp Lottie JSON chuẩn mà mọi Lottie player đều phát được (lottie-web, dotLottie, lottie-react-native, lottie-ios, lottie-android, Flutter), kèm một SVG tĩnh. Xem mục Dùng không cần React và useanimations.com/lottie-icons.',
+    },
+  ],
+};
diff --git a/website/src/i18n/messages/vi/home.ts b/website/src/i18n/messages/vi/home.ts
new file mode 100644
index 0000000..4fffcb7
--- /dev/null
+++ b/website/src/i18n/messages/vi/home.ts
@@ -0,0 +1,170 @@
+// Trang chủ (/), phần FAQ và các liên kết tới trang tổng hợp.
+import type { Messages } from '../en';
+import type { FaqLinks, HomeFaq } from '../en/home';
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const home: Messages['home'] = {
+  title: 'Thư viện icon động & micro animation — useAnimations',
+  description: (count: number) =>
+    `${count} micro animation miễn phí cho UI: thư viện icon động cho React, shadcn/ui và Lottie, có sẵn hover, click và loop. Giấy phép MIT.`,
+
+  hero: {
+    badge: (count: number) => `${count} icon · không dependency · MIT`,
+    headline: { start: 'Icon ', accent: 'sống động.', end: '' },
+    h1: 'Icon động miễn phí cho React, shadcn/ui và Lottie',
+    intro: (count: number) =>
+      `${count} micro animation được làm thủ công, có sẵn micro-interaction hover, click và loop. Dùng như một React component, thêm bằng shadcn, hoặc tải về SVG và Lottie JSON. Giấy phép MIT.`,
+    browse: 'Xem icon',
+    fieldHint: 'Di chuyển con trỏ qua vùng icon.',
+  },
+
+  numbers: {
+    label: 'Tổng quan',
+    icons: 'icon động',
+    interactions: 'tương tác có sẵn',
+    size: 'player, đã gzip',
+    dependencies: 'dependency',
+  },
+
+  interactions: {
+    eyebrow: 'Tương tác có sẵn',
+    title: 'Icon nào cũng biết cách chuyển động.',
+    intro:
+      'Mỗi icon đi kèm tương tác mà nó được thiết kế cho. Chỉ cần thả vào là chạy, hoặc chọn tương tác khác bằng một prop duy nhất. Hãy thử:',
+    demos: {
+      loop: 'Phát liên tục, cho loader và các trạng thái nền.',
+      'click-toggle': 'Chuyển giữa hai trạng thái: menu và đóng, phát và tạm dừng.',
+      'click-replay': 'Phát lại từ đầu sau mỗi lần click, như một phản hồi.',
+      hover: 'Phát xuôi khi trỏ vào và chạy ngược khi rời đi.',
+      'hover-loop': 'Lặp khi đang hover và chạy nốt chu kỳ khi rời đi.',
+      'hover-replay': 'Phát một lần từ đầu mỗi khi trỏ vào.',
+    },
+  },
+
+  browser: {
+    eyebrow: 'Thư viện',
+    title: (count: number) => `${count} icon động miễn phí`,
+    intro:
+      'Hover hoặc click để xem hiệu ứng. Mở một icon để lấy code và tải về Lottie JSON, SVG hoặc ZIP.',
+    search: 'Tìm icon',
+    searchPlaceholder: (count: number) =>
+      `Tìm trong ${count} icon — thử “eye”, “bell” hoặc “arrow”`,
+    interaction: 'Tương tác',
+    allInteractions: 'Mọi tương tác',
+    color: 'Màu icon',
+    colors: {
+      text: 'Màu chữ',
+      indigo: 'Chàm',
+      red: 'Đỏ',
+      amber: 'Hổ phách',
+      teal: 'Xanh mòng két',
+      violet: 'Tím',
+    },
+    customColor: 'Màu tùy chọn',
+    size: 'Kích thước',
+    category: 'Danh mục',
+    all: 'Tất cả',
+    count: { other: '{n} icon' },
+    noMatch: 'Không có icon nào phù hợp.',
+    noMatchHintHtml: (href: string) => `Thử từ khóa khác, hoặc ${link(href, 'đề xuất một icon')}.`,
+  },
+
+  everywhere: {
+    eyebrow: 'Dùng theo cách của bạn',
+    title: 'Cài, import, xong.',
+    intro:
+      'Một React component không có dependency, một shadcn registry, các tệp tải về với URL cố định, và một catalog mà AI agent đọc được.',
+    docs: 'Đọc tài liệu →',
+    tablist: 'Nền tảng',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Tệp', agents: 'Agent' },
+    codeText: {
+      afterAdding: 'sau đó',
+      files: 'Mỗi icon có dạng SVG, dạng animation (Lottie JSON) và một tệp ZIP gồm cả hai',
+    },
+  },
+
+  features: {
+    title: 'Nhỏ gọn, dễ tiếp cận và tùy biến thoải mái.',
+    colors: 'Theo màu của bạn',
+    colorsHtml: `Icon dùng ${code('currentColor')}: tự lấy màu chữ, trạng thái hover và dark mode mà không cần cấu hình. Muốn ghi đè thì dùng prop, class hoặc CSS thuần.`,
+    tiny: 'Nhỏ gọn ngay từ thiết kế',
+    tinyText: 'Player tích hợp sẵn, không có dependency. Mỗi icon là một module riêng chỉ 2 kB.',
+    accessible: 'Khả năng truy cập có sẵn',
+    accessibleText:
+      'Tôn trọng thiết lập giảm chuyển động, phát hiệu ứng hover khi focus bằng bàn phím và được trình đọc màn hình bỏ qua trừ khi bạn gắn nhãn.',
+    ssr: 'Sẵn sàng cho server rendering',
+    ssrText:
+      'Một client component render an toàn trong Next.js, Remix và Astro. Icon chỉ là dữ liệu thuần, import ở đâu cũng được.',
+    agents: 'Làm cho AI agent',
+    agentsHtml: (iconsJson: string, llmsTxt: string) =>
+      `Catalog có kiểu dữ liệu với từ khóa cho từng icon, ${link(iconsJson, 'icons.json')}, ${link(llmsTxt, 'llms.txt')} và tài liệu Markdown.`,
+  },
+
+  browse: {
+    title: 'Tìm đúng micro animation bạn cần.',
+    byCategory: 'Xem theo danh mục',
+    byInteraction: 'Xem theo tương tác',
+    formats: 'Tất cả icon và định dạng',
+  },
+
+  hubs: {
+    icons: 'Tất cả icon động',
+    categories: 'Danh mục icon',
+    interactions: 'Icon theo tương tác',
+    lottie: 'Icon Lottie (JSON)',
+    shadcn: 'Icon động cho shadcn/ui',
+  },
+
+  faqTitle: 'Câu hỏi thường gặp',
+  faq: (f: { version: string; links: FaqLinks }): HomeFaq => [
+    {
+      question: 'Micro animation và icon động là gì?',
+      answer:
+        'Micro animation là những chuyển động ngắn, chỉ phục vụ một mục đích, phản hồi lại thao tác của người dùng: icon menu biến thành nút đóng, trái tim được tô đầy khi bạn thích một bài viết, chiếc chuông rung lên khi có thông báo mới. Icon động là dạng micro animation phổ biến nhất. Chúng giúp giao diện có cảm giác phản hồi nhanh và thể hiện thay đổi trạng thái mà không cần thêm chữ.',
+    },
+    {
+      question: 'Tệp Lottie và tệp SVG khác nhau thế nào?',
+      answer:
+        'Tệp Lottie JSON chứa toàn bộ animation và phát được trong mọi Lottie player, kể cả player tích hợp trong react-useanimations. Các tệp SVG là ảnh tĩnh của icon khi đứng yên, mỗi trạng thái một tệp (ví dụ eye và eye-off), dùng cho những nơi không nên có chuyển động: email, tài liệu, công cụ thiết kế hoặc phương án dự phòng khi không có JavaScript.',
+    },
+    {
+      question: 'Có dùng được với Next.js và server rendering không?',
+      answer:
+        "Có. Component được đánh dấu 'use client' và chỉ vẽ animation trên trình duyệt, nên render được từ server component và các framework SSR như Next.js, Remix và Astro mà không cần dynamic import. Module icon là dữ liệu thuần, server component có thể import và truyền chúng xuống dưới dạng prop.",
+      link: { href: f.links.serverRendering, label: 'Next.js và server rendering' },
+    },
+    {
+      question: 'Có dùng icon trong dự án thương mại được không?',
+      answer:
+        'Được. Bộ icon và package react-useanimations dùng giấy phép MIT: bạn được dùng, chỉnh sửa và phân phối lại trong cả dự án cá nhân lẫn thương mại. Ghi nguồn là điều chúng tôi trân trọng nhưng không bắt buộc.',
+      link: { href: f.links.licence, label: 'Giấy phép & Điều khoản' },
+    },
+    {
+      question: 'Có dùng icon mà không cần React được không?',
+      answer:
+        'Được. Mỗi icon là một tệp Lottie JSON chuẩn, nên phát được bằng lottie-web trong JavaScript thuần, Vue, Svelte, Angular hay CMS, và trong các Lottie player cho iOS, Android và Flutter. Trang Icon Lottie có URL của các tệp và đoạn code lottie-web dùng ngay cho từng tương tác.',
+      link: { href: f.links.lottie, label: 'Icon Lottie' },
+    },
+    {
+      question: 'Icon làm bundle của tôi nặng thêm bao nhiêu?',
+      answer: `Player trong react-useanimations ${f.version} nặng khoảng 8 kB sau khi gzip và không có dependency; mỗi icon là một module riêng từ 1 đến 15 kB (trung vị 2 kB), nên bundle chỉ chứa những icon bạn import.`,
+    },
+  ],
+
+  cta: {
+    title: { start: '', accent: 'Thổi hồn', end: ' vào giao diện của bạn.' },
+    text: 'Miễn phí, giấy phép MIT, cho cả dự án cá nhân và thương mại.',
+    start: 'Bắt đầu',
+  },
+
+  schema: {
+    software: (count: number) =>
+      `React component cùng ${count} icon động (Lottie) có sẵn tương tác hover, click và loop. Không có dependency.`,
+    catalogName: 'Catalog icon useAnimations',
+    catalog: (count: number) =>
+      `Toàn bộ ${count} icon của useAnimations với id, tiêu đề, danh mục, từ khóa, tương tác, URL của Lottie JSON, SVG và ZIP, dòng import React và lệnh shadcn.`,
+  },
+};
diff --git a/website/src/i18n/messages/vi/hubs.ts b/website/src/i18n/messages/vi/hubs.ts
new file mode 100644
index 0000000..4524d9d
--- /dev/null
+++ b/website/src/i18n/messages/vi/hubs.ts
@@ -0,0 +1,160 @@
+// Trang danh mục và trang tương tác (/categories/<slug>, /interactions/<slug>): câu được ghép từ dữ kiện.
+import type { Messages } from '../en';
+import type { CategoryFacts, Faq, InteractionFacts } from '../en/hubs';
+import { listIn, pluralIn } from '../../format';
+
+const list = listIn('vi');
+const icons = (n: number) => pluralIn('vi')(n, { other: 'icon' });
+const lower = (text: string) => text[0].toLowerCase() + text.slice(1);
+
+/** Tối đa `max` tên, sau đó là “và N icon khác”. */
+const titles = (items: string[], max = 12) =>
+  items.length > max
+    ? `${items.slice(0, max).join(', ')} và ${items.length - max} icon khác`
+    : list(items);
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+
+/** Câu về SVG tĩnh: cả bộ có SVG, chỉ một phần có, hoặc không có. */
+const allSvg = (f: CategoryFacts) => f.withSvg === f.count;
+
+export const hubs: Messages['hubs'] = {
+  titleSuffix: ' — useAnimations',
+  iconCount: icons,
+
+  category: {
+    titles: (f: CategoryFacts) => [
+      `${f.title} cho React & Lottie`,
+      `${f.title} cho React`,
+      `${f.title} miễn phí`,
+      f.title,
+    ],
+    descriptions: (f: CategoryFacts) => {
+      const name = lower(f.title);
+      const examples = list(f.titles.slice(0, 3));
+      return [
+        `${f.count} ${name} miễn phí, gồm ${examples}. Micro animation hover, click và loop cho React, shadcn/ui và Lottie JSON, giấy phép MIT.`,
+        `${f.count} ${name} miễn phí, gồm ${examples}. Dùng cho React, shadcn/ui và Lottie JSON, giấy phép MIT.`,
+        `${f.count} ${name} miễn phí, gồm ${examples}. Cho React, shadcn/ui và Lottie, MIT.`,
+        `${f.count} ${name} miễn phí cho React, shadcn/ui và Lottie JSON, giấy phép MIT.`,
+      ];
+    },
+    summary: (f: CategoryFacts) => {
+      const plays =
+        f.groups.length === 1
+          ? `Cả ${icons(f.count)} đều ${f.groups[0].plays}.`
+          : `Trong ${icons(f.count)}, ${list(f.groups.map(({ count, plays: phrase }) => `${icons(count)} ${phrase}`))}.`;
+      const svg = allSvg(f)
+        ? ''
+        : f.withSvg
+          ? ` ${icons(f.withSvg)} trong số đó còn có thêm SVG tĩnh.`
+          : '';
+      return `${plays} Mỗi icon có sẵn dưới dạng React component, component shadcn/ui và animation Lottie JSON${allSvg(f) ? ', kèm SVG tĩnh' : ''}, dùng miễn phí cả cho mục đích thương mại theo giấy phép MIT.${svg}`;
+    },
+    faq: (f: CategoryFacts): Faq => {
+      const name = lower(f.title);
+      const ex = f.example;
+      const n = f.expressions.length;
+      return [
+        {
+          question: `Bộ ${name} gồm những icon nào?`,
+          answer: `${icons(f.count)}: ${titles(f.titles)}. Tất cả đều miễn phí cho dự án cá nhân và thương mại theo giấy phép MIT, không bắt buộc ghi nguồn.`,
+        },
+        {
+          question: `Dùng các ${name} này trong React như thế nào?`,
+          answer: `Cài react-useanimations, thêm ${ex.importLine} rồi render <UseAnimations animation={${ex.exportName}} size={32} />. Icon sẽ chạy tương tác “${ex.interactionLabel}” của nó và tự lấy theo màu chữ. Nếu dùng shadcn/ui, hãy chạy ${ex.shadcnCommand}.`,
+        },
+        {
+          question: `Có dùng được các ${name} này mà không cần React không?`,
+          answer: `Được. Mỗi icon là một tệp Lottie JSON tại ${f.site}/icons/<id>.json (ví dụ ${f.site}/icons/${ex.id}.json), phát được bằng lottie-web, lottie-ios, lottie-android hoặc package lottie của Flutter${f.withSvg ? '; SVG tĩnh có trên trang riêng của từng icon (bằng tiếng Anh)' : ''}. ${
+            n
+              ? `${titles(f.expressions, 6)} dùng expression của After Effects, nên trên web cần bản đầy đủ của lottie-web.`
+              : 'Không icon nào dùng expression, nên bản rút gọn (light) của lottie-web là đủ.'
+          }`,
+        },
+      ];
+    },
+    badge: (n: number) => `${icons(n)} · Giấy phép MIT`,
+    allIcons: (name: string) => `Tất cả icon ${name.toLowerCase()}`,
+    whereToUse: 'Dùng ở đâu',
+    byInteraction: 'Theo tương tác',
+    addOne: 'Thêm vào ứng dụng của bạn',
+    addOneHtml: (label: string, name: string) =>
+      `Với React, hãy cài ${code('react-useanimations')} rồi import icon; icon sẽ tự chạy tương tác “${label}” của nó. Mọi icon trong danh mục này đều dùng giống hệt: chỉ cần thay ${code(name)} bằng tên ghi trên trang của icon đó.`,
+    shadcnHtml: (href: string) => `Với ${link(href, 'shadcn/ui')}, CLI sẽ thêm sẵn một component:`,
+    noReactHtml: (href: string) =>
+      `Không dùng React? Mỗi icon là một tệp Lottie JSON tại ${code('/icons/&lt;id&gt;.json')}; xem ${link(href, 'Icon Lottie')} để biết các player cho web, iOS, Android và Flutter.`,
+    more: 'Danh mục khác',
+    allIconsButton: 'Tất cả icon',
+  },
+
+  interaction: {
+    titles: (f: InteractionFacts) => [
+      `${f.title} cho React & Lottie`,
+      `${f.title} cho React`,
+      f.title,
+    ],
+    descriptions: (f: InteractionFacts) => [
+      `${f.count} icon động miễn phí ${f.plays}, như ${list(f.titles.slice(0, 3))}. Dùng cho React, shadcn/ui và Lottie JSON, giấy phép MIT.`,
+      `${f.count} icon động miễn phí ${f.plays}. Dùng cho React, shadcn/ui và Lottie JSON, giấy phép MIT.`,
+    ],
+    faq: (f: InteractionFacts): Faq => [
+      {
+        question: `Những icon nào dùng tương tác “${f.label}”?`,
+        answer: `${icons(f.count)}: ${titles(f.titles, 15)}. ${f.example}`,
+      },
+      {
+        question: 'Điều gì xảy ra khi người dùng bật giảm chuyển động?',
+        answer: `${f.reducedMotion} React component tự đọc prefers-reduced-motion và cập nhật ngay khi thiết lập này thay đổi, nên bạn không cần viết thêm code nào.`,
+      },
+      {
+        question: 'Làm sao đổi tương tác của một icon?',
+        answer: `Mỗi icon chạy tương tác mà nó được thiết kế cho. Truyền interaction="${f.interaction}" để icon khác cũng có hành vi này, hoặc một giá trị khác ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') để đổi sang tương tác tương ứng. Các prop autoplay, loop và speed điều chỉnh cách phát.${
+          f.interaction === 'click-toggle'
+            ? ' Nếu muốn tự quản lý trạng thái, hãy truyền active={isOn} và cập nhật nó trong onClick: khi đó cú click sẽ không tự bật/tắt icon nữa.'
+            : ''
+        }`,
+      },
+    ],
+    allIcons: (label: string) => `Tất cả icon tương tác “${label}”`,
+    behaviour: 'Cách hoạt động',
+    hoverNote:
+      ' Chạm trên màn hình cảm ứng không kích hoạt hiệu ứng hover, còn focus bằng bàn phím thì có, nếu icon nằm trong một phần tử có thể focus.',
+    handled: 'React component lo hết những việc này; bạn chỉ cần chọn icon.',
+    whereToUse: 'Dùng ở đâu',
+    byCategory: 'Theo danh mục',
+    useInReact: 'Dùng trong React',
+    overrideHtml: `Các icon liệt kê ở đây mặc định chạy tương tác này. Icon khác cũng dùng được: chỉ cần truyền prop ${code('interaction')}.`,
+    normallyUses: (title: string, interaction: string) => `${title} mặc định dùng '${interaction}'`,
+    extra: {
+      loop: 'Icon lặp tự phát và tạm dừng khi bị cuộn ra khỏi màn hình. Làm chậm lại bằng speed, chỉ phát một lần với loop={false}, hoặc giữ đứng yên với autoplay={false}:',
+      'click-toggle':
+        'Cú click tự bật/tắt icon. Để icon luôn khớp với state của bạn, hãy truyền active: icon sẽ chuyển động mỗi khi active thay đổi, và cú click không còn tự bật/tắt nó nữa.',
+      'click-replay':
+        'Đặt icon trong một button thật bằng render prop để nó có thể nhận focus và được trình đọc màn hình đọc lên. onClick của bạn chạy trước; gọi event.preventDefault() để bỏ qua hiệu ứng.',
+      hover:
+        'Đặt icon trong một link hoặc button bằng render prop: khi đó hiệu ứng cũng phát khi phần tử nhận focus bằng bàn phím, và chạm trên màn hình cảm ứng sẽ không kích hoạt nó.',
+      'hover-replay':
+        'Cho cả thẻ hoặc cả link nhận hover, không chỉ riêng icon: với render prop, các sự kiện được gắn vào phần tử của bạn, và focus bằng bàn phím cũng phát hiệu ứng.',
+      'hover-loop':
+        'Dùng render prop để cả link kích hoạt vòng lặp, kể cả khi focus bằng bàn phím. Đổi nhịp độ bằng speed:',
+    },
+    codeText: {
+      halfSpeed: 'nửa tốc độ',
+      playsOnce: 'phát một lần rồi dừng',
+      staticFrame: 'khung hình tĩnh đầu tiên',
+      endState: 'true hiển thị trạng thái cuối',
+      closeMenu: 'Đóng menu',
+      openMenu: 'Mở menu',
+      download: 'Tải xuống',
+      archive: 'Lưu trữ',
+      weeklyGrowth: 'Tăng trưởng tuần',
+    },
+    docsHtml: (docs: string, lottie: string) =>
+      `Tất cả prop đều có trong ${link(docs, 'tài liệu')}. Ngoài React, các icon là tệp Lottie JSON; trang ${link(lottie, 'Icon Lottie')} hướng dẫn cách tái tạo các tương tác bằng lottie-web.`,
+    other: 'Các tương tác khác',
+    browseByCategory: 'Xem theo danh mục',
+  },
+};
diff --git a/website/src/i18n/messages/vi/index.ts b/website/src/i18n/messages/vi/index.ts
new file mode 100644
index 0000000..c53de97
--- /dev/null
+++ b/website/src/i18n/messages/vi/index.ts
@@ -0,0 +1,12 @@
+// Tiếng Việt: cùng cấu trúc với messages/en (kiểu Messages).
+import type { Messages } from '../en';
+import { common } from './common';
+import { docs } from './docs';
+import { home } from './home';
+import { hubs } from './hubs';
+import { islands } from './islands';
+import { licence } from './licence';
+import { pages } from './pages';
+import { taxonomy } from './taxonomy';
+
+export const messages: Messages = { common, taxonomy, hubs, home, docs, licence, pages, islands };
diff --git a/website/src/i18n/messages/vi/islands.ts b/website/src/i18n/messages/vi/islands.ts
new file mode 100644
index 0000000..2a3e170
--- /dev/null
+++ b/website/src/i18n/messages/vi/islands.ts
@@ -0,0 +1,52 @@
+// Văn bản trong các React island (components/*.tsx); placeholder '{name}' do component điền vào.
+import type { Messages } from '../en';
+
+export const islands: Messages['islands'] = {
+  iconCard: {
+    hints: {
+      loop: 'Lặp',
+      'click-toggle': 'Click',
+      'click-replay': 'Click',
+      hover: 'Hover',
+      'hover-loop': 'Hover',
+      'hover-replay': 'Hover',
+    },
+  },
+  iconDialog: {
+    hints: {
+      loop: 'Tự phát liên tục',
+      'click-toggle': 'Click để bật/tắt',
+      'click-replay': 'Click để phát lại',
+      hover: 'Hover để phát, rời chuột để chạy ngược',
+      'hover-loop': 'Hover để lặp',
+      'hover-replay': 'Hover để phát',
+    },
+    preview: 'Xem trước {title}',
+    colors: 'Màu xem trước',
+    color: 'Màu {color}',
+    textColor: 'Màu chữ',
+    interaction: 'Tương tác',
+    duration: 'Thời lượng',
+    seconds: '{seconds} giây',
+    import: 'Import',
+    close: 'Đóng',
+    code: 'Mã nguồn',
+    tabs: { react: 'React', shadcn: 'shadcn', files: 'Tệp' },
+    copy: 'Sao chép',
+    download: 'Tải xuống',
+    iconPage: 'Trang icon →',
+  },
+  interactionDemo: {
+    click: 'Click vào thẻ',
+    loop: 'Tự phát liên tục',
+    hover: 'Hover lên thẻ',
+  },
+  mobileMenu: {
+    menu: 'Menu',
+    nav: 'Điều hướng chính',
+  },
+  themeToggle: {
+    toLight: 'Chuyển sang giao diện sáng',
+    toDark: 'Chuyển sang giao diện tối',
+  },
+};
diff --git a/website/src/i18n/messages/vi/licence.ts b/website/src/i18n/messages/vi/licence.ts
new file mode 100644
index 0000000..2147b13
--- /dev/null
+++ b/website/src/i18n/messages/vi/licence.ts
@@ -0,0 +1,28 @@
+// Trang giấy phép (/licencing-and-terms). Văn bản LICENSE luôn hiển thị bằng tiếng Anh.
+import type { Messages } from '../en';
+
+export const licence: Messages['licence'] = {
+  title: 'Giấy phép & Điều khoản — useAnimations',
+  description:
+    'Icon của useAnimations và package react-useanimations dùng giấy phép MIT: miễn phí cho mục đích cá nhân, thương mại và phân phối lại, không cần ghi nguồn.',
+  name: 'Giấy phép & Điều khoản',
+  heading: 'Dùng miễn phí. Giấy phép MIT.',
+  introHtml: (mitHref: string) =>
+    `Bộ icon useAnimations và package <code>react-useanimations</code> được phát hành theo <a href="${mitHref}">giấy phép MIT</a>.`,
+  canDo: 'Bạn được phép',
+  canDoItemsHtml: [
+    '<strong>Sử dụng</strong> icon trong website, ứng dụng và sản phẩm cá nhân lẫn thương mại.',
+    '<strong>Chỉnh sửa</strong> icon: đổi màu, kích thước, thời gian hay chính chuyển động.',
+    '<strong>Phân phối lại</strong> icon, kể cả trong các bộ icon, template, theme, UI kit và component registry.',
+  ],
+  attribution: 'Ghi nguồn',
+  attributionText:
+    'Không bắt buộc, nhưng chúng tôi rất trân trọng. Hãy giữ lại thông báo giấy phép khi bạn phân phối lại chính các tệp icon. Nếu muốn ghi nguồn, bạn có thể dùng dòng sau:',
+  credit: (link: string) => `Icon động của ${link}`,
+  noWarranty: 'Không bảo hành',
+  noWarrantyText:
+    'Icon và mã nguồn được cung cấp nguyên trạng, không kèm bất kỳ hình thức bảo hành nào.',
+  licenseText: 'Văn bản giấy phép',
+  bindingNote:
+    'Văn bản giấy phép dưới đây là bản gốc tiếng Anh, và chỉ bản này có giá trị pháp lý.',
+};
diff --git a/website/src/i18n/messages/vi/pages.ts b/website/src/i18n/messages/vi/pages.ts
new file mode 100644
index 0000000..1e697fc
--- /dev/null
+++ b/website/src/i18n/messages/vi/pages.ts
@@ -0,0 +1,233 @@
+// Các trang tổng hợp: /icons, /categories, /interactions, /lottie-icons và /shadcn-animated-icons.
+import type { Messages } from '../en';
+import type { Faq } from '../en/hubs';
+import { listIn } from '../../format';
+
+const list = listIn('vi');
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+const strong = (text: string) => `<strong class="font-medium text-fg">${text}</strong>`;
+
+export const pages: Messages['pages'] = {
+  icons: {
+    titles: (count: number) => [
+      `Tất cả ${count} icon động theo danh mục`,
+      `Tất cả ${count} icon động`,
+    ],
+    descriptions: (count: number, categories: number) => [
+      `Mọi icon của useAnimations trên một trang: ${count} icon động miễn phí trong ${categories} danh mục, cho React, shadcn/ui, Lottie JSON và SVG. Giấy phép MIT.`,
+    ],
+    title: 'Tất cả icon động',
+    badge: (count: number) => `${count} icon · Giấy phép MIT`,
+    introHtml: (browser: string) =>
+      `Toàn bộ bộ icon, nhóm theo danh mục. Mở một icon để xem trước trực tiếp, lấy code React và shadcn/ui, và tải về Lottie JSON, SVG hoặc ZIP. Để tìm theo từ khóa và thử hiệu ứng ngay tại chỗ, hãy dùng ${link(browser, 'trình duyệt icon')}.`,
+    categoriesNav: 'Danh mục',
+    byInteraction: 'Theo tương tác:',
+    categoryLink: (count: number, name: string) => `${count} icon ${name.toLowerCase()} →`,
+  },
+
+  categories: {
+    titles: (categories: number) => [
+      `Danh mục icon động: ${categories} bộ sưu tập`,
+      'Danh mục icon động',
+    ],
+    descriptions: (icons: number, categories: number) => [
+      `Xem ${icons} icon động miễn phí trong ${categories} danh mục: điều hướng, thao tác, media, loading, mạng xã hội và nhiều hơn nữa. Cho React, shadcn/ui và Lottie.`,
+    ],
+    title: 'Danh mục icon động',
+    badge: (icons: number, categories: number) => `${icons} icon · ${categories} danh mục`,
+    introHtml: (interactions: string) =>
+      `Mỗi icon của useAnimations thuộc về một danh mục, từ mũi tên điều hướng, nút điều khiển media đến loader và logo mạng xã hội. Mở một danh mục để xem tất cả icon trong đó, nên dùng chúng ở đâu và code để thêm vào ứng dụng, hoặc xem theo ${link(interactions, 'tương tác')}.`,
+    iconCount: (n: number) => `${n} icon`,
+  },
+
+  interactions: {
+    titles: ['Micro-interaction: icon hover, click và loop', 'Micro-interaction cho icon động'],
+    descriptions: (icons: number, interactions: number) => [
+      `${icons} icon động với ${interactions} kiểu micro-interaction: lặp, click bật/tắt, click phát lại, hover, hover phát lại và hover lặp. Hỗ trợ giảm chuyển động.`,
+    ],
+    title: 'Tương tác của icon động',
+    badge: (interactions: number, icons: number) => `${interactions} tương tác · ${icons} icon`,
+    introHtml: `Mỗi icon đi kèm micro-interaction mà nó được thiết kế cho: lặp liên tục, bật/tắt hoặc phát lại khi click, hay phát khi hover. React component lo phần kết nối và tôn trọng thiết lập giảm chuyển động, còn prop <code class="font-mono text-base text-fg">interaction</code> cho phép chuyển bất kỳ icon nào sang tương tác khác.`,
+    iconCount: (n: number) => `${n} icon`,
+    chooseTitle: 'Chọn tương tác phù hợp',
+    chooseHtml: {
+      loop: (href: string) =>
+        `${strong('Trạng thái kéo dài')}, như đang tải hoặc một cảnh báo đang hoạt động: ${link(href, 'lặp')}.`,
+      'click-toggle': (href: string) =>
+        `${strong('Nút bật/tắt')}, như tắt tiếng, menu hoặc hiện mật khẩu: ${link(href, 'click bật/tắt')}, kèm ${code('active')} nếu cần kiểm soát state.`,
+      'click-replay': (href: string) =>
+        `${strong('Thao tác một lần')}, như gửi, lưu hoặc làm mới: ${link(href, 'click phát lại')}.`,
+      hover: (href: string) =>
+        `${strong('Gợi ý trước nội dung một liên kết sẽ mở')}: ${link(href, 'hover')}, chạy ngược lại khi con trỏ rời đi.`,
+      'hover-replay': (href: string) =>
+        `${strong('Thanh công cụ và danh sách mà người dùng hay lướt chuột qua')}: ${link(href, 'hover phát lại')}, tự chạy hết hiệu ứng.`,
+      'hover-loop': (href: string) =>
+        `${strong('Liên kết mời người dùng nán lại lâu hơn')}, như icon mạng xã hội: ${link(href, 'hover lặp')}.`,
+    },
+    motionTitle: 'Giảm chuyển động',
+    motionHtml: `React component tuân theo ${code('prefers-reduced-motion')} và cập nhật ngay khi thiết lập này thay đổi. Chạm trên màn hình cảm ứng không bao giờ kích hoạt hiệu ứng hover.`,
+    reducedMotion: {
+      loop: 'icon không tự phát và đứng yên ở khung hình tĩnh đầu tiên.',
+      'click-toggle': 'cú click chuyển ngay sang trạng thái còn lại, bỏ qua hiệu ứng ở giữa.',
+      'click-replay': 'cú click vẫn đến được handler của bạn nhưng hiệu ứng không phát.',
+      hover: 'hover không phát hiệu ứng.',
+      'hover-replay': 'hover không phát hiệu ứng.',
+      'hover-loop': 'icon đứng yên khi được hover.',
+    },
+  },
+
+  lottie: {
+    titles: (count: number) => [
+      `Icon Lottie miễn phí: ${count} icon động JSON`,
+      'Icon Lottie miễn phí',
+    ],
+    descriptions: (count: number) => [
+      `${count} icon Lottie miễn phí dạng Lottie JSON thuần, giấy phép MIT. Code copy-paste cho lottie-web, dotLottie, React, React Native, iOS, Android và Flutter.`,
+    ],
+    title: 'Icon Lottie miễn phí',
+    crumb: 'Icon Lottie',
+    datasetName: 'Catalog icon useAnimations',
+    datasetDescription: (count: number) =>
+      `Metadata và URL tệp của ${count} icon Lottie động: id, tiêu đề, danh mục, từ khóa, tương tác, kích thước và thời lượng.`,
+    badge: (count: number) => `${count} icon · Lottie JSON · Giấy phép MIT`,
+    intro:
+      'Mỗi icon của useAnimations là một animation Lottie JSON chuẩn, nên mọi Lottie player đều phát được: lottie-web trên web, lottie-ios, lottie-android, Flutter và React Native. Các tệp miễn phí theo giấy phép MIT, không cần đăng ký, được phục vụ từ URL cố định có bật CORS, nên bạn có thể dùng thẳng từ URL hoặc tải về đưa vào dự án.',
+    popular: 'Icon Lottie phổ biến',
+    allIcons: (count: number) => `Tất cả ${count} icon →`,
+    filesTitle: 'Tệp và URL',
+    filesIntroHtml: `Mỗi icon có một trang tại ${code('/icons/&lt;id&gt;')} với bản xem trước và các tệp tải về. Bản thân các tệp:`,
+    files: {
+      json: 'animation Lottie JSON',
+      zip: 'tệp JSON và các SVG tĩnh',
+      svg: 'SVG tĩnh của từng trạng thái',
+      catalog: 'catalog của mọi icon',
+    },
+    catalogHtml: (catalog: string, median: number) =>
+      `${link(catalog, 'icons.json')} liệt kê mọi icon kèm id, tiêu đề, danh mục, từ khóa, tương tác, kích thước, thời lượng và URL tệp, nhờ vậy dễ dàng chọn icon theo từ khóa trong một script hoặc để coding agent tự chọn. Tệp Lottie có kích thước trung vị ${median} kB.`,
+    players: {
+      web: {
+        title: 'Web: lottie-web',
+        text: 'Player tham chiếu của Airbnb. Tải nó từ CDN, trỏ tới URL của icon và chọn renderer SVG: icon giữ được độ sắc nét và có thể đổi màu bằng CSS. Hãy dùng bản đầy đủ (lottie.min.js), vì bản light bỏ qua expression.',
+        cssLabel: 'Theo màu chữ (renderer SVG)',
+      },
+      'web-interactions': {
+        title: 'Web: tương tác hover và click',
+        text: 'lottie-web chỉ phát và dừng, còn tương tác thì bạn phải tự viết. Dưới đây là tương tác click bật/tắt của icon menu, có hỗ trợ giảm chuyển động; mọi tương tác khác đều theo cùng một khuôn mẫu, và React component bên dưới làm sẵn tất cả cho bạn.',
+      },
+      dotlottie: {
+        title: 'Web: web component dotLottie',
+        text: 'Player của LottieFiles render lên canvas bằng engine WebAssembly, phát được cả Lottie JSON thuần lẫn tệp .lottie. Canvas giữ nguyên màu trong tệp, nên icon sẽ có màu đen trừ khi bạn sửa màu trong JSON.',
+        jsLabel: 'Hoặc dùng JavaScript API: npm install @lottiefiles/dotlottie-web',
+      },
+      react: {
+        title: 'React: react-useanimations',
+        text: 'Không cần cài Lottie player: package có player riêng chỉ 8 kB, chạy tương tác của từng icon, tự theo màu chữ và tôn trọng thiết lập giảm chuyển động. Mỗi icon là một module riêng, nên bạn chỉ đưa vào bundle những icon đã import.',
+      },
+      'react-native': {
+        title: 'React Native: lottie-react-native',
+        text: 'Đóng gói JSON bằng require() để dùng offline, hoặc tải từ URL của nó.',
+      },
+      ios: {
+        title: 'iOS: lottie-ios (SwiftUI)',
+        text: 'Thêm package từ https://github.com/airbnb/lottie-spm.git bằng Swift Package Manager, rồi đưa tệp JSON vào bundle hoặc tải từ URL của nó.',
+      },
+      android: {
+        title: 'Android: lottie-android (Jetpack Compose)',
+        text: 'Thêm com.airbnb.android:lottie-compose (hoặc com.airbnb.android:lottie nếu dùng View). Đặt tệp JSON trong res/raw để dùng offline với LottieCompositionSpec.RawRes.',
+      },
+      flutter: {
+        title: 'Flutter: lottie',
+        text: 'Package lottie là một player viết hoàn toàn bằng Dart, chạy trên Android, iOS, web và desktop.',
+      },
+    },
+    expressionsTitle: 'Icon có expression',
+    expressionsHtml: (count: number) =>
+      `${count} icon dùng expression của After Effects (${code('loopOut')} hoặc ${code('wiggle')}). Trên web, hãy phát chúng bằng bản đầy đủ của lottie-web, không phải ${code('lottie_light')}. Các player native không xử lý expression, nên hãy kiểm tra những icon này trên iOS, Android và Flutter hoặc chọn icon khác; react-useanimations phát chúng đúng như thiết kế.`,
+    faq: (f: {
+      count: number;
+      minSize: number;
+      maxSize: number;
+      medianSize: number;
+      expressions: string[];
+    }): Faq => [
+      {
+        question: 'Các icon Lottie này có miễn phí cho mục đích thương mại không?',
+        answer: `Có. Cả ${f.count} icon Lottie đều dùng giấy phép MIT: bạn được dùng, chỉnh sửa và phân phối lại trong dự án cá nhân lẫn thương mại, không bắt buộc ghi nguồn và không cần tài khoản để tải về.`,
+      },
+      {
+        question: 'Tệp Lottie có định dạng gì?',
+        answer: `Lottie JSON chuẩn (định dạng Bodymovin), chỉ gồm shape layer: không có ảnh, font hay tài nguyên bên ngoài. Mỗi icon được vẽ trên artboard 24 hoặc 32 px, co giãn tới mọi kích thước và nặng từ ${f.minSize} kB đến ${f.maxSize} kB, trung vị ${f.medianSize} kB.`,
+      },
+      {
+        question: 'Có cần lottie-web để dùng icon trong React không?',
+        answer:
+          'Không. react-useanimations có player riêng chỉ 8 kB và không có dependency, nên bạn chỉ cần cài một package và import những icon cần dùng. lottie-web chỉ cần khi dùng ngoài React, trên trang web thuần hoặc trong framework khác.',
+      },
+      {
+        question: 'Những icon nào cần bản đầy đủ của lottie-web?',
+        answer: `${f.expressions.length} icon dùng expression của After Effects (loopOut hoặc wiggle): ${list(f.expressions)}. Trên web, chúng cần bản đầy đủ của lottie-web; lottie_light bỏ qua expression. Các player native (lottie-ios, lottie-android, package lottie của Flutter) cũng không xử lý expression, nên ở đó các icon này có thể chuyển động khác đi.`,
+      },
+      {
+        question: 'Có đổi màu icon Lottie được không?',
+        answer:
+          'Trên web, renderer SVG của lottie-web ghi màu dưới dạng thuộc tính, nên một rule CSS nhắm vào các path là đổi được màu icon. Các player native dùng API dynamic property riêng: ColorValueProvider trên iOS, LottieProperty.COLOR và STROKE_COLOR trên Android, và ValueDelegate.color trong Flutter.',
+      },
+    ],
+    byCategory: 'Icon Lottie theo danh mục',
+  },
+
+  shadcn: {
+    titles: (count: number) => [
+      `Icon động cho shadcn/ui: ${count} component`,
+      'Icon động cho shadcn/ui',
+    ],
+    descriptions: (count: number) => [
+      `${count} icon động cho shadcn/ui: thêm bất kỳ icon nào bằng một lệnh shadcn CLI. Micro-interaction hover, click và loop, giấy phép MIT, không cần lottie-web.`,
+    ],
+    title: 'Icon động cho shadcn/ui',
+    crumb: 'shadcn/ui',
+    popularList: 'Icon động phổ biến cho shadcn/ui',
+    badge: (count: number) => `${count} component · shadcn registry · Giấy phép MIT`,
+    intro:
+      'Mọi icon của useAnimations đều có trong một shadcn registry. Một lệnh CLI sẽ thêm vào dự án của bạn một React component có kiểu TypeScript, với tương tác hover, click hoặc loop mà icon được thiết kế cho, hỗ trợ giảm chuyển động và màu sắc theo theme của bạn. Code nằm ngay trong repository của bạn, giống mọi component shadcn/ui khác.',
+    addTitle: 'Thêm một icon',
+    addIntro: 'Chạy shadcn CLI với URL registry của icon:',
+    namingHtml: `Component được đặt tên theo dạng ${code('Animated')} + id của icon ở dạng PascalCase (${code('check-box')} → ${code('AnimatedCheckBox')}) và nằm trong ${code('components/animations/&lt;id&gt;.tsx')}. CLI cũng thêm wrapper dùng chung ${code('components/use-animation.tsx')} và cài ${code('react-useanimations')}, vốn có player riêng: không cần lottie-web.`,
+    namespaceTitle: 'Tên ngắn với namespace của registry',
+    namespaceHtml: `Thêm registry vào ${code('components.json')} một lần, sau đó thêm icon theo tên, nhiều icon cùng lúc:`,
+    registryHtml: (registry: string) =>
+      `Chỉ mục registry tại ${link(registry, '/r/registry.json')} liệt kê mọi mục kèm tiêu đề, danh mục và tương tác.`,
+    usageTitle: 'Dùng trong shadcn Button',
+    usageHtml: `Các component nhận đúng các prop như ${code('UseAnimations')}. Với icon bật/tắt như icon menu, hãy truyền ${code('active')} và giữ state trong button của bạn; icon sẽ chuyển động mỗi khi state thay đổi:`,
+    colorHtml: (docs: string) =>
+      `Icon tự theo màu chữ, nên ${code('text-primary')} hay ${code('text-muted-foreground')} là đổi được màu, và dark mode không cần thêm gì. Các prop và cách dùng khác có trong ${link(docs, 'tài liệu')}.`,
+    codeText: { closeMenu: 'Đóng menu', openMenu: 'Mở menu' },
+    popular: 'Icon phổ biến cho shadcn/ui',
+    allIcons: (count: number) => `Tất cả ${count} icon →`,
+    popularNote: 'Trang của mỗi icon đều có lệnh shadcn tương ứng.',
+    faq: (f: { count: number; version: string }): Faq => [
+      {
+        question: 'Icon động cho shadcn/ui có miễn phí không?',
+        answer: `Có. Cả ${f.count} icon và code component đều dùng giấy phép MIT, cho dự án cá nhân lẫn thương mại. Registry không yêu cầu tài khoản hay API key.`,
+      },
+      {
+        question: 'shadcn CLI thêm những gì vào dự án của tôi?',
+        answer: `Component icon trong components/animations/<id>.tsx, wrapper player dùng chung UseAnimation trong components/use-animation.tsx (chỉ một lần, dưới dạng dependency của registry) và react-useanimations@^${f.version} từ npm. Không cần lottie-web: package có player riêng chỉ 8 kB.`,
+      },
+      {
+        question: 'Các component có chạy được với server component của Next.js không?',
+        answer:
+          'Có. Các component được đánh dấu "use client" và chỉ vẽ animation trên trình duyệt, nên bạn có thể render chúng từ server component và page mà không cần dynamic import hay ssr: false.',
+      },
+      {
+        question: 'Có thay đổi được giao diện và chuyển động của icon không?',
+        answer:
+          'Code là của bạn, nằm trong repository của bạn. Các component nhận prop của UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop và speed. Icon tự theo màu chữ, nên các class Tailwind như text-primary hay text-muted-foreground là đổi được màu.',
+      },
+    ],
+    byCategory: 'Xem theo danh mục',
+  },
+};
diff --git a/website/src/i18n/messages/vi/taxonomy.ts b/website/src/i18n/messages/vi/taxonomy.ts
new file mode 100644
index 0000000..6edb356
--- /dev/null
+++ b/website/src/i18n/messages/vi/taxonomy.ts
@@ -0,0 +1,387 @@
+// Danh mục và tương tác như người đọc thấy trên trang.
+import type { Messages } from '../en';
+
+export const taxonomy: Messages['taxonomy'] = {
+  categories: {
+    Alerts: {
+      name: 'Cảnh báo',
+      title: 'Icon cảnh báo động',
+      intro:
+        'Tam giác cảnh báo, vòng tròn báo lỗi và biển dừng, nhấp nháy vừa đủ để gây chú ý mà không chói mắt. Hãy đặt chúng cạnh một trường form bị lỗi, ở đầu banner báo lỗi hoặc trong cột trạng thái, những chỗ mà icon tĩnh rất dễ bị lướt qua.',
+      useCases: [
+        'Lỗi validate ngay dưới các trường form',
+        'Banner lỗi và cảnh báo ở đầu trang',
+        'Các dòng thất bại trong bảng trạng thái deploy hoặc job',
+        'Hộp thoại xác nhận hành động không thể hoàn tác',
+        'Trang trạng thái hệ thống khi đang có sự cố',
+      ],
+    },
+    Notifications: {
+      name: 'Thông báo',
+      title: 'Icon chuông thông báo động',
+      intro:
+        'Icon chuông rung lên khi có hoạt động mới, hoặc chuyển qua lại giữa chuông và chuông tắt tiếng. Một cú lắc nhẹ của chiếc chuông kéo ánh mắt về số tin chưa đọc, còn các phiên bản bật/tắt có thể dùng luôn làm nút tắt thông báo cho một kênh hay một luồng thảo luận.',
+      useCases: [
+        'Nút trung tâm thông báo trên header ứng dụng',
+        'Badge tin chưa đọc rung lên khi có tin nhắn mới',
+        'Nút bật/tắt thông báo cho một kênh hoặc luồng thảo luận',
+        'Cài đặt thông báo email và push',
+        'Nút đăng ký nhắc nhở và cảnh báo',
+      ],
+    },
+    Navigation: {
+      name: 'Điều hướng',
+      title: 'Icon điều hướng và mũi tên động',
+      intro:
+        'Menu hamburger biến thành nút đóng, cùng các mũi tên, chevron và mũi tên góc khẽ nhích theo hướng của chúng khi hover. Nhờ vậy người dùng thấy ngay một nút sẽ dẫn đi đâu: mở drawer, quay lại, mở rộng một dòng hay rời khỏi trang.',
+      useCases: [
+        'Menu hamburger biến thành nút đóng trên mobile',
+        'Nút trước và sau trong carousel và phân trang',
+        'Chevron của accordion và dropdown',
+        'Gợi ý cuộn lên đầu trang hoặc cuộn xuống',
+        'Liên kết đăng nhập và đăng xuất',
+        'Dấu hiệu liên kết ngoài và nút ẩn/hiện sidebar',
+      ],
+    },
+    Action: {
+      name: 'Thao tác',
+      title: 'Icon thao tác động',
+      intro:
+        'Những “động từ” của giao diện: lưu, xóa, tải xuống, làm mới, thích, đánh dấu, tìm kiếm và cài đặt. Mỗi icon xác nhận lại cú click hay hover mà nó gắn với, nên trái tim sẽ được tô đầy khi bạn thích một bài viết, còn nắp thùng rác nhấc lên trước khi bạn xóa.',
+      useCases: [
+        'Nút thích, yêu thích và đánh dấu trên các thẻ',
+        'Nút tải xuống, tải lên và lưu có phản hồi xác nhận',
+        'Nút ẩn/hiện mật khẩu trong form đăng nhập',
+        'Nút làm mới và đồng bộ trên dashboard',
+        'Nút xóa trong bảng và danh sách tệp',
+        'Ô tìm kiếm biến thành nút xóa nội dung',
+      ],
+    },
+    Content: {
+      name: 'Nội dung',
+      title: 'Icon tệp, thư mục và người dùng động',
+      intro:
+        'Tệp, thư mục, sách, thư, tệp đính kèm và người dùng. Chúng gắn nhãn cho những thứ người dùng làm việc cùng, còn các biến thể thêm, bớt và đánh dấu giúp việc quản lý danh sách và thành viên nhóm có phản hồi rõ ràng hơn.',
+      useCases: [
+        'Trình quản lý tệp và danh sách tài liệu',
+        'Nút đính kèm và sao chép vào clipboard',
+        'Hộp thư đến và mục lưu trữ trong ứng dụng email',
+        'Danh sách thành viên nhóm với thao tác thêm và xóa người dùng',
+        'Menu chia sẻ tài liệu và liên kết',
+      ],
+    },
+    Form: {
+      name: 'Biểu mẫu',
+      title: 'Icon điều khiển biểu mẫu động',
+      intro:
+        'Một checkbox, một radio button và một công tắc toggle chuyển động giữa trạng thái chọn và bỏ chọn. Hãy dùng chúng ở những chỗ mà input thông thường trông quá đơn điệu, như checklist onboarding hay màn hình cài đặt, mà trạng thái vẫn dễ đọc chỉ trong một cái nhìn.',
+      useCases: [
+        'Công tắc bật/tắt tính năng và tùy chọn trong cài đặt',
+        'Checklist onboarding và danh sách việc cần làm',
+        'Lựa chọn một đáp án trong khảo sát và bảng chọn gói',
+        'Checkbox đồng ý điều khoản',
+      ],
+    },
+    Media: {
+      name: 'Đa phương tiện',
+      title: 'Icon trình phát media động',
+      intro:
+        'Phát và tạm dừng, âm lượng, micro, camera, chuyển bài và phát ngẫu nhiên cho trình phát âm thanh và video. Các icon bật/tắt chuyển giữa hai trạng thái, từ phát sang tạm dừng hay từ micro sang tắt tiếng, nên nút bấm luôn cho thấy cú click tiếp theo sẽ làm gì.',
+      useCases: [
+        'Nút phát và tạm dừng trong trình phát âm thanh và video',
+        'Nút tắt/bật tiếng trong cuộc gọi video',
+        'Nút bật/tắt camera trong ứng dụng họp trực tuyến',
+        'Điều khiển playlist: chuyển bài, lặp lại và phát ngẫu nhiên',
+        'Nút cast và AirPlay',
+        'Điều khiển trong ứng dụng podcast và nghe nhạc',
+      ],
+    },
+    'Text editing': {
+      name: 'Soạn thảo văn bản',
+      title: 'Icon soạn thảo văn bản động',
+      intro:
+        'Icon in đậm, in nghiêng, gạch chân, căn lề và danh sách cho thanh công cụ soạn thảo rich text. Một hiệu ứng click ngắn xác nhận định dạng đã được áp dụng, rất có ích trong những trình soạn thảo mà thay đổi trên chính văn bản khó nhận ra.',
+      useCases: [
+        'Thanh công cụ của trình soạn thảo rich text',
+        'Khung soạn bình luận và tin nhắn',
+        'Trình soạn thảo CMS và bài blog',
+        'Ứng dụng Markdown và ghi chú',
+        'Điều khiển căn lề văn bản trong công cụ thiết kế',
+      ],
+    },
+    Communication: {
+      name: 'Liên lạc',
+      title: 'Icon liên lạc động',
+      intro:
+        'Điện thoại, bong bóng chat, nút gửi, hộp thư thoại và RSS. Các icon cuộc gọi có đủ trạng thái gọi đến, gọi đi, gọi nhỡ và chuyển tiếp mà một nhật ký cuộc gọi cần, còn icon gửi tạo một chuyển động “tiễn” tin nhắn nho nhỏ khi click.',
+      useCases: [
+        'Nút gửi trong form chat và bình luận',
+        'Nhật ký cuộc gọi với cuộc gọi đến, gọi đi và gọi nhỡ',
+        'Nút liên hệ và hỗ trợ',
+        'Nút mở widget chat',
+        'Trường nhắc tên (mention) và địa chỉ email',
+      ],
+    },
+    Devices: {
+      name: 'Thiết bị',
+      title: 'Icon thiết bị động',
+      intro:
+        'Điện thoại, máy tính bảng, màn hình, đồng hồ và máy in, cùng các chỉ báo kết nối đi kèm: wifi, Bluetooth và pin. Chúng hợp với bộ chọn thiết bị, nút chuyển chế độ xem trước responsive và trạng thái kết nối.',
+      useCases: [
+        'Nút chuyển chế độ xem trước responsive cho mobile, tablet và desktop',
+        'Trạng thái kết nối wifi và Bluetooth',
+        'Chỉ báo pin và sạc',
+        'Danh sách thiết bị trong phần cài đặt bảo mật tài khoản',
+        'Nút in trên hóa đơn và báo cáo',
+      ],
+    },
+    Weather: {
+      name: 'Thời tiết',
+      title: 'Icon thời tiết động',
+      intro:
+        'Mặt trời, mặt trăng, mây, mưa, tuyết, sấm sét và gió cho dự báo thời tiết và mọi thứ thay đổi theo thời điểm trong ngày. Cặp mặt trời và mặt trăng cũng là lựa chọn tự nhiên cho nút chuyển giao diện sáng/tối.',
+      useCases: [
+        'Widget thời tiết và thẻ dự báo',
+        'Nút chuyển giao diện sáng và tối',
+        'Giờ mặt trời mọc và lặn trong ứng dụng du lịch',
+        'Chỉ số nhiệt độ trên dashboard nhà thông minh',
+        'Chỉ báo trạng thái năng lượng và nguồn điện',
+      ],
+    },
+    'Maps & location': {
+      name: 'Bản đồ & vị trí',
+      title: 'Icon bản đồ và vị trí động',
+      intro:
+        'Ghim bản đồ, mũi tên chỉ đường, quả địa cầu, tâm ngắm và mỏ neo. Một chiếc ghim rơi xuống khi hover giúp trang tìm cửa hàng hay ô địa chỉ giao hàng nổi bật hơn, còn quả địa cầu dùng được làm nút chọn ngôn ngữ hoặc khu vực.',
+      useCases: [
+        'Trang tìm cửa hàng và ô nhập địa chỉ',
+        'Nút vị trí hiện tại và chỉ đường',
+        'Bộ chọn ngôn ngữ và khu vực',
+        'Giao hàng và theo dõi đơn hàng',
+        'Ứng dụng du lịch và đặt chỗ',
+      ],
+    },
+    Commerce: {
+      name: 'Thương mại',
+      title: 'Icon thương mại điện tử động',
+      intro:
+        'Giỏ hàng, túi mua sắm, thẻ giá, hộp quà, thẻ tín dụng và xe giao hàng cho cửa hàng online. Hiệu ứng thêm vào giỏ xác nhận cú click mà không cần đến toast, còn icon xe tải và kiện hàng khiến trạng thái đơn hàng sinh động hơn một chút.',
+      useCases: [
+        'Nút thêm vào giỏ trên thẻ sản phẩm',
+        'Nút giỏ hàng trên header của cửa hàng',
+        'Thanh toán và chọn phương thức thanh toán',
+        'Badge giảm giá, mã khuyến mãi và sale',
+        'Các bước giao hàng và theo dõi đơn',
+        'Thẻ quà tặng và tùy chọn gói quà',
+      ],
+    },
+    Charts: {
+      name: 'Biểu đồ',
+      title: 'Icon biểu đồ động',
+      intro:
+        'Biểu đồ cột, biểu đồ tròn và mũi tên xu hướng cho phân tích và báo cáo. Icon xu hướng tăng và giảm cho thấy ngay một chỉ số đã tăng hay giảm, rất hợp với thẻ KPI và nhật ký thay đổi các con số.',
+      useCases: [
+        'Thẻ KPI với chỉ số tăng hoặc giảm',
+        'Mục điều hướng tới trang phân tích và báo cáo',
+        'Trạng thái trống của dashboard',
+        'Tổng quan tài chính và danh mục đầu tư',
+      ],
+    },
+    Development: {
+      name: 'Lập trình',
+      title: 'Icon lập trình động',
+      intro:
+        'Dấu ngoặc code, terminal, nhánh Git, commit, merge và pull request, cùng server và database. Được làm cho công cụ lập trình, trang tài liệu và trang trạng thái, nơi các khái niệm về Git và hạ tầng là một phần của giao diện.',
+      useCases: [
+        'Trạng thái pull request, merge và nhánh trong công cụ lập trình',
+        'Nút chèn code snippet và embed trong tài liệu',
+        'Phần giới thiệu terminal và CLI trên landing page',
+        'Tình trạng server và database trên trang trạng thái',
+        'Gợi ý phím tắt có phím Command',
+      ],
+    },
+    'Design & layout': {
+      name: 'Thiết kế & bố cục',
+      title: 'Icon thiết kế và bố cục động',
+      intro:
+        'Icon lưới, cột, layer, cắt ảnh, công cụ bút và con trỏ cho trình chỉnh sửa và trình dựng trang. Chúng hợp với thanh công cụ nơi người dùng sắp xếp nội dung, chuyển giữa dạng lưới và dạng bảng, hoặc chọn một công cụ vẽ.',
+      useCases: [
+        'Nút chuyển dạng xem lưới, danh sách và bảng',
+        'Bảng layer trong công cụ thiết kế và làm slide',
+        'Công cụ cắt và crop trong trình sửa ảnh',
+        'Trình dựng trang và bộ chọn bố cục',
+        'Tay nắm kéo để di chuyển',
+      ],
+    },
+    'Shapes & math': {
+      name: 'Hình khối & toán học',
+      title: 'Icon hình khối và toán học động',
+      intro:
+        'Hình tròn, hình vuông, tam giác, lục giác, một hình bát giác và dấu chia. Dùng chúng làm công cụ vẽ hình trong ứng dụng vẽ, làm phép toán trong máy tính, hoặc làm ký hiệu trung tính trong sơ đồ và các bước onboarding.',
+      useCases: [
+        'Công cụ vẽ hình trong ứng dụng whiteboard và vẽ',
+        'Phép toán trong máy tính và trình soạn công thức',
+        'Ký hiệu đầu dòng và đánh dấu bước trong sơ đồ',
+        'Giao diện trắc nghiệm và trò chơi',
+      ],
+    },
+    Loading: {
+      name: 'Loading',
+      title: 'Icon loading động',
+      intro:
+        'Spinner và loader lặp liên tục trong suốt thời gian một tác vụ đang chạy. Đặt một icon trong nút submit khi request đang xử lý, thay chỗ cho nội dung chưa tải xong, hoặc trên màn hình splash toàn trang; chúng đứng yên khi người dùng bật chế độ giảm chuyển động.',
+      useCases: [
+        'Nút submit đang chờ request',
+        'Placeholder trong lúc danh sách hoặc biểu đồ đang tải',
+        'Chỉ báo infinite scroll và nút tải thêm',
+        'Màn hình splash toàn trang và chuyển route',
+        'Tiến trình tải lên và xử lý tệp',
+      ],
+    },
+    'Social media': {
+      name: 'Mạng xã hội',
+      title: 'Icon mạng xã hội động',
+      intro:
+        'Icon thương hiệu của các mạng xã hội và những công cụ mà lập trình viên, designer dùng để chia sẻ sản phẩm: X, Instagram, YouTube, Discord, Telegram, Figma và nhiều hơn nữa. Chúng chuyển động khi hover, giúp các liên kết ở footer và trang hồ sơ trông rõ là có thể click.',
+      useCases: [
+        'Liên kết mạng xã hội ở footer website',
+        'Nút chia sẻ trên bài blog',
+        'Liên kết hồ sơ tác giả và thành viên nhóm',
+        'Nút mời tham gia server chat cộng đồng',
+        'Đăng nhập bằng tài khoản mạng xã hội hoặc tài khoản lập trình viên',
+      ],
+    },
+    Other: {
+      name: 'Khác',
+      title: 'Icon động khác',
+      intro:
+        'Những icon không thuộc nhóm lớn nào: khuôn mặt emoji để lấy phản hồi, tách cà phê, đồng hồ, đường nhịp tim và gợi ý cuộn xuống. Icon cuộn xuống là gợi ý quen thuộc ở phần hero rằng bên dưới vẫn còn nội dung.',
+      useCases: [
+        'Gợi ý cuộn xuống ở cuối phần hero',
+        'Khuôn mặt vui, bình thường và buồn trong widget phản hồi',
+        'Chỉ báo hoạt động và uptime',
+        'Giờ mở cửa và bộ chọn thời gian',
+        'Liên kết buy-me-a-coffee và ủng hộ',
+      ],
+    },
+  },
+  interactions: {
+    loop: {
+      label: 'Lặp',
+      title: 'Icon động lặp liên tục',
+      intro:
+        'Những icon này phát liên tục chừng nào còn hiển thị trên màn hình, nên hợp với các trạng thái kéo dài: đang tải, một cảnh báo đang hoạt động, terminal đang chờ. Khi người dùng bật giảm chuyển động, chúng dừng ở khung hình đầu tiên và vẫn đọc được như một icon bình thường.',
+      useCases: [
+        'Spinner loading và chỉ báo tiến trình',
+        'Trạng thái cảnh báo và lỗi đang diễn ra',
+        'Chỉ báo đang phát trực tiếp và đang ghi',
+        'Gợi ý cuộn xuống ở phần hero',
+        'Dấu hiệu gây chú ý cho thông báo mới',
+      ],
+      example:
+        'Icon lặp thường dùng cho spinner loading, cảnh báo đang hoạt động, chuông đang rung hoặc gợi ý cuộn xuống.',
+      description:
+        'Phát liên tục; đứng yên ở khung hình tĩnh đầu tiên khi người dùng bật giảm chuyển động.',
+      reducedMotion:
+        'Khi người dùng bật giảm chuyển động, icon không tự phát mà đứng yên ở khung hình tĩnh đầu tiên.',
+      plays: 'lặp liên tục',
+    },
+    'click-toggle': {
+      label: 'Click bật/tắt',
+      title: 'Icon động bật/tắt khi click',
+      intro:
+        'Mỗi cú click làm icon chuyển động sang trạng thái còn lại và dừng ở đó, nên chúng chính là phần hình ảnh của một nút bật/tắt. Icon luôn thể hiện trạng thái hiện tại; chỉ cần kết hợp với aria-pressed hoặc thuộc tính checked là nút bấm tự nói lên chức năng của nó.',
+      useCases: [
+        'Nút tắt/bật tiếng',
+        'Ô mật khẩu có nút ẩn/hiện',
+        'Nút menu hamburger và nút đóng',
+        'Nút phát và tạm dừng',
+        'Nút thích, gắn sao và đánh dấu',
+        'Checkbox, radio button và công tắc',
+      ],
+      example:
+        'Icon bật/tắt khi click thường dùng cho các nút tắt/bật tiếng, ẩn/hiện mật khẩu, menu/đóng, phát/tạm dừng và thích.',
+      description:
+        'Chuyển giữa hai trạng thái khi click, hoặc chuyển ngay lập tức khi người dùng bật giảm chuyển động.',
+      reducedMotion:
+        'Khi người dùng bật giảm chuyển động, cú click chuyển ngay sang trạng thái còn lại, bỏ qua hiệu ứng ở giữa.',
+      plays: 'chuyển giữa hai trạng thái khi click',
+    },
+    'click-replay': {
+      label: 'Click phát lại',
+      title: 'Icon động khi click',
+      intro:
+        'Những icon này phát lại từ đầu sau mỗi lần được click, như một lời xác nhận nhỏ rằng thao tác đã thành công. Chúng hợp với các thao tác một lần, không để lại trạng thái: gửi, lưu, làm mới, tải xuống, in hoặc xóa.',
+      useCases: [
+        'Nút gửi trong form chat và bình luận',
+        'Nút lưu, tải xuống và tải lên',
+        'Nút làm mới và xoay',
+        'Nút thêm vào giỏ',
+        'Nút định dạng văn bản trong trình soạn thảo',
+      ],
+      example:
+        'Icon động khi click thường xác nhận các nút gửi, lưu, làm mới, tải xuống, thêm vào giỏ và định dạng văn bản.',
+      description:
+        'Phát lại một lần từ đầu sau mỗi lần click, trừ khi người dùng bật giảm chuyển động.',
+      reducedMotion:
+        'Khi người dùng bật giảm chuyển động, cú click vẫn đến được handler của bạn nhưng hiệu ứng không phát.',
+      plays: 'phát lại sau mỗi lần click',
+    },
+    hover: {
+      label: 'Hover',
+      title: 'Icon động khi hover',
+      intro:
+        'Những icon này phát xuôi khi con trỏ đi vào và chạy ngược lại khi con trỏ rời đi, nên chuyển động luôn bám theo con trỏ và không bao giờ dừng lửng giữa chừng. Chúng hợp với mục điều hướng và nút bấm cần gợi ý trước nội dung sẽ mở ra: nắp thùng rác nhấc lên, bánh răng cài đặt xoay, thư mục mở ra.',
+      useCases: [
+        'Mục menu trong sidebar và thanh điều hướng',
+        'Nút xóa nhấc nắp thùng rác trước khi click',
+        'Liên kết cài đặt và hồ sơ',
+        'Nút phóng to và thu nhỏ',
+        'Liên kết mạng xã hội ở footer',
+      ],
+      example:
+        'Icon động khi hover thường dùng cho mục điều hướng, nút xóa, cài đặt, nút phóng to/thu nhỏ và liên kết mạng xã hội.',
+      description:
+        'Phát xuôi khi con trỏ đi vào (mouseenter) và phát ngược khi con trỏ rời đi (mouseleave).',
+      reducedMotion: 'Khi người dùng bật giảm chuyển động, hover không phát hiệu ứng.',
+      plays: 'phát khi hover và chạy ngược khi rời chuột',
+    },
+    'hover-replay': {
+      label: 'Hover phát lại',
+      title: 'Icon động phát khi hover',
+      intro:
+        'Những icon này phát một lần khi con trỏ đi vào và tự chạy hết, nhờ vậy việc lướt chuột nhanh qua thanh công cụ không biến thành một loạt chuyển động giật cục. Phần lớn bộ icon hoạt động theo cách này: mũi tên, tệp, thiết bị, thời tiết và icon thương hiệu bừng lên khi hover.',
+      useCases: [
+        'Danh sách tính năng và bảng giá',
+        'Liên kết mũi tên và nút kêu gọi hành động',
+        'Nút trên thanh công cụ của trình soạn thảo và dashboard',
+        'Thẻ trong lưới của landing page',
+        'Liên kết ở footer và trang liên hệ',
+      ],
+      example:
+        'Icon phát khi hover thường làm sinh động liên kết mũi tên, danh sách tính năng, nút trên thanh công cụ và thẻ trên landing page.',
+      description:
+        'Phát một lần khi con trỏ đi vào (mouseenter), trừ khi người dùng bật giảm chuyển động. Rời chuột không làm hiệu ứng dừng; hover lại trong lúc đang phát cũng không khởi động lại.',
+      reducedMotion: 'Khi người dùng bật giảm chuyển động, hover không phát hiệu ứng.',
+      plays: 'phát một lần khi hover',
+    },
+    'hover-loop': {
+      label: 'Hover lặp',
+      title: 'Icon động lặp khi hover',
+      intro:
+        'Những icon này lặp liên tục khi con trỏ còn nằm trên chúng và chạy nốt chu kỳ hiện tại sau khi con trỏ rời đi, nên không bao giờ dừng giữa chừng. Chúng hợp với các liên kết mời người dùng nán lại lâu hơn, chủ yếu là icon mạng xã hội và cộng đồng.',
+      useCases: [
+        'Liên kết mạng xã hội ở header và footer',
+        'Nút mời tham gia cộng đồng và nhóm chat',
+        'Liên kết portfolio và hồ sơ',
+        'Bộ chọn ngôn ngữ và khu vực',
+      ],
+      example:
+        'Icon lặp khi hover thường dùng cho liên kết mạng xã hội, lời mời tham gia cộng đồng, liên kết portfolio và bộ chọn ngôn ngữ.',
+      description:
+        'Lặp khi đang hover, chạy nốt chu kỳ hiện tại sau khi con trỏ rời đi (mouseleave) và đứng yên khi người dùng bật giảm chuyển động.',
+      reducedMotion: 'Khi người dùng bật giảm chuyển động, icon đứng yên khi hover.',
+      plays: 'lặp khi được hover',
+    },
+  },
+};
diff --git a/website/src/i18n/messages/zh/common.ts b/website/src/i18n/messages/zh/common.ts
new file mode 100644
index 0000000..0a3bf94
--- /dev/null
+++ b/website/src/i18n/messages/zh/common.ts
@@ -0,0 +1,46 @@
+// 每个页面共用的文字：布局、页眉、页脚、面包屑导航、常见问题和复制按钮。
+import type { Messages } from '../en';
+
+export const common: Messages['common'] = {
+  skipToContent: '跳到主要内容',
+  ogImageAlt: 'useAnimations：适用于 React、shadcn/ui、Lottie 和 SVG 的免费动态图标',
+  homeLabel: 'useAnimations 首页',
+  mainNav: '主导航',
+  browseIcons: '浏览图标',
+  nav: {
+    icons: '图标',
+    categories: '类别',
+    documentation: '文档',
+    shadcn: 'shadcn',
+    lottie: 'Lottie 图标',
+    license: '许可证',
+  },
+  footer: {
+    tagline: '内置交互的免费动态图标，采用 MIT 许可证，专为 React 打造。',
+    product: '产品',
+    developers: '开发者',
+    follow: '关注',
+    languages: '语言',
+    allIcons: '全部图标',
+    categories: '类别',
+    interactions: '交互方式',
+    lottieIcons: 'Lottie 图标',
+    shadcnIcons: 'shadcn/ui 图标',
+    documentation: '文档',
+    licencing: '许可与条款',
+    shadcnRegistry: 'shadcn 注册表',
+    mitLicense: 'MIT 许可证',
+    builtWith: '本站使用 Astro 构建',
+  },
+  breadcrumb: '面包屑导航',
+  crumbs: { icons: '图标', categories: '类别', interactions: '交互方式' },
+  faq: '常见问题',
+  copy: '复制',
+  copied: '已复制',
+  pressCtrlC: '请按 Ctrl+C 复制',
+  languageBanner: {
+    text: '此页面也提供简体中文版本。',
+    action: '切换到简体中文',
+    dismiss: '关闭',
+  },
+};
diff --git a/website/src/i18n/messages/zh/docs.ts b/website/src/i18n/messages/zh/docs.ts
new file mode 100644
index 0000000..d9520e2
--- /dev/null
+++ b/website/src/i18n/messages/zh/docs.ts
@@ -0,0 +1,35 @@
+// 文档页面的外框；正文在 src/content/documentation.zh.md。
+import type { Messages } from '../en';
+
+export const docs: Messages['docs'] = {
+  title: '文档 — useAnimations',
+  description: (iconCount: number) =>
+    `如何在 React 和 shadcn/ui 中使用 ${iconCount} 个动态图标：交互方式、属性、颜色、文件与无障碍。`,
+  badge: '文档',
+  onThisPage: '本页内容',
+  viewAsMarkdown: '以 Markdown 格式查看',
+  headline: 'useAnimations 文档',
+  summary: '如何在 React 和 shadcn/ui 中使用 useAnimations 动态图标。',
+  crumb: '文档',
+  faq: [
+    {
+      question: 'useAnimations 可以免费用于商业项目吗？',
+      answer: '可以。图标和 React 软件包都采用 MIT 许可证，无需署名。',
+    },
+    {
+      question: '如何在 React 中使用 useAnimations 图标？',
+      answer:
+        '安装 react-useanimations，导入 UseAnimations 和一个图标（例如 react-useanimations/lib/checkmark），然后渲染 <UseAnimations animation={checkmark} size={32} />。',
+    },
+    {
+      question: '如何修改图标的颜色？',
+      answer:
+        '图标默认跟随文字颜色。可以通过 strokeColor 和 fillColor、CSS color，或者直接给路径设置样式来修改。',
+    },
+    {
+      question: '不使用 React 也能用吗？',
+      answer:
+        '这个软件包是为 React 设计的。不过每个图标同时也是标准的 Lottie JSON 文件，任何 Lottie 播放器都能播放（lottie-web、dotLottie、lottie-react-native、lottie-ios、lottie-android、Flutter），另外还提供静态 SVG。请参阅文档中的“不使用 React”一节以及 useanimations.com/lottie-icons。',
+    },
+  ],
+};
diff --git a/website/src/i18n/messages/zh/home.ts b/website/src/i18n/messages/zh/home.ts
new file mode 100644
index 0000000..242dfa8
--- /dev/null
+++ b/website/src/i18n/messages/zh/home.ts
@@ -0,0 +1,168 @@
+// 首页（/）、首页常见问题以及首页上的集合页链接。沿用原有中文首页（/zh）的标题、H1 和关键表述。
+import type { Messages } from '../en';
+import type { FaqLinks, HomeFaq } from '../en/home';
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const home: Messages['home'] = {
+  title: 'useAnimations — 免费动态图标库：React 动画图标与 Lottie 微动画',
+  description: (count: number) =>
+    `${count} 个免费动态图标（微动画），内置悬停、点击与循环交互，支持 React、shadcn/ui 和 Lottie，可下载 SVG/JSON，MIT 许可。`,
+
+  hero: {
+    badge: (count: number) => `${count} 个图标 · 零依赖 · MIT`,
+    headline: { start: '让图标', accent: '动起来', end: '' },
+    h1: '免费动态图标库：适用于 React、shadcn/ui 和 Lottie 的动画图标',
+    intro: (count: number) =>
+      `useAnimations 提供 ${count} 个手工制作的微动画图标，每个图标都内置悬停、点击或循环微交互。您可以把它们作为 React 组件使用，通过 shadcn 一条命令添加到项目中，或者直接下载 SVG 和 Lottie JSON 文件。采用 MIT 许可证。`,
+    browse: '浏览全部图标',
+    fieldHint: '在图标阵列上移动指针试试。',
+  },
+
+  numbers: {
+    label: '概览',
+    icons: '动态图标',
+    interactions: '内置交互',
+    size: '播放器（gzip 压缩后）',
+    dependencies: '依赖',
+  },
+
+  interactions: {
+    eyebrow: '交互内置',
+    title: '每个图标都知道该怎么动。',
+    intro:
+      '每个图标都自带为它设计的交互，放进页面即可使用，也可以用一个属性换成其他交互。动手试试：',
+    demos: {
+      loop: '持续播放，适合加载指示和持续性的状态提示。',
+      'click-toggle': '在两种状态之间切换：菜单与关闭、播放与暂停。',
+      'click-replay': '每次点击都从头播放，作为操作反馈。',
+      hover: '指针移入时正向播放，移出时反向播放。',
+      'hover-loop': '悬停期间循环播放，离开后播完当前一轮。',
+      'hover-replay': '每次移入时从头播放一次。',
+    },
+  },
+
+  browser: {
+    eyebrow: '图标库',
+    title: (count: number) => `${count} 个免费动态图标`,
+    intro: '悬停或点击即可播放。打开图标可查看代码，并下载 Lottie JSON、SVG 和 ZIP。',
+    search: '搜索图标',
+    searchPlaceholder: (count: number) => `搜索 ${count} 个图标，试试 “eye”“bell” 或 “arrow”`,
+    interaction: '交互方式',
+    allInteractions: '全部交互方式',
+    color: '图标颜色',
+    colors: {
+      text: '文字颜色',
+      indigo: '靛蓝',
+      red: '红色',
+      amber: '琥珀色',
+      teal: '青绿色',
+      violet: '紫色',
+    },
+    customColor: '自定义颜色',
+    size: '尺寸',
+    category: '类别',
+    all: '全部',
+    count: { other: '{n} 个图标' },
+    noMatch: '没有匹配的图标。',
+    noMatchHintHtml: (href: string) => `换个关键词试试，或者${link(href, '建议新增图标')}。`,
+  },
+
+  everywhere: {
+    eyebrow: '随心使用',
+    title: '安装、导入，就这么简单。',
+    intro:
+      '零依赖的 React 组件、shadcn 注册表、带固定网址的可下载文件，以及 AI 智能体可以读取的图标目录。',
+    docs: '阅读文档 →',
+    tablist: '平台',
+    tabs: { react: 'React', shadcn: 'shadcn', files: '文件', agents: '智能体' },
+    codeText: {
+      afterAdding: '然后',
+      files: '每个图标都提供 SVG、动画（Lottie JSON）以及包含两者的 ZIP',
+    },
+  },
+
+  features: {
+    title: '小巧、无障碍，样式由您掌控。',
+    colors: '跟随您的配色',
+    colorsHtml: `图标使用 ${code('currentColor')}，自动继承文字颜色、悬停状态和深色模式。也可以通过属性、类名或普通 CSS 覆盖。`,
+    tiny: '生来小巧',
+    tinyText: '内置播放器，零依赖。每个图标都是约 2 kB 的独立模块。',
+    accessible: '默认无障碍',
+    accessibleText:
+      '尊重系统的“减少动态效果”设置，键盘聚焦时同样播放悬停动画，并且在您添加标签之前不会干扰屏幕阅读器。',
+    ssr: '支持服务端渲染',
+    ssrText:
+      '客户端组件，可以在 Next.js、Remix 和 Astro 中安全渲染。图标本身是普通数据，在任何地方都能导入。',
+    agents: '为 AI 智能体准备',
+    agentsHtml: (iconsJson: string, llmsTxt: string) =>
+      `带类型定义的图标目录为每个图标列出关键词，另有 ${link(iconsJson, 'icons.json')}、${link(llmsTxt, 'llms.txt')} 和 Markdown 文档。`,
+  },
+
+  browse: {
+    title: '找到合适的微动画。',
+    byCategory: '按类别浏览',
+    byInteraction: '按交互方式浏览',
+    formats: '全部图标与格式',
+  },
+
+  hubs: {
+    icons: '全部动画图标',
+    categories: '图标类别',
+    interactions: '按交互方式浏览图标',
+    lottie: 'Lottie 图标（JSON）',
+    shadcn: 'shadcn/ui 动画图标',
+  },
+
+  faqTitle: '常见问题',
+  faq: (f: { version: string; links: FaqLinks }): HomeFaq => [
+    {
+      question: '什么是微动画和动态图标？',
+      answer:
+        '微动画是响应用户操作的简短动效，每个只表达一件事，例如菜单图标变成关闭按钮、点赞时爱心被填满、有新消息时铃铛摇动。动态图标是最常见的微动画，它让界面反馈更及时，不需要额外的文字就能表达状态变化。',
+    },
+    {
+      question: 'Lottie 文件和 SVG 文件有什么区别？',
+      answer:
+        'Lottie JSON 文件包含完整的动画，可以在任何 Lottie 播放器中播放，包括 react-useanimations 内置的播放器。SVG 文件是图标静止时的图片，每个状态一张（例如 eye 和 eye-off），适合不需要动效的场景：邮件、文档、设计工具，或不运行 JavaScript 时的备用方案。',
+    },
+    {
+      question: '可以在 Next.js 和服务端渲染中使用吗？',
+      answer:
+        "可以。组件标记为 'use client'，只在浏览器中绘制动画，因此可以在服务端组件以及 Next.js、Remix、Astro 等 SSR 框架中直接渲染，无需动态导入。图标模块是普通数据，服务端组件可以直接导入并作为属性传递。",
+      link: { href: f.links.serverRendering, label: 'Next.js 与服务端渲染' },
+    },
+    {
+      question: '可以用于商业项目吗？',
+      answer:
+        '可以。图标和 react-useanimations 软件包都采用 MIT 许可证，可以在个人和商业作品中使用、修改和再分发。署名不是必需的，但我们很欢迎。',
+      link: { href: f.links.licence, label: '许可与条款' },
+    },
+    {
+      question: '不使用 React 也能用吗？',
+      answer:
+        '可以。每个图标都是标准的 Lottie JSON 文件，可以通过 lottie-web 在原生 JavaScript、Vue、Svelte、Angular 或 CMS 中播放，也可以在 iOS、Android 和 Flutter 的 Lottie 播放器中使用。Lottie 图标页面列出了文件网址，并为每种交互提供了现成的 lottie-web 代码片段。',
+      link: { href: f.links.lottie, label: 'Lottie 图标' },
+    },
+    {
+      question: '会让打包体积增加多少？',
+      answer: `react-useanimations ${f.version} 的播放器压缩后约 8 kB，没有依赖；每个图标是 1 到 15 kB 的独立模块（中位数 2 kB），最终只打包您导入的图标。`,
+    },
+  ],
+
+  cta: {
+    title: { start: '为界面注入', accent: '活力。', end: '' },
+    text: '免费，采用 MIT 许可证，个人和商业项目均可使用。',
+    start: '开始使用',
+  },
+
+  schema: {
+    software: (count: number) =>
+      `React 组件和 ${count} 个动态图标（Lottie），内置悬停、点击和循环交互，零依赖。`,
+    catalogName: 'useAnimations 图标目录',
+    catalog: (count: number) =>
+      `全部 ${count} 个 useAnimations 图标，包含 id、标题、类别、关键词、交互方式、Lottie JSON、SVG 和 ZIP 网址、React 导入语句以及 shadcn 命令。`,
+  },
+};
diff --git a/website/src/i18n/messages/zh/hubs.ts b/website/src/i18n/messages/zh/hubs.ts
new file mode 100644
index 0000000..dae007c
--- /dev/null
+++ b/website/src/i18n/messages/zh/hubs.ts
@@ -0,0 +1,154 @@
+// 类别页和交互方式页（/categories/<slug>、/interactions/<slug>）：根据事实数据生成的句子和页面文字。
+import type { Messages } from '../en';
+import type { CategoryFacts, Faq, InteractionFacts } from '../en/hubs';
+import { listIn, pluralIn } from '../../format';
+
+/** 中文列举（Intl）；与英文名称相邻的“和”两侧加空格。 */
+const list = (items: string[]) =>
+  listIn('zh-Hans')(items)
+    .replace(/(?<=[\x21-\x7e])和/g, ' 和')
+    .replace(/和(?=[\x21-\x7e])/g, '和 ');
+const count = (n: number) => pluralIn('zh-Hans')(n, { other: '个图标' });
+
+/** 最多列出 max 个名称，其余写成“等另外 N 个”。 */
+const titles = (items: string[], max = 12) =>
+  items.length > max
+    ? `${items.slice(0, max).join('、')} 等另外 ${items.length - max} 个`
+    : list(items);
+
+/** 全部图标都有静态 SVG 时返回“，并附带静态 SVG”，否则说明有多少个提供。 */
+const svgNote = (f: CategoryFacts) => {
+  if (f.withSvg === f.count) return '，并附带静态 SVG';
+  return f.withSvg ? `，其中 ${f.withSvg} 个还提供静态 SVG` : '';
+};
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+
+export const hubs: Messages['hubs'] = {
+  titleSuffix: ' — useAnimations',
+  iconCount: count,
+
+  category: {
+    titles: (f: CategoryFacts) => [
+      `${f.title}：React 与 Lottie`,
+      `React ${f.title}`,
+      `免费${f.title}`,
+      f.title,
+    ],
+    descriptions: (f: CategoryFacts) => {
+      const examples = list(f.titles.slice(0, 3));
+      return [
+        `${f.count} 个免费${f.title}，包括 ${examples}。内置悬停、点击和循环微动画，支持 React、shadcn/ui 和 Lottie JSON，MIT 许可。`,
+        `${f.count} 个免费${f.title}，包括 ${examples}。支持 React、shadcn/ui 和 Lottie JSON，MIT 许可。`,
+        `${f.count} 个免费${f.title}，包括 ${examples}。支持 React、shadcn/ui 和 Lottie。`,
+        `${f.count} 个免费${f.title}，支持 React、shadcn/ui 和 Lottie JSON，MIT 许可。`,
+      ];
+    },
+    summary: (f: CategoryFacts) => {
+      const plays =
+        f.groups.length === 1
+          ? `全部 ${f.count} 个图标都${f.groups[0].plays}`
+          : `这 ${f.count} 个图标中，${f.groups.map((g) => `${g.count} 个${g.plays}`).join('，')}`;
+      return `${plays}。每个图标都提供 React 组件、shadcn/ui 组件和 Lottie JSON 动画${svgNote(f)}，可依据 MIT 许可证免费用于商业项目。`;
+    },
+    faq: (f: CategoryFacts): Faq => {
+      const ex = f.example;
+      const n = f.expressions.length;
+      return [
+        {
+          question: `包含哪些${f.title}？`,
+          answer: `共 ${count(f.count)}：${titles(f.titles)}。全部可依据 MIT 许可证免费用于个人和商业项目，无需署名。`,
+        },
+        {
+          question: `如何在 React 中使用这些${f.title}？`,
+          answer: `安装 react-useanimations，添加 ${ex.importLine}，然后渲染 <UseAnimations animation={${ex.exportName}} size={32} />。图标会播放它的“${ex.interactionLabel}”交互，并跟随文字颜色。使用 shadcn/ui 时，改为运行 ${ex.shadcnCommand}。`,
+        },
+        {
+          question: `不用 React 也能使用这些${f.title}吗？`,
+          answer: `可以。每个图标都是一个 Lottie JSON 文件，地址为 ${f.site}/icons/<id>.json（例如 ${f.site}/icons/${ex.id}.json），可以用 lottie-web、lottie-ios、lottie-android 或 Flutter 的 lottie 包播放${svgNote(f) ? '；静态 SVG 可以在各个图标页面（英文）下载' : ''}。${
+            n
+              ? `${titles(f.expressions, 6)} 用到了 After Effects 表达式，因此在网页上需要使用 lottie-web 的完整版。`
+              : '这些图标都没有用到表达式，因此 lottie-web 的轻量版（light build）就够用了。'
+          }`,
+        },
+      ];
+    },
+    badge: (n: number) => `${count(n)} · MIT 许可`,
+    allIcons: (name: string) => `全部${name}图标`,
+    whereToUse: '适用场景',
+    byInteraction: '按交互方式',
+    addOne: '添加到您的应用',
+    addOneHtml: (label: string, name: string) =>
+      `在 React 中，安装 ${code('react-useanimations')} 并导入图标即可，它会自动播放“${label}”交互。本类别的所有图标用法都一样：把 ${code(name)} 换成图标页面上的名称。`,
+    shadcnHtml: (href: string) => `使用 ${link(href, 'shadcn/ui')} 时，CLI 会添加一个现成的组件：`,
+    noReactHtml: (href: string) =>
+      `没有使用 React？每个图标都是位于 ${code('/icons/&lt;id&gt;.json')} 的 Lottie JSON 文件；网页、iOS、Android 和 Flutter 的播放器用法请参阅 ${link(href, 'Lottie 图标')}。`,
+    more: '更多类别',
+    allIconsButton: '全部图标',
+  },
+
+  interaction: {
+    titles: (f: InteractionFacts) => [`${f.title}：React 与 Lottie`, `React ${f.title}`, f.title],
+    descriptions: (f: InteractionFacts) => [
+      `${f.count} 个免费${f.title}，${f.plays}，例如 ${list(f.titles.slice(0, 3))}。支持 React、shadcn/ui 和 Lottie JSON，MIT 许可。`,
+      `${f.count} 个免费${f.title}，${f.plays}。支持 React、shadcn/ui 和 Lottie JSON，MIT 许可。`,
+      `${f.count} 个免费${f.title}，${f.plays}，支持 React、shadcn/ui 和 Lottie。`,
+    ],
+    faq: (f: InteractionFacts): Faq => [
+      {
+        question: `哪些图标使用“${f.label}”交互？`,
+        answer: `共 ${count(f.count)}：${titles(f.titles, 15)}。${f.example}`,
+      },
+      {
+        question: '用户偏好减少动态效果时会怎样？',
+        answer: `${f.reducedMotion}React 组件会读取 prefers-reduced-motion，并在该设置变化时自动更新，您无需为此编写任何代码。`,
+      },
+      {
+        question: '如何更改图标的交互方式？',
+        answer: `每个图标默认播放为它设计的交互。给其他任意图标传入 interaction="${f.interaction}"，就能让它获得这种效果；传入其他值（'loop'、'click-toggle'、'click-replay'、'hover'、'hover-loop'、'hover-replay'）则可换成别的交互。autoplay、loop 和 speed 属性用于调整播放方式。${
+          f.interaction === 'click-toggle'
+            ? '如果要自己控制状态，请传入 active={isOn} 并在 onClick 中更新它：这样点击就不会再自动切换图标。'
+            : ''
+        }`,
+      },
+    ],
+    allIcons: (label: string) => `全部${label}图标`,
+    behaviour: '交互表现',
+    hoverNote: '在触摸屏上轻触不会触发悬停动画；图标位于可聚焦元素内时，键盘聚焦也会触发动画。',
+    handled: 'React 组件会处理好这一切，您只需挑选图标。',
+    whereToUse: '适用场景',
+    byCategory: '按类别',
+    useInReact: '在 React 中使用',
+    overrideHtml: `这里列出的图标默认使用这种交互。其他图标也可以使用：传入 ${code('interaction')} 属性即可。`,
+    normallyUses: (title: string, interaction: string) => `${title} 默认使用 '${interaction}'`,
+    extra: {
+      loop: '循环图标会自动播放，滚出视口时暂停。可以用 speed 放慢速度，用 loop={false} 只播放一次，或者用 autoplay={false} 让它保持静止：',
+      'click-toggle':
+        '点击会自动切换图标。如果要与您的状态保持同步，请传入 active：每当 active 变化时图标都会播放动画，点击也不会再自行切换它。',
+      'click-replay':
+        '用 render 属性把图标放进真正的按钮里，这样它就能获得焦点并被屏幕阅读器读出。您的 onClick 会先执行；调用 event.preventDefault() 即可跳过动画。',
+      hover:
+        '用 render 属性把图标放进链接或按钮里：这样元素获得键盘焦点时也会播放动画，而在触摸屏上轻触不会触发。',
+      'hover-replay':
+        '让整张卡片或整个链接响应悬停，而不只是图标本身：使用 render 属性时，事件会绑定到您的元素上，键盘聚焦同样会播放动画。',
+      'hover-loop': '使用 render 属性，让整个链接（包括键盘聚焦）都能触发循环。用 speed 调整节奏：',
+    },
+    codeText: {
+      halfSpeed: '半速播放',
+      playsOnce: '播放一次后停止',
+      staticFrame: '静止在第一帧',
+      endState: 'true 表示显示结束状态',
+      closeMenu: '关闭菜单',
+      openMenu: '打开菜单',
+      download: '下载',
+      archive: '归档',
+      weeklyGrowth: '每周增长',
+    },
+    docsHtml: (docs: string, lottie: string) =>
+      `所有属性都在${link(docs, '文档')}中。在 React 之外，这些图标就是 Lottie JSON 文件；${link(lottie, 'Lottie 图标')}页面介绍了如何用 lottie-web 实现这些交互。`,
+    other: '其他交互方式',
+    browseByCategory: '按类别浏览',
+  },
+};
diff --git a/website/src/i18n/messages/zh/index.ts b/website/src/i18n/messages/zh/index.ts
index e77c97f..7a7d6aa 100644
--- a/website/src/i18n/messages/zh/index.ts
+++ b/website/src/i18n/messages/zh/index.ts
@@ -1,2 +1,12 @@
-// Placeholder until translated.
-export { messages } from '../en';
+// 简体中文（zh，hreflang zh-Hans）。
+import type { Messages } from '../en';
+import { common } from './common';
+import { docs } from './docs';
+import { home } from './home';
+import { hubs } from './hubs';
+import { islands } from './islands';
+import { licence } from './licence';
+import { pages } from './pages';
+import { taxonomy } from './taxonomy';
+
+export const messages: Messages = { common, taxonomy, hubs, home, docs, licence, pages, islands };
diff --git a/website/src/i18n/messages/zh/islands.ts b/website/src/i18n/messages/zh/islands.ts
new file mode 100644
index 0000000..ac3ea97
--- /dev/null
+++ b/website/src/i18n/messages/zh/islands.ts
@@ -0,0 +1,52 @@
+// React 岛组件（components/*.tsx）中的文字；'{name}' 占位符由组件填充。
+import type { Messages } from '../en';
+
+export const islands: Messages['islands'] = {
+  iconCard: {
+    hints: {
+      loop: '循环',
+      'click-toggle': '点击',
+      'click-replay': '点击',
+      hover: '悬停',
+      'hover-loop': '悬停',
+      'hover-replay': '悬停',
+    },
+  },
+  iconDialog: {
+    hints: {
+      loop: '自动播放',
+      'click-toggle': '点击切换',
+      'click-replay': '点击重播',
+      hover: '悬停播放，移开倒放',
+      'hover-loop': '悬停循环播放',
+      'hover-replay': '悬停播放',
+    },
+    preview: '{title} 预览',
+    colors: '预览颜色',
+    color: '颜色 {color}',
+    textColor: '文字颜色',
+    interaction: '交互方式',
+    duration: '时长',
+    seconds: '{seconds} 秒',
+    import: '导入',
+    close: '关闭',
+    code: '代码',
+    tabs: { react: 'React', shadcn: 'shadcn', files: '文件' },
+    copy: '复制',
+    download: '下载',
+    iconPage: '图标页面 →',
+  },
+  interactionDemo: {
+    click: '点击卡片',
+    loop: '自动播放',
+    hover: '将指针移到卡片上',
+  },
+  mobileMenu: {
+    menu: '菜单',
+    nav: '主导航',
+  },
+  themeToggle: {
+    toLight: '切换到浅色主题',
+    toDark: '切换到深色主题',
+  },
+};
diff --git a/website/src/i18n/messages/zh/licence.ts b/website/src/i18n/messages/zh/licence.ts
new file mode 100644
index 0000000..f8c3a94
--- /dev/null
+++ b/website/src/i18n/messages/zh/licence.ts
@@ -0,0 +1,26 @@
+// 许可页面（/licencing-and-terms）。LICENSE 原文在所有语言中都以英文显示。
+import type { Messages } from '../en';
+
+export const licence: Messages['licence'] = {
+  title: '许可与条款 — useAnimations',
+  description:
+    'useAnimations 图标和 react-useanimations 软件包采用 MIT 许可证：个人和商业用途均可免费使用和再分发，无需署名。',
+  name: '许可与条款',
+  heading: '免费使用，MIT 许可。',
+  introHtml: (mitHref: string) =>
+    `useAnimations 图标和 <code>react-useanimations</code> 软件包均以 <a href="${mitHref}">MIT 许可证</a>发布。`,
+  canDo: '您可以',
+  canDoItemsHtml: [
+    '<strong>使用</strong>：在个人和商业网站、应用及产品中使用这些图标。',
+    '<strong>修改</strong>：调整颜色、尺寸、节奏，甚至动效本身。',
+    '<strong>再分发</strong>：包括放进图标包、模板、主题、UI 套件和组件注册表中分发。',
+  ],
+  attribution: '署名',
+  attributionText:
+    '不强制要求，但我们很欢迎。直接再分发这些文件时，请保留许可声明；如果您愿意注明出处，可以使用：',
+  credit: (link: string) => `动态图标来自 ${link}`,
+  noWarranty: '无担保',
+  noWarrantyText: '图标和代码均按“原样”提供，不附带任何形式的担保。',
+  licenseText: '许可证文本',
+  bindingNote: '以下许可证文本为英文原版，具有法律效力的以该版本为准。',
+};
diff --git a/website/src/i18n/messages/zh/pages.ts b/website/src/i18n/messages/zh/pages.ts
new file mode 100644
index 0000000..8fe00f4
--- /dev/null
+++ b/website/src/i18n/messages/zh/pages.ts
@@ -0,0 +1,224 @@
+// 集合页：/icons、/categories、/interactions、/lottie-icons 和 /shadcn-animated-icons。
+import type { Messages } from '../en';
+import type { Faq } from '../en/hubs';
+
+const code = (text: string) => `<code class="font-mono text-sm text-fg">${text}</code>`;
+const link = (href: string, text: string) =>
+  `<a class="text-fg underline underline-offset-4" href="${href}">${text}</a>`;
+const strong = (text: string) => `<strong class="font-medium text-fg">${text}</strong>`;
+
+export const pages: Messages['pages'] = {
+  icons: {
+    titles: (count: number) => [`全部 ${count} 个动态图标（按类别）`, `全部 ${count} 个动态图标`],
+    descriptions: (count: number, categories: number) => [
+      `一页查看全部 useAnimations 图标：${categories} 个类别共 ${count} 个免费动态图标，支持 React、shadcn/ui、Lottie JSON 和 SVG，MIT 许可。`,
+      `${categories} 个类别共 ${count} 个免费动态图标，支持 React、shadcn/ui、Lottie JSON 和 SVG，MIT 许可。`,
+    ],
+    title: '全部动态图标',
+    badge: (count: number) => `${count} 个图标 · MIT 许可`,
+    introHtml: (browser: string) =>
+      `整套图标按类别排列。打开任意图标，可以查看实时预览、React 和 shadcn/ui 代码，并下载 Lottie JSON、SVG 和 ZIP。如果想按关键词搜索并直接试玩动画，请使用${link(browser, '图标浏览器')}。`,
+    categoriesNav: '类别',
+    byInteraction: '按交互方式：',
+    categoryLink: (count: number, name: string) => `${count} 个${name}图标 →`,
+  },
+
+  categories: {
+    titles: (categories: number) => [`动态图标分类：共 ${categories} 类`, '动态图标分类'],
+    descriptions: (icons: number, categories: number) => [
+      `按类别浏览 ${icons} 个免费动态图标，共 ${categories} 类：导航、操作、媒体、加载、社交媒体等，支持 React、shadcn/ui 和 Lottie。`,
+      `按类别浏览 ${icons} 个免费动态图标，共 ${categories} 类，支持 React、shadcn/ui 和 Lottie。`,
+    ],
+    title: '动态图标分类',
+    badge: (icons: number, categories: number) => `${icons} 个图标 · ${categories} 个类别`,
+    introHtml: (interactions: string) =>
+      `每个 useAnimations 图标都属于一个类别，从导航箭头、媒体控件到加载动画和社交媒体图标。打开某个类别，可以看到其中全部图标、适用场景以及添加图标的代码；也可以改为按${link(interactions, '交互方式')}浏览。`,
+    iconCount: (n: number) => `${n} 个图标`,
+  },
+
+  interactions: {
+    titles: ['微交互：悬停、点击与循环图标', '动态图标的微交互'],
+    descriptions: (icons: number, interactions: number) => [
+      `${icons} 个动态图标，涵盖 ${interactions} 种微交互：循环、点击切换、点击重播、悬停、悬停重播和悬停循环，支持减少动态效果。`,
+      `${icons} 个动态图标，涵盖 ${interactions} 种微交互，支持减少动态效果。`,
+    ],
+    title: '动态图标的交互方式',
+    badge: (interactions: number, icons: number) => `${interactions} 种交互 · ${icons} 个图标`,
+    introHtml: `每个图标都自带为它设计的微交互：循环播放、点击切换或重播，或者在悬停时播放。React 组件会自动完成这些绑定，并尊重“减少动态效果”设置；<code class="font-mono text-base text-fg">interaction</code> 属性可以把任意图标换成另一种交互。`,
+    iconCount: (n: number) => `${n} 个图标`,
+    chooseTitle: '如何选择交互方式',
+    chooseHtml: {
+      loop: (href: string) =>
+        `${strong('持续存在的状态')}，例如正在加载或仍然有效的警告：${link(href, '循环')}。`,
+      'click-toggle': (href: string) =>
+        `${strong('开关类控件')}，例如静音、菜单或显示密码：${link(href, '点击切换')}，需要受控状态时配合 ${code('active')} 使用。`,
+      'click-replay': (href: string) =>
+        `${strong('一次性操作')}，例如发送、保存或刷新：${link(href, '点击重播')}。`,
+      hover: (href: string) =>
+        `${strong('提示链接将打开什么')}：${link(href, '悬停')}，指针离开时会反向播放。`,
+      'hover-replay': (href: string) =>
+        `${strong('用户会快速扫过的工具栏和列表')}：${link(href, '悬停重播')}，播放一次后自然结束。`,
+      'hover-loop': (href: string) =>
+        `${strong('值得多看一眼的链接')}，例如社交图标：${link(href, '悬停循环')}。`,
+    },
+    motionTitle: '减少动态效果',
+    motionHtml: `React 组件遵循 ${code('prefers-reduced-motion')}，并在该设置变化时随之更新。在触摸屏上轻触永远不会触发悬停动画。`,
+    reducedMotion: {
+      loop: '图标不会自动播放，停留在静态的第一帧。',
+      'click-toggle': '点击会直接切换到另一种状态，省去中间的动画。',
+      'click-replay': '点击仍会触发您的事件处理函数，但不会播放动画。',
+      hover: '悬停不会播放动画。',
+      'hover-replay': '悬停不会播放动画。',
+      'hover-loop': '悬停时图标保持静止。',
+    },
+  },
+
+  lottie: {
+    titles: (count: number) => [`免费 Lottie 图标：${count} 个 JSON 动画`, '免费 Lottie 动态图标'],
+    descriptions: (count: number) => [
+      `${count} 个免费 Lottie 图标，标准 Lottie JSON 格式，MIT 许可。附 lottie-web、dotLottie、React、iOS、Android 和 Flutter 的即用代码。`,
+      `${count} 个免费 Lottie 图标，标准 Lottie JSON 格式，MIT 许可，附各平台播放器的即用代码。`,
+      `${count} 个免费 Lottie 图标，标准 Lottie JSON 格式，MIT 许可。`,
+    ],
+    title: '免费 Lottie 图标',
+    crumb: 'Lottie 图标',
+    datasetName: 'useAnimations 图标目录',
+    datasetDescription: (count: number) =>
+      `${count} 个 Lottie 动态图标的元数据和文件网址：id、标题、类别、关键词、交互方式、尺寸和时长。`,
+    badge: (count: number) => `${count} 个图标 · Lottie JSON · MIT 许可`,
+    intro:
+      '每个 useAnimations 图标都是标准的 Lottie JSON 动画，任何 Lottie 播放器都能播放：网页上的 lottie-web，以及 lottie-ios、lottie-android、Flutter 和 React Native。这些文件依据 MIT 许可证免费提供，无需注册，托管在固定网址上并已开启 CORS，既可以直接加载，也可以下载到项目中。',
+    popular: '热门 Lottie 图标',
+    allIcons: (count: number) => `全部 ${count} 个图标 →`,
+    filesTitle: '文件与网址',
+    filesIntroHtml: `每个图标在 ${code('/icons/&lt;id&gt;')} 都有一个页面，提供预览和下载。文件本身的地址如下：`,
+    files: {
+      json: 'Lottie JSON 动画',
+      zip: 'JSON 与静态 SVG',
+      svg: '每个状态的静态 SVG',
+      catalog: '全部图标的目录',
+    },
+    catalogHtml: (catalog: string, median: number) =>
+      `${link(catalog, 'icons.json')} 列出了每个图标的 id、标题、类别、关键词、交互方式、尺寸、时长和文件网址，方便在脚本中按关键词挑选图标，或者交给编程智能体来选择。Lottie 文件大小的中位数为 ${median} kB。`,
+    players: {
+      web: {
+        title: '网页：lottie-web',
+        text: 'Airbnb 推出的参考播放器。从 CDN 加载，把它指向图标网址，并选择 SVG 渲染器：这样图标始终清晰，还能用 CSS 改色。请使用完整版（lottie.min.js），轻量版不支持表达式。',
+        cssLabel: '跟随文字颜色（SVG 渲染器）',
+      },
+      'web-interactions': {
+        title: '网页：悬停与点击交互',
+        text: 'lottie-web 只负责播放和停止，交互需要您自己实现。下面是菜单图标的点击切换，并支持减少动态效果；其他交互的写法都与此相同，而下文的 React 组件会替您完成这一切。',
+      },
+      dotlottie: {
+        title: '网页：dotLottie Web 组件',
+        text: 'LottieFiles 推出的播放器，用 WebAssembly 引擎渲染到 canvas 上，既能播放普通的 Lottie JSON，也能播放 .lottie 文件。canvas 会保留文件中的颜色，因此除非修改 JSON 中的颜色，图标会保持黑色。',
+        jsLabel: '或者使用 JavaScript API：npm install @lottiefiles/dotlottie-web',
+      },
+      react: {
+        title: 'React：react-useanimations',
+        text: '无需安装 Lottie 播放器：这个软件包自带 8 kB 的播放器，会播放每个图标的交互、跟随文字颜色，并尊重减少动态效果设置。每个图标都是独立模块，只有您导入的图标才会被打包。',
+      },
+      'react-native': {
+        title: 'React Native：lottie-react-native',
+        text: '用 require() 把 JSON 打包进应用以便离线使用，或者从网址加载。',
+      },
+      ios: {
+        title: 'iOS：lottie-ios（SwiftUI）',
+        text: '通过 Swift Package Manager 从 https://github.com/airbnb/lottie-spm.git 添加依赖，然后把 JSON 放进应用包，或者从网址加载。',
+      },
+      android: {
+        title: 'Android：lottie-android（Jetpack Compose）',
+        text: '添加 com.airbnb.android:lottie-compose（使用 View 时添加 com.airbnb.android:lottie）。如需离线使用，把 JSON 放在 res/raw 中，并通过 LottieCompositionSpec.RawRes 加载。',
+      },
+      flutter: {
+        title: 'Flutter：lottie',
+        text: 'lottie 包是纯 Dart 实现的播放器，支持 Android、iOS、Web 和桌面端。',
+      },
+    },
+    expressionsTitle: '使用表达式的图标',
+    expressionsHtml: (count: number) =>
+      `${count} 个图标用到了 After Effects 表达式（${code('loopOut')} 或 ${code('wiggle')}）。在网页上，请用 lottie-web 的完整版播放，而不是 ${code('lottie_light')}。原生播放器不会执行表达式，因此请在 iOS、Android 和 Flutter 上实际测试这些图标，或者换用其他图标；react-useanimations 则能按设计效果播放它们。`,
+    faq: (f: {
+      count: number;
+      minSize: number;
+      maxSize: number;
+      medianSize: number;
+      expressions: string[];
+    }): Faq => [
+      {
+        question: '这些 Lottie 图标可以免费商用吗？',
+        answer: `可以。全部 ${f.count} 个 Lottie 图标都采用 MIT 许可证：可以在个人和商业项目中使用、修改和再分发，无需署名，下载也不需要注册账号。`,
+      },
+      {
+        question: 'Lottie 文件是什么格式？',
+        answer: `标准的 Lottie JSON（即 Bodymovin 格式），只包含形状图层：没有图片、字体或外部资源。每个图标绘制在 24 或 32 px 的画板上，可以缩放到任意尺寸，文件大小在 ${f.minSize} kB 到 ${f.maxSize} kB 之间，中位数为 ${f.medianSize} kB。`,
+      },
+      {
+        question: '在 React 中使用这些图标需要 lottie-web 吗？',
+        answer:
+          '不需要。react-useanimations 自带 8 kB 的播放器，没有任何依赖，只需安装一个软件包，再导入需要的图标即可。只有在 React 之外，比如普通网页或其他框架中，才需要 lottie-web。',
+      },
+      {
+        question: '哪些图标需要 lottie-web 的完整版？',
+        answer: `有 ${f.expressions.length} 个图标用到了 After Effects 表达式（loopOut 或 wiggle）：${f.expressions.join('、')}。在网页上，它们需要 lottie-web 的完整版；lottie_light 会忽略表达式。原生播放器（lottie-ios、lottie-android、Flutter 的 lottie）同样不会执行表达式，因此这些图标在那里的动效可能会有所不同。`,
+      },
+      {
+        question: '可以修改 Lottie 图标的颜色吗？',
+        answer:
+          '在网页上，lottie-web 的 SVG 渲染器会把颜色写成属性，因此给路径加一条 CSS 规则就能给图标改色。原生播放器则使用各自的动态属性 API：iOS 上是 ColorValueProvider，Android 上是 LottieProperty.COLOR 和 STROKE_COLOR，Flutter 中是 ValueDelegate.color。',
+      },
+    ],
+    byCategory: '按类别浏览 Lottie 图标',
+  },
+
+  shadcn: {
+    titles: (count: number) => [`shadcn/ui 动态图标：${count} 个组件`, 'shadcn/ui 动态图标'],
+    descriptions: (count: number) => [
+      `${count} 个适用于 shadcn/ui 的动态图标，一条 shadcn CLI 命令即可添加。内置悬停、点击和循环微交互，MIT 许可，无需 lottie-web。`,
+      `${count} 个适用于 shadcn/ui 的动态图标，一条 shadcn CLI 命令即可添加，MIT 许可。`,
+    ],
+    title: 'shadcn/ui 动态图标',
+    crumb: 'shadcn/ui',
+    popularList: '热门 shadcn/ui 动态图标',
+    badge: (count: number) => `${count} 个组件 · shadcn 注册表 · MIT 许可`,
+    intro:
+      '每个 useAnimations 图标都收录在 shadcn 注册表中。一条 CLI 命令就能把带类型的 React 组件添加到项目里，组件自带为图标设计的悬停、点击或循环交互，支持减少动态效果，颜色跟随您的主题。代码直接落在您的仓库中，和其他 shadcn/ui 组件一样。',
+    addTitle: '添加图标',
+    addIntro: '用图标的注册表网址运行 shadcn CLI：',
+    namingHtml: `组件名为 ${code('Animated')} 加上 PascalCase 形式的图标 id（${code('check-box')} → ${code('AnimatedCheckBox')}），文件位于 ${code('components/animations/&lt;id&gt;.tsx')}。CLI 还会添加共用的 ${code('components/use-animation.tsx')} 封装组件，并安装 ${code('react-useanimations')}；它自带播放器，无需 lottie-web。`,
+    namespaceTitle: '使用注册表命名空间的简短写法',
+    namespaceHtml: `在 ${code('components.json')} 中添加一次注册表，之后就能按名称添加图标，一次可以添加多个：`,
+    registryHtml: (registry: string) =>
+      `注册表索引 ${link(registry, '/r/registry.json')} 列出了每一项的标题、类别和交互方式。`,
+    usageTitle: '在 shadcn Button 中使用',
+    usageHtml: `组件接受与 ${code('UseAnimations')} 相同的属性。对于菜单图标这类开关，请传入 ${code('active')}，并把状态保存在按钮中；每当状态变化，图标都会播放动画：`,
+    colorHtml: (docs: string) =>
+      `图标跟随文字颜色，因此 ${code('text-primary')} 或 ${code('text-muted-foreground')} 就能给它们改色，深色模式也无需额外处理。更多属性和用法请参阅${link(docs, '文档')}。`,
+    codeText: { closeMenu: '关闭菜单', openMenu: '打开菜单' },
+    popular: '热门 shadcn/ui 图标',
+    allIcons: (count: number) => `全部 ${count} 个图标 →`,
+    popularNote: '每个图标页面都提供对应的 shadcn 命令。',
+    faq: (f: { count: number; version: string }): Faq => [
+      {
+        question: 'shadcn/ui 动态图标是免费的吗？',
+        answer: `是的。全部 ${f.count} 个图标及组件代码都采用 MIT 许可证，可用于个人和商业项目。使用注册表不需要账号或 API 密钥。`,
+      },
+      {
+        question: 'shadcn CLI 会往项目里添加什么？',
+        answer: `位于 components/animations/<id>.tsx 的图标组件、位于 components/use-animation.tsx 的共用 UseAnimation 播放器封装（作为注册表依赖，只添加一次），以及来自 npm 的 react-useanimations@^${f.version}。不需要 lottie-web：这个软件包自带 8 kB 的播放器。`,
+      },
+      {
+        question: '这些组件能在 Next.js 服务端组件中使用吗？',
+        answer:
+          '可以。组件标记为 "use client"，只在浏览器中绘制动画，因此可以直接在服务端组件和页面中渲染，无需动态导入，也不用设置 ssr: false。',
+      },
+      {
+        question: '可以修改图标的外观和动效吗？',
+        answer:
+          '代码就在您自己的仓库里，可以随意修改。组件接受 UseAnimations 的属性：size、strokeColor、fillColor、interaction、active、autoplay、loop 和 speed。图标跟随文字颜色，因此 text-primary 或 text-muted-foreground 等 Tailwind 类名就能给它们改色。',
+      },
+    ],
+    byCategory: '按类别浏览',
+  },
+};
diff --git a/website/src/i18n/messages/zh/taxonomy.ts b/website/src/i18n/messages/zh/taxonomy.ts
new file mode 100644
index 0000000..071ab24
--- /dev/null
+++ b/website/src/i18n/messages/zh/taxonomy.ts
@@ -0,0 +1,374 @@
+// 类别和交互方式在页面上的名称与介绍文字。
+import type { Messages } from '../en';
+
+export const taxonomy: Messages['taxonomy'] = {
+  categories: {
+    Alerts: {
+      name: '警告提示',
+      title: '警告提示动态图标',
+      intro:
+        '警告三角、警示圆圈和停止标志，脉动幅度恰到好处，足以引起注意又不会闪烁刺眼。适合放在校验失败的表单字段旁、错误横幅开头或状态列中，这些位置的静态图标很容易被一眼略过。',
+      useCases: [
+        '表单字段下方的行内校验错误',
+        '页面顶部的错误和警告横幅',
+        '部署或任务状态表中的失败行',
+        '危险操作的确认对话框',
+        '故障期间的系统状态页',
+      ],
+    },
+    Notifications: {
+      name: '通知铃铛',
+      title: '通知铃铛动态图标',
+      intro:
+        '有新动态时会摇动的铃铛，以及在铃铛和静音铃铛之间切换的图标。铃铛轻轻一摆，就能把视线引向未读数；可切换的版本还能直接用作频道或会话的静音开关。',
+      useCases: [
+        '应用顶栏中的通知中心按钮',
+        '收到新消息时摇动的未读徽标',
+        '频道或会话的静音与取消静音开关',
+        '邮件和推送通知设置',
+        '提醒与订阅按钮',
+      ],
+    },
+    Navigation: {
+      name: '导航与箭头',
+      title: '导航与箭头动态图标',
+      intro:
+        '可以变成关闭按钮的汉堡菜单，以及悬停时朝所指方向轻推的箭头、V 形箭头和角箭头。它们让控件的去向一目了然：打开抽屉、返回、展开这一行、离开本站。',
+      useCases: [
+        '移动端变成关闭按钮的汉堡菜单',
+        '轮播图和分页中的上一页、下一页按钮',
+        '手风琴和下拉菜单的展开箭头',
+        '返回顶部和向下滚动提示',
+        '登录和退出链接',
+        '外部链接标记和侧边栏开关',
+      ],
+    },
+    Action: {
+      name: '操作按钮',
+      title: '操作按钮动态图标',
+      intro:
+        '界面里的“动词”：保存、删除、下载、刷新、点赞、收藏、搜索和设置。每个图标都会对相应的点击或悬停作出回应：点赞时爱心被填满，删除前垃圾桶的盖子先掀起来。',
+      useCases: [
+        '卡片上的点赞、喜欢和收藏按钮',
+        '确认操作完成的下载、上传和保存按钮',
+        '登录表单中的显示/隐藏密码切换',
+        '仪表盘中的刷新和同步按钮',
+        '表格和文件列表中的删除按钮',
+        '可以变成清除按钮的搜索框',
+      ],
+    },
+    Content: {
+      name: '文件、文件夹与用户',
+      title: '文件、文件夹与用户动态图标',
+      intro:
+        '文件、文件夹、书本、邮件、附件和人物。它们用来标示用户日常处理的对象；添加、移除和勾选等变体让列表管理和团队管理的反馈更加及时。',
+      useCases: [
+        '文件管理器和文档列表',
+        '附件和复制到剪贴板按钮',
+        '邮件客户端的收件箱和归档视图',
+        '可添加、移除用户的团队成员列表',
+        '文档和链接的分享菜单',
+      ],
+    },
+    Form: {
+      name: '表单控件',
+      title: '表单控件动态图标',
+      intro:
+        '复选框、单选按钮和开关，在选中与未选中之间带动画切换。适合普通输入控件显得单调的地方，例如新手引导清单和设置页面，同时状态依然一眼可辨。',
+      useCases: [
+        '功能和偏好设置中的开关',
+        '新手引导清单和待办清单',
+        '问卷和套餐选择中的单选项',
+        '条款和授权同意复选框',
+      ],
+    },
+    Media: {
+      name: '媒体播放',
+      title: '媒体播放器动态图标',
+      intro:
+        '用于音频和视频播放器的播放与暂停、音量、麦克风、摄像头、跳过和随机播放图标。可切换的图标在两种状态之间转换，比如从播放到暂停、从麦克风到静音，按钮始终显示点击后会发生什么。',
+      useCases: [
+        '音视频播放器中的播放和暂停按钮',
+        '视频通话中的静音和取消静音',
+        '会议应用中的摄像头开关',
+        '播放列表的跳过、重复和随机播放控件',
+        '投屏和 AirPlay 按钮',
+        '播客和音乐应用的控件',
+      ],
+    },
+    'Text editing': {
+      name: '文本编辑',
+      title: '文本编辑动态图标',
+      intro:
+        '用于富文本工具栏的加粗、斜体、下划线、对齐和列表图标。点击时的简短动画确认格式已经生效，在文字本身变化不明显的编辑器里尤其有用。',
+      useCases: [
+        '富文本编辑器工具栏',
+        '评论和消息输入框',
+        'CMS 和博客文章编辑器',
+        'Markdown 和笔记应用',
+        '设计工具中的文本对齐控件',
+      ],
+    },
+    Communication: {
+      name: '通讯',
+      title: '通讯动态图标',
+      intro:
+        '电话、聊天气泡、发送按钮、语音信箱和 RSS。通话图标涵盖通话记录所需的来电、去电、未接和转接状态；发送图标会在点击时给消息一个小小的“送行”动画。',
+      useCases: [
+        '聊天和评论表单中的发送按钮',
+        '包含来电、去电和未接来电的通话记录',
+        '联系我们和客服按钮',
+        '聊天组件的启动按钮',
+        '提及和邮箱地址输入框',
+      ],
+    },
+    Devices: {
+      name: '设备',
+      title: '设备动态图标',
+      intro:
+        '手机、平板、显示器、手表和打印机，以及与之相关的连接状态指示：Wi-Fi、蓝牙和电池。适用于设备选择器、响应式预览切换和连接状态显示。',
+      useCases: [
+        '手机、平板和桌面端的响应式预览切换',
+        'Wi-Fi 和蓝牙连接状态',
+        '电量和充电指示',
+        '账户安全设置中的设备列表',
+        '发票和报表上的打印按钮',
+      ],
+    },
+    Weather: {
+      name: '天气',
+      title: '天气动态图标',
+      intro:
+        '太阳、月亮、云、雨、雪、闪电和风，适用于天气预报以及一切随时间变化的内容。太阳和月亮也很适合用作浅色/深色模式切换。',
+      useCases: [
+        '天气小组件和预报卡片',
+        '浅色与深色主题切换',
+        '旅行应用中的日出日落时间',
+        '智能家居仪表盘上的温度读数',
+        '能源和电源状态指示',
+      ],
+    },
+    'Maps & location': {
+      name: '地图与位置',
+      title: '地图与位置动态图标',
+      intro:
+        '地图标记、导航箭头、地球、靶心和锚。悬停时落下的定位标记能让门店查询或收货地址更醒目，地球图标则适合用作语言或地区切换。',
+      useCases: [
+        '门店查询和地址输入框',
+        '当前位置和路线按钮',
+        '语言和地区选择器',
+        '配送和订单跟踪',
+        '旅行和预订应用',
+      ],
+    },
+    Commerce: {
+      name: '电子商务',
+      title: '电子商务动态图标',
+      intro:
+        '购物车、购物袋、价格标签、礼物、信用卡和送货卡车，适用于网店。加入购物车的动画本身就能确认点击，无需再弹出提示；卡车和包裹图标则让订单状态更生动。',
+      useCases: [
+        '商品卡片上的加入购物车按钮',
+        '商店顶栏中的购物车和购物袋按钮',
+        '结账和支付方式选择',
+        '折扣、优惠券和促销标签',
+        '物流和订单跟踪步骤',
+        '礼品卡和礼品包装选项',
+      ],
+    },
+    Charts: {
+      name: '图表',
+      title: '图表动态图标',
+      intro:
+        '柱状图、饼图和趋势箭头，适用于数据分析和报表。上升和下降趋势图标能让人一眼看出指标是涨是跌，很适合 KPI 卡片和数字变化记录。',
+      useCases: [
+        '显示指标涨跌的 KPI 卡片',
+        '数据分析和报表的导航项',
+        '仪表盘的空状态',
+        '财务和投资组合概览',
+      ],
+    },
+    Development: {
+      name: '开发者',
+      title: '开发者动态图标',
+      intro:
+        '代码括号、终端、Git 分支、提交、合并和拉取请求，以及服务器和数据库。专为开发者工具、文档站点和状态页设计，这些界面本来就离不开 Git 和基础设施的术语。',
+      useCases: [
+        '开发者工具中的拉取请求、合并和分支状态',
+        '文档中的代码片段和嵌入按钮',
+        '落地页上的终端和 CLI 介绍',
+        '状态页上的服务器和数据库健康状况',
+        '带 Command 键的快捷键提示',
+      ],
+    },
+    'Design & layout': {
+      name: '设计与布局',
+      title: '设计与布局动态图标',
+      intro:
+        '网格、分栏、图层、裁剪、钢笔工具和光标图标，适用于编辑器和搭建工具。放在用户排列内容、在网格和表格视图间切换或选择绘图工具的工具栏里正合适。',
+      useCases: [
+        '网格、列表和表格视图切换',
+        '设计和幻灯片工具中的图层面板',
+        '图片编辑器中的裁剪和剪切工具',
+        '页面搭建器和布局选择器',
+        '拖动手柄',
+      ],
+    },
+    'Shapes & math': {
+      name: '形状与数学',
+      title: '形状与数学动态图标',
+      intro:
+        '圆形、正方形、三角形、六边形、八边形和除号。可以用作绘图应用中的形状工具、计算器的运算符，或者图表和新手引导步骤中的中性标记。',
+      useCases: [
+        '白板和绘图应用中的形状工具',
+        '计算器和公式编辑器的运算符',
+        '图表中的项目符号和步骤标记',
+        '答题和游戏界面',
+      ],
+    },
+    Loading: {
+      name: '加载动画',
+      title: '加载动画图标',
+      intro:
+        '只要任务还在进行，加载指示器和转圈动画就会一直循环。可以放在请求进行中的提交按钮里、尚未加载完的内容位置上，或者全屏启动页上；当用户偏好减少动态效果时，它们会保持静止。',
+      useCases: [
+        '等待请求返回的提交按钮',
+        '列表或图表加载时的占位',
+        '无限滚动和“加载更多”指示',
+        '全屏启动页和路由切换',
+        '文件上传和处理进度',
+      ],
+    },
+    'Social media': {
+      name: '社交媒体',
+      title: '社交媒体动态图标',
+      intro:
+        '社交网络以及开发者和设计师分享作品的平台的品牌图标：X、Instagram、YouTube、Discord、Telegram、Figma 等。它们在悬停时播放动画，让页脚和个人主页链接看起来更明显可点。',
+      useCases: [
+        '网站页脚的社交链接',
+        '博客文章的分享按钮',
+        '作者和团队主页链接',
+        '聊天社区的邀请按钮',
+        '使用社交或开发者账号登录',
+      ],
+    },
+    Other: {
+      name: '其他',
+      title: '其他动态图标',
+      intro:
+        '不属于较大分组的图标：用于反馈的表情、咖啡杯、时钟、脉搏线和向下滚动提示。向下滚动图标常放在首屏区域底部，提示下面还有更多内容。',
+      useCases: [
+        '首屏区域底部的向下滚动提示',
+        '反馈组件中的开心、一般和难过表情',
+        '活动和在线时长指示',
+        '营业时间和时间选择器',
+        '“请我喝杯咖啡”和赞助链接',
+      ],
+    },
+  },
+  interactions: {
+    loop: {
+      label: '循环',
+      title: '循环动态图标',
+      intro:
+        '这些图标只要在屏幕上就会持续播放，适合表示持续存在的状态：正在加载、警告仍然有效、终端正在等待。当用户偏好减少动态效果时，它们会停在第一帧，看起来就是一个普通图标。',
+      useCases: [
+        '加载指示器和进度提示',
+        '持续中的警告和错误状态',
+        '直播和录制指示',
+        '首屏区域的向下滚动提示',
+        '新通知的提醒标记',
+      ],
+      example: '循环图标通常用于加载指示、持续中的警告、摇动的铃铛或向下滚动提示。',
+      description: '持续播放；当用户偏好减少动态效果时，停留在静态的第一帧。',
+      reducedMotion: '当用户偏好减少动态效果时，图标不会自动播放，而是停留在静态的第一帧。',
+      plays: '持续循环播放',
+    },
+    'click-toggle': {
+      label: '点击切换',
+      title: '点击切换动态图标',
+      intro:
+        '每次点击都会以动画切换到另一种状态并停在那里，因此这类图标正好充当开关控件的视觉部分。图标始终显示当前状态，配合 aria-pressed 或 checked 属性，按钮的含义就不言自明。',
+      useCases: [
+        '静音和取消静音按钮',
+        '显示和隐藏密码的输入框',
+        '汉堡菜单和关闭按钮',
+        '播放和暂停控件',
+        '点赞、星标和收藏开关',
+        '复选框、单选按钮和开关',
+      ],
+      example: '点击切换图标通常用于静音/取消静音、显示/隐藏密码、菜单/关闭、播放/暂停和点赞按钮。',
+      description: '点击时在两种状态之间切换；当用户偏好减少动态效果时，直接切换到新状态。',
+      reducedMotion: '当用户偏好减少动态效果时，点击会直接切换到另一种状态，省去中间的动画。',
+      plays: '点击时在两种状态之间切换',
+    },
+    'click-replay': {
+      label: '点击重播',
+      title: '点击重播动态图标',
+      intro:
+        '这些图标每次被点击都会从头播放一次，作为操作已经完成的小小确认。适合不会留下状态的一次性操作：发送、保存、刷新、下载、打印或删除。',
+      useCases: [
+        '聊天和评论表单中的发送按钮',
+        '保存、下载和上传按钮',
+        '刷新和旋转按钮',
+        '加入购物车按钮',
+        '编辑器中的文本格式按钮',
+      ],
+      example: '点击重播图标通常用来确认发送、保存、刷新、下载、加入购物车和格式设置等操作。',
+      description: '每次点击都从头播放一次，除非用户偏好减少动态效果。',
+      reducedMotion: '当用户偏好减少动态效果时，点击仍会触发您的事件处理函数，但不会播放动画。',
+      plays: '每次点击都会重播',
+    },
+    hover: {
+      label: '悬停',
+      title: '悬停动态图标',
+      intro:
+        '这些图标在指针移入时正向播放，移出时反向播放，动效始终跟随光标，不会停在一半。适合提示即将打开什么的导航项和按钮：垃圾桶盖掀起、设置齿轮转动、文件夹打开。',
+      useCases: [
+        '侧边栏和导航菜单项',
+        '点击前先掀起盖子的删除按钮',
+        '设置和个人资料链接',
+        '放大和缩小控件',
+        '页脚中的社交链接',
+      ],
+      example: '悬停图标通常用于导航项、删除按钮、设置、缩放控件和社交链接。',
+      description: '在 mouseenter 时正向播放，在 mouseleave 时反向播放。',
+      reducedMotion: '当用户偏好减少动态效果时，悬停不会播放动画。',
+      plays: '悬停时播放、移开时倒放',
+    },
+    'hover-replay': {
+      label: '悬停重播',
+      title: '悬停播放动态图标',
+      intro:
+        '这些图标在指针移入时播放一次并自然结束，即使快速划过工具栏也不会产生抖动。整套图标大多采用这种方式：箭头、文件、设备、天气和品牌图标，悬停时都会动起来。',
+      useCases: [
+        '功能列表和价格表',
+        '箭头链接和行动号召按钮',
+        '编辑器和仪表盘中的工具栏按钮',
+        '落地页网格中的卡片',
+        '页脚和联系方式链接',
+      ],
+      example: '悬停播放图标通常用来点缀箭头链接、功能列表、工具栏按钮和落地页卡片。',
+      description:
+        '在 mouseenter 时播放一次，除非用户偏好减少动态效果。移出不会中断播放，播放期间再次移入也不会重新开始。',
+      reducedMotion: '当用户偏好减少动态效果时，悬停不会播放动画。',
+      plays: '悬停时播放一次',
+    },
+    'hover-loop': {
+      label: '悬停循环',
+      title: '悬停循环动态图标',
+      intro:
+        '这些图标在指针停留期间循环播放，移开后会播完当前一轮再停下，因此不会在动作中途戛然而止。适合值得多看一眼的链接，主要是社交和社区图标。',
+      useCases: [
+        '页眉和页脚中的社交媒体链接',
+        '社区和聊天群组的邀请按钮',
+        '作品集和个人主页链接',
+        '语言和地区选择器',
+      ],
+      example: '悬停循环图标通常用于社交链接、社区邀请、作品集链接和语言选择器。',
+      description:
+        '悬停期间循环播放，在 mouseleave 后播完当前一轮；当用户偏好减少动态效果时保持静止。',
+      reducedMotion: '当用户偏好减少动态效果时，图标在悬停时保持静止。',
+      plays: '悬停期间循环播放',
+    },
+  },
+};
diff --git a/website/src/views/CategoryPage.astro b/website/src/views/CategoryPage.astro
index ba753d9..a84638b 100644
--- a/website/src/views/CategoryPage.astro
+++ b/website/src/views/CategoryPage.astro
@@ -95,7 +95,7 @@ const markdown = locale.prefix ? [] : [{ rel: 'alternate', type: 'text/markdown'
                 </a>
                 <span class="text-subtle"> · {group.length}</span>
                 <p class="mt-1 text-sm leading-relaxed text-muted">
-                  {m.taxonomy.interactions[interaction].description} <span lang={locale.prefix ? 'en' : undefined}>{group.map((icon) => icon.title).join(', ')}</span>.
+                  {m.taxonomy.interactions[interaction].description}{locale.space}<span lang={locale.prefix ? 'en' : undefined}>{group.map((icon) => icon.title).join(', ')}</span>.
                 </p>
               </li>
             ))
diff --git a/website/src/views/InteractionPage.astro b/website/src/views/InteractionPage.astro
index 55154c1..599d0ce 100644
--- a/website/src/views/InteractionPage.astro
+++ b/website/src/views/InteractionPage.astro
@@ -165,7 +165,7 @@ const jsonLd = {
         <p class="mt-4 leading-relaxed text-muted">{info.description}</p>
         <p class="mt-3 leading-relaxed text-muted">
           {info.reducedMotion}
-          {hover && h.hoverNote}{' '}
+          {hover && h.hoverNote}{locale.space}
           {h.handled}
         </p>
         <h3 class="mt-8 font-semibold">{h.whereToUse}</h3>

From 4b6011dad3a4bde1d55c17915ab4f8542e099517 Mon Sep 17 00:00:00 2001
From: Tuan Phung <16448321+tuanphungcz@users.noreply.github.com>
Date: Tue, 13 Oct 2026 21:41:32 +0900
Subject: [PATCH 7/9] Website: suggest languages only on English pages; Korean
 line breaking

---
 website/src/layouts/Layout.astro | 3 ++-
 website/src/styles/global.css    | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/website/src/layouts/Layout.astro b/website/src/layouts/Layout.astro
index 6b45ebc..f7aaefb 100644
--- a/website/src/layouts/Layout.astro
+++ b/website/src/layouts/Layout.astro
@@ -140,7 +140,8 @@ const image = new URL(imagePath, SITE).href;
       <slot />
     </main>
     <Footer locale={locale} alternates={alternates} />
-    {alternates && <LanguageBanner locale={locale} alternates={alternates} />}
+    {/* Suggested only on English pages: a visitor on a translated page chose its language. */}
+    {alternates && !locale.prefix && <LanguageBanner locale={locale} alternates={alternates} />}
     <script>
       import '../scripts/analytics';
       import '../scripts/copy';
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index b27baef..485cd22 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -441,3 +441,9 @@
     animation: none;
   }
 }
+
+/* Korean breaks lines between words, not inside them. */
+:lang(ko) {
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}

From c9c8482aa6392434c4f3d1f4a0c4d579fcfa26a5 Mon Sep 17 00:00:00 2001
From: Tuan Phung <16448321+tuanphungcz@users.noreply.github.com>
Date: Tue, 13 Oct 2026 21:52:53 +0900
Subject: [PATCH 8/9] Website: language switcher in the header

---
 website/src/components/Header.astro           |  6 +-
 website/src/components/LanguageSwitcher.astro | 68 +++++++++++++++++++
 website/src/layouts/Layout.astro              |  2 +-
 3 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 website/src/components/LanguageSwitcher.astro

diff --git a/website/src/components/Header.astro b/website/src/components/Header.astro
index b735878..80e8361 100644
--- a/website/src/components/Header.astro
+++ b/website/src/components/Header.astro
@@ -3,14 +3,17 @@ import Logo from './Logo.astro';
 import ThemeToggle from './ThemeToggle';
 import NavIcon from './NavIcon';
 import MobileMenu from './MobileMenu';
+import LanguageSwitcher from './LanguageSwitcher.astro';
 import { EN, type Locale, localize, t } from '../i18n';
 import { GITHUB, nav } from '../lib/site';
 
 interface Props {
   locale?: Locale;
+  /** hreflang -> path of this page in each language, for the language menu. */
+  alternates?: Record<string, string>;
 }
 
-const { locale = EN } = Astro.props;
+const { locale = EN, alternates } = Astro.props;
 const m = t(locale).common;
 const islands = t(locale).islands;
 const items = nav(locale);
@@ -37,6 +40,7 @@ const path = Astro.url.pathname.replace(/\/$/, '') || '/';
       }
     </nav>
     <div class="ml-auto flex items-center gap-1.5">
+      <LanguageSwitcher locale={locale} alternates={alternates} />
       <NavIcon client:idle href={GITHUB} label="GitHub" />
       <ThemeToggle client:idle strings={islands.themeToggle} />
       <a
diff --git a/website/src/components/LanguageSwitcher.astro b/website/src/components/LanguageSwitcher.astro
new file mode 100644
index 0000000..a03dc43
--- /dev/null
+++ b/website/src/components/LanguageSwitcher.astro
@@ -0,0 +1,68 @@
+---
+// The language menu in the header: the same page in each built language, or that language's home
+// page where the page exists only in English (icon pages). Plain links in a <details>, so it works
+// without JavaScript and crawlers see every language version.
+import { BUILT, type Locale, localize, t } from '../i18n';
+
+interface Props {
+  locale: Locale;
+  /** hreflang -> path of this page in each language. */
+  alternates?: Record<string, string>;
+}
+
+const { locale, alternates } = Astro.props;
+const label = t(locale).common.footer.languages;
+const languages = BUILT.map((l) => ({ locale: l, href: alternates?.[l.hreflang] ?? localize('/', l) }));
+const short = (l: Locale) => l.hreflang.split('-')[0].toUpperCase();
+---
+
+{
+  languages.length > 1 && (
+    <details class="language-switcher relative">
+      <summary
+        class="flex h-9 cursor-pointer list-none items-center gap-1.5 rounded-full px-2.5 text-sm text-muted transition-colors hover:bg-surface-2 hover:text-fg [&::-webkit-details-marker]:hidden"
+        aria-label={`${label}: ${locale.name}`}
+      >
+        <svg viewBox="0 0 24 24" class="size-[18px]" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="9" />
+          <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />
+        </svg>
+        <span class="font-mono text-xs">{short(locale)}</span>
+      </summary>
+      <ul class="absolute right-0 z-50 mt-2 max-h-[70vh] w-52 overflow-y-auto rounded-2xl border border-line bg-bg p-1.5 shadow-xl">
+        {languages.map(({ locale: l, href }) => (
+          <li>
+            <a
+              href={href}
+              hreflang={l.hreflang}
+              lang={l.hreflang}
+              aria-current={l === locale ? 'true' : undefined}
+              data-track="language-switch"
+              data-track-lang={l.hreflang}
+              class="flex items-center justify-between gap-3 rounded-xl px-3 py-2 text-sm text-muted transition-colors hover:bg-surface-2 hover:text-fg aria-[current=true]:bg-surface-2 aria-[current=true]:font-medium aria-[current=true]:text-fg"
+            >
+              {l.name}
+              <span class="font-mono text-[11px] text-subtle">{short(l)}</span>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </details>
+  )
+}
+
+<script>
+  // Close the menu on a click outside it or on Escape.
+  document.addEventListener('click', (event) => {
+    for (const menu of document.querySelectorAll<HTMLDetailsElement>('.language-switcher[open]')) {
+      if (!menu.contains(event.target as Node)) menu.open = false;
+    }
+  });
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape') return;
+    for (const menu of document.querySelectorAll<HTMLDetailsElement>('.language-switcher[open]')) {
+      menu.open = false;
+      menu.querySelector('summary')?.focus();
+    }
+  });
+</script>
diff --git a/website/src/layouts/Layout.astro b/website/src/layouts/Layout.astro
index f7aaefb..69b737c 100644
--- a/website/src/layouts/Layout.astro
+++ b/website/src/layouts/Layout.astro
@@ -135,7 +135,7 @@ const image = new URL(imagePath, SITE).href;
       class="sr-only z-50 rounded-lg bg-fg px-4 py-2 text-bg focus:not-sr-only focus:fixed focus:top-3 focus:left-3"
       >{t(locale).common.skipToContent}</a
     >
-    <Header locale={locale} />
+    <Header locale={locale} alternates={alternates} />
     <main id="main">
       <slot />
     </main>

From 2c2da0d279e082d64467ab36028065cf87036ffa Mon Sep 17 00:00:00 2001
From: Tuan Phung <16448321+tuanphungcz@users.noreply.github.com>
Date: Tue, 13 Oct 2026 21:56:28 +0900
Subject: [PATCH 9/9] Website: flags in the language switcher (flag-icons, MIT)

---
 website/public/flags/LICENSE                  | 21 +++++++++
 website/public/flags/cs.svg                   |  5 +++
 website/public/flags/de.svg                   |  5 +++
 website/public/flags/en.svg                   |  9 ++++
 website/public/flags/es.svg                   |  1 +
 website/public/flags/fr.svg                   |  5 +++
 website/public/flags/id.svg                   |  4 ++
 website/public/flags/ja.svg                   | 11 +++++
 website/public/flags/ko.svg                   | 24 ++++++++++
 website/public/flags/pt-br.svg                | 45 +++++++++++++++++++
 website/public/flags/ru.svg                   |  5 +++
 website/public/flags/tr.svg                   |  8 ++++
 website/public/flags/vi.svg                   | 11 +++++
 website/public/flags/zh.svg                   | 11 +++++
 website/src/components/LanguageSwitcher.astro | 19 ++++----
 15 files changed, 176 insertions(+), 8 deletions(-)
 create mode 100644 website/public/flags/LICENSE
 create mode 100644 website/public/flags/cs.svg
 create mode 100644 website/public/flags/de.svg
 create mode 100644 website/public/flags/en.svg
 create mode 100644 website/public/flags/es.svg
 create mode 100644 website/public/flags/fr.svg
 create mode 100644 website/public/flags/id.svg
 create mode 100644 website/public/flags/ja.svg
 create mode 100644 website/public/flags/ko.svg
 create mode 100644 website/public/flags/pt-br.svg
 create mode 100644 website/public/flags/ru.svg
 create mode 100644 website/public/flags/tr.svg
 create mode 100644 website/public/flags/vi.svg
 create mode 100644 website/public/flags/zh.svg

diff --git a/website/public/flags/LICENSE b/website/public/flags/LICENSE
new file mode 100644
index 0000000..ee959dc
--- /dev/null
+++ b/website/public/flags/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Panayiotis Lipiridis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/website/public/flags/cs.svg b/website/public/flags/cs.svg
new file mode 100644
index 0000000..7913de3
--- /dev/null
+++ b/website/public/flags/cs.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-cz" viewBox="0 0 640 480">
+  <path fill="#fff" d="M0 0h640v240H0z"/>
+  <path fill="#d7141a" d="M0 240h640v240H0z"/>
+  <path fill="#11457e" d="M360 240 0 0v480z"/>
+</svg>
diff --git a/website/public/flags/de.svg b/website/public/flags/de.svg
new file mode 100644
index 0000000..71aa2d2
--- /dev/null
+++ b/website/public/flags/de.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-de" viewBox="0 0 640 480">
+  <path fill="#fc0" d="M0 320h640v160H0z"/>
+  <path fill="#000001" d="M0 0h640v160H0z"/>
+  <path fill="red" d="M0 160h640v160H0z"/>
+</svg>
diff --git a/website/public/flags/en.svg b/website/public/flags/en.svg
new file mode 100644
index 0000000..9cfd0c9
--- /dev/null
+++ b/website/public/flags/en.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480">
+  <path fill="#bd3d44" d="M0 0h640v480H0"/>
+  <path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/>
+  <path fill="#192f5d" d="M0 0h364.8v258.5H0"/>
+  <marker id="us-a" markerHeight="30" markerWidth="30">
+    <path fill="#fff" d="m14 0 9 27L0 10h28L5 27z"/>
+  </marker>
+  <path fill="none" marker-mid="url(#us-a)" d="m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60z"/>
+</svg>
diff --git a/website/public/flags/es.svg b/website/public/flags/es.svg
new file mode 100644
index 0000000..8136bbd
--- /dev/null
+++ b/website/public/flags/es.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-es" viewBox="0 0 640 480"><path fill="#AA151B" d="M0 0h640v480H0z"/><path fill="#F1BF00" d="M0 120h640v240H0z"/></svg>
diff --git a/website/public/flags/fr.svg b/website/public/flags/fr.svg
new file mode 100644
index 0000000..4110e59
--- /dev/null
+++ b/website/public/flags/fr.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-fr" viewBox="0 0 640 480">
+  <path fill="#fff" d="M0 0h640v480H0z"/>
+  <path fill="#000091" d="M0 0h213.3v480H0z"/>
+  <path fill="#e1000f" d="M426.7 0H640v480H426.7z"/>
+</svg>
diff --git a/website/public/flags/id.svg b/website/public/flags/id.svg
new file mode 100644
index 0000000..3b7c8fc
--- /dev/null
+++ b/website/public/flags/id.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-id" viewBox="0 0 640 480">
+  <path fill="#e70011" d="M0 0h640v240H0Z"/>
+  <path fill="#fff" d="M0 240h640v240H0Z"/>
+</svg>
diff --git a/website/public/flags/ja.svg b/website/public/flags/ja.svg
new file mode 100644
index 0000000..cc1c181
--- /dev/null
+++ b/website/public/flags/ja.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-jp" viewBox="0 0 640 480">
+  <defs>
+    <clipPath id="jp-a">
+      <path fill-opacity=".7" d="M-88 32h640v480H-88z"/>
+    </clipPath>
+  </defs>
+  <g fill-rule="evenodd" stroke-width="1pt" clip-path="url(#jp-a)" transform="translate(88 -32)">
+    <path fill="#fff" d="M-128 32h720v480h-720z"/>
+    <circle cx="523.1" cy="344.1" r="194.9" fill="#bc002d" transform="translate(-168.4 8.6)scale(.76554)"/>
+  </g>
+</svg>
diff --git a/website/public/flags/ko.svg b/website/public/flags/ko.svg
new file mode 100644
index 0000000..6947eab
--- /dev/null
+++ b/website/public/flags/ko.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-kr" viewBox="0 0 640 480">
+  <defs>
+    <clipPath id="kr-a">
+      <path fill-opacity=".7" d="M-95.8-.4h682.7v512H-95.8z"/>
+    </clipPath>
+  </defs>
+  <g fill-rule="evenodd" clip-path="url(#kr-a)" transform="translate(89.8 .4)scale(.9375)">
+    <path fill="#fff" d="M-95.8-.4H587v512H-95.8Z"/>
+    <g transform="rotate(-56.3 361.6 -101.3)scale(10.66667)">
+      <g id="kr-c">
+        <path id="kr-b" fill="#000001" d="M-6-26H6v2H-6Zm0 3H6v2H-6Zm0 3H6v2H-6Z"/>
+        <use xlink:href="#kr-b" width="100%" height="100%" y="44"/>
+      </g>
+      <path stroke="#fff" d="M0 17v10"/>
+      <path fill="#cd2e3a" d="M0-12a12 12 0 0 1 0 24Z"/>
+      <path fill="#0047a0" d="M0-12a12 12 0 0 0 0 24A6 6 0 0 0 0 0Z"/>
+      <circle cy="-6" r="6" fill="#cd2e3a"/>
+    </g>
+    <g transform="rotate(-123.7 191.2 62.2)scale(10.66667)">
+      <use xlink:href="#kr-c" width="100%" height="100%"/>
+      <path stroke="#fff" d="M0-23.5v3M0 17v3.5m0 3v3"/>
+    </g>
+  </g>
+</svg>
diff --git a/website/public/flags/pt-br.svg b/website/public/flags/pt-br.svg
new file mode 100644
index 0000000..719a763
--- /dev/null
+++ b/website/public/flags/pt-br.svg
@@ -0,0 +1,45 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-br" viewBox="0 0 640 480">
+  <g stroke-width="1pt">
+    <path fill="#229e45" fill-rule="evenodd" d="M0 0h640v480H0z"/>
+    <path fill="#f8e509" fill-rule="evenodd" d="m321.4 436 301.5-195.7L319.6 44 17.1 240.7z"/>
+    <path fill="#2b49a3" fill-rule="evenodd" d="M452.8 240c0 70.3-57.1 127.3-127.6 127.3A127.4 127.4 0 1 1 452.8 240"/>
+    <path fill="#ffffef" fill-rule="evenodd" d="m283.3 316.3-4-2.3-4 2 .9-4.5-3.2-3.4 4.5-.5 2.2-4 1.9 4.2 4.4.8-3.3 3m86 26.3-3.9-2.3-4 2 .8-4.5-3.1-3.3 4.5-.5 2.1-4.1 2 4.2 4.4.8-3.4 3.1m-36.2-30-3.4-2-3.5 1.8.8-3.9-2.8-2.9 4-.4 1.8-3.6 1.6 3.7 3.9.7-3 2.7m87-8.5-3.4-2-3.5 1.8.8-3.9-2.7-2.8 3.9-.4 1.8-3.5 1.6 3.6 3.8.7-2.9 2.6m-87.3-22-4-2.2-4 2 .8-4.6-3.1-3.3 4.5-.5 2.1-4.1 2 4.2 4.4.8-3.4 3.2m-104.6-35-4-2.2-4 2 1-4.6-3.3-3.3 4.6-.5 2-4.1 2 4.2 4.4.8-3.3 3.1m13.3 57.2-4-2.3-4 2 .9-4.5-3.2-3.3 4.5-.6 2.1-4 2 4.2 4.4.8-3.3 3.1m132-67.3-3.6-2-3.6 1.8.8-4-2.8-3 4-.5 1.9-3.6 1.7 3.8 4 .7-3 2.7m-6.7 38.3-2.7-1.6-2.9 1.4.6-3.2-2.2-2.3 3.2-.4 1.5-2.8 1.3 3 3 .5-2.2 2.2m-142.2 50.4-2.7-1.5-2.7 1.3.6-3-2.1-2.2 3-.4 1.4-2.7 1.3 2.8 3 .6-2.3 2M419 299.8l-2.2-1.1-2.2 1 .5-2.3-1.7-1.6 2.4-.3 1.2-2 1 2 2.5.5-1.9 1.5"/>
+    <path fill="#ffffef" fill-rule="evenodd" d="m219.3 287.6-2.7-1.5-2.7 1.3.6-3-2.1-2.2 3-.4 1.4-2.7 1.3 2.8 3 .6-2.3 2"/>
+    <path fill="#ffffef" fill-rule="evenodd" d="m219.3 287.6-2.7-1.5-2.7 1.3.6-3-2.1-2.2 3-.4 1.4-2.7 1.3 2.8 3 .6-2.3 2m42.3 3-2.6-1.4-2.7 1.3.6-3-2.1-2.2 3-.4 1.4-2.7 1.3 2.8 3 .5-2.3 2.1m-4.8 17-2.6-1.5-2.7 1.4.6-3-2.1-2.3 3-.4 1.4-2.7 1.3 2.8 3 .6-2.3 2m87.4-22.2-2.6-1.6-2.8 1.4.6-3-2-2.3 3-.3 1.4-2.7 1.2 2.8 3 .5-2.2 2.1m-25.1 3-2.7-1.5-2.7 1.4.6-3-2-2.3 3-.3 1.4-2.8 1.2 2.9 3 .5-2.2 2.1m-68.8-5.8-1.7-1-1.7.8.4-1.9-1.3-1.4 1.9-.2.8-1.7.8 1.8 1.9.3-1.4 1.3m167.8 45.4-2.6-1.5-2.7 1.4.6-3-2.1-2.3 3-.4 1.4-2.7 1.3 2.8 3 .6-2.3 2m-20.8 6-2.2-1.4-2.3 1.2.5-2.6-1.7-1.8 2.5-.3 1.2-2.3 1 2.4 2.5.4-1.9 1.8m10.4 2.3-2-1.2-2.1 1 .4-2.3-1.6-1.7 2.3-.3 1.1-2 1 2 2.3.5-1.7 1.6m29.1-22.8-2-1-2 1 .5-2.3-1.6-1.7 2.3-.3 1-2 1 2.1 2.1.4-1.6 1.6m-38.8 41.8-2.5-1.4-2.7 1.2.6-2.8-2-2 3-.3 1.3-2.5 1.2 2.6 3 .5-2.3 1.9m.6 14.2-2.4-1.4-2.4 1.3.6-2.8-1.9-2 2.7-.4 1.2-2.5 1.1 2.6 2.7.5-2 2m-19-23.1-1.9-1.2-2 1 .4-2.2-1.5-1.7 2.2-.2 1-2 1 2 2.2.4-1.6 1.6m-17.8 2.3-2-1.2-2 1 .5-2.2-1.6-1.7 2.3-.2 1-2 1 2 2.1.4-1.6 1.6m-30.4-24.6-2-1.1-2 1 .5-2.3-1.6-1.6 2.2-.3 1-2 1 2 2.2.5-1.6 1.5m3.7 57-1.6-.9-1.8.9.4-2-1.3-1.4 1.9-.2.9-1.7.8 1.8 1.9.3-1.4 1.3m-46.2-86.6-4-2.3-4 2 .9-4.5-3.2-3.3 4.5-.6 2.2-4 1.9 4.2 4.4.8-3.3 3.1"/>
+    <path fill="#fff" fill-rule="evenodd" d="M444.4 285.8a125 125 0 0 0 5.8-19.8c-67.8-59.5-143.3-90-238.7-83.7a125 125 0 0 0-8.5 20.9c113-10.8 196 39.2 241.4 82.6"/>
+    <path fill="#309e3a" d="m414 252.4 2.3 1.3a3 3 0 0 0-.3 2.2 3 3 0 0 0 1.4 1.7q1 .8 2 .7.9 0 1.3-.7l.2-.9-.5-1-1.5-1.8a8 8 0 0 1-1.8-3 4 4 0 0 1 2-4.4 4 4 0 0 1 2.3-.2 7 7 0 0 1 2.6 1.2q2.1 1.5 2.6 3.2a4 4 0 0 1-.6 3.3l-2.4-1.5q.5-1 .2-1.7-.2-.8-1.2-1.4a3 3 0 0 0-1.8-.7 1 1 0 0 0-.9.5q-.3.4-.1 1 .2.8 1.6 2.2t2 2.5a4 4 0 0 1-.3 4.2 4 4 0 0 1-1.9 1.5 4 4 0 0 1-2.4.3q-1.3-.3-2.8-1.3-2.2-1.5-2.7-3.3a5 5 0 0 1 .6-4zm-11.6-7.6 2.5 1.3a3 3 0 0 0-.2 2.2 3 3 0 0 0 1.4 1.6q1.1.8 2 .6.9 0 1.3-.8l.2-.8q0-.5-.5-1l-1.6-1.8q-1.7-1.6-2-2.8a4 4 0 0 1 .4-3.1 4 4 0 0 1 1.6-1.4 4 4 0 0 1 2.2-.3 7 7 0 0 1 2.6 1q2.3 1.5 2.7 3.1a4 4 0 0 1-.4 3.4l-2.5-1.4q.5-1 .2-1.7-.4-1-1.3-1.4a3 3 0 0 0-1.9-.6 1 1 0 0 0-.8.5q-.3.4-.1 1 .3.8 1.7 2.2 1.5 1.5 2 2.4a4 4 0 0 1 0 4.2 4 4 0 0 1-1.8 1.6 4 4 0 0 1-2.4.3 8 8 0 0 1-2.9-1.1 6 6 0 0 1-2.8-3.2 5 5 0 0 1 .4-4m-14.2-3.8 7.3-12 8.8 5.5-1.2 2-6.4-4-1.6 2.7 6 3.7-1.3 2-6-3.7-2 3.3 6.7 4-1.2 2zm-20.7-17 1.1-2 5.4 2.7-2.5 5q-1.2.3-3 .2a9 9 0 0 1-3.3-1 8 8 0 0 1-3-2.6 6 6 0 0 1-1-3.5 9 9 0 0 1 1-3.7 8 8 0 0 1 2.6-3 6 6 0 0 1 3.6-1.1q1.4 0 3.2 1 2.4 1.1 3.1 2.8a5 5 0 0 1 .3 3.5l-2.7-.8a3 3 0 0 0-.2-2q-.4-.9-1.6-1.4a4 4 0 0 0-3.1-.3q-1.5.5-2.6 2.6t-.7 3.8a4 4 0 0 0 2 2.4q.8.5 1.7.5h1.8l.8-1.6zm-90.2-22.3 2-14 4.2.7 1.1 9.8 3.9-9 4.2.6-2 13.8-2.7-.4 1.7-10.9-4.4 10.5-2.7-.4-1.1-11.3-1.6 11zm-14.1-1.7 1.3-14 10.3 1-.2 2.4-7.5-.7-.3 3 7 .7-.3 2.4-7-.7-.3 3.8 7.8.7-.2 2.4z"/>
+    <g stroke-opacity=".5">
+      <path fill="#309e3a" d="M216.5 191.3q0-2.2.7-3.6a7 7 0 0 1 1.4-1.9 5 5 0 0 1 1.8-1.2q1.5-.5 3-.5 3.1.1 5 2a7 7 0 0 1 1.6 5.5q0 3.3-2 5.3a7 7 0 0 1-5 1.7 7 7 0 0 1-4.8-2 7 7 0 0 1-1.7-5.3"/>
+      <path fill="#f7ffff" d="M219.4 191.3q0 2.3 1 3.6t2.8 1.3a4 4 0 0 0 2.8-1.1q1-1.2 1.1-3.7.1-2.4-1-3.6a4 4 0 0 0-2.7-1.3 4 4 0 0 0-2.8 1.2q-1.1 1.2-1.2 3.6"/>
+    </g>
+    <g stroke-opacity=".5">
+      <path fill="#309e3a" d="m233 198.5.2-14h6q2.2 0 3.2.5 1 .3 1.6 1.3c.6 1 .6 1.4.6 2.3a4 4 0 0 1-1 2.6 5 5 0 0 1-2.7 1.2l1.5 1.2q.6.6 1.5 2.3l1.7 2.8h-3.4l-2-3.2-1.4-2-.9-.6-1.4-.2h-.6v5.8z"/>
+      <path fill="#fff" d="M236 190.5h2q2.1 0 2.6-.2.5-.1.8-.5.4-.6.3-1 0-.9-.4-1.2-.3-.4-1-.6h-2l-2.3-.1z"/>
+    </g>
+    <g stroke-opacity=".5">
+      <path fill="#309e3a" d="m249 185.2 5.2.3q1.7 0 2.6.3a5 5 0 0 1 2 1.4 6 6 0 0 1 1.2 2.4q.4 1.4.3 3.3a9 9 0 0 1-.5 3q-.6 1.5-1.7 2.4a5 5 0 0 1-2 1q-1 .3-2.5.2l-5.3-.3z"/>
+      <path fill="#fff" d="m251.7 187.7-.5 9.3h3.8q.8 0 1.2-.5.5-.4.8-1.3t.4-2.6l-.1-2.5a3 3 0 0 0-.8-1.4l-1.2-.7-2.3-.3z"/>
+    </g>
+    <g stroke-opacity=".5">
+      <path fill="#309e3a" d="m317.6 210.2 3.3-13.6 4.4 1 3.2 1q1.1.6 1.6 1.9t.2 2.8q-.3 1.2-1 2a4 4 0 0 1-3 1.4q-1 0-3-.5l-1.7-.5-1.2 5.2z"/>
+      <path fill="#fff" d="m323 199.6-.8 3.8 1.5.4q1.6.4 2.2.3a2 2 0 0 0 1.6-1.5q0-.7-.2-1.3a2 2 0 0 0-1-.9l-1.9-.5-1.3-.3z"/>
+    </g>
+    <g stroke-opacity=".5">
+      <path fill="#309e3a" d="m330.6 214.1 4.7-13.2 5.5 2q2.2.8 3 1.4.8.7 1 1.8c.2 1.1.2 1.5 0 2.3q-.6 1.5-1.8 2.2-1.2.6-3 .3.6.7 1 1.6l.8 2.7.6 3.1-3.1-1.1-1-3.6-.7-2.4-.6-.8q-.3-.4-1.3-.7l-.5-.2-2 5.6z"/>
+      <path fill="#fff" d="m336 207.4 1.9.7q2 .7 2.5.7t.9-.3q.5-.3.6-.9.3-.6 0-1.2l-.8-.9-2-.7-2-.7-1.2 3.3z"/>
+    </g>
+    <g stroke-opacity=".5">
+      <path fill="#309e3a" d="M347 213.6a9 9 0 0 1 1.7-3.2l1.8-1.5 2-.7q1.5-.1 3.1.4a7 7 0 0 1 4.2 3.3q1.2 2.4.2 5.7a7 7 0 0 1-3.4 4.5q-2.3 1.3-5.2.4a7 7 0 0 1-4.2-3.3 7 7 0 0 1-.2-5.6"/>
+      <path fill="#fff" d="M349.8 214.4q-.7 2.3 0 3.8c.7 1.5 1.2 1.6 2.3 2q1.5.5 3-.4 1.4-.8 2.1-3.2.8-2.2 0-3.7a4 4 0 0 0-2.2-2 4 4 0 0 0-3 .3q-1.5.8-2.2 3.2"/>
+    </g>
+    <g stroke-opacity=".5">
+      <path fill="#309e3a" d="m374.3 233.1 6.4-12.4 5.3 2.7a10 10 0 0 1 2.7 1.9q.8.7.8 1.9c0 1.2 0 1.5-.4 2.2a4 4 0 0 1-2 2q-1.5.4-3.1-.2.6 1 .8 1.7.3.9.4 2.8l.2 3.2-3-1.5-.4-3.7-.3-2.5-.5-1-1.2-.7-.5-.3-2.7 5.2z"/>
+      <path fill="#fff" d="m380.5 227.2 1.9 1q1.8 1 2.3 1t1-.2q.4-.2.7-.8t.2-1.2l-.7-1-1.8-1-2-1z"/>
+    </g>
+    <g stroke-opacity=".5">
+      <path fill="#309e3a" d="M426.1 258.7a9 9 0 0 1 2.5-2.6 7 7 0 0 1 2.2-.9 6 6 0 0 1 2.2 0q1.5.3 2.8 1.2a7 7 0 0 1 3 4.4q.4 2.6-1.4 5.5a7 7 0 0 1-4.5 3.3 7 7 0 0 1-5.2-1.1 7 7 0 0 1-3-4.4q-.4-2.7 1.4-5.4"/>
+      <path fill="#fff" d="M428.6 260.3q-1.4 2-1.1 3.6a4 4 0 0 0 1.6 2.5q1.5 1 3 .6t2.9-2.4q1.4-2.1 1.1-3.6t-1.6-2.6c-1.4-1.1-2-.8-3-.5q-1.5.3-3 2.4z"/>
+    </g>
+    <path fill="#309e3a" d="m301.8 204.5 2.3-9.8 7.2 1.7-.3 1.6-5.3-1.2-.5 2.2 4.9 1.1-.4 1.7-4.9-1.2-.6 2.7 5.5 1.3-.4 1.6z"/>
+  </g>
+</svg>
diff --git a/website/public/flags/ru.svg b/website/public/flags/ru.svg
new file mode 100644
index 0000000..cf24301
--- /dev/null
+++ b/website/public/flags/ru.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ru" viewBox="0 0 640 480">
+  <path fill="#fff" d="M0 0h640v160H0z"/>
+  <path fill="#0039a6" d="M0 160h640v160H0z"/>
+  <path fill="#d52b1e" d="M0 320h640v160H0z"/>
+</svg>
diff --git a/website/public/flags/tr.svg b/website/public/flags/tr.svg
new file mode 100644
index 0000000..b96da21
--- /dev/null
+++ b/website/public/flags/tr.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-tr" viewBox="0 0 640 480">
+  <g fill-rule="evenodd">
+    <path fill="#e30a17" d="M0 0h640v480H0z"/>
+    <path fill="#fff" d="M407 247.5c0 66.2-54.6 119.9-122 119.9s-122-53.7-122-120 54.6-119.8 122-119.8 122 53.7 122 119.9"/>
+    <path fill="#e30a17" d="M413 247.5c0 53-43.6 95.9-97.5 95.9s-97.6-43-97.6-96 43.7-95.8 97.6-95.8 97.6 42.9 97.6 95.9z"/>
+    <path fill="#fff" d="m430.7 191.5-1 44.3-41.3 11.2 40.8 14.5-1 40.7 26.5-31.8 40.2 14-23.2-34.1 28.3-33.9-43.5 12-25.8-37z"/>
+  </g>
+</svg>
diff --git a/website/public/flags/vi.svg b/website/public/flags/vi.svg
new file mode 100644
index 0000000..7e4bac8
--- /dev/null
+++ b/website/public/flags/vi.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-vn" viewBox="0 0 640 480">
+  <defs>
+    <clipPath id="vn-a">
+      <path fill-opacity=".7" d="M-85.3 0h682.6v512H-85.3z"/>
+    </clipPath>
+  </defs>
+  <g fill-rule="evenodd" clip-path="url(#vn-a)" transform="translate(80)scale(.9375)">
+    <path fill="#da251d" d="M-128 0h768v512h-768z"/>
+    <path fill="#ff0" d="M349.6 381 260 314.3l-89 67.3L204 272l-89-67.7 110.1-1 34.2-109.4L294 203l110.1.1-88.5 68.4 33.9 109.6z"/>
+  </g>
+</svg>
diff --git a/website/public/flags/zh.svg b/website/public/flags/zh.svg
new file mode 100644
index 0000000..10d3489
--- /dev/null
+++ b/website/public/flags/zh.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-cn" viewBox="0 0 640 480">
+  <defs>
+    <path id="cn-a" fill="#ff0" d="M-.6.8 0-1 .6.8-1-.3h2z"/>
+  </defs>
+  <path fill="#ee1c25" d="M0 0h640v480H0z"/>
+  <use xlink:href="#cn-a" width="30" height="20" transform="matrix(71.9991 0 0 72 120 120)"/>
+  <use xlink:href="#cn-a" width="30" height="20" transform="matrix(-12.33562 -20.5871 20.58684 -12.33577 240.3 48)"/>
+  <use xlink:href="#cn-a" width="30" height="20" transform="matrix(-3.38573 -23.75998 23.75968 -3.38578 288 95.8)"/>
+  <use xlink:href="#cn-a" width="30" height="20" transform="matrix(6.5991 -23.0749 23.0746 6.59919 288 168)"/>
+  <use xlink:href="#cn-a" width="30" height="20" transform="matrix(14.9991 -18.73557 18.73533 14.99929 240 216)"/>
+</svg>
diff --git a/website/src/components/LanguageSwitcher.astro b/website/src/components/LanguageSwitcher.astro
index a03dc43..6d6ece9 100644
--- a/website/src/components/LanguageSwitcher.astro
+++ b/website/src/components/LanguageSwitcher.astro
@@ -1,5 +1,5 @@
 ---
-// The language menu in the header: the same page in each built language, or that language's home
+// The language menu in the header, with a flag per language: the same page in each built language, or that language's home
 // page where the page exists only in English (icon pages). Plain links in a <details>, so it works
 // without JavaScript and crawlers see every language version.
 import { BUILT, type Locale, localize, t } from '../i18n';
@@ -14,22 +14,22 @@ const { locale, alternates } = Astro.props;
 const label = t(locale).common.footer.languages;
 const languages = BUILT.map((l) => ({ locale: l, href: alternates?.[l.hreflang] ?? localize('/', l) }));
 const short = (l: Locale) => l.hreflang.split('-')[0].toUpperCase();
+/** The flag shown with a language (public/flags, from flag-icons): en -> US, pt-br -> BR, zh -> CN. */
+const flag = (l: Locale) => `/flags/${l.code}.svg`;
+const flagClass = 'h-[15px] w-5 shrink-0 rounded-[3px] object-cover ring-1 ring-line';
 ---
 
 {
   languages.length > 1 && (
     <details class="language-switcher relative">
       <summary
-        class="flex h-9 cursor-pointer list-none items-center gap-1.5 rounded-full px-2.5 text-sm text-muted transition-colors hover:bg-surface-2 hover:text-fg [&::-webkit-details-marker]:hidden"
+        class="flex h-9 cursor-pointer list-none items-center gap-2 rounded-full px-2.5 text-sm text-muted transition-colors hover:bg-surface-2 hover:text-fg [&::-webkit-details-marker]:hidden"
         aria-label={`${label}: ${locale.name}`}
       >
-        <svg viewBox="0 0 24 24" class="size-[18px]" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <circle cx="12" cy="12" r="9" />
-          <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />
-        </svg>
+        <img src={flag(locale)} alt="" width="20" height="15" class={flagClass} />
         <span class="font-mono text-xs">{short(locale)}</span>
       </summary>
-      <ul class="absolute right-0 z-50 mt-2 max-h-[70vh] w-52 overflow-y-auto rounded-2xl border border-line bg-bg p-1.5 shadow-xl">
+      <ul class="absolute right-0 z-50 mt-2 max-h-[70vh] w-60 overflow-y-auto rounded-2xl border border-line bg-bg p-1.5 shadow-xl">
         {languages.map(({ locale: l, href }) => (
           <li>
             <a
@@ -41,7 +41,10 @@ const short = (l: Locale) => l.hreflang.split('-')[0].toUpperCase();
               data-track-lang={l.hreflang}
               class="flex items-center justify-between gap-3 rounded-xl px-3 py-2 text-sm text-muted transition-colors hover:bg-surface-2 hover:text-fg aria-[current=true]:bg-surface-2 aria-[current=true]:font-medium aria-[current=true]:text-fg"
             >
-              {l.name}
+              <span class="flex items-center gap-2.5">
+                <img src={flag(l)} alt="" width="20" height="15" loading="lazy" class={flagClass} />
+                {l.name}
+              </span>
               <span class="font-mono text-[11px] text-subtle">{short(l)}</span>
             </a>
           </li>