Andri/wave background in flow (dfinity#3211)

* anchor_management

* tentative device registration

* add most of the rest

* fix get_anchor_info

* add updating lookup table

* refactor and cleanup

* clippy

* rename metric

* update type and tests

* cwippy

* quippy

* add some integration tests

* did

* fix test

* fix tests

* fix tests

* gwippy

* fix tests

* ckouieppie

* fix test

* clippy

* update lookup function

* fix typo

* fix did

* fix did

* add did type alias

* add one more integration test

* update integration test

* rename function

* make id optional in reg mode enter endpoint

* update frontend to work with backend

* update integration tests

* update integration tests

* implement basic wavegrid

* scope files

* update static animation

* adjuts

* add stuff

* add controls

* make tempo-dependent, add double-wave

* update color

* adjust, add scalar

* add perlin wave

* add text

* refactor and make more usable

* ts fixes

* another option in dropdown

* get started on flaircanvas, write interface description

* basic implementation

* add more options and cool things

* coolify

* enough for today

* minor adjustments

* minor cleanupt

* tentatively finish ringmask mode (needs a bit of refactoring)

* add perlin opacity and scale

* add maskwave controls

* add custom color

* prevent moving color when moving opacity

* build into flow

* add to signup as well

* remove from button click

* remove iterated files

* minor fixes and merge main

* cleanup

* generate

* cleanup

* remove demo page

* add preloading

* lint

* add to authorize flow

* Changes proposed by Misha

* add feature flag, style animation according to design guidance

* remove flair from mobile

* remove from authenticating

* remove custom color

* temporarily deactivate tests

* Reenable tests and remove problematic lines

* Fix test

* Revert to lowercase

* merge changes

* add feature flag check for delay

* revert button names

* fix e2e

* fix tests

---------

Co-authored-by: Llorenç <llorenc.muntaner@dfinity.org>

Author: LXIF

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

@@ -0,0 +1,76 @@
+import * as easingFunctions from "svelte/easing";
+
+export interface FlairAnimationOptions {
+  location:
+    | "top"
+    | "left"
+    | "right"
+    | "bottom"
+    | "topLeft"
+    | "topRight"
+    | "bottomLeft"
+    | "bottomRight"
+    | "center"
+    | { x: number; y: number };
+  target: ("motion" | "scale" | "opacity")[];
+  motionType:
+    | "omni"
+    | "xy"
+    | "yx"
+    | "up"
+    | "down"
+    | "left"
+    | "right"
+    | "cw"
+    | "ccw"
+    | "perlin";
+  speed: "slow" | "medium" | "fast" | number;
+  intensity: "light" | "medium" | "strong" | number;
+  size: "large" | "medium" | "small" | number;
+  nImpulses: "single" | "double";
+  impulseEasing?: keyof typeof easingFunctions;
+}
+
+export interface FlairCanvasProps {
+  bgType?: "dots" | "grid" | "noisedots";
+  spacing?: "large" | "medium" | "small" | number;
+  aspect?: "square" | "wide" | "ultrawide" | number;
+  visibility?: "always" | "moving" | "maskwave";
+  dotSize?: "large" | "medium" | "small" | number;
+  vignette?: "center" | "top" | "left" | "right" | "bottom" | "none";
+  hoverAction?: "intense" | "minimal" | "none";
+  springOrTween?:
+    | {
+        type: "spring";
+        stiffness: "low" | "medium" | "high" | number;
+        dampening: "low" | "medium" | "high" | number;
+      }
+    | {
+        type: "tween";
+        duration: "short" | "medium" | "long" | number;
+        easing: keyof typeof easingFunctions;
+      };
+  noiseTimeScale?: "fast" | "medium" | "slow" | number;
+  enableRandomOpacity?: boolean;
+  opacityNoiseScale?: "large" | "medium" | "small" | number;
+  opacityNoiseMultiplier?: "large" | "medium" | "small" | number;
+  enableRandomPointSize?: boolean;
+  pointSizeNoiseScale?: "large" | "medium" | "small" | number;
+  pointSizeNoiseMultiplier?: "large" | "medium" | "small" | number;
+  maskWaveRampIn?: number;
+  maskWaveRampOut?: number;
+  maskWaveThickness?: "large" | "medium" | "small" | number;
+  maskWaveMinValue?: number;
+  maskWaveSpeedMultiplier?: number;
+  backgroundClasses?: string;
+  foregroundClasses?: string;
+  customColor?: string;
+  customColorMode?: "all" | "moving";
+  triggerAnimation?: (opts: FlairAnimationOptions) => void;
+}
+
+export interface NodeMotion {
+  motion: Spring<{ x: number; y: number }> | Tween<{ x: number; y: number }>;
+  prev: { x: number; y: number };
+  speed: number;
+}