diff --git a/html/hot_people_who_eat_croissants_are_dangerous.tsx b/html/hot_people_who_eat_croissants_are_dangerous.tsx
index 7dd8b68..4a7d6b1 100644
--- a/html/hot_people_who_eat_croissants_are_dangerous.tsx
+++ b/html/hot_people_who_eat_croissants_are_dangerous.tsx
@@ -38,14 +38,26 @@ const Wheel: Component = ({ items }, _) => (
     </details>
 );
 
+function slices<T>(arr: T[]): T[][] {
+    return arr.map((_, i) => arr.slice(0, i));
+}
+
+const MultiWheel: Component = ({ items }, _) => (
+    <div class="multiwheel">
+        {slices(items).map(items => (
+            <Wheel items={items} />
+        ))}
+    </div>
+);
+
 // i'll probably just hardcode the delays... lame but w/e
 // nope
 // 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">
-        <Wheel items={subjects} /> <div class="bridge">who eat</div>{" "}
-        <Wheel items={objects} /> <div class="bridge">are</div>{" "}
-        <Wheel items={adjectives} />
+        <MultiWheel items={subjects} /> <div class="bridge">who eat</div>{" "}
+        <MultiWheel items={objects} /> <div class="bridge">are</div>{" "}
+        <MultiWheel items={adjectives} />
     </div>
 );