From 86866e7d77978f163d8dc283da7e24de045a1713 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Mon, 27 Apr 2026 23:10:29 +0200 Subject: [PATCH] feat(welcome): wire demo note links with stack reveal and flash --- src/components/WelcomeWorld.vue | 150 +++++++++++++++++++++++++------- 1 file changed, 119 insertions(+), 31 deletions(-) diff --git a/src/components/WelcomeWorld.vue b/src/components/WelcomeWorld.vue index 0c3e987..12e6bcd 100644 --- a/src/components/WelcomeWorld.vue +++ b/src/components/WelcomeWorld.vue @@ -65,6 +65,19 @@ const flashOffset = () => { }, 900) } +const firstHighlighted = ref(false) +const flashFirst = () => { + firstHighlighted.value = true + setTimeout(() => { + firstHighlighted.value = false + }, 900) +} + +const zettelRevealed = ref(false) +const toggleZettel = () => { + zettelRevealed.value = !zettelRevealed.value +} + const reviewRepo = computed(() => savedFavoriteRepos.value[0] ?? null) const showReviewCard = computed( () => cardsToReview.value.length > 0 && reviewRepo.value !== null @@ -464,7 +477,10 @@ const showReviewCard = computed(
-
+
remanso-space / getting-started

Luhmann called this the - zettelkasten: - a slip-box of thoughts you converse with, rather than a hoard - of pages you re-read. + zettelkasten: a slip-box of thoughts you converse with, rather than a + hoard of pages you re-read.

@@ -498,33 +515,71 @@ const showReviewCard = computed(
-
-
- remanso-space / getting-started -
-

Durable enough

-
-

- A durable note survives its own context. You should be able to - pick it up six months from now and still know what it means. -

-

- Rule of thumb: write the title as the claim, and the body as - the argument. -

-
-
-
↖ linked from
- -
-
+
+
+
+ remanso-space / getting-started +
+

Durable enough

+
+

+ A durable note survives its own context. You should be able + to pick it up six months from now and still know what it + means. +

+

+ Rule of thumb: write the title as the claim, and the body + as the argument. +

+
+
+
↖ linked from
+ +
+
+
+
+ remanso-space / getting-started +
+

Zettelkasten

+
+

+ A slip-box of atomic notes wired together by links + instead of filed away in folders. Niklas Luhmann kept + ninety thousand of them in a wooden cabinet and wrote with + them, not just about them. +

+

+ Each Zettel earns its keep by being linked to. + Open one, follow a thread, end up somewhere you didn't plan + to go. +

+
+
+
↖ linked from
+ +
+
+
@@ -1300,6 +1355,39 @@ main { animation: note-flash 0.9s ease forwards; } +.note-stack { + position: relative; + display: flex; + align-items: flex-start; +} + +.note-preview-zettel { + position: absolute; + inset: 0; + margin-top: 2.5rem; + transform: rotate(-0.6deg) translate(0, 0) scale(0.97); + opacity: 0; + pointer-events: none; + z-index: -1; + transition: + transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), + opacity 0.3s ease; + + &.is-revealed { + transform: rotate(-2deg) translate(28px, 28px) scale(0.97); + opacity: 1; + pointer-events: auto; + } +} + +@media (max-width: 640px) { + .note-preview-zettel { + &.is-revealed { + transform: rotate(-1.5deg) translate(12px, 22px) scale(0.96); + } + } +} + @keyframes note-flash { 0% { box-shadow: