feat: add noodle for national gif day

app/components/Landing/IntroHeader.vue

@@ -126,7 +126,7 @@ onPrehydrate(el => {
     />
     <p
       id="intro-header-tagline"
-      class="text-fg-muted text-lg ms-auto me-auto sm:text-xl max-w-xl mb-12 lg:mb-14 motion-safe:animate-slide-up motion-safe:animate-fill-both delay-100"
+      class="text-fg-muted text-lg sm:text-xl mb-12 lg:mb-14 motion-safe:animate-slide-up motion-safe:animate-fill-both delay-100"
     >
       {{ $t('tagline') }}
     </p>

app/components/Noodle/GifDay/GifText.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const props = defineProps<{
+  text: string
+  backgroundUrl: string
+  title?: string
+  backgroundPosition?: string
+  backgroundSize?: string
+}>()
+
+const loaded = ref(false)
+const random = useState(`gif-text-rotate-${useId()}`, () => Math.random())
+const rotateFrom = computed(() => (random.value < 0.5 ? '-rotate-20' : 'rotate-20'))
+
+onMounted(() => {
+  const image = new Image()
+  image.addEventListener('load', () => {
+    loaded.value = true
+  })
+  image.src = props.backgroundUrl
+})
+
+const style = computed(() => ({
+  backgroundImage: loaded.value ? `url(${props.backgroundUrl})` : undefined,
+  backgroundPosition: props.backgroundPosition,
+  backgroundSize: props.backgroundSize,
+}))
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-block motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-[cubic-bezier(0.34,1.56,0.64,1)] motion-reduce:transition-none',
+      loaded
+        ? 'opacity-100 scale-100 translate-y-0 rotate-0'
+        : `opacity-0 scale-85 translate-y-[20%] ${rotateFrom}`,
+    ]"
+  >
+    <span
+      :title
+      :style
+      :class="[
+        'font-noodle select-none leading-none bg-cover bg-center motion-safe:text-transparent bg-clip-text text-[4rem] @xl:text-[14rem] font-extrabold transition-all duration-300',
+      ]"
+    >
+      {{ text }}
+    </span>
+  </span>
+</template>

app/components/Noodle/GifDay/Logo.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+type GifText = {
+  text: string
+  url: string
+  title: string
+  backgroundPosition?: string
+  backgroundSize?: string
+}
+const textArray: GifText[] = [
+  {
+    text: './',
+    url: 'https://media1.tenor.com/m/_ETKRybU9WEAAAAd/orange-cat-stare.gif',
+    backgroundSize: '130%',
+    backgroundPosition: '50% 64%',
+    title: 'Obviously a cat',
+  },
+  {
+    text: 'n',
+    url: 'https://media1.tenor.com/m/VFDevE2qwdcAAAAC/good-morning.gif',
+    backgroundSize: '170%',
+    title: 'Nicolas Cage',
+  },
+  {
+    text: 'p',
+    url: 'https://media1.tenor.com/m/8QP4JDPp85UAAAAC/kido.gif',
+    backgroundSize: '180%',
+    backgroundPosition: '70% 60%',
+    title: 'Party',
+  },
+  {
+    text: 'm',
+    url: 'https://media1.tenor.com/m/aN_HGmP-ZgAAAAAC/m.gif',
+    backgroundPosition: '39% 120%',
+    backgroundSize: '180%',
+    title: 'Minions',
+  },
+  {
+    text: 'x',
+    url: 'https://media1.tenor.com/m/tslbzvMV878AAAAC/xmen-97-cyclops.gif',
+    backgroundSize: '180%',
+    title: 'X-Men',
+  },
+]
+</script>
+
+<template>
+  <div class="flex @container justify-center w-full md:w-[720px]" aria-hidden="true">
+    <NoodleGifDayGifText
+      v-for="item in textArray"
+      :key="item.text"
+      :text="item.text"
+      :title="item.title"
+      :background-url="item.url"
+      :background-position="item.backgroundPosition"
+      :background-size="item.backgroundSize"
+    />
+  </div>
+</template>

app/components/Noodle/index.ts

@@ -9,6 +9,7 @@ import NoodlePride2Logo from './Pride2/Logo.vue'
 import NoodlePride3Logo from './Pride3/Logo.vue'
 import NoodleTetrisLogo from './Tetris/Logo.vue'
 import NoodleEmojiDayLogo from './EmojiDay/Logo.vue'
+import NoodleGifDayLogo from './GifDay/Logo.vue'
 
 export type Noodle = {
   // Unique identifier for the noodle
@@ -72,6 +73,13 @@ export const ACTIVE_NOODLES: Noodle[] = [
     dateTo: '2026-07-19',
     timezone: 'auto',
   },
+  {
+    key: 'gif-day',
+    logo: NoodleGifDayLogo,
+    date: '2026-09-05',
+    dateTo: '2026-09-05',
+    timezone: 'auto',
+  },
 ]
 
 // Logo registry for the /noodles archive, keyed by the entry's `key` in
@@ -86,6 +94,7 @@ const NOODLE_LOGOS: Record<string, Component> = {
   'pride-1': NoodlePride1Logo,
   'tetris': NoodleTetrisLogo,
   'emoji-day': NoodleEmojiDayLogo,
+  'gif-day': NoodleGifDayLogo,
 }
 
 export function resolveNoodleLogo(key: string): Component | undefined {

app/noodles.ts

@@ -8,6 +8,7 @@ const ALFON = { name: 'Alfon', blueskyHandle: 'alfon.dev' }
 const GRAPHIEROS = { name: 'Graphieros', blueskyHandle: 'graphieros.npmx.social' }
 const FELIX = { name: 'Felix Schneider', blueskyHandle: 'felixs.dev' }
 const JVIIDE = { name: 'Joachim Viide', blueskyHandle: 'jviide.iki.fi' }
+const MATTEO = { name: 'Matteo Gabriele', blueskyHandle: 'matteogabriele.bsky.social' }
 
 const entries: Noodle[] = [
   {
@@ -151,6 +152,24 @@ const entries: Noodle[] = [
       { label: 'Wikipedia', url: 'https://en.wikipedia.org/wiki/World_Emoji_Day' },
     ],
   },
+
+  {
+    key: 'gif-day',
+    title: 'National GIF Day',
+    slug: 'gif-day',
+    date: '2026-09-5',
+    timezone: 'auto',
+    tagline: false,
+    occasion: 'National GIF day',
+    prUrl: 'https://github.com/npmx-dev/npmx.dev/pull/2778',
+    authors: [MATTEO],
+    references: [
+      {
+        label: 'National GIF day',
+        url: 'https://www.whatnationaldayisit.com/day/Gif/',
+      },
+    ],
+  },
 ]
 
 export const noodles: Noodle[] = [...entries].sort(

modules/security-headers.ts

@@ -36,6 +36,7 @@ export default defineNuxtModule({
       'https://cdn.bsky.app',
       'https://video.bsky.app',
       'https://video.cdn.bsky.app',
+      'https://media1.tenor.com',
     ]
     const imgSrc = [
       "'self'",

nuxt.config.ts

@@ -321,6 +321,11 @@ export default defineNuxtConfig({
         global: true,
         subsets: ['arabic'],
       },
+      {
+        name: 'Baloo 2',
+        weights: [800],
+        global: true,
+      },
     ],
   },
 

test/nuxt/a11y.spec.ts

@@ -171,6 +171,8 @@ import {
   NoodleLens,
   NoodlePride3Logo,
   NoodleTetrisLogo,
+  NoodleGifDayLogo,
+  NoodleGifDayGifText,
   LinkBase,
   CallToAction,
   ChangelogCard,
@@ -463,6 +465,23 @@ describe('component accessibility audits', () => {
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(NoodleGifDayGifText, {
+        props: {
+          text: 'N',
+          backgroundUrl: 'some_image_here.gif',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(NoodleGifDayLogo)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
   })
 
   describe('AppFooter', () => {

uno.theme.ts

@@ -5,6 +5,7 @@ export const theme = {
   font: {
     mono: "'Geist Mono', 'IBM Plex Sans Arabic', monospace",
     sans: "'Geist', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif",
+    noodle: "'Baloo 2', sans-serif",
   },
   text: {
     '2xs': { fontSize: '0.6875rem' }, // 11px