jason/mempalace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

(landing) svg icons animations

Browse Source
This commit is contained in:
Dominique Deschatre
2026-04-17 19:37:30 -03:00
parent e5f5009f80
commit 9e8281aab5
3 changed files with 183 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/.vitepress/theme/landing/AnatomySection.vue
+18 -12
View File
@@ -57,18 +57,24 @@
<p>Inside a room, closets group related drawers by topic or thread. Open one closet and you see every drawer on that subject together — no need to walk the whole room.</p>
<div class="diagram">
<svg viewBox="0 0 200 80" fill="none" stroke="currentColor" stroke-width="1" style="color:var(--prism);">
<rect x="10" y="14" width="54" height="52" />
<rect x="73" y="14" width="54" height="52" />
<rect x="136" y="14" width="54" height="52" />
<line x1="37" y1="14" x2="37" y2="66" opacity="0.5"/>
<line x1="100" y1="14" x2="100" y2="66" opacity="0.5"/>
<line x1="163" y1="14" x2="163" y2="66" opacity="0.5"/>
<circle cx="33" cy="40" r="1.2" fill="currentColor"/>
<circle cx="41" cy="40" r="1.2" fill="currentColor"/>
<circle cx="96" cy="40" r="1.2" fill="currentColor"/>
<circle cx="104" cy="40" r="1.2" fill="currentColor"/>
<circle cx="159" cy="40" r="1.2" fill="currentColor"/>
<circle cx="167" cy="40" r="1.2" fill="currentColor"/>
<g class="closet">
<rect x="10" y="14" width="54" height="52" />
<line x1="37" y1="14" x2="37" y2="66" opacity="0.5"/>
<circle cx="33" cy="40" r="1.2" fill="currentColor"/>
<circle cx="41" cy="40" r="1.2" fill="currentColor"/>
</g>
<g class="closet">
<rect x="73" y="14" width="54" height="52" />
<line x1="100" y1="14" x2="100" y2="66" opacity="0.5"/>
<circle cx="96" cy="40" r="1.2" fill="currentColor"/>
<circle cx="104" cy="40" r="1.2" fill="currentColor"/>
</g>
<g class="closet">
<rect x="136" y="14" width="54" height="52" />
<line x1="163" y1="14" x2="163" y2="66" opacity="0.5"/>
<circle cx="159" cy="40" r="1.2" fill="currentColor"/>
<circle cx="167" cy="40" r="1.2" fill="currentColor"/>
</g>
</svg>
</div>
</article>
website/.vitepress/theme/landing/MechanicsSection.vue
+20 -12
View File
@@ -15,8 +15,12 @@
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.3">
<rect x="8" y="10" width="32" height="22" rx="1"/>
<path d="M8 16h32"/>
<path d="M14 24h20M14 28h12"/>
<g class="mech-bars">
<path d="M14 24h20"/>
<path d="M14 28h12"/>
</g>
<path d="M16 38h16M20 32v6M28 32v6"/>
<circle class="mech-led" cx="36" cy="13.5" r="1.1" fill="currentColor"/>
</svg>
</div>
<span class="eyebrow no-rule"><span class="n">— 01</span></span>
@@ -28,9 +32,9 @@
<article class="mech">
<div class="icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.3">
<circle cx="24" cy="24" r="14"/>
<path d="M16 24h16M24 16v16"/>
<path d="M10 10l28 28" stroke-width="1.5"/>
<circle class="mech-ring" cx="24" cy="24" r="14"/>
<path class="mech-plus" d="M16 24h16M24 16v16"/>
<path class="mech-slash" d="M10 10l28 28" stroke-width="1.5"/>
</svg>
</div>
<span class="eyebrow no-rule"><span class="n">— 02</span></span>
@@ -44,8 +48,10 @@
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.3">
<path d="M8 36V18l8-8h16l8 8v18"/>
<path d="M8 36h32"/>
<circle cx="24" cy="26" r="4"/>
<path d="M24 22v-4M24 30v4M20 26h-4M28 26h4"/>
<g class="mech-gear">
<circle cx="24" cy="26" r="4"/>
<path d="M24 22v-4M24 30v4M20 26h-4M28 26h4"/>
</g>
</svg>
</div>
<span class="eyebrow no-rule"><span class="n">— 03</span></span>
@@ -57,12 +63,14 @@
<article class="mech">
<div class="icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.3">
<circle cx="10" cy="12" r="3"/>
<circle cx="38" cy="10" r="3"/>
<circle cx="24" cy="26" r="3"/>
<circle cx="12" cy="38" r="3"/>
<circle cx="38" cy="36" r="3"/>
<path d="M12 14l10 10M36 12L26 24M14 36l8-8M36 34l-10-6" opacity="0.6"/>
<path class="mech-edges" d="M12 14l10 10M36 12L26 24M14 36l8-8M36 34l-10-6" opacity="0.6"/>
<g class="mech-nodes">
<circle cx="10" cy="12" r="3"/>
<circle cx="38" cy="10" r="3"/>
<circle cx="24" cy="26" r="3"/>
<circle cx="12" cy="38" r="3"/>
<circle cx="38" cy="36" r="3"/>
</g>
</svg>
</div>
<span class="eyebrow no-rule"><span class="n">— 04</span></span>
website/.vitepress/theme/landing/landing.css
+145
View File
@@ -1174,3 +1174,148 @@ body.mempalace-active { overflow-x: hidden; }
transition-duration: 0.001s !important;
}
}
/* ================================================================
ICON ANIMATIONS — Anatomy diagrams + Mechanics icons
================================================================ */
.mempalace-landing .anatomy-diagram .stratum .diagram svg rect,
.mempalace-landing .anatomy-diagram .stratum .diagram svg circle,
.mempalace-landing .mech .icon svg * {
transform-box: fill-box;
transform-origin: center;
}
/* Wing — only the outer wing outline pulses brighter */
.mempalace-landing .stratum:nth-child(1) .diagram svg rect[opacity] {
animation: mpl-wing-light 3.6s ease-in-out infinite;
}
@keyframes mpl-wing-light {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* Room — four rooms light up in sequence */
.mempalace-landing .stratum:nth-child(2) .diagram svg rect {
fill: var(--prism);
fill-opacity: 0;
animation: mpl-room-light 4.5s ease-in-out infinite;
}
.mempalace-landing .stratum:nth-child(2) .diagram svg rect:nth-of-type(2) { animation-delay: 0.25s; }
.mempalace-landing .stratum:nth-child(2) .diagram svg rect:nth-of-type(3) { animation-delay: 0.5s; }
.mempalace-landing .stratum:nth-child(2) .diagram svg rect:nth-of-type(4) { animation-delay: 0.75s; }
@keyframes mpl-room-light {
0%, 40%, 100% { fill-opacity: 0; }
10%, 30% { fill-opacity: 0.4; }
}
/* Closet — three closets do a gentle vertical wave, staggered 180ms apart */
.mempalace-landing .stratum:nth-child(3) .diagram svg .closet {
transform-box: fill-box;
transform-origin: center;
animation: mpl-closet-wave 3.6s ease-in-out infinite;
}
.mempalace-landing .stratum:nth-child(3) .diagram svg .closet:nth-of-type(2) { animation-delay: 0.18s; }
.mempalace-landing .stratum:nth-child(3) .diagram svg .closet:nth-of-type(3) { animation-delay: 0.36s; }
@keyframes mpl-closet-wave {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
.mempalace-landing .stratum:nth-child(3) .diagram svg circle {
fill: currentColor;
}
/* Drawer — drawers slide out rhythmically; handles pulse */
.mempalace-landing .stratum:nth-child(4) .diagram svg rect {
animation: mpl-drawer-slide 4.2s ease-in-out infinite;
}
.mempalace-landing .stratum:nth-child(4) .diagram svg rect:nth-of-type(2) { animation-delay: 0.3s; }
.mempalace-landing .stratum:nth-child(4) .diagram svg rect:nth-of-type(3) { animation-delay: 0.6s; }
@keyframes mpl-drawer-slide {
0%, 100% { transform: translateX(0); }
25%, 40% { transform: translateX(10px); }
}
.mempalace-landing .stratum:nth-child(4) .diagram svg circle {
fill: currentColor;
animation: mpl-dot-pulse 2.2s ease-in-out infinite;
}
.mempalace-landing .stratum:nth-child(4) .diagram svg circle:nth-of-type(2) { animation-delay: 0.18s; }
.mempalace-landing .stratum:nth-child(4) .diagram svg circle:nth-of-type(3) { animation-delay: 0.36s; }
/* Mechanics #1 — data bars pulse like activity; status LED breathes */
.mempalace-landing .mech:nth-child(1) .icon svg .mech-bars path {
stroke-opacity: 0.35;
animation: mpl-bar-pulse 2.4s ease-in-out infinite;
}
.mempalace-landing .mech:nth-child(1) .icon svg .mech-bars path:nth-of-type(2) {
animation-delay: 0.45s;
}
@keyframes mpl-bar-pulse {
0%, 100% { stroke-opacity: 0.35; }
50% { stroke-opacity: 1; }
}
.mempalace-landing .mech:nth-child(1) .icon svg .mech-led {
animation: mpl-led-blink 1.8s ease-in-out infinite;
}
@keyframes mpl-led-blink {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
/* Mechanics #2 — ring breathes, slash pulses */
.mempalace-landing .mech:nth-child(2) .icon svg .mech-ring {
animation: mpl-ring-breathe 4s ease-in-out infinite;
transform-origin: center;
transform-box: fill-box;
}
@keyframes mpl-ring-breathe {
0%, 100% { transform: scale(1); stroke-opacity: 0.85; }
50% { transform: scale(1.05); stroke-opacity: 1; }
}
.mempalace-landing .mech:nth-child(2) .icon svg .mech-slash {
stroke-opacity: 0.55;
animation: mpl-slash-pulse 2.6s ease-in-out infinite;
}
@keyframes mpl-slash-pulse {
0%, 100% { stroke-opacity: 0.45; }
50% { stroke-opacity: 1; }
}
/* Mechanics #3 — gear rotates; house stays still */
.mempalace-landing .mech:nth-child(3) .icon svg .mech-gear {
animation: mpl-gear-spin 12s linear infinite;
transform-origin: center;
transform-box: fill-box;
}
@keyframes mpl-gear-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Mechanics #4 — nodes pulse in sequence, edges shimmer */
.mempalace-landing .mech:nth-child(4) .icon svg .mech-nodes circle {
transform-origin: center;
transform-box: fill-box;
stroke-opacity: 0.7;
animation: mpl-graph-node 3.2s ease-in-out infinite;
}
.mempalace-landing .mech:nth-child(4) .icon svg .mech-nodes circle:nth-of-type(2) { animation-delay: 0.3s; }
.mempalace-landing .mech:nth-child(4) .icon svg .mech-nodes circle:nth-of-type(3) { animation-delay: 0.6s; }
.mempalace-landing .mech:nth-child(4) .icon svg .mech-nodes circle:nth-of-type(4) { animation-delay: 0.9s; }
.mempalace-landing .mech:nth-child(4) .icon svg .mech-nodes circle:nth-of-type(5) { animation-delay: 1.2s; }
@keyframes mpl-graph-node {
0%, 100% { transform: scale(1); stroke-opacity: 0.55; }
50% { transform: scale(1.35); stroke-opacity: 1; }
}
.mempalace-landing .mech:nth-child(4) .icon svg .mech-edges {
animation: mpl-edge-shimmer 3.2s ease-in-out infinite;
}
@keyframes mpl-edge-shimmer {
0%, 100% { stroke-opacity: 0.35; }
50% { stroke-opacity: 0.9; }
}
/* Hover: mechanics icons react with extra glow */
.mempalace-landing .mech:hover .icon svg {
filter: drop-shadow(0 0 8px rgba(74,163,255,0.4));
transition: filter 0.3s ease;
}