thereadme/slides/ai.com/index.md

---
title: The $70 Million Loading Spinner
theme: default
layout: center
class: text-center
fonts:
  sans: "CaskaydiaCove Nerd Font Mono"
---

# The $70 Million Loading Spinner

---
layout: center
---

# The New "Jade Seal"

<div class="grid grid-cols-2 gap-12 mt-10 items-center">
    <div class="text-left space-y-4">
        <div class="text-gray-400 text-sm font-mono mb-2">DOMAIN SOLD: APRIL 2025</div>
        <div class="text-6xl font-bold text-white tracking-tighter">
          ai.com
        </div>
        <div class="text-red-400 font-mono text-xl">
          PRICE: $XX,XXX,XXX
        </div>
    </div>
    <div class="border-l-2 border-gray-700 pl-10">
        <div class="text-gray-400 mb-4">The Buyer?</div>
        <v-click>
            <div class="text-4xl font-bold text-blue-400 mb-2">
                Kris Marszalek
            </div>
            <div class="text-xl text-gray-500">
                CEO, Crypto.com
            </div>
        </v-click>
    </div>
</div>

<v-click>
    <div class="mt-12 p-4 border border-red-500/30 bg-red-500/10 rounded text-center text-red-300 font-mono">
        ⚠ ALERT: The Crypto Bros have entered the chat.
    </div>
</v-click>

---
layout: default
---

# The Economics of a Billboard

<div class="flex justify-center items-end h-80 gap-8 mt-10">
    <div class="flex flex-col items-center w-32 group">
        <div class="text-2xl font-bold text-purple-400 mb-2">$70M</div>
        <div class="w-full bg-purple-600 rounded-t-lg transition-all duration-1000 h-64 relative overflow-hidden">
            <div class="absolute inset-0 bg-purple-400 opacity-20 animate-pulse"></div>
        </div>
        <div class="mt-4 text-gray-400 font-mono text-sm">DOMAIN</div>
    </div>
    <v-click>
        <div class="flex flex-col items-center w-32 group">
            <div class="text-xl font-bold text-blue-400 mb-2">$8M</div>
            <div class="w-full bg-blue-600 rounded-t-lg transition-all duration-1000 h-16"></div>
            <div class="mt-4 text-gray-400 font-mono text-sm">SUPER BOWL</div>
        </div>
    </v-click>
    <v-click>
        <div class="flex flex-col items-center w-32 group relative">
            <div class="text-xs font-bold text-green-400 mb-2 absolute -top-6">$500</div>
            <div class="w-full bg-green-500 rounded-t-lg h-1"></div> <div class="mt-4 text-green-400 font-mono text-sm font-bold">ENGINEERING</div>
        </div>
    </v-click>
</div>
<v-click>
    <div class="text-center mt-12 text-2xl font-bold text-white">
        Marketing-to-Engineering Ratio: <span class="text-red-500">156,000 : 1</span>
    </div>
</v-click>

---
layout: center
---

# The Ghost of Super Bowls Past

<div class="grid grid-cols-3 gap-6 mt-12 text-center">
    <div class="opacity-50 grayscale hover:grayscale-0 transition-all duration-500">
        <div class="text-4xl font-bold text-gray-500 mb-4">2000</div>
        <div class="text-sm text-gray-400">Pets.com & The Dot Coms</div>
        <div class="mt-4 text-xs text-red-500 font-mono">CRASHED</div>
    </div>
    <div class="opacity-75 grayscale hover:grayscale-0 transition-all duration-500 scale-110">
        <div class="text-5xl font-bold text-white mb-4">2022</div>
        <div class="text-sm text-blue-300">FTX & Coinbase</div>
        <div class="mt-4 text-xs text-red-500 font-mono">CRASHED</div>
    </div>
    <div class="relative">
        <div class="text-4xl font-bold text-orange-500 mb-4">2025</div>
        <div class="text-sm text-gray-300">15 AI Commercials</div>
        <div class="mt-4 text-xs text-yellow-400 font-mono animate-pulse">LOADING...</div>
    </div>
</div>

---
layout: center
class: text-center
---

# The Ultimate Metaphor

<div class="relative mt-10 inline-block">
    <div class="w-[600px] h-[350px] bg-gray-900 rounded-lg border border-gray-700 shadow-2xl flex flex-col overflow-hidden">
        <div class="bg-gray-800 p-2 flex items-center space-x-2 border-b border-gray-700">
            <div class="w-3 h-3 rounded-full bg-red-500"></div>
            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
            <div class="w-3 h-3 rounded-full bg-green-500"></div>
            <div class="ml-4 bg-gray-900 rounded px-3 py-1 text-xs text-gray-400 flex-grow text-left font-mono">
                https://ai.com
            </div>
        </div>
        <div class="flex-grow flex flex-col items-center justify-center bg-white text-black p-10">
            <h1 class="text-6xl font-bold mb-4">503</h1>
            <p class="text-2xl">Service Unavailable</p>
            <p class="text-sm text-gray-500 mt-4">The server is temporarily unable to service your request due to maintenance downtime or capacity problems.</p>
            <div class="mt-8">
                <div class="w-8 h-8 border-4 border-gray-300 border-t-black rounded-full animate-spin"></div>
            </div>
        </div>
    </div>
</div>
<v-click>
    <div class="mt-8 text-xl text-gray-400">
        A <span class="text-purple-400">$70M Front Door</span> leading to an empty room.
    </div>
</v-click>

---
layout: center
---

# Vibes-Based Raising

<div class="flex flex-col items-center justify-center h-full space-y-8">
    <div class="text-3xl font-light text-gray-300">
        "Agentic AI" or <span class="text-yellow-400 font-bold">API Wrapper?</span>
    </div>
</div>