feat: move animated background to example site canvas

assets/css/compiled/main.css

@@ -4537,30 +4537,6 @@ 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,37 +23,6 @@ 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/assets/images/v3/site-background.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <radialGradient id="violet" cx="50%" cy="50%" r="50%">
+      <stop offset="0" stop-color="#7c3aed" stop-opacity=".72"/>
+      <stop offset="1" stop-color="#7c3aed" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="blue" cx="50%" cy="50%" r="50%">
+      <stop offset="0" stop-color="#2563eb" stop-opacity=".68"/>
+      <stop offset="1" stop-color="#2563eb" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="blur"><feGaussianBlur stdDeviation="34"/></filter>
+    <filter id="grain"><feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="3" stitchTiles="stitch"/><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 .09 0"/></filter>
+    <linearGradient id="line" x1="0" x2="1"><stop stop-color="#60a5fa" stop-opacity="0"/><stop offset=".5" stop-color="#c4b5fd" stop-opacity=".52"/><stop offset="1" stop-color="#fb7185" stop-opacity="0"/></linearGradient>
+  </defs>
+  <rect width="1600" height="900" fill="#061126"/>
+  <g filter="url(#blur)">
+    <circle cx="280" cy="160" r="290" fill="url(#violet)">
+      <animate attributeName="cx" values="280;440;280" dur="22s" repeatCount="indefinite"/>
+      <animate attributeName="cy" values="160;260;160" dur="18s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="1320" cy="690" r="350" fill="url(#blue)">
+      <animate attributeName="cx" values="1320;1160;1320" dur="26s" repeatCount="indefinite"/>
+      <animate attributeName="cy" values="690;580;690" dur="20s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="900" cy="250" r="190" fill="url(#blue)" opacity=".7">
+      <animate attributeName="cy" values="250;390;250" dur="16s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+  <g fill="none" stroke="url(#line)" stroke-width="1.5" opacity=".75">
+    <path d="M-80 670 C250 420 470 850 770 600 S1320 280 1680 490"><animate attributeName="d" dur="19s" repeatCount="indefinite" values="M-80 670 C250 420 470 850 770 600 S1320 280 1680 490;M-80 570 C250 720 470 410 770 640 S1320 390 1680 390;M-80 670 C250 420 470 850 770 600 S1320 280 1680 490"/></path>
+    <path d="M-60 760 C230 520 500 780 810 690 S1340 420 1660 610" opacity=".65"><animate attributeName="d" dur="24s" repeatCount="indefinite" values="M-60 760 C230 520 500 780 810 690 S1340 420 1660 610;M-60 660 C230 750 500 510 810 730 S1340 330 1660 520;M-60 760 C230 520 500 780 810 690 S1340 420 1660 610"/></path>
+  </g>
+  <rect width="1600" height="900" filter="url(#grain)" opacity=".55"/>
+</svg>

exampleSite/config/_default/params.toml

@@ -24,7 +24,7 @@ disableImageOptimizationMD = false
 disableTextInHeader = false
 # backgroundImageWidth = 1200
 
-defaultBackgroundImage = "/img/background.svg"
+defaultBackgroundImage = "images/v3/site-background.svg"
 defaultFeaturedImage = "/img/featured.svg"
 defaultSocialImage = "/img/blowfish_banner.png"
 hotlinkFeatureImage = false
@@ -53,8 +53,6 @@ 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

exampleSite/content/docs/homepage-layout/index.md

@@ -1,6 +1,6 @@
 ---
 title: "Homepage Layout"
-featureimage: "images/v3/layouts.png"
+featureimage: "images/v3/homepage-layout.png"
 weight: 5
 draft: false
 description: "Configuring the homepage layout in the Blowfish theme."

exampleSite/content/docs/shortcodes/index.md

@@ -3,7 +3,7 @@ title: "Shortcodes"
 weight: 6
 draft: false
 description: "All the shortcodes available in Blowfish."
-featureimage: "images/v3/documentation.png"
+featureimage: "images/v3/shortcodes.png"
 slug: "shortcodes"
 tags: ["shortcodes", "mermaid", "icon", "lead", "docs"]
 series: ["Documentation"]

layouts/partials/home/landing.html

@@ -1,15 +1,7 @@
 <article class="relative isolate overflow-hidden">
-  {{ 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 }}
+  <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>
 
   <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">