feat: share translated feature images and animate landing

assets/css/compiled/main.css

@@ -4537,6 +4537,30 @@ body a, body button {
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
   transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
+@keyframes homepage-ambient-drift {
+  0%, 100% {
+    transform: scale(1.08) translate3d(-1.5%, -1%, 0);
+  }
+  50% {
+    transform: scale(1.16) translate3d(1.5%, 1%, 0);
+  }
+}
+.homepage-ambient-background {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  filter: saturate(1.08);
+  animation: homepage-ambient-drift 24s ease-in-out infinite;
+  will-change: transform;
+}
+.homepage-ambient-wash {
+  background: linear-gradient(180deg, rgba(var(--color-neutral-950), 0.08), rgba(var(--color-neutral-950), 0.42));
+}
+@media (prefers-reduced-motion: reduce) {
+  .homepage-ambient-background {
+    animation: none;
+  }
+}
 button, [role="button"] {
   cursor: pointer;
 }

assets/css/main.css

@@ -23,6 +23,37 @@ body button {
   @apply transition-colors;
 }
 
+/* Opt-in landing-page atmosphere. The motion is deliberately slow and is
+   removed entirely when a visitor requests reduced motion. */
+@keyframes homepage-ambient-drift {
+  0%,
+  100% {
+    transform: scale(1.08) translate3d(-1.5%, -1%, 0);
+  }
+  50% {
+    transform: scale(1.16) translate3d(1.5%, 1%, 0);
+  }
+}
+
+.homepage-ambient-background {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  filter: saturate(1.08);
+  animation: homepage-ambient-drift 24s ease-in-out infinite;
+  will-change: transform;
+}
+
+.homepage-ambient-wash {
+  background: linear-gradient(180deg, rgba(var(--color-neutral-950), 0.08), rgba(var(--color-neutral-950), 0.42));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .homepage-ambient-background {
+    animation: none;
+  }
+}
+
 button,
 [role="button"] {
   cursor: pointer;

exampleSite/config/_default/params.toml

@@ -53,6 +53,8 @@ fingerprintAlgorithm = "sha512" # Valid values are "sha512" (default), "sha384",
 [homepage]
   layout = "landing" # valid options: page, profile, hero, card, background, landing, custom
   layoutSwitcher = true # opt-in interactive preview of the built-in layouts
+  animatedBackground = true # opt-in motion background for the landing layout
+  animatedBackgroundImage = "images/v3/animated-background.png"
   # homepageImage = "/img/iceland.jpg" # used in: hero, and card
   showRecent = true
   showRecentItems = 12

layouts/partials/article-link/_shortcode.html

@@ -41,7 +41,7 @@
   {{/* frontmatter */}}
   {{ with $page }}
     {{ $p := . }}
-    {{ with .Params.featureimage }}
+    {{ with partial "functions/feature-image.html" . }}
       {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
         {{ if site.Params.hotlinkFeatureImage }}
           {{ $featuredURL = . }}

layouts/partials/article-link/card-related.html

@@ -15,7 +15,7 @@
 {{/* frontmatter */}}
 {{ with $page }}
   {{ $p := . }}
-  {{ with .Params.featureimage }}
+  {{ with partial "functions/feature-image.html" . }}
     {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
       {{ if site.Params.hotlinkFeatureImage }}
         {{ $featuredURL = . }}

layouts/partials/article-link/card.html

@@ -18,7 +18,7 @@
   {{/* frontmatter */}}
   {{ with $page }}
     {{ $p := . }}
-    {{ with .Params.featureimage }}
+    {{ with partial "functions/feature-image.html" . }}
       {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
         {{ if site.Params.hotlinkFeatureImage }}
           {{ $featuredURL = . }}

layouts/partials/article-link/simple.html

@@ -34,7 +34,7 @@
   {{/* frontmatter */}}
   {{ with $page }}
     {{ $p := . }}
-    {{ with .Params.featureimage }}
+    {{ with partial "functions/feature-image.html" . }}
       {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
         {{ if site.Params.hotlinkFeatureImage }}
           {{ $featuredURL = . }}

layouts/partials/functions/feature-image.html

@@ -0,0 +1,10 @@
+{{/* Return the page's feature image, falling back to a translated sibling.
+   This keeps a translated article visually aligned with its source page without
+   forcing every locale to duplicate presentation-only front matter. */}}
+{{ $featureImage := .Params.featureimage }}
+{{ if not $featureImage }}
+  {{ range .Translations }}
+    {{ with .Params.featureimage }}{{ $featureImage = . }}{{ end }}
+  {{ end }}
+{{ end }}
+{{ return $featureImage }}

layouts/partials/hero/background.html

@@ -3,7 +3,7 @@
 {{ $useDefault := false }}
 {{ $featured := "" }}
 {{ $featuredURL := "" }}
-{{ with .Params.featureimage }}
+{{ with partial "functions/feature-image.html" . }}
   {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
     {{ if site.Params.hotlinkFeatureImage }}
       {{ $featuredURL = . }}

layouts/partials/hero/basic.html

@@ -3,7 +3,7 @@
 {{ $useDefault := false }}
 {{ $featured := "" }}
 {{ $featuredURL := "" }}
-{{ with .Params.featureimage }}
+{{ with partial "functions/feature-image.html" . }}
   {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
     {{ if site.Params.hotlinkFeatureImage }}
       {{ $featuredURL = . }}

layouts/partials/hero/big.html

@@ -3,7 +3,7 @@
 {{ $useDefault := false }}
 {{ $featured := "" }}
 {{ $featuredURL := "" }}
-{{ with .Params.featureimage }}
+{{ with partial "functions/feature-image.html" . }}
   {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
     {{ if site.Params.hotlinkFeatureImage }}
       {{ $featuredURL = . }}

layouts/partials/hero/thumbAndBackground.html

@@ -37,7 +37,7 @@
 {{/* === Featured === */}}
 {{ $featured := "" }}
 {{ $featuredURL := "" }}
-{{ with .Params.featureimage }}
+{{ with partial "functions/feature-image.html" . }}
   {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
     {{ if site.Params.hotlinkFeatureImage }}
       {{ $featuredURL = . }}

layouts/partials/home/landing.html

@@ -1,7 +1,15 @@
 <article class="relative isolate overflow-hidden">
-  <div aria-hidden="true" class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80">
-    <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-primary-400 to-secondary-500 opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72rem]"></div>
-  </div>
+  {{ if .Site.Params.homepage.animatedBackground | default false }}
+    {{ $background := resources.Get (.Site.Params.homepage.animatedBackgroundImage | default "images/v3/animated-background.png") }}
+    {{ with $background }}
+      <div aria-hidden="true" class="homepage-ambient-background absolute inset-0 -z-10 overflow-hidden" style="background-image: url('{{ .RelPermalink }}');"></div>
+      <div aria-hidden="true" class="homepage-ambient-wash absolute inset-0 -z-10"></div>
+    {{ end }}
+  {{ else }}
+    <div aria-hidden="true" class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80">
+      <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-primary-400 to-secondary-500 opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72rem]"></div>
+    </div>
+  {{ end }}
 
   <section class="mx-auto max-w-7xl px-4 pb-16 pt-12 sm:px-6 sm:pb-24 sm:pt-20 lg:px-8">
     <div class="mx-auto max-w-4xl text-center">

layouts/partials/term-link/card.html

@@ -9,7 +9,7 @@
 {{ if isset .Page.Params "featureImageHover" }}{{ $featureImageHover = .Page.Params.featureImageHover }}{{ end }}
 {{ $featureImagePosition := .Page.Params.imagePositionFeature | default site.Params.imagePositionFeature | default site.Params.imagePosition }}
 {{ $p := .Page }}
-{{ with .Page.Params.featureimage }}
+{{ with partial "functions/feature-image.html" .Page }}
   {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
     {{ $featured = resources.GetRemote . }}
   {{ else }}