slightly more tractable skeleton?

html/hot_people_who_eat_croissants_are_dangerous.tsx

@@ -7,10 +7,12 @@ const peopleify = (...people: string[]): string[] =>
 
 const animation_length = (num_items: number): number => /*num_items / 5*/ 3;
 
-const wheel_style = (num_items: number): string =>
+const wheel_style = (num_items: number, width?: number): string =>
     `transform: translateY(calc(2rem * -${num_items})); animation: ${animation_length(
         num_items
-    )}s ease-in-out reverse none running spin;`;
+    )}s ease-in-out reverse none running spin; ${
+        width ? `width: ${width * 100}%;` : ""
+    }`;
 
 const get_delays = (...lengths: number[]): number[] => {
     let out = [0];
@@ -20,12 +22,15 @@ const get_delays = (...lengths: number[]): number[] => {
     return out;
 };
 
-const Wheel: Component = ({ items }, _) => (
+const Wheel: Component = ({ items, width, classes }, _) => (
     <details class="wheel">
         <summary>
             {...items.map((i: string) => <div class="wheel-item">{i}</div>)}
         </summary>
-        <div class="wheel-inner" style={wheel_style(items.length)}>
+        <div
+            class={`wheel-inner ${classes ? classes.join(" ") : ""}`}
+            style={wheel_style(items.length, width)}
+        >
             {/* <div class="wheel-item empty"></div> */}
             {...items.map((item: string, i: number) => (
                 <div
@@ -42,11 +47,16 @@ function slices<T>(arr: T[]): T[][] {
     return arr.map((_, i) => arr.slice(0, i));
 }
 
+function weird_slices<T>(arr: T[]): T[][] {
+    return arr.map(item => [...arr.filter(t => t != item), item]);
+}
+
 const MultiWheel: Component = ({ items }, _) => (
     <div class="multiwheel">
-        {slices(items).map(items => (
-            <Wheel items={items} />
+        {...weird_slices(items).map(items => (
+            <Wheel items={items} width={1 / items.length} />
         ))}
+        <Wheel items={items} classes={["invisible"]} />
     </div>
 );
 

html/html.ts

@@ -42,7 +42,7 @@ function expand_fragments(elem: Html): Html {
   if (is_string(elem)) {
     return elem;
   } else {
-    const children = expand_fragments_in_list(elem.children);
+    const children = expand_fragments_in_list(elem.children ?? []);
     return { ...elem, children };
   }
 }
@@ -56,14 +56,13 @@ const attr = (attrs: Attributes) => (elem: Html): Html => {
   }
 };
 
-const escape = (unsafe: string): string => {
-  return unsafe
+const escape = (unsafe: string): string =>
+  unsafe
     .replaceAll("&", "&")
     .replaceAll("<", "&lt;")
     .replaceAll(">", "&gt;")
     .replaceAll('"', "&quot;")
     .replaceAll("'", "&#039;");
-};
 
 function render_attributes(attrs: Attributes): string {
   return (
@@ -76,14 +75,14 @@ function render_attributes(attrs: Attributes): string {
 }
 
 function indent(str: string, amount = 4, char = " "): string {
-  const ind = char.repeat(4);
+  const ind = char.repeat(amount);
   return str
     .split("\n")
     .map((l) => ind + l)
     .join("\n");
 }
 
-// incomplete, obviously.
+// incomplete, obviously
 const NON_SELF_CLOSING = ["div", "p", "a"];
 
 function render_elem(