feat(a11y): Adjust for prefers-reduced-motion

static/js/index.js

@@ -60,7 +60,9 @@ const generate = async () => {
 
     mousemoveHandlerForPreviousCard = initialiseCardRotation(scene);
 
-    await new Promise((resolve) => setTimeout(resolve, 1_000));
+    await new Promise((resolve) =>
+      setTimeout(resolve, window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 1_500 : 1_000)
+    );
 
     setOutput('card', 'completed');
   } catch (err) {

static/style.css

@@ -57,16 +57,10 @@ main {
   main {
     padding: 3rem 0;
   }
-
-  .output .actions {
-    display: flex;
-    width: 90vw;
-    flex-wrap: wrap;
-  }
 }
 
 @media (max-width: 1280px) {
-  .info h1 {
+  section.info h1 {
     font-size: 3rem;
   }
 
@@ -128,6 +122,12 @@ section {
   transition: font-size 0.5s ease;
 }
 
+@media (prefers-reduced-motion) {
+  .info h1 {
+    transition: none;
+  }
+}
+
 .info label {
   width: 100%;
   text-align: center;
@@ -184,6 +184,7 @@ input:focus {
 .output .actions {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 1rem;
@@ -578,7 +579,7 @@ img.hf-logo {
   }
 }
 
-[data-mode='booster']:is([data-state='ready'], [data-state='generating'], [data-state='completed'], [data-state='failed']) .booster {
+[data-mode='booster'] .booster {
   display: block;
 }
 
@@ -603,6 +604,10 @@ img.hf-logo {
   transform: scale(0);
 }
 
+[data-mode='booster'][data-state='completed'] .back {
+  display: none;
+}
+
 [data-mode='card'][data-state='completed'] .booster {
   --booster-scale: 0;
 }
@@ -611,6 +616,47 @@ img.hf-logo {
   transform: scale(1);
 }
 
+@media (prefers-reduced-motion) {
+  @keyframes pulse {
+    from { opacity: 1; }
+    to { opacity: 0.6; }
+  }
+
+  @keyframes fade {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+
+  .card-slot .pokecard {
+    transition: none;
+  }
+
+  [data-mode='booster']:is([data-state='generating'], [data-state='completed']) .scene {
+    animation: 1.5s pulse alternate ease-in-out infinite forwards;
+  }
+
+  [data-state='generating'] .booster {
+    animation: 10s bounce infinite ease-out;
+  }
+
+  [data-mode='booster'][data-state='completed'] .booster {
+    animation: 1s fade ease-in forwards;
+  }
+
+  [data-state='completed'] .card-slot {
+    transition: opacity 1s ease-in;
+  }
+
+  [data-mode='booster'][data-state='completed'] .card-slot {
+    transform: scale(1);
+    opacity: 0;
+  }
+
+  [data-mode='card'][data-state='completed'] .card-slot {
+    opacity: 1;
+  }
+}
+
 
 /* Pokémon Card */
 
@@ -743,6 +789,7 @@ img.hf-logo {
   --card-scale: 1;
   display: flex;
   flex-direction: column;
+  position: relative;
   width: 25rem;
   height: 35rem;
   padding: 0.5rem 1rem 0.1rem;
@@ -762,6 +809,7 @@ img.hf-logo {
   transform-origin: center;
   transform: rotateX(var(--card-rx)) rotateY(var(--card-ry)) scale(var(--card-scale));
   transition: transform 0.5s ease-out;
+  filter: drop-shadow(0 0.75rem 1rem hsl(0 0% 50% / 50%));
 }
 
 .pokecard[data-displayed='true'] {