vibeshare-live 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -67
- package/dist/chunk-RY2ANOPC.js +1018 -0
- package/dist/cli.d.ts +33 -35
- package/dist/cli.js +393 -238
- package/dist/index.d.ts +106 -47
- package/dist/index.js +53 -22
- package/dist/manager-uhMBJXtu.d.ts +259 -0
- package/dist/mcp.d.ts +27 -38
- package/dist/mcp.js +199 -14616
- package/docs/launch-video-16x9.html +673 -0
- package/docs/launch-video-9x16.html +673 -0
- package/docs/launch-video.html +490 -0
- package/docs/prototype.html +964 -0
- package/docs/spec.md +61 -0
- package/package.json +41 -23
- package/dist/chunk-5OLI3WTU.js +0 -233
- package/dist/share-CoX608sF.d.ts +0 -188
|
@@ -0,0 +1,490 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>vibeshare — launch video</title>
|
|
7
|
+
<!--
|
|
8
|
+
vibeshare launch video (~21s, autoplay + loop)
|
|
9
|
+
Self-contained: inline CSS/JS only. No network, no CDN, no webfonts.
|
|
10
|
+
Style: an iMessage text thread that types itself, then cuts to an end card.
|
|
11
|
+
-->
|
|
12
|
+
<style>
|
|
13
|
+
:root {
|
|
14
|
+
--blue: #0a84ff;
|
|
15
|
+
--gray-bubble: #303033;
|
|
16
|
+
--chat-bg: #000;
|
|
17
|
+
--green: #5be49b;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
21
|
+
|
|
22
|
+
html, body { height: 100%; }
|
|
23
|
+
|
|
24
|
+
body {
|
|
25
|
+
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
26
|
+
background: #07070a;
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
-webkit-font-smoothing: antialiased;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* ---- ambient backdrop ---- */
|
|
35
|
+
.glow {
|
|
36
|
+
position: fixed;
|
|
37
|
+
width: 55vmax;
|
|
38
|
+
height: 55vmax;
|
|
39
|
+
border-radius: 50%;
|
|
40
|
+
filter: blur(110px);
|
|
41
|
+
opacity: 0.35;
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
}
|
|
44
|
+
.glow.g1 {
|
|
45
|
+
top: -18vmax; left: -12vmax;
|
|
46
|
+
background: radial-gradient(circle, #123a7a 0%, transparent 65%);
|
|
47
|
+
animation: drift1 19s ease-in-out infinite alternate;
|
|
48
|
+
}
|
|
49
|
+
.glow.g2 {
|
|
50
|
+
bottom: -20vmax; right: -14vmax;
|
|
51
|
+
background: radial-gradient(circle, #3a1a6e 0%, transparent 65%);
|
|
52
|
+
animation: drift2 23s ease-in-out infinite alternate;
|
|
53
|
+
}
|
|
54
|
+
@keyframes drift1 { to { transform: translate(9vmax, 6vmax) scale(1.12); } }
|
|
55
|
+
@keyframes drift2 { to { transform: translate(-8vmax, -7vmax) scale(1.08); } }
|
|
56
|
+
|
|
57
|
+
/* ---- phone ---- */
|
|
58
|
+
.phone {
|
|
59
|
+
position: relative;
|
|
60
|
+
width: min(400px, 92vw);
|
|
61
|
+
height: min(800px, 92vh);
|
|
62
|
+
background: #141416;
|
|
63
|
+
border-radius: 60px;
|
|
64
|
+
padding: 13px;
|
|
65
|
+
box-shadow:
|
|
66
|
+
0 0 0 1px rgba(255,255,255,0.09),
|
|
67
|
+
0 40px 90px rgba(0,0,0,0.75),
|
|
68
|
+
0 0 120px rgba(30,80,200,0.12);
|
|
69
|
+
animation: rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
|
|
70
|
+
transition: transform 0.6s ease, opacity 0.6s ease, filter 0.6s ease;
|
|
71
|
+
}
|
|
72
|
+
.phone.out {
|
|
73
|
+
transform: scale(0.93) translateY(18px);
|
|
74
|
+
opacity: 0;
|
|
75
|
+
filter: blur(14px);
|
|
76
|
+
}
|
|
77
|
+
@keyframes rise {
|
|
78
|
+
from { opacity: 0; transform: translateY(30px) scale(0.965); }
|
|
79
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.screen {
|
|
83
|
+
width: 100%;
|
|
84
|
+
height: 100%;
|
|
85
|
+
background: var(--chat-bg);
|
|
86
|
+
border-radius: 48px;
|
|
87
|
+
overflow: hidden;
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* ---- status bar + nav ---- */
|
|
93
|
+
.statusbar {
|
|
94
|
+
display: flex;
|
|
95
|
+
justify-content: space-between;
|
|
96
|
+
align-items: center;
|
|
97
|
+
padding: 16px 28px 4px;
|
|
98
|
+
color: #fff;
|
|
99
|
+
font-size: 14.5px;
|
|
100
|
+
font-weight: 600;
|
|
101
|
+
letter-spacing: 0.01em;
|
|
102
|
+
}
|
|
103
|
+
.statusbar .icons { display: flex; align-items: center; gap: 6px; }
|
|
104
|
+
|
|
105
|
+
.nav {
|
|
106
|
+
display: flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
justify-content: space-between;
|
|
109
|
+
padding: 4px 16px 10px;
|
|
110
|
+
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
111
|
+
}
|
|
112
|
+
.nav .side { width: 44px; display: flex; align-items: center; }
|
|
113
|
+
.nav .side.right { justify-content: flex-end; }
|
|
114
|
+
.nav .contact { display: flex; flex-direction: column; align-items: center; gap: 3px; }
|
|
115
|
+
.avatar {
|
|
116
|
+
width: 46px; height: 46px;
|
|
117
|
+
border-radius: 50%;
|
|
118
|
+
background: linear-gradient(135deg, #5e5ce6 0%, #bf5af2 100%);
|
|
119
|
+
display: grid;
|
|
120
|
+
place-items: center;
|
|
121
|
+
color: #fff;
|
|
122
|
+
font-size: 19px;
|
|
123
|
+
font-weight: 600;
|
|
124
|
+
}
|
|
125
|
+
.nav .name {
|
|
126
|
+
color: #eaeaee;
|
|
127
|
+
font-size: 12px;
|
|
128
|
+
font-weight: 500;
|
|
129
|
+
letter-spacing: 0.02em;
|
|
130
|
+
display: flex;
|
|
131
|
+
align-items: center;
|
|
132
|
+
gap: 2px;
|
|
133
|
+
}
|
|
134
|
+
.nav .name svg { opacity: 0.5; }
|
|
135
|
+
|
|
136
|
+
/* ---- thread ---- */
|
|
137
|
+
.thread {
|
|
138
|
+
flex: 1;
|
|
139
|
+
display: flex;
|
|
140
|
+
flex-direction: column;
|
|
141
|
+
justify-content: flex-start;
|
|
142
|
+
gap: 9px;
|
|
143
|
+
padding: 18px 0 20px;
|
|
144
|
+
overflow: hidden;
|
|
145
|
+
}
|
|
146
|
+
.row { display: flex; margin: 0 14px; }
|
|
147
|
+
.row.a { justify-content: flex-start; }
|
|
148
|
+
.row.b { justify-content: flex-end; }
|
|
149
|
+
|
|
150
|
+
.bubble {
|
|
151
|
+
position: relative;
|
|
152
|
+
max-width: 76%;
|
|
153
|
+
padding: 9px 14px;
|
|
154
|
+
border-radius: 20px;
|
|
155
|
+
font-size: 16.5px;
|
|
156
|
+
line-height: 1.32;
|
|
157
|
+
letter-spacing: -0.005em;
|
|
158
|
+
color: #fff;
|
|
159
|
+
animation: pop 0.5s cubic-bezier(0.3, 1.45, 0.5, 1) both;
|
|
160
|
+
}
|
|
161
|
+
.row.a .bubble { transform-origin: left bottom; }
|
|
162
|
+
.row.b .bubble { transform-origin: right bottom; }
|
|
163
|
+
@keyframes pop {
|
|
164
|
+
0% { transform: scale(0.3) translateY(16px); opacity: 0; }
|
|
165
|
+
100% { transform: scale(1) translateY(0); opacity: 1; }
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.bubble.gray {
|
|
169
|
+
background: var(--gray-bubble);
|
|
170
|
+
border-bottom-left-radius: 6px;
|
|
171
|
+
}
|
|
172
|
+
.bubble.blue {
|
|
173
|
+
background: var(--blue);
|
|
174
|
+
border-bottom-right-radius: 6px;
|
|
175
|
+
}
|
|
176
|
+
.bubble.mono {
|
|
177
|
+
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
|
178
|
+
font-size: 13.5px;
|
|
179
|
+
line-height: 1.45;
|
|
180
|
+
letter-spacing: 0;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/* tails (classic notch trick: bump + chat-colored carver) */
|
|
184
|
+
.bubble.gray::before,
|
|
185
|
+
.bubble.blue::before {
|
|
186
|
+
content: "";
|
|
187
|
+
position: absolute;
|
|
188
|
+
bottom: 0;
|
|
189
|
+
width: 20px;
|
|
190
|
+
height: 17px;
|
|
191
|
+
}
|
|
192
|
+
.bubble.gray::before {
|
|
193
|
+
left: -7px;
|
|
194
|
+
background: var(--gray-bubble);
|
|
195
|
+
border-bottom-right-radius: 16px 14px;
|
|
196
|
+
}
|
|
197
|
+
.bubble.blue::before {
|
|
198
|
+
right: -7px;
|
|
199
|
+
background: var(--blue);
|
|
200
|
+
border-bottom-left-radius: 16px 14px;
|
|
201
|
+
}
|
|
202
|
+
.bubble.gray::after,
|
|
203
|
+
.bubble.blue::after {
|
|
204
|
+
content: "";
|
|
205
|
+
position: absolute;
|
|
206
|
+
bottom: 0;
|
|
207
|
+
width: 14px;
|
|
208
|
+
height: 17px;
|
|
209
|
+
background: var(--chat-bg);
|
|
210
|
+
}
|
|
211
|
+
.bubble.gray::after { left: -14px; border-bottom-right-radius: 10px; }
|
|
212
|
+
.bubble.blue::after { right: -14px; border-bottom-left-radius: 10px; }
|
|
213
|
+
|
|
214
|
+
/* typing indicator */
|
|
215
|
+
.typing { display: flex; align-items: center; gap: 5px; height: 18px; padding: 11px 15px; }
|
|
216
|
+
.dot {
|
|
217
|
+
width: 8px; height: 8px;
|
|
218
|
+
border-radius: 50%;
|
|
219
|
+
background: #8e8e93;
|
|
220
|
+
animation: dot 1.1s ease-in-out infinite;
|
|
221
|
+
}
|
|
222
|
+
.bubble.blue .dot { background: rgba(255,255,255,0.9); }
|
|
223
|
+
.dot:nth-child(2) { animation-delay: 0.15s; }
|
|
224
|
+
.dot:nth-child(3) { animation-delay: 0.3s; }
|
|
225
|
+
@keyframes dot {
|
|
226
|
+
0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
|
|
227
|
+
30% { transform: translateY(-4px); opacity: 1; }
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.receipt {
|
|
231
|
+
align-self: flex-end;
|
|
232
|
+
margin: -3px 18px 0 0;
|
|
233
|
+
font-size: 11.5px;
|
|
234
|
+
color: #8e8e93;
|
|
235
|
+
animation: fadein 0.3s ease both;
|
|
236
|
+
}
|
|
237
|
+
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
|
|
238
|
+
|
|
239
|
+
/* ---- end card ---- */
|
|
240
|
+
.ec {
|
|
241
|
+
position: fixed;
|
|
242
|
+
inset: 0;
|
|
243
|
+
display: flex;
|
|
244
|
+
flex-direction: column;
|
|
245
|
+
align-items: center;
|
|
246
|
+
justify-content: center;
|
|
247
|
+
gap: 20px;
|
|
248
|
+
text-align: center;
|
|
249
|
+
padding: 0 22px;
|
|
250
|
+
pointer-events: none;
|
|
251
|
+
}
|
|
252
|
+
.ec .item {
|
|
253
|
+
opacity: 0;
|
|
254
|
+
transform: translateY(20px);
|
|
255
|
+
transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
|
|
256
|
+
}
|
|
257
|
+
.ec .item.show { opacity: 1; transform: translateY(0); }
|
|
258
|
+
|
|
259
|
+
.ec .mark {
|
|
260
|
+
width: 74px; height: 74px;
|
|
261
|
+
border-radius: 21px;
|
|
262
|
+
background: linear-gradient(135deg, #2f8bff 0%, #8a5cff 100%);
|
|
263
|
+
display: grid;
|
|
264
|
+
place-items: center;
|
|
265
|
+
box-shadow: 0 14px 44px rgba(70, 120, 255, 0.35);
|
|
266
|
+
}
|
|
267
|
+
.ec .mark span {
|
|
268
|
+
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
|
269
|
+
color: #fff;
|
|
270
|
+
font-size: 34px;
|
|
271
|
+
font-weight: 600;
|
|
272
|
+
transform: translateY(-1px);
|
|
273
|
+
}
|
|
274
|
+
.ec .word {
|
|
275
|
+
font-size: clamp(46px, 8.5vw, 88px);
|
|
276
|
+
font-weight: 700;
|
|
277
|
+
letter-spacing: -0.045em;
|
|
278
|
+
line-height: 1;
|
|
279
|
+
background: linear-gradient(92deg, #9cc9ff 0%, #d3b8ff 100%);
|
|
280
|
+
-webkit-background-clip: text;
|
|
281
|
+
background-clip: text;
|
|
282
|
+
color: transparent;
|
|
283
|
+
}
|
|
284
|
+
.ec .tag {
|
|
285
|
+
font-size: clamp(17px, 2.4vw, 22px);
|
|
286
|
+
color: rgba(255,255,255,0.72);
|
|
287
|
+
letter-spacing: -0.01em;
|
|
288
|
+
margin-top: -8px;
|
|
289
|
+
}
|
|
290
|
+
.ec .pill {
|
|
291
|
+
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
|
292
|
+
font-size: clamp(12.5px, 1.8vw, 15.5px);
|
|
293
|
+
color: #e8e8ea;
|
|
294
|
+
background: rgba(255,255,255,0.05);
|
|
295
|
+
border: 1px solid rgba(255,255,255,0.14);
|
|
296
|
+
border-radius: 12px;
|
|
297
|
+
padding: 14px 20px;
|
|
298
|
+
margin-top: 8px;
|
|
299
|
+
white-space: nowrap;
|
|
300
|
+
}
|
|
301
|
+
.ec .pill .ps { color: var(--green); margin-right: 9px; }
|
|
302
|
+
.ec .cur {
|
|
303
|
+
display: inline-block;
|
|
304
|
+
width: 9px; height: 17px;
|
|
305
|
+
background: var(--green);
|
|
306
|
+
vertical-align: -3px;
|
|
307
|
+
margin-left: 3px;
|
|
308
|
+
animation: blink 1.05s steps(1) infinite;
|
|
309
|
+
}
|
|
310
|
+
@keyframes blink { 50% { opacity: 0; } }
|
|
311
|
+
.ec .suite {
|
|
312
|
+
font-size: 12.5px;
|
|
313
|
+
color: rgba(255,255,255,0.42);
|
|
314
|
+
letter-spacing: 0.04em;
|
|
315
|
+
margin-top: 6px;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
/* ---- loop wipe ---- */
|
|
319
|
+
#wipe {
|
|
320
|
+
position: fixed;
|
|
321
|
+
inset: 0;
|
|
322
|
+
background: #07070a;
|
|
323
|
+
opacity: 0;
|
|
324
|
+
pointer-events: none;
|
|
325
|
+
transition: opacity 0.5s ease;
|
|
326
|
+
}
|
|
327
|
+
#wipe.on { opacity: 1; }
|
|
328
|
+
</style>
|
|
329
|
+
</head>
|
|
330
|
+
<body>
|
|
331
|
+
|
|
332
|
+
<div class="glow g1"></div>
|
|
333
|
+
<div class="glow g2"></div>
|
|
334
|
+
|
|
335
|
+
<div class="phone" id="phone">
|
|
336
|
+
<div class="screen">
|
|
337
|
+
<div class="statusbar">
|
|
338
|
+
<span>9:41</span>
|
|
339
|
+
<span class="icons">
|
|
340
|
+
<!-- cellular -->
|
|
341
|
+
<svg width="18" height="11" viewBox="0 0 18 11" fill="#fff"><rect x="0" y="7" width="3" height="4" rx="0.8"/><rect x="4.5" y="5" width="3" height="6" rx="0.8"/><rect x="9" y="2.5" width="3" height="8.5" rx="0.8"/><rect x="13.5" y="0" width="3" height="11" rx="0.8"/></svg>
|
|
342
|
+
<!-- wifi -->
|
|
343
|
+
<svg width="16" height="11" viewBox="0 0 16 11" fill="#fff"><path d="M8 11 5.2 8.2a4 4 0 0 1 5.6 0L8 11zM8 6.2c-1.5 0-2.9.6-4 1.6L2.6 6.4a7.3 7.3 0 0 1 10.8 0L12 7.8a5.6 5.6 0 0 0-4-1.6zM8 2C5.7 2 3.5.9 2 2.3L.6.9A10.4 10.4 0 0 1 15.4.9L14 2.3A8.3 8.3 0 0 0 8 2z" transform="translate(0 1)"/></svg>
|
|
344
|
+
<!-- battery -->
|
|
345
|
+
<svg width="25" height="12" viewBox="0 0 25 12"><rect x="0.5" y="0.5" width="21" height="11" rx="3.2" fill="none" stroke="#fff" opacity="0.45"/><rect x="2" y="2" width="16" height="8" rx="1.8" fill="#fff"/><path d="M23 4v4a2.2 2.2 0 0 0 0-4z" fill="#fff" opacity="0.45"/></svg>
|
|
346
|
+
</span>
|
|
347
|
+
</div>
|
|
348
|
+
|
|
349
|
+
<div class="nav">
|
|
350
|
+
<span class="side">
|
|
351
|
+
<svg width="13" height="22" viewBox="0 0 13 22" fill="none"><path d="M11 2 2.5 11 11 20" stroke="#0a84ff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
352
|
+
</span>
|
|
353
|
+
<span class="contact">
|
|
354
|
+
<span class="avatar">S</span>
|
|
355
|
+
<span class="name">sam
|
|
356
|
+
<svg width="7" height="11" viewBox="0 0 7 11" fill="none"><path d="M1 1l4.5 4.5L1 10" stroke="#eaeaee" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
357
|
+
</span>
|
|
358
|
+
</span>
|
|
359
|
+
<span class="side right">
|
|
360
|
+
<svg width="26" height="18" viewBox="0 0 26 18" fill="#0a84ff"><rect x="0" y="1" width="16.5" height="16" rx="4.5"/><path d="M18.5 6.8 24.4 2.7c.8-.6 1.6 0 1.6.9v10.8c0 .9-.8 1.5-1.6.9l-5.9-4.1V6.8z"/></svg>
|
|
361
|
+
</span>
|
|
362
|
+
</div>
|
|
363
|
+
|
|
364
|
+
<div class="thread" id="thread"></div>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
|
|
368
|
+
<!-- end card -->
|
|
369
|
+
<div class="ec" id="ec">
|
|
370
|
+
<div class="item mark" id="ecMark"><span>›_</span></div>
|
|
371
|
+
<div class="item word" id="ecWord">vibeshare</div>
|
|
372
|
+
<div class="item tag" id="ecTag">share your live agent session</div>
|
|
373
|
+
<div class="item pill" id="ecPill"><span class="ps">$</span>npx @pooriaarab/vibeshare --invite -- claude<span class="cur"></span></div>
|
|
374
|
+
<div class="item suite" id="ecSuite">part of the Vibe Suite</div>
|
|
375
|
+
</div>
|
|
376
|
+
|
|
377
|
+
<div id="wipe"></div>
|
|
378
|
+
|
|
379
|
+
<script>
|
|
380
|
+
(function () {
|
|
381
|
+
"use strict";
|
|
382
|
+
|
|
383
|
+
var thread = document.getElementById("thread");
|
|
384
|
+
var phone = document.getElementById("phone");
|
|
385
|
+
var wipe = document.getElementById("wipe");
|
|
386
|
+
var ecItems = [
|
|
387
|
+
document.getElementById("ecMark"),
|
|
388
|
+
document.getElementById("ecWord"),
|
|
389
|
+
document.getElementById("ecTag"),
|
|
390
|
+
document.getElementById("ecPill"),
|
|
391
|
+
document.getElementById("ecSuite")
|
|
392
|
+
];
|
|
393
|
+
|
|
394
|
+
var timers = [];
|
|
395
|
+
var typingRow = null;
|
|
396
|
+
|
|
397
|
+
function at(sec, fn) {
|
|
398
|
+
timers.push(setTimeout(fn, sec * 1000));
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
function row(side, bubbleHtml) {
|
|
402
|
+
var r = document.createElement("div");
|
|
403
|
+
r.className = "row " + side;
|
|
404
|
+
r.innerHTML = bubbleHtml;
|
|
405
|
+
thread.appendChild(r);
|
|
406
|
+
return r;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
function showTyping(side) {
|
|
410
|
+
var cls = side === "b" ? "blue" : "gray";
|
|
411
|
+
typingRow = row(side,
|
|
412
|
+
'<div class="bubble ' + cls + ' typing">' +
|
|
413
|
+
'<span class="dot"></span><span class="dot"></span><span class="dot"></span>' +
|
|
414
|
+
"</div>");
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
function say(side, text, mono) {
|
|
418
|
+
if (typingRow) { typingRow.remove(); typingRow = null; }
|
|
419
|
+
var cls = side === "b" ? "blue" : "gray";
|
|
420
|
+
row(side,
|
|
421
|
+
'<div class="bubble ' + cls + (mono ? " mono" : "") + '">' + text + "</div>");
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
function receipt(text) {
|
|
425
|
+
var old = thread.querySelector(".receipt");
|
|
426
|
+
if (old) old.remove();
|
|
427
|
+
var r = document.createElement("div");
|
|
428
|
+
r.className = "receipt";
|
|
429
|
+
r.textContent = text;
|
|
430
|
+
thread.appendChild(r);
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
function showEndCard() {
|
|
434
|
+
phone.classList.add("out");
|
|
435
|
+
ecItems.forEach(function (item, i) {
|
|
436
|
+
setTimeout(function () { item.classList.add("show"); }, 420 + i * 280);
|
|
437
|
+
});
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
function reset() {
|
|
441
|
+
timers.forEach(clearTimeout);
|
|
442
|
+
timers = [];
|
|
443
|
+
typingRow = null;
|
|
444
|
+
thread.innerHTML = "";
|
|
445
|
+
phone.classList.remove("out");
|
|
446
|
+
ecItems.forEach(function (item) { item.classList.remove("show"); });
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
function run() {
|
|
450
|
+
// --- the thread (~15.5s) ---
|
|
451
|
+
at(0.7, function () { showTyping("a"); });
|
|
452
|
+
at(1.5, function () { say("a", "yo how'd you show me that claude bug so fast"); });
|
|
453
|
+
|
|
454
|
+
at(2.9, function () { showTyping("b"); });
|
|
455
|
+
at(3.9, function () { say("b", "shared my terminal session, you were watching live"); });
|
|
456
|
+
|
|
457
|
+
at(5.8, function () { showTyping("a"); });
|
|
458
|
+
at(6.5, function () { say("a", "wait thats a thing??"); });
|
|
459
|
+
|
|
460
|
+
at(7.5, function () { showTyping("b"); });
|
|
461
|
+
at(8.4, function () { say("b", "vibeshare. one link. you can even jump in and drive"); });
|
|
462
|
+
|
|
463
|
+
at(10.6, function () { showTyping("a"); });
|
|
464
|
+
at(11.3, function () { say("a", "this is fake"); });
|
|
465
|
+
|
|
466
|
+
at(12.2, function () { showTyping("b"); });
|
|
467
|
+
at(13.2, function () { say("b", "npx @pooriaarab/vibeshare --invite -- claude", true); });
|
|
468
|
+
|
|
469
|
+
at(13.9, function () { receipt("Delivered"); });
|
|
470
|
+
at(14.7, function () { receipt("Read 9:41 PM"); });
|
|
471
|
+
|
|
472
|
+
// --- cut to end card (~5.5s hold) ---
|
|
473
|
+
at(15.5, showEndCard);
|
|
474
|
+
|
|
475
|
+
// --- loop ---
|
|
476
|
+
at(20.9, function () { wipe.classList.add("on"); });
|
|
477
|
+
at(21.6, function () {
|
|
478
|
+
reset();
|
|
479
|
+
setTimeout(function () {
|
|
480
|
+
wipe.classList.remove("on");
|
|
481
|
+
setTimeout(run, 350);
|
|
482
|
+
}, 120);
|
|
483
|
+
});
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
run();
|
|
487
|
+
})();
|
|
488
|
+
</script>
|
|
489
|
+
</body>
|
|
490
|
+
</html>
|