Add experimental View Transition on page change

assets/scss/4-base/_06-header.scss

@@ -4,8 +4,8 @@
 
 .header {
   position: relative;
-  top: 0;
   background-color: $color-bg-head;
+  transition: .15s all;
 }
 
 .header--home {

assets/scss/8-rwd/_rwd-reduced-motion.scss

@@ -26,4 +26,22 @@
   .coverGlitchSimpleHover:hover {
     animation: none;
   }
+
+
+  /* Experimental View Transition API
+  -------------------------------------------------------------- */
+
+  html,
+  .header__logo,
+  .header__tagline,
+  .navigation__item,
+  .catalog-item__visual,
+  .catalog-item__album,
+  .catalog-item__artist,
+  .album-cover__visual
+  .album-name
+  .album-artist {
+    view-transition-name: none !important;
+  }
+
 }

layouts/_default/baseof.html

@@ -33,6 +33,8 @@
     <meta name="twitter:title" content="Now Playing ∴ Great music should be shared" />
     <meta name="twitter:description" content="{{ .Site.Params.description }}" />
     {{ end }}
+    <!-- experimental view transition API -->
+    <meta name="view-transition" content="same-origin" />
 
     {{ with .Site.GetPage "/" }}
       {{ with .OutputFormats.Get "rss" }}

layouts/_default/single.html

@@ -41,7 +41,10 @@
             class="album-cover__visual"
             width="500"
             height="500"
-            style="background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});"
+            style="
+              background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});
+              view-transition-name: album_cover_{{ .File.BaseFileName }};
+            "
             src="{{ $coverMedium.Permalink }}"
             loading="lazy"
             alt="{{ .Title }} album's cover"
@@ -49,8 +52,8 @@
           >
         </picture>
         <div class="album-infos">
-          <h1 class="album-name">{{ .Title }}</h1>
+          <h1 class="album-name" style="view-transition-name: album_title_{{ .File.BaseFileName }};">{{ .Title }}</h1>
-          <strong class="album-artist">by {{ .Params.artist }}</strong>
+          <strong class="album-artist" style="view-transition-name: album_artist_{{ .File.BaseFileName }};">by {{ .Params.artist }}</strong>
           <ul class="album-tags">
             {{ range .Params.styles }}
               <li class="album-tags__item">{{ . }}</li>

layouts/index.html

@@ -42,13 +42,16 @@
             {{ $placeholder := $cover.Resize "x1 png" }}
             <div class="catalog-item">
               <a class="catalog-item__content" href="{{ .Permalink }}">
-                <h2 class="catalog-item__album">{{ .Title }}</h2>
+                <h2 class="catalog-item__album" style="view-transition-name: album_title_{{ .File.BaseFileName }};">{{ .Title }}</h2>
-                <div class="catalog-item__artist">by {{ .Params.artist }}</div>
+                <div class="catalog-item__artist" style="view-transition-name: album_artist_{{ .File.BaseFileName }};">by {{ .Params.artist }}</div>
                   <img
                   class="catalog-item__visual"
                   width="320"
                   height="320"
-                  style="background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});"
+                  style="
+                    background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});
+                    view-transition-name: album_cover_{{ .File.BaseFileName }};
+                  "
                   src="{{ $cover.Permalink }}"
                   srcset="{{ $cover.Permalink }} 1x, {{ $cover2x.Permalink }} 2x"
                   {{ if ( gt $albumIndex 3) }}

layouts/partials/header.html

@@ -5,19 +5,19 @@
 {{ end }}
   <div class="container">
     <div class="header__left">
-      <a class="header__logo glitch--hover" data-text="Now Playing" href="/" title="Homepage">Now Playing</a>
+      <a class="header__logo glitch--hover" data-text="Now Playing" href="/" title="Homepage" style="view-transition-name: header-title;">Now Playing</a>
-      <div class="header__tagline">
+      <div class="header__tagline" style="view-transition-name: header-tagline;">
         Great music should be shared
       </div>
     </div>
     <nav class="navigation" data-menu="navigation">
-      <a class="navigation__item {{ if .IsHome }}active{{ end }}" href="/">Latest</a>
+      <a class="navigation__item {{ if .IsHome }}active{{ end }}" href="/" style="view-transition-name: nav-latest;">Latest</a>
       {{ with .Site.GetPage "/" }}
         {{ with .OutputFormats.Get "RSS" }}
-          <a class="navigation__item" href="{{ .RelPermalink }}">RSS</a>
+          <a class="navigation__item" href="{{ .RelPermalink }}" style="view-transition-name: nav-rss;">RSS</a>
         {{ end }}
       {{ end }}
-      <button class="navigation__item" data-random="btn">Random</button>
+      <button class="navigation__item" data-random="btn" style="view-transition-name: header-random;">Random</button>
     </nav>
     <div class="navigation__mobileOverlay" data-menu="overlay"></div>
     <button class="navigation__mobileBtn" data-menu="btn">