diff --git a/html/cohost-plus.tsx b/html/cohost-plus.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/html/eggbug-spamclick-battle.tsx b/html/eggbug-spamclick-battle.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/html/hot_people_who_eat_croissants_are_dangerous.tsx b/html/hot_people_who_eat_croissants_are_dangerous.tsx
index 43e65bf..9f0cdbd 100644
--- a/html/hot_people_who_eat_croissants_are_dangerous.tsx
+++ b/html/hot_people_who_eat_croissants_are_dangerous.tsx
@@ -8,12 +8,12 @@ const peopleify = (...people: string[]): string[] =>
 
 const animation_length = (num_items: number): number => /*num_items / 5*/ 3;
 
-const wheel_style = (num_items: number, width?: number): string =>
+const wheel_style = (num_items: number, width?: number, n?: number): string =>
     `transform: translateY(calc(2rem * -${num_items})); animation: ${animation_length(
         num_items
     )}s ease-in-out reverse none running spin; ${
         width ? `width: ${width * 100}%;` : ""
-    }`;
+    } ${n ? `margin-left: calc(-${(width ?? 0) * 100}% * ${n})` : ""}`;
 
 const get_delays = (...lengths: number[]): number[] => {
     let out = [0];
@@ -23,14 +23,14 @@ const get_delays = (...lengths: number[]): number[] => {
     return out;
 };
 
-const Wheel: Component = ({ items, width, classes }, _) => (
-    <details class="wheel">
-        <summary>
+const Wheel: Component = ({ items, width, n, classes }, _) => (
+    <details class="wheel" style={width ? `width: ${width * 100}%;` : ""}>
+        <summary class={classes ? classes.join(" ") : ""}>
             {...items.map((i: string) => <div class="wheel-item">{i}</div>)}
         </summary>
         <div
             class={`wheel-inner ${classes ? classes.join(" ") : ""}`}
-            style={wheel_style(items.length, width)}
+            style={wheel_style(items.length, width, n)}
         >
             {/* <div class="wheel-item empty"></div> */}
             {...items.map((item: string, i: number) => (
@@ -49,15 +49,21 @@ function slices<T>(arr: T[]): T[][] {
 }
 
 function weird_slices<T>(arr: T[]): T[][] {
+    console.log(arr.map(item => [...arr.filter(t => t != item), item]));
     return arr.map(item => [...arr.filter(t => t != item), item]);
 }
 
-const MultiWheel: Component = ({ items }, _) => (
-    <span class="multiwheel">
-        {...weird_slices(items).map(items => (
-            <Wheel items={items} /*width={1 / items.length}*/ />
+const MultiWheel: Component = ({ items, type }, _) => (
+    <span class={`multiwheel ${type ? type : ""}`}>
+        {...weird_slices(items).map((items, n) => (
+            <Wheel
+                items={items}
+                width={1 / items.length}
+                n={n}
+                summary_classes={[type]}
+            />
         ))}
-        <Wheel items={items} classes={["invisible"]} />
+        <Wheel items={items} classes={["invisible"]} summary_classes={[type]} />
     </span>
 );
 
@@ -66,9 +72,11 @@ const MultiWheel: Component = ({ items }, _) => (
 // it would be possible to have it so the final text is actually properyly selectable maybe but eh
 const Take: Component = ({ subjects, objects, adjectives }, _) => (
     <div class="take">
-        <MultiWheel items={subjects} /> <span class="bridge">who eat</span>{" "}
-        <MultiWheel items={objects} /> <span class="bridge">are</span>{" "}
-        <MultiWheel items={adjectives} />
+        <MultiWheel type="subjects" items={subjects} />{" "}
+        <div class="bridge">who eat</div>{" "}
+        <MultiWheel type="objects" items={objects} />{" "}
+        <div class="bridge">are</div>{" "}
+        <MultiWheel type="adjectives" items={adjectives} />
     </div>
 );