sort of working, going to make it interactive

html/hot_people_who_eat_croissants_are_dangerous.tsx

@@ -4,20 +4,51 @@ import { Component } from "./jsx/jsx-runtime.ts";
 const peopleify = (...people: string[]): string[] =>
     people.map(p => `${p} people`);
 
-const wheel = (...items: Html[]): Html => (
+const animation_length = (num_items: number): number => num_items / 5;
+
+const wheel_style = (num_items: number, delay_seconds = 0): string =>
+    `transform: translateY(calc(2rem * -${num_items})); animation: ${animation_length(
+        num_items
+    )}s 0s ease-in-out reverse none running spin; animation-delay: ${delay_seconds}s;`;
+
+const get_delays = (...lengths: number[]): number[] => {
+    let out = [0];
+    for (const l of lengths) {
+        out.push((out.at(-1) ?? 0) + animation_length(l));
+    }
+    return out;
+};
+const Wheel: Component = ({ delay_seconds }, children) => (
     <div class="wheel">
-        {...items.map(i => <div class="wheel-item">{i}</div>)}
+        <div
+            class="wheel-inner"
+            style={wheel_style(children.length, delay_seconds)}
+        >
+            <div class="wheel-item empty"></div>
+            {...children.map(i => <div class="wheel-item">{i}</div>)}
+        </div>
     </div>
 );
 
-const Take: Component = ({ subjects, objects, adjectives }, _) => (
+// i'll probably just hardcode the delays... lame but w/e
-    <div class="take">
+const Take: Component = ({ subjects, objects, adjectives }, _) => {
-        {wheel(...subjects)} who eat {wheel(...objects)} are{" "}
+    const [d1, d2, d3] = get_delays(
-        {wheel(...adjectives)}
+        subjects.length,
-    </div>
+        objects.length,
-);
+        adjectives.length
+    );
+    console.log(get_delays(subjects.length, objects.length, adjectives.length));
+    return (
+        <div class="take">
+            <Wheel delay_seconds={d1}>{...subjects}</Wheel> who eat{" "}
+            <Wheel delay_seconds={d2}>{...objects}</Wheel> are{" "}
+            <Wheel delay_seconds={d3}>{...adjectives}</Wheel>
+        </div>
+    );
+};
 
 // might want to have the final item be seperate
+// turned out to be unnecessary
 debug_render(
     <Take
         subjects={peopleify(