nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

feat(docs): lollipop pattern animation

Browse Source
This commit is contained in:
Neko Ayaka
2025-11-27 01:00:42 +08:00
parent c3a4b29991
commit bf6849297e
2 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/assets/home-patterns-lollipop.svg
+7
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

docs/.vitepress/components/Home.vue
+14 -6
View File
@@ -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; }
}