Improve drop wave animation. (#3443)

* Improve drop wave animation.

* Prettier

Author: sea-snake

src/frontend/src/lib/components/backgrounds/FlairCanvas.d.ts

@@ -29,7 +29,6 @@ export interface FlairAnimationOptions {
   size: "large" | "medium" | "small" | number;
   nImpulses: "single" | "double";
   impulseEasing?: keyof typeof easingFunctions;
-  containerHeight?: "h-full" | "h-[640px]";
 }
 
 export interface FlairCanvasProps {
@@ -67,6 +66,7 @@ export interface FlairCanvasProps {
   maskWaveOneWay?: boolean;
   customColor?: string;
   customColorMode?: "all" | "moving";
+  containerHeight?: string;
   triggerAnimation?: (opts: FlairAnimationOptions) => Promise<void>;
   clearAnimation?: () => void;
 }

src/frontend/src/lib/components/backgrounds/FlairCanvas.svelte

@@ -23,7 +23,6 @@
   import type { FlairCanvasProps, NodeMotion } from "./FlairCanvas";
   import { onMount } from "svelte";
   import * as easingFunctions from "svelte/easing";
-  import { nonNullish } from "@dfinity/utils";
 
   let {
     bgType = "dots",
@@ -54,12 +53,12 @@
     maskWaveOneWay = false,
     customColor,
     customColorMode,
+    containerHeight,
     triggerAnimation = $bindable(),
     clearAnimation = $bindable(),
   }: FlairCanvasProps = $props();
 
   // State for dynamic height during animations
-  let animationHeight = $state<string | null>(null);
   let defaultHeight = "h-full"; // Default height
 
   let backgroundRef = $state<HTMLDivElement>();
@@ -271,14 +270,8 @@
       size,
       nImpulses,
       impulseEasing,
-      containerHeight,
     } = opts;
 
-    // Check whether the container height needs to change for this animation.
-    if (nonNullish(containerHeight)) {
-      animationHeight = containerHeight;
-    }
-
     let easingFunction = impulseEasing
       ? easingFunctions[impulseEasing]
       : undefined;
@@ -588,8 +581,6 @@
       }
 
       await Promise.all(promises);
-      // Reset animation height to default after animation is done
-      animationHeight = null;
     }
   };
 
@@ -856,7 +847,7 @@
 </script>
 
 <div
-  class={`${animationHeight ?? defaultHeight} absolute inset-0
+  class={`${containerHeight ?? defaultHeight} absolute inset-0
     -z-50 w-full select-none`}
   aria-hidden="true"
   bind:this={backgroundRef}

src/frontend/src/lib/components/backgrounds/WaveCanvas.svelte

@@ -23,30 +23,28 @@
   });
 </script>
 
-{#if !$isMobile}
-  <FlairCanvas
-    spacing="medium"
-    aspect="ultrawide"
-    dotSize="small"
-    vignette="none"
-    visibility="maskwave"
-    maskWaveRampIn={0.001}
-    maskWaveRampOut={0.5}
-    maskWaveThickness="large"
-    maskWaveMinValue={0}
-    maskWaveSpeedMultiplier={2}
-    maskWavePauseValue={0.25}
-    maskWaveOneWay={true}
-    enableRandomPointSize
-    enableRandomOpacity={false}
-    pointSizeNoiseScale="medium"
-    pointSizeNoiseMultiplier="medium"
-    springOrTween={{
-      type: "spring",
-      stiffness: "medium",
-      dampening: "medium",
-    }}
-    bind:triggerAnimation
-    bind:clearAnimation
-  />
-{/if}
+<FlairCanvas
+  spacing="medium"
+  aspect="ultrawide"
+  dotSize="small"
+  vignette="none"
+  visibility="maskwave"
+  maskWaveRampIn={0.001}
+  maskWaveRampOut={0.5}
+  maskWaveThickness="large"
+  maskWaveMinValue={0}
+  maskWaveSpeedMultiplier={2}
+  maskWavePauseValue={0.25}
+  maskWaveOneWay={true}
+  enableRandomPointSize
+  enableRandomOpacity={false}
+  pointSizeNoiseScale="medium"
+  pointSizeNoiseMultiplier="medium"
+  springOrTween={{
+    type: "spring",
+    stiffness: "medium",
+    dampening: "medium",
+  }}
+  bind:triggerAnimation
+  bind:clearAnimation
+/>

src/frontend/src/lib/components/backgrounds/constants.ts

@@ -9,5 +9,4 @@ export const DROP_WAVE_ANIMATION: FlairAnimationOptions = {
   nImpulses: "single",
   size: "large",
   impulseEasing: "cubicIn",
-  containerHeight: "h-full",
 };

src/frontend/src/lib/components/layout/Header.svelte

@@ -9,7 +9,10 @@
 
 <header
   {...props}
-  class={["flex items-center px-3 md:px-6 lg:px-8", className]}
+  class={[
+    "from-bg-primary flex items-center bg-gradient-to-b to-transparent px-3 md:px-6 lg:px-8",
+    className,
+  ]}
 >
   <div class="flex h-16 flex-1 items-center gap-4">
     <a href="/" class="flex items-center gap-4">

src/frontend/src/lib/components/layout/LandingHeader.svelte

@@ -8,7 +8,10 @@
 
 <header
   {...props}
-  class={["bg-bg-primary flex items-center px-0 md:px-6 lg:px-8", className]}
+  class={[
+    "to-bg-primary from-bg-primary flex items-center bg-gradient-to-b px-0 md:to-transparent md:px-6 lg:px-8",
+    className,
+  ]}
 >
   <div class="flex min-h-16 flex-1 items-center gap-4">
     <Logo class="text-fg-primary h-5.5" />

src/frontend/src/routes/(new-styling)/+layout.svelte

@@ -13,5 +13,8 @@
 </svelte:head>
 
 {@render children()}
-<WaveCanvas />
+<!-- Hide global wave canvas on mobile -->
+<div class="max-md:hidden">
+  <WaveCanvas />
+</div>
 <Toaster />

src/frontend/src/routes/(new-styling)/+page.svelte

@@ -1,10 +1,5 @@
 <script lang="ts">
   import Footer from "$lib/components/layout/Footer.svelte";
-  import { onMount } from "svelte";
-  import {
-    clearDropWaveAnimation,
-    triggerDropWaveAnimation,
-  } from "$lib/utils/animation-dispatcher";
   import Button from "$lib/components/ui/Button.svelte";
   import TextFade from "$lib/components/ui/TextFade.svelte";
   import FullControlIllustration from "$lib/components/illustrations/landing/FullControlIllustration.svelte";
@@ -21,27 +16,59 @@
   import { t } from "$lib/stores/locale.store";
   import { LanguageSelector, Trans } from "$lib/components/locale";
   import { MinusCircleIcon, PlusCircleIcon } from "@lucide/svelte";
+  import FlairCanvas from "$lib/components/backgrounds/FlairCanvas.svelte";
+  import { DROP_WAVE_ANIMATION } from "$lib/components/backgrounds/constants";
+  import type { FlairAnimationOptions } from "$lib/components/backgrounds/FlairCanvas";
 
   // Add rerouting back on this SSG route
   manuallyReroute();
 
-  // Only trigger the drop wave animation 100ms after the page has loaded,
-  // so we can cancel it if navigated to another route in that time window.
-  onMount(() => {
-    let cancelled = false;
-    setTimeout(() => {
-      if (!cancelled) {
-        void triggerDropWaveAnimation({ containerHeight: "h-[640px]" });
-      }
-    }, 100);
+  let triggerAnimation =
+    $state<(opts: FlairAnimationOptions) => Promise<void>>();
+  let clearAnimation = $state<() => void>();
+
+  $effect(() => {
+    triggerAnimation?.(DROP_WAVE_ANIMATION);
     return () => {
-      cancelled = true;
-      void clearDropWaveAnimation();
+      clearAnimation?.();
     };
   });
 </script>
 
 <div class="flex min-h-[100dvh] flex-col">
+  <div class="sm absolute top-0 right-0 left-0 -z-1 h-[640px] max-md:hidden">
+    <!-- Render animation specific to landing page here instead of using global instance -->
+    <FlairCanvas
+      spacing="medium"
+      aspect="ultrawide"
+      dotSize="small"
+      vignette="none"
+      visibility="maskwave"
+      maskWaveRampIn={0.001}
+      maskWaveRampOut={0.5}
+      maskWaveThickness="large"
+      maskWaveMinValue={0}
+      maskWaveSpeedMultiplier={2}
+      maskWavePauseValue={0.25}
+      maskWaveOneWay={true}
+      enableRandomPointSize
+      enableRandomOpacity={false}
+      pointSizeNoiseScale="medium"
+      pointSizeNoiseMultiplier="medium"
+      springOrTween={{
+        type: "spring",
+        stiffness: "medium",
+        dampening: "medium",
+      }}
+      containerHeight="h-[640px]"
+      bind:triggerAnimation
+      bind:clearAnimation
+    />
+    <!-- This div fades out the bottom end of the background wave animation -->
+    <div
+      class="from-bg-primary pointer-events-none absolute right-0 bottom-0 left-0 h-[200px] bg-gradient-to-t to-transparent"
+    ></div>
+  </div>
   <div class="h-[env(safe-area-inset-top)]"></div>
   <LandingHeader class="w-full flex-col md:flex-row">
     <div

src/frontend/src/routes/(new-styling)/authorize/(panel)/continue/+page.svelte

@@ -32,6 +32,7 @@
   import { slide, fade, scale } from "svelte/transition";
   import Dialog from "$lib/components/ui/Dialog.svelte";
   import EditAccount from "$lib/components/views/EditAccount.svelte";
+  import { triggerDropWaveAnimation } from "$lib/utils/animation-dispatcher";
   import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
 
   const PRIMARY_ACCOUNT_NUMBER = undefined;
@@ -91,6 +92,7 @@
       }
       const { identityNumber, actor } = $authenticationStore!;
       const { effectiveOrigin } = $authorizationContextStore;
+      void triggerDropWaveAnimation();
       await authorizationStore.authorize(
         defaultAccountNumber === null
           ? actor
@@ -107,6 +109,7 @@
     accountNumber: AccountNumber | typeof PRIMARY_ACCOUNT_NUMBER,
   ) => {
     try {
+      void triggerDropWaveAnimation();
       await authorizationStore.authorize(accountNumber);
     } catch (error) {
       handleError(error);