remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add View Transitions API hero animation for favicon between pages

Browse Source 
The favicon animates from its large position in the WelcomeWorld title
to the smaller header position in PublicNoteListView and PublicNoteListByDidView.
This commit is contained in:
Julien Calixte
2026-03-19 18:43:26 +01:00
parent ddabe5082d
commit 29e56304c4
5 changed files with 43 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/PublicNoteListByDidView.vue
View File

@@ -20,6 +20,7 @@ const author = computedAsync(async () => getAuthor(did.value))
<main class="public-note-list-view">
<div class="header">
<home-button class="back-button" />
<img src="/favicon.png" alt="Remanso" class="remanso-logo" />
<h1 v-if="author">{{ author.handle }}</h1>
<div v-else class="skeleton h-8 w-40"></div>
</div>
@@ -65,6 +66,13 @@ const author = computedAsync(async () => getAuthor(did.value))
position: absolute;
}
.remanso-logo {
width: 32px;
height: 32px;
box-shadow: none;
view-transition-name: remanso-logo;
}
@media screen and (min-width: 769px) {
overflow-y: auto;
}

9
src/views/PublicNoteListView.vue
View File

@@ -34,6 +34,7 @@ const following = useFollowingNoteList(follows, followingEnabled)
<main class="public-note-list-view">
<div class="header">
<home-button class="back-button" />
<img src="/favicon.png" alt="Remanso" class="remanso-logo" />
</div>
<div v-if="isLoggedIn" role="tablist" class="tabs tabs-border">
@@ -135,6 +136,14 @@ const following = useFollowingNoteList(follows, followingEnabled)
display: flex;
gap: 0.5rem;
align-items: center;
position: absolute;
}
.remanso-logo {
width: 32px;
height: 32px;
box-shadow: none;
view-transition-name: remanso-logo;
}
@media screen and (min-width: 769px) {