Animations

web/src/components/AlbumModal.tsx

@@ -5,6 +5,7 @@ import { useEffect, useRef } from "react";
 import type { Album } from "../api/types";
 import { isBook, unitLabel } from "../lib/covers";
 import { clock } from "../lib/format";
+import { ANIMATE_VIEW_TRANSITIONS } from "../lib/theme";
 import { Cover } from "./Cover";
 
 interface Props {
@@ -44,9 +45,14 @@ export function AlbumModal({
   }, [selectedIndex]);
 
   return (
-    <div className="overlay" style={{ zIndex: 4, background: "oklch(15% 0.03 210 / .6)" }} onClick={onClose}>
+    <div
+      className={ANIMATE_VIEW_TRANSITIONS ? "overlay backdrop-enter" : "overlay"}
+      style={{ zIndex: 4, background: "oklch(15% 0.03 210 / .6)" }}
+      onClick={onClose}
+    >
       <div
         ref={sheet}
+        className={ANIMATE_VIEW_TRANSITIONS ? "sheet-enter" : undefined}
         onClick={(event) => event.stopPropagation()}
         style={{
           background: "oklch(96% 0.012 210)",

web/src/components/BrowseView.tsx

@@ -20,6 +20,7 @@ import { clock } from "../lib/format";
 import type { Category, Group, Results, SongHit } from "../lib/search";
 import { categoryMatches, groupOf } from "../lib/search";
 import {
+  ANIMATE_VIEW_TRANSITIONS,
   glassTint,
   GROUP_HUE,
   GROUP_ICON,
@@ -137,7 +138,11 @@ export function BrowseView({
 
   if (isRootShelf) {
     return (
-      <div ref={scroller} style={{ flex: 1, overflow: "auto", minHeight: 0, padding: "14px 32px 250px" }}>
+      <div
+        ref={scroller}
+        className={ANIMATE_VIEW_TRANSITIONS ? "view-enter" : undefined}
+        style={{ flex: 1, overflow: "auto", minHeight: 0, padding: "14px 32px 250px" }}
+      >
         {shelves.map(({ group: shelfGroup, categories: shelfCategories }, index) => (
           <div
             key={shelfGroup}
@@ -291,6 +296,8 @@ export function BrowseView({
 
       <div
         ref={scroller}
+        key={`${group}:${category}:${mode}`}
+        className={ANIMATE_VIEW_TRANSITIONS ? "view-enter" : undefined}
         style={{ flex: 1, overflow: "auto", minHeight: 0, padding: "14px 32px 250px" }}
       >
         {songs.length > 0 && (

web/src/components/PlayView.tsx

@@ -5,6 +5,7 @@ import { usePlaybackClock } from "../hooks/usePlaybackClock";
 import { albumLine, isBook } from "../lib/covers";
 import { clock, remainingInAlbum } from "../lib/format";
 import { groupOf } from "../lib/search";
+import { SHOW_DECORATIVE_ANIMATIONS } from "../lib/theme";
 import { Cover } from "./Cover";
 import { ProgressBar } from "./ProgressBar";
 import { Transport } from "./Transport";
@@ -76,7 +77,7 @@ export function PlayView({
             zIndex: 0,
             pointerEvents: "none",
             opacity: 0.92,
-            animation: "dolphinSwim 62s linear infinite",
+            animation: SHOW_DECORATIVE_ANIMATIONS ? "dolphinSwim 62s linear infinite" : "none",
             // Freezes in its current pose rather than snapping back to frame 0 -
             // `animation: "none"` would restart it, `animationPlayState` just pauses.
             animationPlayState: state.playing ? "running" : "paused",

web/src/components/PlayerBar.tsx

@@ -3,6 +3,7 @@
 import type { Album, PlayerState } from "../api/types";
 import { usePlaybackClock } from "../hooks/usePlaybackClock";
 import { albumLine, isBook } from "../lib/covers";
+import { SHOW_DECORATIVE_ANIMATIONS, SHOW_GLASS_BLUR } from "../lib/theme";
 import { Cover } from "./Cover";
 import { ProgressBar } from "./ProgressBar";
 import { Transport } from "./Transport";
@@ -41,7 +42,7 @@ export function PlayerBar({
         bottom: 0,
         zIndex: 2,
         background: "oklch(18% 0.05 210 / .96)",
-        backdropFilter: "blur(6px)",
+        backdropFilter: SHOW_GLASS_BLUR ? "blur(6px)" : undefined,
         padding: "16px clamp(12px, 3vw, 32px)",
         // Clear of the iPhone home indicator when installed to the home screen.
         paddingBottom: "calc(16px + env(safe-area-inset-bottom))",
@@ -61,7 +62,10 @@ export function PlayerBar({
           objectFit: "contain",
           flex: "0 1 auto",
           minWidth: 0,
-          animation: state.playing ? "dolphinBob 1.6s ease-in-out infinite" : "none",
+          animation:
+            SHOW_DECORATIVE_ANIMATIONS && state.playing
+              ? "dolphinBob 1.6s ease-in-out infinite"
+              : "none",
           filter: "drop-shadow(0 4px 12px oklch(10% 0.05 210 / .5))",
         }}
       />

web/src/components/RoomView.tsx

@@ -7,6 +7,7 @@ import { useState } from "react";
 
 import type { HaConfig } from "../api/types";
 import { useHomeAssistant } from "../hooks/useHomeAssistant";
+import { SHOW_DECORATIVE_ANIMATIONS } from "../lib/theme";
 import { AppHeader } from "./AppHeader";
 import { Bubbles } from "./Bubbles";
 import { LightCard } from "./LightCard";
@@ -28,7 +29,7 @@ export function RoomView({ config }: { config: HaConfig }) {
 
   return (
     <div className="stage room-stage" style={{ display: "flex", flexDirection: "column" }}>
-      <Bubbles />
+      {SHOW_DECORATIVE_ANIMATIONS && <Bubbles />}
       <div
         style={{
           position: "relative",