theunseen/v2.html at main · mrjmd/theunseen · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Unseen: Pitch Deck [Digital Seance]</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Cinzel:wght@700;900&display=swap" rel="stylesheet">
    <style>
        @keyframes glitch {
            0% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
            100% { transform: translate(0); }
        }
        @keyframes text-flicker {
            0%, 100% { opacity: 1; text-shadow: 0 0 6px #FF00FF, 0 0 10px #FF00FF; }
            50% { opacity: 0.8; text-shadow: 0 0 6px #00FFFF, 0 0 10px #00FFFF; }
        }
        body {
            font-family: 'Roboto Mono', monospace;
            background-color: #0A0A0A;
            color: #EAEAEA;
            overflow: hidden;
        }
        .font-cinzel { font-family: 'Cinzel', serif; }
        .slide {
            transition: opacity 0.5s ease-in-out;
            will-change: opacity;
        }
        .slide-hidden { opacity: 0; pointer-events: none; position: absolute; }
        .slide-active { opacity: 1; position: relative; }
        .glitch-text::before, .glitch-text::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0A0A0A;
            overflow: hidden;
            clip-path: inset(50% 50% 50% 50%);
        }
        .glitch-text:hover::before {
            left: 2px;
            text-shadow: -2px 0 #FF00FF;
            animation: glitch 0.3s infinite linear reverse;
        }
        .glitch-text:hover::after {
            left: -2px;
            text-shadow: -2px 0 #00FFFF;
            animation: glitch 0.3s infinite linear;
        }
        .nav-button {
            transition: all 0.2s ease;
            border: 1px solid #444;
        }
        .nav-button:hover {
            background-color: #FF00FF;
            color: #0A0A0A;
            border-color: #FF00FF;
        }
        .slide-indicator.active {
            background-color: #FF00FF;
            box-shadow: 0 0 5px #FF00FF;
        }
    </style>
</head>
<body class="w-screen h-screen flex flex-col items-center justify-center p-4 sm:p-8">

    <div id="slideshow-container" class="w-full h-full max-w-5xl max-h-[700px] flex items-center justify-center relative border-2 border-gray-800 bg-black/20">

        <!-- Slide 1: Title -->
        <div class="slide slide-active w-full h-full flex flex-col items-center justify-center text-center p-8">
            <h1 class="font-cinzel text-5xl sm:text-7xl font-black tracking-widest relative glitch-text" data-text="THE UNSEEN">THE UNSEEN</h1>
            <p class="mt-4 text-lg sm:text-xl text-gray-400 tracking-wider">A Mystery School for the Modern Soul.</p>
        </div>

        <!-- Slide 2: The Premise -->
        <div class="slide slide-hidden w-full h-full flex flex-col items-center justify-center text-center p-8">
            <h2 class="font-cinzel text-3xl sm:text-4xl font-bold mb-8" style="animation: text-flicker 3s infinite;">The Premise: We Are Already Whole.</h2>
            <p class="max-w-3xl text-lg sm:text-xl text-gray-300">The path to wholeness is not one of addition, but of subtraction. Of seeing and integrating the parts of ourselves we've disowned—the shadow.</p>
            <p class="mt-4 max-w-3xl text-lg sm:text-xl text-gray-300">This work cannot be done in isolation. It requires a mirror. It requires the raw, unfiltered reflection of another human being.</p>
            <p class="mt-6 text-cyan-400 font-bold text-xl">We have built the mirror.</p>
        </div>

        <!-- Slide 3: The Problem -->
        <div class="slide slide-hidden w-full h-full flex flex-col items-center justify-center text-center p-8">
            <h2 class="font-cinzel text-3xl sm:text-4xl font-bold mb-8">The Problem: Sanitized Selves</h2>
            <p class="max-w-3xl text-lg text-gray-300">Modern "connection" platforms are designed for performance, not presence. They are arenas for our curated, acceptable selves. The shadow is not invited.</p>
            <ul class="mt-6 text-left space-y-3 text-lg max-w-2xl">
                <li><span class="text-magenta-500 font-bold mr-2">》</span>Wellness apps teach you to be with yourself, alone.</li>
                <li><span class="text-magenta-500 font-bold mr-2">》</span>Dating apps teach you to present your most marketable self.</li>
                <li><span class="text-magenta-500 font-bold mr-2">》</span>Analog games require planning, killing spontaneity.</li>
            </ul>
        </div>

        <!-- Slide 4: Our Solution -->
        <div class="slide slide-hidden w-full h-full flex flex-col items-center justify-center text-center p-8">
            <h2 class="font-cinzel text-3xl sm:text-4xl font-bold mb-8">Our Solution: A Dojo for the Soul</h2>
             <img src="https://placehold.co/600x300/0A0A0A/FF00FF?text=GLITCHED+REFLECTION" alt="Glitched reflection of a face" class="rounded-lg mb-8 border-2 border-magenta-500/50">
            <p class="max-w-3xl text-xl">A gamified, P2P mobile experience that turns the friction of human interaction into the grist for the mill of self-discovery.</p>
            <p class="mt-4 text-xl font-bold text-cyan-400">The first rule of The Unseen is to talk about what you see.</p>
        </div>

        <!-- Slide 5: The Market -->
        <div class="slide slide-hidden w-full h-full flex flex-col items-center justify-center p-8">
            <h2 class="font-cinzel text-3xl sm:text-4xl font-bold mb-8">The Market: A Convergence of Seekers</h2>
            <p class="max-w-3xl mb-6 text-gray-400">We are creating a new category by unifying three tribes already on the path:</p>
            <div class="grid md:grid-cols-3 gap-4 w-full max-w-4xl text-center">
                <div class="border border-gray-700 p-4 rounded">
                    <h3 class="font-bold text-lg text-cyan-400">Mindfulness Practitioners</h3>
                    <p class="text-sm text-gray-400">120M+ users of Calm & Headspace ready for the next step: social integration.</p>
                </div>
                <div class="border border-gray-700 p-4 rounded">
                    <h3 class="font-bold text-lg text-magenta-500">Authentic Relating & Shadow Work Communities</h3>
                    <p class="text-sm text-gray-400">A highly engaged niche of tens of thousands who will be our core evangelists.</p>
                </div>
                <div class="border border-gray-700 p-4 rounded">
                    <h3 class="font-bold text-lg text-yellow-500">Disillusioned Daters</h3>
                    <p class="text-sm text-gray-400">Millions seeking deeper connection beyond the superficiality of swipe-based apps.</p>
                </div>
            </div>
            <p class="mt-8 text-xl">**Claim Validation:** Our research confirms no other app combines real-time, P2P, gamified interaction with strangers for the explicit purpose of self-discovery.</p>
        </div>

        <!-- Slide 6: The Game -->
        <div class="slide slide-hidden w-full h-full flex flex-col items-center justify-center p-8">
            <h2 class="font-cinzel text-3xl sm:text-4xl font-bold mb-8">The Game: How It Works</h2>
            <ul class="space-y-4 max-w-2xl text-left text-lg">
                <li><strong class="text-cyan-400">Anonymous Containers:</strong> Discover nearby players via Bluetooth. Enter E2E encrypted P2P sessions. The server is blind.</li>
                <li><strong class="text-cyan-400">Tiered Vulnerability:</strong> Climb the "Ladder of the Unseen" by opting into progressively riskier prompts, from "First Impressions" to direct "Judgments."</li>
                <li><strong class="text-cyan-400">Gamified Triggers:</strong> Getting rejected from a real-world quest? The app reframes it: "They weren't ready. Explore the feeling of rejection. +50 Shadow Points."</li>
                <li><strong class="text-cyan-400">The Shadow Council:</strong> A self-regulating moderation system of high-ranked players who distinguish between difficult feedback and actual toxicity.</li>
            </ul>
        </div>

        <!-- Slide 7: The "SEEN" Economy -->
        <div class="slide slide-hidden w-full h-full flex flex-col items-center justify-center text-center p-8">
            <h2 class="font-cinzel text-3xl sm:text-4xl font-bold mb-8">The Secret: The SEEN Economy</h2>
            <p class="max-w-2xl text-lg text-gray-300">This is the inner mystery, revealed only to dedicated players.</p>
            <p class="mt-4 max-w-2xl text-lg text-gray-300">Every act of courage generates an "offering"—a virtual token called **SEEN**. It has in-game utility, is centrally managed, and is **non-transferable for 5 years.**</p>
            <p class="mt-6 text-xl font-bold text-magenta-500">*"They say enlightenment is priceless. We're not so sure."*</p>
            <p class="mt-4 text-sm text-gray-500">(This "crypto-ready" model allows us to build the mythology now and defer the immense legal/technical risks of decentralization.)</p>
        </div>

        <!-- Slide 8: Business Model -->
        <div class="slide slide-hidden w-full h-full flex flex-col items-center justify-center text-center p-8">
            <h2 class="font-cinzel text-3xl sm:text-4xl font-bold mb-8">The Business Model</h2>
            <div class="grid md:grid-cols-2 gap-8 max-w-3xl w-full mb-8">
                <div>
                    <h3 class="font-bold text-xl text-cyan-400">Freemium Subscription</h3>
                    <p class="text-gray-400">$9.99/month or $59.99/year for unlimited access to higher tiers and advanced features.</p>
                </div>
                <div>
                    <h3 class="font-bold text-xl text-magenta-500">Projections (Year 5)</h3>
                    <p class="text-gray-400">Based on a 3% conversion rate:</p>
                    <p class="text-2xl font-bold text-white">5M MAU → $10.5M ARR</p>
                </div>
            </div>
             <p class="text-sm text-gray-500">Financials based on market benchmarks from Calm, Headspace, and Hinge, with a conservative user acquisition model targeting niche communities first.</p>
        </div>

        <!-- Slide 9: The Ask -->
        <div class="slide slide-hidden w-full h-full flex flex-col items-center justify-center text-center p-8">
            <h2 class="font-cinzel text-3xl sm:text-4xl font-bold mb-4">The Ask</h2>
            <p class="font-cinzel text-7xl font-bold my-8 text-cyan-400">$750,000</p>
            <p class="text-xl mb-8">for 18 months of runway to build the MVP and ignite our core community.</p>
        </div>

        <!-- Slide 10: Closing -->
        <div class="slide slide-hidden w-full h-full flex flex-col items-center justify-center text-center p-8">
            <h2 class="font-cinzel text-4xl font-bold max-w-3xl">The Unseen is a paradox.</h2>
            <p class="mt-6 text-2xl text-gray-300 max-w-3xl">It's a game you win by being willing to lose.</p>
            <p class="mt-4 text-2xl text-gray-300 max-w-3xl">It's a community you join by embracing your separateness.</p>
            <p class="mt-4 text-2xl text-gray-300 max-w-3xl">It's a technology designed to make you more human.</p>
        </div>

    </div>

    <!-- Navigation -->
    <div class="absolute bottom-4 sm:bottom-8 w-full flex items-center justify-center space-x-4 z-10">
        <button id="prev-btn" class="nav-button p-3 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg></button>
        <div id="indicator-container" class="flex space-x-2"></div>
        <button id="next-btn" class="nav-button p-3 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg></button>
    </div>

    <script>
        const slides = document.querySelectorAll('.slide');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const indicatorContainer = document.getElementById('indicator-container');
        let currentSlide = 0;
        const totalSlides = slides.length;

        for (let i = 0; i < totalSlides; i++) {
            const indicator = document.createElement('div');
            indicator.classList.add('slide-indicator', 'w-2.5', 'h-2.5', 'border', 'border-gray-600', 'cursor-pointer', 'transition-all');
            indicator.addEventListener('click', () => showSlide(i));
            indicatorContainer.appendChild(indicator);
        }
        const indicators = document.querySelectorAll('.slide-indicator');

        function showSlide(n) {
            slides[currentSlide].classList.remove('slide-active');
            slides[currentSlide].classList.add('slide-hidden');
            indicators[currentSlide].classList.remove('active');
            currentSlide = (n + totalSlides) % totalSlides;
            slides[currentSlide].classList.remove('slide-hidden');
            slides[currentSlide].classList.add('slide-active');
            indicators[currentSlide].classList.add('active');
        }

        prevBtn.addEventListener('click', () => showSlide(currentSlide - 1));
        nextBtn.addEventListener('click', () => showSlide(currentSlide + 1));
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight') showSlide(currentSlide + 1);
            else if (e.key === 'ArrowLeft') showSlide(currentSlide - 1);
        });
        showSlide(0);
    </script>
</body>
</html>