From bf6849297eddfb8dd9d1e2cdd1d3e7862d0542e8 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Thu, 27 Nov 2025 01:00:42 +0800
Subject: [PATCH] feat(docs): lollipop pattern animation

---
 .../assets/home-patterns-lollipop.svg         |  7 +++++++
 docs/.vitepress/components/Home.vue           | 20 +++++++++++++------
 2 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 docs/.vitepress/assets/home-patterns-lollipop.svg

diff --git a/docs/.vitepress/assets/home-patterns-lollipop.svg b/docs/.vitepress/assets/home-patterns-lollipop.svg
new file mode 100644
index 000000000..cfd79a460
--- /dev/null
+++ b/docs/.vitepress/assets/home-patterns-lollipop.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="4em" height="4m" viewBox="0 0 24 24">
+    <!-- Icon from MingCute Icon by MingCute Design - https://github.com/Richard9394/MingCute/blob/main/LICENSE -->
+    <g fill="none" transform="rotate(90) translate(4 -22) scale(0.72)">
+        <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/>
+        <path fill="#000000" d="M2 11a9 9 0 0 1 17.03-4.067c.235.462.297.993.2 1.502c-.54 2.831-1.83 4.996-3.338 6.198c-1.35 1.078-3.166 1.673-4.693 1.5a4.703 4.703 0 0 1-4.145-5.203a3.564 3.564 0 0 1 3.94-3.143a2.65 2.65 0 0 1 2.338 2.93a1.92 1.92 0 0 1-2.124 1.694a1.34 1.34 0 0 1-.899-.493l-.087-.123a1.3 1.3 0 0 1-.196-.558l-.002-.019l.034.12A1 1 0 0 0 11 12c1.249 0 2.08-.842 1.994-1.946c-.073-.935-.803-1.76-1.783-1.87a2.87 2.87 0 0 0-3.173 2.528a3.334 3.334 0 0 0 2.95 3.687a3.92 3.92 0 0 0 4.331-3.459a4.65 4.65 0 0 0-4.102-5.14a5.563 5.563 0 0 0-6.15 4.906a6.7 6.7 0 0 0 5.908 7.415c2.082.235 4.417-.53 6.164-1.924c1.017-.812 1.938-1.944 2.669-3.337a9 9 0 0 1-1.776 3.758l3.675 3.675a1 1 0 0 1-1.414 1.414l-3.675-3.675A9 9 0 0 1 2 11"/>
+    </g>
+</svg>
diff --git a/docs/.vitepress/components/Home.vue b/docs/.vitepress/components/Home.vue
index 93d3bdc52..288a58a48 100644
--- a/docs/.vitepress/components/Home.vue
+++ b/docs/.vitepress/components/Home.vue
@@ -10,6 +10,7 @@ import { useI18n } from 'vue-i18n'
 // of `url(...)` doesn't work properly in Vite/Vue, the entire SVG content either got incorrectly
 // cached or erased in dev/prod, causing the mask pattern to not show up.
 import homeBackgroundPatternGhost from '../assets/home-patterns-ghost.svg?no-inline'
+import homeBackgroundPatternLollipop from '../assets/home-patterns-lollipop.svg?no-inline'
 import ParallaxCover from './ParallaxCover.vue'
 import ParallaxCoverHalloween20251029 from './ParallaxCoverHalloween20251029.vue'
 
@@ -160,7 +161,14 @@ watchEffect((onCleanup) => {
 
     <div class="absolute inset-0 overflow-hidden -z-10">
       <!-- Repeating, slowly scrolling SVG pattern background -->
-      <div class="bg-ghost-pattern pointer-events-none absolute inset-0 z-0 opacity-10 dark:opacity-10" :style="{ '--bg-mask-ghost-pattern': `url(${homeBackgroundPatternGhost})` }" />
+      <ClientOnly>
+        <template v-if="isBetweenHalloweenAndHalfOfNovember(new Date())">
+          <div class="bg-icon-pattern pointer-events-none absolute inset-0 z-0 opacity-10 dark:opacity-10" :style="{ '--bg-mask-icon-pattern': `url(${homeBackgroundPatternGhost})` }" />
+        </template>
+        <template v-else>
+          <div class="bg-icon-pattern pointer-events-none absolute inset-0 z-0 opacity-10 dark:opacity-10" :style="{ '--bg-mask-icon-pattern': `url(${homeBackgroundPatternLollipop})` }" />
+        </template>
+      </ClientOnly>
       <!-- Flickering red (even within the color space range) if to top in oklch (UnoCSS or tailwind css default), have to force to use srgb color space to prevent this -->
       <div class="absolute bottom-0 left-0 right-0 top-0 z-2 h-80% from-transparent to-white bg-gradient-to-t dark:to-[hsl(207_15%_5%)]" style="--un-gradient-shape: to top in srgb;" />
       <ClientOnly>
@@ -183,20 +191,20 @@ watchEffect((onCleanup) => {
 
 <style>
 /* Infinite scrolling background pattern via mask */
-.bg-ghost-pattern {
+.bg-icon-pattern {
   background-color: white;
-  -webkit-mask-image: var(--bg-mask-ghost-pattern);
-  mask-image: var(--bg-mask-ghost-pattern);
+  -webkit-mask-image: var(--bg-mask-icon-pattern);
+  mask-image: var(--bg-mask-icon-pattern);
   -webkit-mask-repeat: repeat;
   mask-repeat: repeat;
   -webkit-mask-size: 256px 256px;
   mask-size: 256px 256px;
   -webkit-mask-position: 0 0;
   mask-position: 0 0;
-  animation: ghost-mask-scroll 8s linear infinite;
+  animation: icon-mask-scroll 8s linear infinite;
 }
 
-@keyframes ghost-mask-scroll {
+@keyframes icon-mask-scroll {
   100% { -webkit-mask-position: 256px 256px; mask-position: 256px 256px; }
 }