diff --git a/.gitignore b/.gitignore
index 9aa2aebd2e..0281bb3ad3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,6 +41,7 @@ test-results/
 shared/types/lexicons
 file-tree-sprite.svg
 public/blog/avatar
+public/noodle-avatar
 
 **/__screenshots__/**
 
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 179e9b1d64..d493ff2cd2 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -87,6 +87,10 @@ const footerSections = computed<Array<{ label: string; links: FooterLink[] }>>((
         name: t('pds.title'),
         href: '/pds',
       },
+      {
+        name: t('noodles.title'),
+        href: '/noodles',
+      },
       {
         name: t('footer.docs'),
         href: NPMX_DOCS_SITE,
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index e90464ca5b..888e80a1e2 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -100,6 +100,14 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         external: false,
         iconClass: 'i-lucide:palette',
       },
+      {
+        name: 'Noodles',
+        label: $t('noodles.title'),
+        to: { name: 'noodles' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-lucide:sparkles',
+      },
     ],
   },
   {
diff --git a/app/components/Landing/IntroHeader.vue b/app/components/Landing/IntroHeader.vue
index ce2f7919a5..f5616976be 100644
--- a/app/components/Landing/IntroHeader.vue
+++ b/app/components/Landing/IntroHeader.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ACTIVE_NOODLES, PERMANENT_NOODLES, type Noodle } from '../Noodle'
+import { NOODLES, type Noodle } from '../Noodle'
 
 const { env } = useAppConfig().buildInfo
 
-const activeNoodlesData = ACTIVE_NOODLES.map(noodle => ({
+const noodlesData = NOODLES.map(noodle => ({
   key: noodle.key,
   date: noodle.date,
   dateTo: noodle.dateTo,
@@ -11,50 +11,21 @@ const activeNoodlesData = ACTIVE_NOODLES.map(noodle => ({
   tagline: noodle.tagline,
 }))
 
-const permanentNoodlesData = PERMANENT_NOODLES.map(noodle => ({
-  key: noodle.key,
-  tagline: noodle.tagline,
-}))
-
 onPrehydrate(el => {
   const tagline = el.querySelector<HTMLElement>('#intro-header-tagline')
   const defaultLogo = el.querySelector<HTMLElement>('#intro-header-noodle-default')
 
   if (!tagline || !defaultLogo) return
 
-  let permanentNoodles
-  try {
-    permanentNoodles = JSON.parse(el.dataset.permanentNoodles as string) as Noodle[]
-  } catch {
-    return
-  }
-  const activePermanentNoodle = permanentNoodles?.find(noodle =>
-    new URLSearchParams(window.location.search).has(noodle.key),
-  )
-
-  if (activePermanentNoodle) {
-    const permanentNoodleLogo = el.querySelector<HTMLElement>(
-      `#intro-header-noodle-${activePermanentNoodle.key}`,
-    )
-
-    if (!permanentNoodleLogo) return
-
-    permanentNoodleLogo.style.display = 'block'
-    defaultLogo.style.display = 'none'
-    if (activePermanentNoodle.tagline === false) {
-      tagline.style.display = 'none'
-    }
-    return
-  }
-
-  let activeNoodles
+  let noodles: Noodle[]
   try {
-    activeNoodles = JSON.parse(el.dataset.activeNoodles as string) as Noodle[]
+    noodles = JSON.parse(el.dataset.noodles as string) as Noodle[]
   } catch {
     return
   }
 
-  const currentActiveNoodles = activeNoodles.filter(noodle => {
+  // A noodle is active iff today falls inside its date window.
+  const currentNoodles = noodles.filter(noodle => {
     const todayDate = new Date()
     const todayDateRaw = new Intl.DateTimeFormat('en-US', {
       timeZone: noodle.timezone === 'auto' ? undefined : noodle.timezone,
@@ -63,7 +34,7 @@ onPrehydrate(el => {
       year: 'numeric',
     }).format(todayDate)
 
-    const noodleDateFrom = new Date(noodle.date!)
+    const noodleDateFrom = new Date(noodle.date)
     if (!noodle.dateTo) {
       const noodleDateFromRaw = new Intl.DateTimeFormat('en-US', {
         timeZone: noodle.timezone === 'auto' ? undefined : noodle.timezone,
@@ -73,20 +44,18 @@ onPrehydrate(el => {
       }).format(noodleDateFrom)
       return todayDateRaw === noodleDateFromRaw
     }
-    const noodleDateTo = new Date(noodle.dateTo!)
+    const noodleDateTo = new Date(noodle.dateTo)
     return todayDate >= noodleDateFrom && todayDate <= noodleDateTo
   })
 
-  if (!currentActiveNoodles.length) return
-
-  const roll = Math.floor(Math.random() * currentActiveNoodles.length)
-  const selectedNoodle = currentActiveNoodles[roll]
+  if (!currentNoodles.length) return
 
+  const roll = Math.floor(Math.random() * currentNoodles.length)
+  const selectedNoodle = currentNoodles[roll]
   if (!selectedNoodle) return
 
   const noodleLogo = el.querySelector<HTMLElement>(`#intro-header-noodle-${selectedNoodle.key}`)
-
-  if (!defaultLogo || !noodleLogo || !tagline) return
+  if (!noodleLogo) return
 
   defaultLogo.style.display = 'none'
   noodleLogo.style.display = 'block'
@@ -97,10 +66,7 @@ onPrehydrate(el => {
 </script>
 
 <template>
-  <div
-    :data-active-noodles="JSON.stringify(activeNoodlesData)"
-    :data-permanent-noodles="JSON.stringify(permanentNoodlesData)"
-  >
+  <div :data-noodles="JSON.stringify(noodlesData)">
     <h1 class="sr-only">
       {{ $t('alt_logo') }}
     </h1>
@@ -118,15 +84,7 @@ onPrehydrate(el => {
       </span>
     </div>
     <component
-      v-for="noodle in PERMANENT_NOODLES"
-      :key="noodle.key"
-      :id="`intro-header-noodle-${noodle.key}`"
-      class="hidden"
-      aria-hidden="true"
-      :is="noodle.logo"
-    />
-    <component
-      v-for="noodle in ACTIVE_NOODLES"
+      v-for="noodle in NOODLES"
       :key="noodle.key"
       :id="`intro-header-noodle-${noodle.key}`"
       class="hidden"
diff --git a/app/components/Noodle/Artemis/Logo.vue b/app/components/Noodle/Artemis/Logo.vue
new file mode 100644
index 0000000000..853b13e531
--- /dev/null
+++ b/app/components/Noodle/Artemis/Logo.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="relative w-80 sm:w-100 max-w-full">
+    <ColorSchemeImg
+      width="400"
+      class="motion-safe:animate-fade-in motion-safe:animate-scale-in relative z-10 w-full"
+      dark-src="/extra/npmx-dark-artemis.svg"
+      light-src="/extra/npmx-light-artemis.svg"
+      :alt="$t('alt_logo')"
+    />
+    <ColorSchemeImg
+      width="1440"
+      height="455"
+      class="absolute -bottom-4 inset-is-0 w-full h-auto mix-blend-lighten light:mix-blend-darken motion-safe:animate-fade-in pointer-events-none select-none"
+      dark-src="/extra/moon-dark.png"
+      light-src="/extra/moon-light.png"
+      alt=""
+    />
+  </div>
+</template>
diff --git a/app/components/Noodle/Kawaii/Logo.vue b/app/components/Noodle/Kawaii/Logo.vue
index 861ba291cb..f63b75ee07 100644
--- a/app/components/Noodle/Kawaii/Logo.vue
+++ b/app/components/Noodle/Kawaii/Logo.vue
@@ -1,7 +1,7 @@
 <template>
   <img
     width="400"
-    class="mb-8 motion-safe:animate-fade-in motion-safe:animate-scale-in motion-safe:hover:scale-105 motion-safe:transition w-80 sm:w-100"
+    class="motion-safe:animate-fade-in motion-safe:animate-scale-in w-80 sm:w-100"
     src="/extra/npmx-cute.svg"
     :alt="$t('alt_logo_kawaii')"
   />
diff --git a/app/components/Noodle/KawaiiPride/Logo.vue b/app/components/Noodle/KawaiiPride/Logo.vue
new file mode 100644
index 0000000000..30c3363220
--- /dev/null
+++ b/app/components/Noodle/KawaiiPride/Logo.vue
@@ -0,0 +1,8 @@
+<template>
+  <img
+    width="400"
+    class="motion-safe:animate-fade-in motion-safe:animate-scale-in w-80 sm:w-100"
+    src="/extra/npmx-cute-transgender.svg"
+    :alt="$t('alt_logo_kawaii')"
+  />
+</template>
diff --git a/app/components/Noodle/ListCard.vue b/app/components/Noodle/ListCard.vue
new file mode 100644
index 0000000000..65edfdfd07
--- /dev/null
+++ b/app/components/Noodle/ListCard.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { Noodle } from '#shared/schemas/noodle'
+import { resolveNoodleLogo } from '../Noodle'
+
+const props = defineProps<{
+  noodle: Noodle
+}>()
+
+const logo = computed(() => resolveNoodleLogo(props.noodle.key))
+</script>
+
+<template>
+  <NuxtLink
+    :to="`/noodles/${noodle.slug}`"
+    class="group relative block rounded-xl border border-border bg-bg-elevated overflow-hidden transition-colors hover:border-border-hover decoration-none"
+  >
+    <span class="sr-only">{{ noodle.title }}</span>
+    <div class="aspect-[4/3] flex items-center justify-center bg-bg p-8 overflow-hidden">
+      <component :is="logo" v-if="logo" class="max-w-full max-h-full" />
+      <span v-else class="i-lucide:sparkles w-12 h-12 text-fg-subtle" aria-hidden="true" />
+    </div>
+    <div class="absolute top-3 inset-ie-3 text-fg-subtle group-hover:text-fg transition-colors">
+      <span class="i-lucide:arrow-up-right rtl-flip w-4 h-4" aria-hidden="true" />
+    </div>
+    <div
+      class="border-t border-border px-4 py-3 flex items-center gap-2 text-xs text-fg-muted font-mono"
+    >
+      <span class="text-fg-subtle">//</span>
+      <DateTime :datetime="noodle.date" year="numeric" month="2-digit" day="2-digit" />
+      <template v-if="noodle.dateTo">
+        <span class="text-fg-subtle">—</span>
+        <DateTime :datetime="noodle.dateTo" year="numeric" month="2-digit" day="2-digit" />
+      </template>
+    </div>
+  </NuxtLink>
+</template>
diff --git a/app/components/Noodle/Press/Logo.vue b/app/components/Noodle/Press/Logo.vue
index 97a078acaa..3d66a61ed1 100644
--- a/app/components/Noodle/Press/Logo.vue
+++ b/app/components/Noodle/Press/Logo.vue
@@ -1,19 +1,9 @@
 <template>
-  <TooltipApp interactive position="top">
-    <template #content>
-      <p class="text-sm font-medium text-fg mb-1">
-        A free press makes openness possible for everyone.
-        <LinkBase to="https://en.wikipedia.org/wiki/World_Press_Freedom_Day"
-          >Read more about Press Freedom Day</LinkBase
-        >
-      </p>
-    </template>
-    <ColorSchemeImg
-      width="320"
-      class="mb-16 w-80 sm:w-140 max-w-full"
-      dark-src="/extra/npmx-dark-press.png"
-      light-src="/extra/npmx-light-press.png"
-      :alt="$t('alt_logo')"
-    />
-  </TooltipApp>
+  <ColorSchemeImg
+    width="320"
+    class="motion-safe:animate-fade-in motion-safe:animate-scale-in w-80 sm:w-140 max-w-full"
+    dark-src="/extra/npmx-dark-press.png"
+    light-src="/extra/npmx-light-press.png"
+    :alt="$t('alt_logo')"
+  />
 </template>
diff --git a/app/components/Noodle/index.ts b/app/components/Noodle/index.ts
index abeef9a132..505638bd6f 100644
--- a/app/components/Noodle/index.ts
+++ b/app/components/Noodle/index.ts
@@ -1,38 +1,44 @@
+import type { Component } from 'vue'
+import { noodles } from '~/noodles'
+import NoodleArtemisLogo from './Artemis/Logo.vue'
 import NoodleKawaiiLogo from './Kawaii/Logo.vue'
+import NoodleKawaiiPrideLogo from './KawaiiPride/Logo.vue'
 import NoodlePressLogo from './Press/Logo.vue'
 
 export type Noodle = {
-  // Unique identifier for the noodle
   key: string
-  // Timezone for the noodle (default is auto, i.e. user's timezone)
   timezone?: string
-  // Date for the noodle
-  date?: string
-  // `Date to` for the noodle
+  date: string
   dateTo?: string
-  // Logo for the noodle - could be any component. Relative parent - intro section
   logo: Component
-  // Show npmx tagline or not (default is true)
   tagline?: boolean
 }
 
-// Permanent noodles - always shown on specific query param (e.g. ?kawaii)
-export const PERMANENT_NOODLES: Noodle[] = [
-  {
-    key: 'kawaii',
-    logo: NoodleKawaiiLogo,
-    tagline: false,
-  },
-]
+// Keyed by the entry's `key` in app/noodles.ts.
+const NOODLE_LOGOS: Record<string, Component> = {
+  'press': NoodlePressLogo,
+  'kawaii': NoodleKawaiiLogo,
+  'kawaii-pride': NoodleKawaiiPrideLogo,
+  'artemis': NoodleArtemisLogo,
+}
+
+export function resolveNoodleLogo(key: string): Component | undefined {
+  return NOODLE_LOGOS[key]
+}
 
-// Active noodles - shown based on date and timezone
-export const ACTIVE_NOODLES: Noodle[] = [
-  {
-    key: 'press',
-    logo: NoodlePressLogo,
-    date: '2026-05-01',
-    dateTo: '2026-05-04',
-    timezone: 'auto',
-    tagline: false,
-  },
-]
+export const NOODLES: Noodle[] = noodles.map(entry => {
+  const logo = NOODLE_LOGOS[entry.key]
+  if (!logo) {
+    throw new Error(
+      `Missing logo registration for noodle key "${entry.key}". Add it to NOODLE_LOGOS in app/components/Noodle/index.ts.`,
+    )
+  }
+  return {
+    key: entry.key,
+    logo,
+    date: entry.date,
+    dateTo: entry.dateTo,
+    timezone: entry.timezone,
+    tagline: entry.tagline,
+  }
+})
diff --git a/app/components/OgImage/Noodle.takumi.vue b/app/components/OgImage/Noodle.takumi.vue
new file mode 100644
index 0000000000..945d654b10
--- /dev/null
+++ b/app/components/OgImage/Noodle.takumi.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  occasion?: string
+  poster?: string
+  backdrop?: string
+}>()
+
+// Aspect-locked dimensions for the inline npmx wordmark (height × 602/170).
+const BRAND_HEIGHT = 40
+const BRAND_WIDTH = 142
+</script>
+
+<template>
+  <OgLayout>
+    <div class="px-15 py-12 flex items-center gap-12 h-full">
+      <div class="flex-1 flex flex-col justify-center gap-6 min-w-0">
+        <img
+          src="/logo.svg"
+          alt="npmx"
+          :width="BRAND_WIDTH"
+          :height="BRAND_HEIGHT"
+          :style="{ width: `${BRAND_WIDTH}px`, height: `${BRAND_HEIGHT}px` }"
+        />
+        <div
+          class="text-6xl tracking-tighter font-mono leading-tight"
+          :style="{ lineClamp: 2, textOverflow: 'ellipsis' }"
+        >
+          {{ title }}
+        </div>
+        <div
+          v-if="occasion"
+          class="text-2xl opacity-70 leading-snug"
+          :style="{ lineClamp: 3, textOverflow: 'ellipsis' }"
+        >
+          {{ occasion }}
+        </div>
+      </div>
+
+      <div
+        v-if="poster"
+        class="shrink-0 relative flex items-center justify-center overflow-hidden"
+        :style="{ width: '360px', height: '360px' }"
+      >
+        <img
+          v-if="backdrop"
+          :src="backdrop"
+          alt=""
+          :style="{
+            position: 'absolute',
+            left: '0',
+            right: '0',
+            bottom: '0',
+            width: '100%',
+            height: 'auto',
+            objectFit: 'cover',
+          }"
+        />
+        <img
+          :src="poster"
+          alt=""
+          :style="{
+            position: 'relative',
+            maxWidth: '100%',
+            maxHeight: '100%',
+            objectFit: 'contain',
+          }"
+        />
+      </div>
+    </div>
+  </OgLayout>
+</template>
diff --git a/app/noodles.ts b/app/noodles.ts
new file mode 100644
index 0000000000..7ba61a5a9c
--- /dev/null
+++ b/app/noodles.ts
@@ -0,0 +1,69 @@
+import type { Noodle } from '#shared/schemas/noodle'
+
+// To add a noodle: drop a Logo.vue under app/components/Noodle/<Name>/,
+// register the key in app/components/Noodle/index.ts, then append an entry below.
+
+const ALEX = { name: 'Alex Savelyev', blueskyHandle: 'alexdln.com' }
+const ALFON = { name: 'Alfon', blueskyHandle: 'alfon.dev' }
+
+const entries: Noodle[] = [
+  {
+    key: 'press',
+    title: 'Press Freedom Day',
+    slug: 'press',
+    date: '2026-05-01',
+    dateTo: '2026-05-04',
+    timezone: 'auto',
+    tagline: false,
+    occasion: 'World Press Freedom Day, 3 May.',
+    prUrl: 'https://github.com/npmx-dev/npmx.dev/pull/2666',
+    authors: [ALEX, ALFON],
+    posterImage: '/extra/npmx-dark-press.png',
+  },
+  {
+    key: 'kawaii',
+    title: 'Kawaii',
+    slug: 'kawaii',
+    date: '2026-03-31',
+    timezone: 'auto',
+    tagline: false,
+    occasion: "April Fools' — the original soft, cute pink/peach take on the npmx logo.",
+    prUrl: 'https://github.com/npmx-dev/npmx.dev/pull/2346',
+    authors: [ALEX, ALFON],
+    posterImage: '/extra/npmx-cute.svg',
+  },
+  {
+    key: 'kawaii-pride',
+    title: 'Kawaii (Pride)',
+    slug: 'kawaii-pride',
+    date: '2026-03-31',
+    timezone: 'auto',
+    tagline: false,
+    occasion:
+      'Same-day revision of the kawaii noodle — re-coloured to the trans pride flag stripes.',
+    prUrl: 'https://github.com/npmx-dev/npmx.dev/pull/2349',
+    authors: [ALEX, ALFON],
+    posterImage: '/extra/npmx-cute-transgender.svg',
+  },
+  {
+    key: 'artemis',
+    title: 'Artemis',
+    slug: 'artemis',
+    date: '2026-04-08',
+    dateTo: '2026-04-12',
+    timezone: 'America/Los_Angeles',
+    tagline: true,
+    occasion: "NASA's Artemis Moon program — a quiet salute during the mission window.",
+    prUrl: 'https://github.com/npmx-dev/npmx.dev/pull/2421',
+    authors: [ALEX],
+    posterImage: '/extra/npmx-dark-artemis.svg',
+  },
+]
+
+export const noodles: Noodle[] = [...entries].sort(
+  (a, b) => Date.parse(b.date) - Date.parse(a.date),
+)
+
+export function findNoodle(slug: string): Noodle | undefined {
+  return noodles.find(n => n.slug === slug)
+}
diff --git a/app/pages/noodles/[slug].vue b/app/pages/noodles/[slug].vue
new file mode 100644
index 0000000000..b4176472df
--- /dev/null
+++ b/app/pages/noodles/[slug].vue
@@ -0,0 +1,380 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type { AtIdentifierString } from '@atproto/lex'
+import { findNoodle } from '~/noodles'
+import { resolveNoodleLogo } from '~/components/Noodle'
+import { resolveNoodleAvatar } from '#noodles/avatars'
+
+const route = useRoute()
+const slug = computed(() => String(route.params.slug ?? ''))
+
+const noodle = computed(() => findNoodle(slug.value))
+const logo = computed(() => (noodle.value ? resolveNoodleLogo(noodle.value.key) : undefined))
+
+type LensSlide = { kind: 'logo'; logo: Component } | { kind: 'image'; src: string }
+
+const hasProcessImages = computed(() => (noodle.value?.processImages?.length ?? 0) > 0)
+
+const lensSlides = computed<LensSlide[]>(() => {
+  if (!hasProcessImages.value) return []
+  const slides: LensSlide[] = []
+  if (logo.value) slides.push({ kind: 'logo', logo: logo.value })
+  for (const src of noodle.value?.processImages ?? []) {
+    slides.push({ kind: 'image', src })
+  }
+  return slides
+})
+
+const slideCount = computed(() => lensSlides.value.length)
+const hasMultipleSlides = computed(() => slideCount.value > 1)
+
+const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
+
+const lensScroller = useTemplateRef<HTMLElement>('lensScroller')
+const activeSlide = shallowRef(0)
+// Position in the 3× slide list — keeps the snap-back loop in sync with `activeSlide`.
+let rawIndex = 0
+
+function snapBackIfNeeded() {
+  const el = lensScroller.value
+  if (!el) return
+  const width = el.clientWidth
+  const n = slideCount.value
+  if (width === 0 || n === 0) return
+  if (rawIndex < n) {
+    rawIndex += n
+    el.scrollLeft = rawIndex * width
+  } else if (rawIndex >= 2 * n) {
+    rawIndex -= n
+    el.scrollLeft = rawIndex * width
+  }
+}
+
+function onLensScroll() {
+  const el = lensScroller.value
+  if (!el) return
+  const width = el.clientWidth
+  const n = slideCount.value
+  if (width === 0 || n === 0) return
+  rawIndex = Math.round(el.scrollLeft / width)
+  activeSlide.value = ((rawIndex % n) + n) % n
+}
+
+function lensScrollTo(canonicalIndex: number) {
+  const el = lensScroller.value
+  if (!el) return
+  const n = slideCount.value
+  if (n === 0) return
+  // Shortest signed delta so wrapping across the loop seam still feels like one step.
+  let delta = (((canonicalIndex - activeSlide.value) % n) + n) % n
+  if (delta > n / 2) delta -= n
+  const target = el.children[rawIndex + delta] as HTMLElement | undefined
+  target?.scrollIntoView({
+    behavior: prefersReducedMotion.value ? 'auto' : 'smooth',
+    block: 'nearest',
+    inline: 'start',
+  })
+}
+
+function lensPrev() {
+  lensScrollTo((activeSlide.value - 1 + slideCount.value) % slideCount.value)
+}
+function lensNext() {
+  lensScrollTo((activeSlide.value + 1) % slideCount.value)
+}
+
+function onLensKeydown(event: KeyboardEvent) {
+  if (!hasMultipleSlides.value) return
+  switch (event.key) {
+    case 'ArrowRight':
+      event.preventDefault()
+      lensNext()
+      break
+    case 'ArrowLeft':
+      event.preventDefault()
+      lensPrev()
+      break
+    case 'Home':
+      event.preventDefault()
+      lensScrollTo(0)
+      break
+    case 'End':
+      event.preventDefault()
+      lensScrollTo(slideCount.value - 1)
+      break
+  }
+}
+
+// Start in the middle copy so both edges can be reached before a snap-back.
+onMounted(() => {
+  if (!hasMultipleSlides.value) return
+  const el = lensScroller.value
+  if (!el) return
+  const width = el.clientWidth
+  if (width === 0) return
+  rawIndex = slideCount.value
+  el.scrollLeft = rawIndex * width
+  activeSlide.value = 0
+})
+
+const enrichedAuthors = computed(() =>
+  (noodle.value?.authors ?? []).map(a => ({
+    name: a.name,
+    blueskyHandle: a.blueskyHandle as AtIdentifierString | undefined,
+    avatar: resolveNoodleAvatar(a.blueskyHandle),
+    profileUrl: a.blueskyHandle ? `https://bsky.app/profile/${a.blueskyHandle}` : null,
+  })),
+)
+
+useSeoMeta({
+  title: () =>
+    noodle.value
+      ? `${noodle.value.title} — ${$t('noodles.title')}`
+      : `${$t('noodles.missing.title')} — ${$t('noodles.title')}`,
+  description: () => noodle.value?.occasion,
+  ogTitle: () => noodle.value?.title,
+  ogDescription: () => noodle.value?.occasion,
+})
+
+if (noodle.value?.posterImage) {
+  defineOgImage(
+    'Noodle.takumi',
+    {
+      title: noodle.value.title,
+      occasion: noodle.value.occasion ?? '',
+      poster: noodle.value.posterImage,
+      backdrop: noodle.value.posterBackdrop ?? '',
+    },
+    { alt: `${noodle.value.title} — npmx` },
+  )
+} else {
+  defineOgImage(
+    'Page.takumi',
+    {
+      title: () => noodle.value?.title ?? $t('noodles.missing.title'),
+      description: () => noodle.value?.occasion ?? $t('noodles.title'),
+    },
+    { alt: () => `${noodle.value?.title ?? $t('noodles.missing.title')} — npmx` },
+  )
+}
+
+onMounted(() => {
+  if (!noodle.value) {
+    const event = useRequestEvent()
+    if (event) setResponseStatus(event, 404)
+  }
+})
+
+if (import.meta.server && !noodle.value) {
+  const event = useRequestEvent()
+  if (event) setResponseStatus(event, 404)
+}
+</script>
+
+<template>
+  <main class="w-full flex-1 flex flex-col">
+    <section
+      class="relative flex-1 flex flex-col pt-6 pb-10 sm:pt-8 sm:pb-16 lg:pb-20 px-4 sm:px-6"
+    >
+      <div
+        class="absolute inset-0 [background-image:repeating-linear-gradient(115deg,rgb(0_0_0/0.04)_0_22px,transparent_22px_80px)] dark:[background-image:repeating-linear-gradient(115deg,rgb(0_0_0/0.35)_0_22px,transparent_22px_80px)]"
+        aria-hidden="true"
+      />
+
+      <nav class="relative max-w-6xl w-full mx-auto mb-10 sm:mb-14 lg:mb-16">
+        <NuxtLink
+          to="/noodles"
+          class="inline-flex items-center gap-2 text-sm font-mono text-fg-muted hover:text-fg transition-colors"
+        >
+          <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+          {{ $t('noodles.back_to_archive') }}
+        </NuxtLink>
+      </nav>
+
+      <div
+        class="relative max-w-6xl w-full mx-auto grid grid-cols-1 xl:grid-cols-[auto_1fr] gap-y-10 gap-x-16 xl:gap-x-24 items-start"
+      >
+        <!-- LENS COLUMN -->
+        <div class="xl:sticky xl:top-24 flex flex-col items-center justify-self-center self-start">
+          <div class="relative aspect-square w-60 sm:w-80 lg:w-96 max-w-full">
+            <div
+              class="absolute inset-0 rounded-full overflow-hidden bg-bg-subtle border-[10px] sm:border-[14px] border-border [box-shadow:inset_0_0_50px_rgb(0_0_0/0.28),inset_0_2px_2px_rgb(255_255_255/0.9),0_20px_50px_-12px_rgb(0_0_0/0.3)] dark:[box-shadow:inset_0_0_60px_rgb(0_0_0/0.6),0_20px_50px_-10px_rgb(0_0_0/0.5)]"
+            >
+              <!-- 3× copies + snap-back is the loop trick. See onLensScroll/snapBackIfNeeded. -->
+              <div
+                v-if="hasProcessImages"
+                ref="lensScroller"
+                tabindex="0"
+                role="region"
+                aria-roledescription="carousel"
+                class="absolute inset-0 flex overflow-x-auto snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset"
+                :aria-label="$t('noodles.lens_label', { title: noodle?.title ?? '' })"
+                @scroll.passive="onLensScroll"
+                @scrollend.passive="snapBackIfNeeded"
+                @keydown="onLensKeydown"
+              >
+                <template v-for="copy in 3" :key="`copy-${copy}`">
+                  <div
+                    v-for="(slide, index) in lensSlides"
+                    :key="`${copy}-${index}`"
+                    class="shrink-0 w-full h-full snap-start flex items-center justify-center p-6 sm:p-10"
+                    :role="copy === 2 ? 'group' : undefined"
+                    :aria-roledescription="copy === 2 ? 'slide' : undefined"
+                    :aria-label="
+                      copy === 2
+                        ? $t('noodles.lens_slide_position', {
+                            index: index + 1,
+                            total: slideCount,
+                          })
+                        : undefined
+                    "
+                    :aria-hidden="copy !== 2 ? 'true' : undefined"
+                  >
+                    <component
+                      v-if="slide.kind === 'logo'"
+                      :is="slide.logo"
+                      class="max-w-[80%] max-h-[80%]"
+                    />
+                    <img
+                      v-else
+                      :src="slide.src"
+                      :alt="
+                        copy === 2 && noodle?.title
+                          ? `${noodle.title} — ${$t('noodles.lens_slide', { index })}`
+                          : ''
+                      "
+                      loading="lazy"
+                      class="max-w-[85%] max-h-[85%] object-contain"
+                    />
+                  </div>
+                </template>
+              </div>
+              <div v-else class="absolute inset-0 flex items-center justify-center p-6 sm:p-10">
+                <component :is="logo" v-if="logo" class="max-w-[80%] max-h-[80%]" />
+                <span
+                  v-else
+                  class="font-mono text-6xl sm:text-8xl text-fg-subtle select-none"
+                  aria-hidden="true"
+                  >?</span
+                >
+              </div>
+            </div>
+
+            <template v-if="hasMultipleSlides">
+              <ButtonBase
+                type="button"
+                classicon="i-lucide:chevron-left"
+                class="hidden sm:inline-flex rtl-flip absolute top-1/2 -translate-y-1/2 -inset-is-16 lg:-inset-is-20 text-3xl !p-3 z-10"
+                :aria-label="$t('noodles.carousel_prev')"
+                @click="lensPrev"
+              />
+              <ButtonBase
+                type="button"
+                classicon="i-lucide:chevron-right"
+                class="hidden sm:inline-flex rtl-flip absolute top-1/2 -translate-y-1/2 -inset-ie-16 lg:-inset-ie-20 text-3xl !p-3 z-10"
+                :aria-label="$t('noodles.carousel_next')"
+                @click="lensNext"
+              />
+            </template>
+          </div>
+
+          <ol
+            v-if="hasMultipleSlides"
+            class="flex justify-center gap-2 mt-6 list-none p-0 m-0"
+            :aria-label="$t('noodles.carousel_dots')"
+          >
+            <li v-for="(_, index) in lensSlides" :key="index">
+              <button
+                type="button"
+                class="block w-2 h-2 rounded-full transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+                :class="index === activeSlide ? 'bg-fg' : 'bg-fg-subtle/40 hover:bg-fg-subtle'"
+                :aria-label="$t('noodles.carousel_jump', { index: index + 1 })"
+                :aria-current="index === activeSlide ? 'true' : undefined"
+                @click="lensScrollTo(index)"
+              />
+            </li>
+          </ol>
+
+          <div v-if="hasMultipleSlides" class="sr-only" aria-live="polite" aria-atomic="true">
+            {{ $t('noodles.lens_slide_position', { index: activeSlide + 1, total: slideCount }) }}
+          </div>
+        </div>
+
+        <!-- CONTENT CARD -->
+        <article
+          class="rounded-2xl bg-bg-elevated/40 border border-border-subtle p-6 sm:p-10 backdrop-blur-sm"
+        >
+          <template v-if="noodle">
+            <h1
+              class="font-mono text-3xl sm:text-4xl lg:text-5xl font-medium tracking-tight mb-3 sm:mb-4 break-words"
+            >
+              {{ noodle.title }}
+            </h1>
+            <p v-if="noodle.occasion" class="text-fg-muted text-base sm:text-lg leading-relaxed">
+              {{ noodle.occasion }}
+            </p>
+
+            <p
+              v-if="noodle.description"
+              class="text-fg-muted text-base leading-relaxed whitespace-pre-line mt-6 sm:mt-8"
+            >
+              {{ noodle.description }}
+            </p>
+
+            <hr class="border-0 border-t border-border-subtle my-8 sm:my-10" />
+
+            <dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-6 text-xs font-mono m-0">
+              <div>
+                <dt class="text-fg-subtle uppercase tracking-widest mb-1.5">
+                  {{ $t('noodles.dates') }}
+                </dt>
+                <dd class="text-fg-muted">
+                  <DateTime :datetime="noodle.date" year="numeric" month="short" day="numeric" />
+                  <template v-if="noodle.dateTo">
+                    <span class="text-fg-subtle mx-1">—</span>
+                    <DateTime
+                      :datetime="noodle.dateTo"
+                      year="numeric"
+                      month="short"
+                      day="numeric"
+                    />
+                  </template>
+                </dd>
+              </div>
+              <div v-if="noodle.prUrl">
+                <dt class="text-fg-subtle uppercase tracking-widest mb-1.5">
+                  {{ $t('noodles.shipped_in') }}
+                </dt>
+                <dd>
+                  <LinkBase :to="noodle.prUrl" no-new-tab-icon class="text-fg-muted">
+                    {{ noodle.prUrl.split('/').pop() ? `#${noodle.prUrl.split('/').pop()}` : 'PR' }}
+                  </LinkBase>
+                </dd>
+              </div>
+              <div v-if="enrichedAuthors.length" class="sm:col-span-2">
+                <dt class="text-fg-subtle uppercase tracking-widest mb-3">
+                  {{ $t('noodles.credits') }}
+                </dt>
+                <dd>
+                  <AuthorList :authors="enrichedAuthors" variant="expanded" />
+                </dd>
+              </div>
+            </dl>
+          </template>
+
+          <template v-else>
+            <p class="font-mono text-xs tracking-widest uppercase text-fg-subtle mb-3">
+              404 — empty bowl
+            </p>
+            <h1 class="font-mono text-3xl sm:text-4xl font-medium tracking-tight mb-4">
+              {{ $t('noodles.missing.title') }}
+            </h1>
+            <p class="text-fg-muted text-base sm:text-lg leading-relaxed">
+              {{ $t('noodles.missing.body', { slug: slug }) }}
+            </p>
+          </template>
+        </article>
+      </div>
+    </section>
+  </main>
+</template>
diff --git a/app/pages/noodles/index.vue b/app/pages/noodles/index.vue
new file mode 100644
index 0000000000..e56a660abf
--- /dev/null
+++ b/app/pages/noodles/index.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { noodles } from '~/noodles'
+
+definePageMeta({
+  name: 'noodles',
+})
+
+useSeoMeta({
+  title: () => `${$t('noodles.title')} - npmx`,
+  ogTitle: () => `${$t('noodles.title')} - npmx`,
+  twitterTitle: () => `${$t('noodles.title')} - npmx`,
+  description: () => $t('noodles.meta_description'),
+  ogDescription: () => $t('noodles.meta_description'),
+  twitterDescription: () => $t('noodles.meta_description'),
+})
+
+defineOgImage(
+  'Page.takumi',
+  {
+    title: () => $t('noodles.title'),
+    description: () => $t('noodles.meta_description'),
+  },
+  { alt: () => `${$t('noodles.title')} — npmx` },
+)
+
+const colorMode = useColorMode()
+const moonSrc = computed(() =>
+  colorMode.value === 'light' ? '/extra/moon-light.png' : '/extra/moon-dark.png',
+)
+
+const PAGE_SIZE = 10
+const visibleCount = shallowRef(PAGE_SIZE)
+const visibleNoodles = computed(() => noodles.slice(0, visibleCount.value))
+const hasMore = computed(() => visibleCount.value < noodles.length)
+const remaining = computed(() => noodles.length - visibleCount.value)
+
+function loadMore() {
+  visibleCount.value = Math.min(visibleCount.value + PAGE_SIZE, noodles.length)
+}
+</script>
+
+<template>
+  <main class="w-full flex-1 overflow-x-hidden">
+    <section
+      class="relative overflow-hidden border-b border-border-subtle py-10 sm:py-20 px-4 sm:px-6 mb-10 sm:mb-16"
+    >
+      <div
+        class="absolute inset-0 [background-image:repeating-linear-gradient(115deg,rgb(0_0_0/0.04)_0_22px,transparent_22px_80px)] dark:[background-image:repeating-linear-gradient(115deg,rgb(0_0_0/0.35)_0_22px,transparent_22px_80px)]"
+        aria-hidden="true"
+      />
+      <div class="relative max-w-4xl mx-auto flex flex-col items-center text-center">
+        <div
+          class="relative aspect-square w-60 sm:w-96 max-w-full flex items-center justify-center"
+        >
+          <div
+            class="absolute inset-0 rounded-full overflow-hidden bg-bg-subtle border-[10px] sm:border-[14px] border-border [box-shadow:inset_0_0_50px_rgb(0_0_0/0.28),inset_0_2px_2px_rgb(255_255_255/0.9),0_20px_50px_-12px_rgb(0_0_0/0.3)] dark:[box-shadow:inset_0_0_60px_rgb(0_0_0/0.6),0_20px_50px_-10px_rgb(0_0_0/0.5)]"
+            aria-hidden="true"
+          >
+            <img
+              :src="moonSrc"
+              alt=""
+              aria-hidden="true"
+              class="absolute bottom-0 inset-is-1/2 -translate-x-1/2 w-[88%] pointer-events-none select-none mix-blend-darken dark:mix-blend-lighten"
+            />
+          </div>
+          <h1 class="relative font-mono text-3xl sm:text-6xl font-medium z-10">
+            {{ $t('noodles.title') }}
+          </h1>
+          <img
+            src="/extra/npmx-sticker.png"
+            alt=""
+            aria-hidden="true"
+            class="absolute -top-2 sm:-top-6 -end-3 sm:-end-10 w-20 sm:w-40 rotate-12 pointer-events-none select-none z-20 drop-shadow-xl"
+          />
+        </div>
+      </div>
+    </section>
+
+    <article class="max-w-5xl mx-auto pb-16 sm:pb-24 px-4 sm:px-6">
+      <header class="mb-6">
+        <h2 class="font-mono text-lg sm:text-xl font-semibold uppercase text-fg leading-none">
+          {{ $t('noodles.latest') }}
+        </h2>
+      </header>
+      <ul
+        v-if="noodles.length > 0"
+        role="list"
+        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 list-none p-0 m-0"
+      >
+        <li v-for="noodle in visibleNoodles" :key="noodle.key">
+          <NoodleListCard :noodle="noodle" />
+        </li>
+      </ul>
+      <p v-else class="text-fg-subtle text-center py-20">
+        {{ $t('noodles.empty') }}
+      </p>
+
+      <div v-if="hasMore" class="mt-8 flex justify-center">
+        <ButtonBase type="button" variant="secondary" @click="loadMore">
+          {{ $t('noodles.load_more', { count: Math.min(PAGE_SIZE, remaining) }) }}
+        </ButtonBase>
+      </div>
+
+      <section class="mt-12 sm:mt-20">
+        <h2
+          class="font-mono text-lg sm:text-xl font-semibold uppercase text-fg leading-none mb-3 sm:mb-4"
+        >
+          {{ $t('noodles.what_is') }}
+        </h2>
+        <p class="text-fg-muted text-base leading-relaxed">
+          {{ $t('noodles.what_is_body') }}
+        </p>
+      </section>
+    </article>
+  </main>
+</template>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 7e119affa7..dc77d2b62f 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -229,6 +229,30 @@
       "more_replies": "{count} more reply... | {count} more replies..."
     }
   },
+  "noodles": {
+    "title": "noodles",
+    "meta_description": "Every noodle we've ever shown on npmx — the seasonal logos, easter eggs, and the stories behind them.",
+    "latest": "Latest noodles",
+    "what_is": "What is noodles",
+    "what_is_body": "Noodles are the playful variants of the npmx logo we run on the homepage to mark releases, holidays, events, and other moments worth celebrating. Think of them like Google Doodles, but for npm packages.",
+    "empty": "No noodles yet.",
+    "load_more": "Load {count} more",
+    "dates": "Active dates",
+    "shipped_in": "Shipped in",
+    "credits": "Credits",
+    "carousel_prev": "Previous image",
+    "carousel_next": "Next image",
+    "carousel_dots": "Process image navigation",
+    "carousel_jump": "Go to image {index}",
+    "lens_label": "{title} — image reel",
+    "lens_slide": "image {index}",
+    "lens_slide_position": "Slide {index} of {total}",
+    "back_to_archive": "Back to all noodles",
+    "missing": {
+      "title": "This noodle never made it out of the bowl.",
+      "body": "We don't have a “{slug}” noodle on the menu. Either it's still being plated, or it was never written. Either way — back to the archive."
+    }
+  },
   "settings": {
     "title": "settings",
     "tagline": "customize your npmx experience",
diff --git a/i18n/schema.json b/i18n/schema.json
index ee385067bd..0af43082a9 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -691,6 +691,78 @@
       },
       "additionalProperties": false
     },
+    "noodles": {
+      "type": "object",
+      "properties": {
+        "title": {
+          "type": "string"
+        },
+        "meta_description": {
+          "type": "string"
+        },
+        "latest": {
+          "type": "string"
+        },
+        "what_is": {
+          "type": "string"
+        },
+        "what_is_body": {
+          "type": "string"
+        },
+        "empty": {
+          "type": "string"
+        },
+        "load_more": {
+          "type": "string"
+        },
+        "dates": {
+          "type": "string"
+        },
+        "shipped_in": {
+          "type": "string"
+        },
+        "credits": {
+          "type": "string"
+        },
+        "carousel_prev": {
+          "type": "string"
+        },
+        "carousel_next": {
+          "type": "string"
+        },
+        "carousel_dots": {
+          "type": "string"
+        },
+        "carousel_jump": {
+          "type": "string"
+        },
+        "lens_label": {
+          "type": "string"
+        },
+        "lens_slide": {
+          "type": "string"
+        },
+        "lens_slide_position": {
+          "type": "string"
+        },
+        "back_to_archive": {
+          "type": "string"
+        },
+        "missing": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "body": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false
+    },
     "settings": {
       "type": "object",
       "properties": {
diff --git a/modules/blog.ts b/modules/blog.ts
index 6c28c6de1e..a2061a4d8c 100644
--- a/modules/blog.ts
+++ b/modules/blog.ts
@@ -172,7 +172,7 @@ export default defineNuxtModule({
 
     addVitePlugin(() =>
       Markdown({
-        include: [/\.(md|markdown)($|\?)/],
+        include: [/pages[\\/]blog[\\/].+\.(md|markdown)($|\?)/],
         wrapperComponent: 'BlogPostWrapper',
         wrapperClasses: 'text-fg-muted leading-relaxed',
         async markdownSetup(md) {
diff --git a/modules/noodles.ts b/modules/noodles.ts
new file mode 100644
index 0000000000..5618e2ec71
--- /dev/null
+++ b/modules/noodles.ts
@@ -0,0 +1,106 @@
+import { join } from 'node:path'
+import { existsSync } from 'node:fs'
+import { mkdir, readFile, writeFile } from 'node:fs/promises'
+import { Buffer } from 'node:buffer'
+import crypto from 'node:crypto'
+import { addTemplate, defineNuxtModule, useNuxt, createResolver } from 'nuxt/kit'
+import { BLUESKY_API } from '../shared/utils/constants'
+
+const PROFILE_FETCH_TIMEOUT_MS = 10_000
+const AVATAR_FETCH_TIMEOUT_MS = 15_000
+
+async function fetchBlueskyAvatars(
+  imagesDir: string,
+  handles: string[],
+): Promise<Map<string, string>> {
+  const avatarMap = new Map<string, string>()
+  if (handles.length === 0) return avatarMap
+
+  try {
+    const params = new URLSearchParams()
+    for (const handle of handles) params.append('actors', handle)
+
+    const response = await fetch(
+      `${BLUESKY_API}/xrpc/app.bsky.actor.getProfiles?${params.toString()}`,
+      { signal: AbortSignal.timeout(PROFILE_FETCH_TIMEOUT_MS) },
+    )
+    if (!response.ok) {
+      console.warn(`[noodles] Failed to fetch Bluesky profiles: ${response.status}`)
+      return avatarMap
+    }
+
+    const data = (await response.json()) as {
+      profiles: Array<{ handle: string; avatar?: string }>
+    }
+    for (const profile of data.profiles) {
+      if (!profile.avatar) continue
+      const hash = crypto.createHash('sha256').update(profile.avatar).digest('hex')
+      const dest = join(imagesDir, `${hash}.png`)
+      if (!existsSync(dest)) {
+        const res = await fetch(`${profile.avatar}@png`, {
+          signal: AbortSignal.timeout(AVATAR_FETCH_TIMEOUT_MS),
+        })
+        if (!res.ok || !res.body) continue
+        // Avatars are tiny; buffering sidesteps the Web/Node ReadableStream type mismatch.
+        await writeFile(dest, Buffer.from(await res.arrayBuffer()))
+      }
+      avatarMap.set(profile.handle, `/noodle-avatar/${hash}.png`)
+    }
+  } catch (error) {
+    console.warn(`[noodles] Failed to fetch Bluesky avatars:`, error)
+  }
+
+  return avatarMap
+}
+
+// Parses the registry as text so we don't have to evaluate TS at build time.
+async function readHandlesFromRegistry(registryPath: string): Promise<string[]> {
+  if (!existsSync(registryPath)) return []
+  const source = await readFile(registryPath, 'utf-8')
+  const handles = new Set<string>()
+  const re = /blueskyHandle\s*:\s*['"]([^'"]+)['"]/g
+  let match: RegExpExecArray | null
+  while ((match = re.exec(source)) !== null) {
+    handles.add(match[1]!)
+  }
+  return [...handles]
+}
+
+export default defineNuxtModule({
+  meta: { name: 'noodles' },
+  async setup() {
+    const nuxt = useNuxt()
+    const resolver = createResolver(import.meta.url)
+    const registryPath = resolver.resolve('../app/noodles.ts')
+    const imagesDir = resolver.resolve('../public/noodle-avatar')
+    const resolveAvatars = !nuxt.options._prepare
+
+    if (resolveAvatars && !existsSync(imagesDir)) {
+      await mkdir(imagesDir, { recursive: true })
+    }
+
+    const handles = await readHandlesFromRegistry(registryPath)
+    const avatarMap = resolveAvatars
+      ? await fetchBlueskyAvatars(imagesDir, handles)
+      : new Map<string, string>()
+
+    addTemplate({
+      filename: 'noodles/avatars.ts',
+      write: true,
+      getContents: () => {
+        const record: Record<string, string> = {}
+        for (const [handle, url] of avatarMap) record[handle] = url
+        return [
+          `export const noodleAvatars: Record<string, string> = ${JSON.stringify(record, null, 2)}`,
+          '',
+          'export function resolveNoodleAvatar(handle: string | undefined): string | null {',
+          '  if (!handle) return null',
+          '  return noodleAvatars[handle] ?? null',
+          '}',
+        ].join('\n')
+      },
+    })
+
+    nuxt.options.alias['#noodles/avatars'] = join(nuxt.options.buildDir, 'noodles/avatars')
+  },
+})
diff --git a/public/extra/npmx-sticker.png b/public/extra/npmx-sticker.png
new file mode 100644
index 0000000000..4c36da7831
Binary files /dev/null and b/public/extra/npmx-sticker.png differ
diff --git a/server/middleware/canonical-redirects.global.ts b/server/middleware/canonical-redirects.global.ts
index e9139a8493..2fbc218d30 100644
--- a/server/middleware/canonical-redirects.global.ts
+++ b/server/middleware/canonical-redirects.global.ts
@@ -21,6 +21,7 @@ const pages = [
   '/blog',
   '/brand',
   '/compare',
+  '/noodles',
   '/org',
   '/package',
   '/package-code',
diff --git a/shared/schemas/noodle.ts b/shared/schemas/noodle.ts
new file mode 100644
index 0000000000..00e988c99b
--- /dev/null
+++ b/shared/schemas/noodle.ts
@@ -0,0 +1,32 @@
+import { array, object, optional, string, boolean, type InferOutput } from 'valibot'
+
+const NoodleAuthorSchema = object({
+  name: string(),
+  blueskyHandle: optional(string()),
+})
+
+// Required: key, title, slug, date. Everything else is optional and the
+// detail page only renders sections for fields that are filled in.
+export const NoodleSchema = object({
+  key: string(),
+  title: string(),
+  slug: string(),
+  date: string(),
+  dateTo: optional(string()),
+  // IANA timezone name, or "auto" for the visitor's local time.
+  timezone: optional(string()),
+  // When true, the npmx tagline is hidden while this noodle is active.
+  tagline: optional(boolean()),
+  occasion: optional(string()),
+  description: optional(string()),
+  // Public paths to process / draft images, used by the lens carousel.
+  processImages: optional(array(string())),
+  prUrl: optional(string()),
+  authors: optional(array(NoodleAuthorSchema)),
+  // Public path to the OG-image hero asset.
+  posterImage: optional(string()),
+  // Optional image rendered behind `posterImage` (e.g. a backdrop the wordmark sits on).
+  posterBackdrop: optional(string()),
+})
+
+export type Noodle = InferOutput<typeof NoodleSchema>
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 5d0865d77f..14bc048b0d 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -157,7 +157,10 @@ import {
   BuildEnvironment,
   ButtonBase,
   LandingIntroHeader,
+  NoodleArtemisLogo,
   NoodleKawaiiLogo,
+  NoodleKawaiiPrideLogo,
+  NoodleListCard,
   NoodlePressLogo,
   LinkBase,
   CallToAction,
@@ -373,11 +376,23 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
 
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(NoodleKawaiiPrideLogo)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(NoodlePressLogo)
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(NoodleArtemisLogo)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
   })
 
   describe('AppFooter', () => {
@@ -2864,6 +2879,24 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('NoodleListCard', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(NoodleListCard, {
+        props: {
+          noodle: {
+            key: 'press',
+            slug: 'press',
+            title: 'Press',
+            date: '2026-05-01',
+            dateTo: '2026-05-04',
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('BlueskyComment', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(BlueskyComment, {
diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
index 1f5570aaa3..dd742e1c3d 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -27,6 +27,7 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
   'OgImage/BlogPost.takumi.vue': 'OG Image component - server-rendered image, not interactive UI',
   'OgImage/Compare.takumi.vue': 'OG Image component - server-rendered image, not interactive UI',
   'OgImage/Package.takumi.vue': 'OG Image component - server-rendered image, not interactive UI',
+  'OgImage/Noodle.takumi.vue': 'OG Image component - server-rendered image, not interactive UI',
   'OgImage/Page.takumi.vue': 'OG Image component - server-rendered image, not interactive UI',
   'OgImage/Profile.takumi.vue': 'OG Image component - server-rendered image, not interactive UI',
   'OgImage/Splash.takumi.vue': 'OG Image component - server-rendered image, not interactive UI',