+ *
+ * ```
+ */
+export type AnimeProps = ParentProps<{
+ /**
+ * Initial animation state applied before component mounts.
+ * Properties set here will be applied immediately without animation.
+ */
+ initial?: Partial;
+
+ /**
+ * Target animation state. If `initial` is provided, animates from initial to this state.
+ * If only `animation` is provided without `initial`, this is used directly.
+ */
+ animate?: AnimationParams;
+
+ /**
+ * Direct animation parameters (alternative to initial/animate pattern).
+ * Use this for simple animations without initial state.
+ */
+ animation?: AnimationParams;
+
+ /**
+ * Exit animation state (applied when component unmounts).
+ * Note: Requires wrapping in to function properly.
+ */
+ exit?: AnimationParams;
+
+ /**
+ * Apply reduced motion settings automatically.
+ * When true, animation durations will be set to 0 if user prefers reduced motion.
+ * @default true
+ */
+ respectReducedMotion?: boolean;
+
+ /**
+ * Tag name for the wrapper element.
+ * @default "div"
+ */
+ as?: keyof HTMLElementTagNameMap;
+
+ /**
+ * CSS class name for the wrapper element.
+ */
+ class?: string;
+
+ /**
+ * CSS styles for the wrapper element.
+ */
+ style?: string | Record;
+}>;
+
+/**
+ * A declarative anime.js wrapper component for SolidJS with a Motion One-style API.
+ *
+ * This component automatically handles animation lifecycle, cleanup, and reactivity.
+ * It wraps children in a container element and applies anime.js animations.
+ *
+ * ## Features
+ *
+ * - **Declarative API**: Define animations with `initial`, `animate`, and `exit` props
+ * - **Automatic cleanup**: Animations are canceled when component unmounts
+ * - **Reactive**: Animations update when props change
+ * - **Reduced motion support**: Respects user's motion preferences by default
+ * - **Flexible**: Works with any valid anime.js animation parameters
+ *
+ * @example
+ * Simple fade in:
+ * ```tsx
+ *
+ *
+ )}
+
+
+
+ );
+}
diff --git a/frontend/src/ts/components/common/anime/AnimePresence.tsx b/frontend/src/ts/components/common/anime/AnimePresence.tsx
new file mode 100644
index 000000000000..ec44b3588f1b
--- /dev/null
+++ b/frontend/src/ts/components/common/anime/AnimePresence.tsx
@@ -0,0 +1,312 @@
+import { resolveFirst } from "@solid-primitives/refs";
+import { createSwitchTransition } from "@solid-primitives/transition-group";
+import { AnimationParams } from "animejs";
+import {
+ JSXElement,
+ ParentProps,
+ createSignal,
+ createContext,
+ type Context,
+ type Accessor,
+ batch,
+ onCleanup,
+ onMount,
+} from "solid-js";
+
+export type AnimePresenceAPI = {
+ exit?: AnimationParams;
+ playExitAnimation: () => Promise;
+ cancelExitAnimation: () => void;
+};
+
+export type PresenceContextState = {
+ initial: boolean;
+ mount: Accessor;
+ register: (element: HTMLElement, api: AnimePresenceAPI) => void;
+ unregister: (element: HTMLElement) => void;
+};
+
+export const AnimePresenceContext: Context =
+ createContext();
+
+/**
+ * Props for the AnimePresence component
+ */
+export type AnimePresenceProps = ParentProps<{
+ /**
+ * If `false`, will disable the first animation on all child Anime elements
+ * the first time AnimePresence is rendered.
+ * @default true
+ */
+ initial?: boolean;
+
+ /**
+ * If `true`, AnimePresence will wait for the exiting element to finish
+ * animating out before animating in the next one.
+ * Only applies to single-child mode (when used with Show, Switch, etc.).
+ * @default false
+ */
+ exitBeforeEnter?: boolean;
+
+ /**
+ * Enable list mode for animating multiple children (e.g., with For loops).
+ * - `"list"`: uses MutationObserver to handle exit animations for dynamic lists.
+ * - `"single"`: uses single-child transition logic (for Show, Switch, etc.).
+ */
+ mode?: "list" | "single";
+}>;
+
+/**
+ * AnimePresence enables exit animations for components using the `` component.
+ *
+ * When a child component is removed from the tree, AnimePresence delays its unmounting
+ * to allow exit animations (defined via the `exit` prop on ``) to complete.
+ *
+ * ## Features
+ *
+ * - **Exit animations**: Automatically handles exit animations for removing children
+ * - **Multiple modes**: Control whether exit and enter animations run in sequence or parallel
+ * - **Conditional rendering**: Works with ``, ``, and other control flow components
+ *
+ * ## Important Notes
+ *
+ * - Children should have unique `key` props when rendering lists or conditionally
+ * - The `exit` prop on `` components only works when wrapped in ``
+ * - Exit animations are detected based on child removal from the component tree
+ *
+ * @example
+ * Basic usage with conditional rendering:
+ * ```tsx
+ * const [show, setShow] = createSignal(true);
+ *
+ *
+ *
+ *
+ *