-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathecosystem_lifecycle_framework.html
More file actions
742 lines (705 loc) · 44 KB
/
Copy pathecosystem_lifecycle_framework.html
File metadata and controls
742 lines (705 loc) · 44 KB
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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Ecosystem Lifecycle Model — Frontera Leadership Institute</title>
<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=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root {
--forest: #1a3a2a;
--forest-mid: #2d5a3d;
--forest-light: #4a8a5a;
--amber: #c8822a;
--amber-light: #e8a43a;
--amber-pale: #faeeda;
--cream: #faf8f4;
--cream-dark: #f0ece4;
--ink: #1c1c1a;
--ink-mid: #3d3d38;
--ink-muted: #7a7a72;
--ink-faint: #b8b8ae;
--white: #ffffff;
--blue: #185fa5;
--blue-light: #e6f1fb;
--red: #a32d2d;
--red-light: #fcebeb;
--coral: #d85a30;
--coral-light: #faece7;
--purple: #534ab7;
--purple-light: #eeedfe;
--teal: #0f6e56;
--teal-light: #e1f5ee;
--border: rgba(28,28,26,.1);
--border-mid: rgba(28,28,26,.18);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--cream);
color: var(--ink);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
/* ── HEADER ── */
header {
background: var(--forest);
padding: 2.5rem 2rem 2rem;
position: relative;
overflow: hidden;
}
header::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 280px; height: 280px;
border-radius: 50%;
border: 40px solid rgba(255,255,255,.04);
pointer-events: none;
}
header::after {
content: '';
position: absolute;
bottom: -40px; left: 40px;
width: 180px; height: 180px;
border-radius: 50%;
border: 25px solid rgba(200,130,42,.08);
pointer-events: none;
}
.header-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
.header-eyebrow {
font-family: 'DM Sans', sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--amber-light);
margin-bottom: .6rem;
}
header h1 {
font-family: 'Fraunces', serif;
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 300;
color: var(--white);
line-height: 1.15;
margin-bottom: .75rem;
}
header h1 em {
font-style: italic;
color: var(--amber-light);
}
.header-sub {
font-size: 14px;
font-weight: 300;
color: rgba(255,255,255,.65);
line-height: 1.6;
max-width: 560px;
}
.header-meta {
display: flex;
gap: 1.5rem;
margin-top: 1.5rem;
flex-wrap: wrap;
}
.meta-item {
font-size: 11px;
font-weight: 500;
color: rgba(255,255,255,.45);
letter-spacing: .06em;
text-transform: uppercase;
}
.meta-item span { color: rgba(255,255,255,.8); margin-left: 4px; }
/* ── ARC SECTION ── */
.arc-section {
background: var(--white);
border-bottom: 1px solid var(--border);
padding: 1.5rem 2rem 1rem;
}
.arc-inner { max-width: 900px; margin: 0 auto; }
.arc-label {
font-size: 10px;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: .75rem;
}
.arc-svg-wrap { width: 100%; overflow: hidden; }
/* ── MAIN LAYOUT ── */
.main { max-width: 900px; margin: 0 auto; padding: 1.5rem 2rem 3rem; }
/* ── PHASE SELECTOR ── */
.phase-scroll {
display: flex;
gap: 5px;
overflow-x: auto;
padding-bottom: 4px;
margin-bottom: 1.5rem;
scrollbar-width: thin;
scrollbar-color: var(--border-mid) transparent;
}
.phase-scroll::-webkit-scrollbar { height: 3px; }
.phase-scroll::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }
.phase-btn {
flex-shrink: 0;
padding: .45rem .8rem;
font-family: 'DM Sans', sans-serif;
font-size: 11px;
font-weight: 500;
background: var(--white);
border: 1px solid var(--border-mid);
border-radius: 6px;
cursor: pointer;
transition: all .18s;
color: var(--ink-muted);
text-align: center;
line-height: 1.3;
white-space: nowrap;
}
.phase-btn .pnum { display: block; font-size: 9px; opacity: .55; margin-bottom: 1px; }
.phase-btn:hover { border-color: var(--forest-mid); color: var(--forest); background: var(--teal-light); }
.phase-btn.active { background: var(--forest); color: var(--white); border-color: var(--forest); }
.phase-btn.danger.active { background: var(--coral); border-color: var(--coral); }
.phase-btn.decay.active { background: var(--red); border-color: var(--red); }
.phase-btn.regen.active { background: var(--teal); border-color: var(--teal); }
/* ── TABS ── */
.tab-row {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border-mid);
margin-bottom: 1.25rem;
}
.tab {
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
font-weight: 400;
padding: .5rem .9rem;
background: none;
border: none;
cursor: pointer;
color: var(--ink-muted);
border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
margin-bottom: -1px;
white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); font-weight: 500; border-bottom-color: var(--forest); }
/* ── DETAIL CARD ── */
.detail {
border: 1px solid var(--border-mid);
border-radius: 12px;
overflow: hidden;
margin-bottom: 1.25rem;
background: var(--white);
box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.detail-header {
padding: 1.25rem 1.5rem 1rem;
border-bottom: 1px solid var(--border);
}
.phase-tag {
display: inline-block;
font-size: 10px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
padding: 3px 11px;
border-radius: 20px;
margin-bottom: .6rem;
}
.detail-title {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 400;
color: var(--ink);
margin-bottom: .3rem;
line-height: 1.2;
}
.detail-tagline {
font-size: 13.5px;
line-height: 1.6;
font-weight: 300;
}
.detail-body { padding: 1.25rem 1.5rem; }
.sec {
font-size: 10px;
font-weight: 500;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: .6rem;
}
/* ── TRIGGER BOX ── */
.tbox {
background: var(--cream);
border-radius: 8px;
padding: .85rem 1.1rem;
margin-bottom: 1rem;
border-left: 3px solid;
}
.tbox-lbl {
font-size: 10px;
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
margin-bottom: .3rem;
}
.tbox-txt { font-size: 13.5px; line-height: 1.6; color: var(--ink-mid); }
/* ── ECO GRID ── */
.eco-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 1rem; }
.eco-card {
border: 1px solid var(--border);
border-radius: 8px;
padding: .8rem .9rem;
background: var(--cream);
}
.eco-name {
font-size: 9.5px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: .35rem;
}
.eco-chip {
display: inline-block;
font-size: 10px;
padding: 2px 8px;
border-radius: 20px;
margin-bottom: .4rem;
font-weight: 400;
}
.eco-txt { font-size: 12px; line-height: 1.5; color: var(--ink-mid); }
/* ── CALLOUT / INSIGHT ── */
.callout {
border-radius: 8px;
padding: .9rem 1.1rem;
margin-top: .85rem;
border: 1px solid;
}
.callout-lbl {
font-size: 10px;
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
margin-bottom: .3rem;
}
.callout-txt { font-size: 13px; line-height: 1.6; color: var(--ink-mid); }
/* ── QUOTE ── */
.quote-block {
border-left: 3px solid var(--amber);
padding: .8rem 1.1rem;
margin: 1rem 0;
font-family: 'Fraunces', serif;
font-size: 15px;
font-style: italic;
color: var(--ink-mid);
line-height: 1.7;
background: var(--amber-pale);
border-radius: 0 8px 8px 0;
}
/* ── NAV ── */
.nav-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.nav-btn {
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
font-weight: 400;
padding: .5rem 1.1rem;
background: var(--white);
border: 1px solid var(--border-mid);
border-radius: 6px;
cursor: pointer;
color: var(--ink-mid);
transition: all .15s;
}
.nav-btn:hover { background: var(--cream-dark); border-color: var(--forest-mid); color: var(--forest); }
.nav-btn:disabled { opacity: .25; cursor: default; }
.phase-ind { font-size: 11.5px; color: var(--ink-faint); font-weight: 300; }
/* ── FOOTER ── */
footer {
background: var(--forest);
padding: 1.5rem 2rem;
text-align: center;
}
.footer-inner { max-width: 900px; margin: 0 auto; }
.footer-text {
font-family: 'Fraunces', serif;
font-size: 14px;
font-style: italic;
color: rgba(255,255,255,.5);
line-height: 1.7;
}
.footer-text strong { color: var(--amber-light); font-style: normal; font-weight: 400; }
.footer-meta {
font-size: 10px;
color: rgba(255,255,255,.25);
margin-top: .75rem;
letter-spacing: .06em;
text-transform: uppercase;
}
/* ── RESPONSIVE ── */
@media (max-width: 640px) {
header { padding: 1.75rem 1.25rem 1.5rem; }
.main { padding: 1.25rem 1.25rem 2.5rem; }
.arc-section { padding: 1.25rem 1.25rem .75rem; }
.eco-grid { grid-template-columns: 1fr; }
.detail-header { padding: 1rem 1.1rem .85rem; }
.detail-body { padding: 1rem 1.1rem; }
.tab { font-size: 11.5px; padding: .45rem .65rem; }
}
</style>
</head>
<body>
<header>
<div class="header-inner">
<div class="header-eyebrow">Frontera Leadership Institute — Strategic Framework</div>
<h1>The Ecosystem<br><em>Lifecycle Model</em></h1>
<p class="header-sub">Ten phases from dormancy to rebirth — including extraction, decay, and regeneration. Every ecosystem follows this arc. The question is how far down it goes, and whether the right people are there to turn it back.</p>
<div class="header-meta">
<div class="meta-item">Phases <span>10</span></div>
<div class="meta-item">Case studies <span>Silicon Valley · Austin · Brownsville/RGV · Detroit</span></div>
<div class="meta-item">Framework by <span>LMNTS / FLI</span></div>
</div>
</div>
</header>
<div class="arc-section">
<div class="arc-inner">
<div class="arc-label">The full lifecycle arc</div>
<div class="arc-svg-wrap">
<svg width="100%" viewBox="0 0 860 130" role="img" aria-label="Ecosystem lifecycle arc showing 10 phases from Dormancy through Regeneration">
<defs>
<marker id="arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
<!-- Growth curve -->
<path d="M40 108 C100 108 130 90 185 74 C235 58 270 42 330 28 C370 18 410 13 460 12 C490 12 505 13 520 16" fill="none" stroke="#2d5a3d" stroke-width="2" opacity=".5"/>
<!-- Descent -->
<path d="M520 16 C560 28 600 62 645 88 C660 96 678 106 700 110" fill="none" stroke="#d85a30" stroke-width="2" opacity=".5"/>
<!-- Regeneration dashed -->
<path d="M700 110 C718 104 740 90 775 72" fill="none" stroke="#0f6e56" stroke-width="2" stroke-dasharray="5,3" opacity=".6" marker-end="url(#arr)"/>
<!-- Phase dots -->
<circle cx="40" cy="108" r="5" fill="#faf8f4" stroke="#7a7a72" stroke-width="1.5"/>
<circle cx="120" cy="90" r="5" fill="#e6f1fb" stroke="#185fa5" stroke-width="1.5"/>
<circle cx="200" cy="70" r="5" fill="#e1f5ee" stroke="#0f6e56" stroke-width="1.5"/>
<circle cx="285" cy="46" r="5" fill="#faeeda" stroke="#c8822a" stroke-width="1.5"/>
<circle cx="360" cy="26" r="6" fill="#e8a43a" stroke="#854f0b" stroke-width="2"/>
<circle cx="435" cy="16" r="5" fill="#5dcaa5" stroke="#0f6e56" stroke-width="1.5"/>
<circle cx="510" cy="13" r="5" fill="#afa9ec" stroke="#534ab7" stroke-width="1.5"/>
<circle cx="580" cy="44" r="5" fill="#f0997b" stroke="#d85a30" stroke-width="1.5"/>
<circle cx="648" cy="90" r="5" fill="#f7c1c1" stroke="#a32d2d" stroke-width="1.5"/>
<circle cx="765" cy="68" r="5" fill="#9fe1cb" stroke="#0f6e56" stroke-width="1.5" stroke-dasharray="3,2"/>
<!-- Phase labels top -->
<text x="40" y="98" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#7a7a72">Dormancy</text>
<text x="120" y="80" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#185fa5">Signal</text>
<text x="200" y="60" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#0f6e56">Germination</text>
<text x="285" y="36" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#c8822a">1st Harvest</text>
<text x="360" y="16" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8.5" fill="#854f0b" font-weight="600">Root System ★</text>
<text x="435" y="8" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#0f6e56">Canopy</text>
<text x="510" y="6" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#534ab7">Dense Forest</text>
<text x="580" y="34" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#d85a30">Extraction</text>
<text x="648" y="80" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#a32d2d">Decay</text>
<text x="765" y="58" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#0f6e56">Regeneration</text>
<!-- Phase numbers below -->
<text x="40" y="120" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#b8b8ae">01</text>
<text x="120" y="120" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#b8b8ae">02</text>
<text x="200" y="120" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#b8b8ae">03</text>
<text x="285" y="120" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#b8b8ae">04</text>
<text x="360" y="120" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#b8b8ae">05</text>
<text x="435" y="120" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#b8b8ae">06</text>
<text x="510" y="120" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#b8b8ae">07</text>
<text x="580" y="120" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#b8b8ae">08</text>
<text x="648" y="120" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#b8b8ae">09</text>
<text x="765" y="120" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="8" fill="#b8b8ae">10</text>
<!-- Annotations -->
<path d="M250 50 L285 34" stroke="#c8822a" stroke-width="0.5" stroke-dasharray="2,2" fill="none"/>
<text x="222" y="50" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="7" fill="#c8822a" opacity=".8">most stall here</text>
<path d="M542 38 L598 70" stroke="#d85a30" stroke-width="0.5" stroke-dasharray="2,2" fill="none"/>
<text x="555" y="36" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="7" fill="#d85a30" opacity=".8">extractive descent</text>
<text x="830" y="70" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="7" fill="#0f6e56" opacity=".7">→ possible</text>
</svg>
</div>
</div>
</div>
<div class="main">
<!-- Phase selector -->
<div class="phase-scroll" id="phaseBtns"></div>
<!-- Tabs -->
<div class="tab-row">
<button class="tab active" onclick="switchTab(0)">Overview</button>
<button class="tab" onclick="switchTab(1)">Tipping point</button>
<button class="tab" onclick="switchTab(2)">Ecosystem compare</button>
<button class="tab" onclick="switchTab(3)">Brownsville lens</button>
</div>
<!-- Detail -->
<div class="detail" id="detailPanel"></div>
<!-- Nav -->
<div class="nav-row">
<button class="nav-btn" id="prevBtn" onclick="navigate(-1)">← Previous phase</button>
<span class="phase-ind" id="phaseInd"></span>
<button class="nav-btn" id="nextBtn" onclick="navigate(1)">Next phase →</button>
</div>
</div>
<footer>
<div class="footer-inner">
<div class="quote-block" style="background:rgba(255,255,255,.05);border-left-color:var(--amber-light);color:rgba(255,255,255,.7);margin-bottom:1rem;">
"If we tend to the garden, we will have an orchard and a fruit forest one day. But it takes vision and commitment."
</div>
<div class="footer-text">
<strong>Frontera Leadership Institute</strong> — Building the ecosystem Brownsville and the Rio Grande Valley deserve.
</div>
<div class="footer-meta">LMNTS / FLI · Brownsville, Texas · Framework developed 2026</div>
</div>
</footer>
<script>
const P=[
{
num:"01",name:"Dormancy",cls:"",
hbg:"#f0ece4",hborder:"rgba(28,28,26,.12)",
tagBg:"#d3d1c7",tagFg:"#2c2c2a",
title:"The Sleeping Giant",
tagline:"Assets exist in isolation — talent, geography, institutions. No connective tissue has formed. The ecosystem is potential, not kinetic.",
trigger_lbl:"What breaks dormancy",
trigger:"A landmark institution or irreversible infrastructure decision lands — large enough and permanent enough to change what the city believes about itself. Almost always requires intentional civic and political will, not organic emergence.",
tc:"#7a7a72",
sv:{status:"Pre-1950",sbg:"#d3d1c7",sfg:"#2c2c2a",txt:"Stanford and HP existed as isolated nodes. Frederick Terman was building the case for a Stanford industrial park, but the ecosystem had no name, no identity, no activation infrastructure."},
atx:{status:"Pre-1974",sbg:"#d3d1c7",sfg:"#2c2c2a",txt:"University, state government, music scene — coexisting without a tech identity. The dormancy was comfortable. Austin didn't know what it was missing."},
bvl:{status:"Pre-2012",sbg:"#d3d1c7",sfg:"#2c2c2a",txt:"UTRGV, maquiladora workforce, border geography — every raw ingredient present but no activating narrative, no founder culture, no institutional spine."},
insight:"",
lens:"Brownsville's dormancy is well-documented. The region had geography, bilingual talent, proximity to Mexico's largest trading corridor — but no ecosystem identity. The civic will to activate hadn't formed yet.",
action:"Document and publish the dormancy narrative intentionally. Create the origin myth before someone else writes it wrong.",
metrics:"Count of startup-focused events per year. Presence of at least one institutional anchor (university research center, major employer, federal agency)."
},
{
num:"02",name:"Signal",cls:"",
hbg:"#e6f1fb",hborder:"#b5d4f4",
tagBg:"#b5d4f4",tagFg:"#0c447c",
title:"The Anchor Event",
tagline:"A single institution, employer, or infrastructure decision lands that is large enough, permanent enough, and visible enough to change what the city believes about itself.",
trigger_lbl:"What tips Signal → Germination",
trigger:"A civic translator — someone who looks at the anchor and immediately starts building human capital infrastructure around it. Without this person, the anchor creates jobs but not an ecosystem. The anchor is the material; the translator is the builder.",
tc:"#185fa5",
sv:{status:"1951–1957",sbg:"#b5d4f4",sfg:"#0c447c",txt:"Stanford Industrial Park (1951) and Shockley Semiconductor (1956). Terman's deliberate strategy to commercialize research produces the first connective tissue between institution and founder."},
atx:{status:"1983–1984",sbg:"#b5d4f4",sfg:"#0c447c",txt:"Austin wins MCC over 57 cities. Pike Powers, Kozmetsky, Bobby Ray Inman execute a campaign that shocks the country. Michael Dell starts building computers in his UT dorm room that same year."},
bvl:{status:"2014–present",sbg:"#b5d4f4",sfg:"#0c447c",txt:"SpaceX announces Boca Chica as its primary launch site. This is Brownsville's MCC moment — irreversible, nationally visible, permanently altering what the region believes is possible."},
insight:"Many cities receive an anchor and never convert it. Detroit got the auto industry. Gary, Indiana got steel. The anchor can create jobs without creating founders. The difference is always a person — the civic translator.",
lens:"Brownsville has its signal. SpaceX is the most dramatic anchor any mid-size American city has received in decades. The urgent question — identical to what Austin faced in 1983 — is whether the region will produce its own Kozmetsky.",
action:"Build the civic translation layer around SpaceX now. Identify who Brownsville's Kozmetsky is or should be. Begin naming the ecosystem publicly and consistently.",
metrics:"Has one person or institution begun translating the anchor into human capital programs? Is the anchor creating a talent pull — are people choosing to relocate to the region?"
},
{
num:"03",name:"Germination",cls:"",
hbg:"#e1f5ee",hborder:"#9fe1cb",
tagBg:"#9fe1cb",tagFg:"#085041",
title:"The Infrastructure Build",
tagline:"Coworking, incubators, accelerator programs, and community builders appear. Founder culture starts to form. The city begins to have a scene.",
trigger_lbl:"What tips Germination → First Harvest",
trigger:"Founder density crosses a threshold where the first serious venture is attempted. This is about people who believe it's possible — not about having funding yet. The first exits almost always come from this early cohort.",
tc:"#0f6e56",
sv:{status:"1957–1972",sbg:"#9fe1cb",sfg:"#085041",txt:"The Fairchild Eight leave Shockley in 1957 and create the founder culture. Over 50 spin-offs emerge from Fairchild alone — and crucially, its founders stay in the valley and start again."},
atx:{status:"1989–2009",sbg:"#9fe1cb",sfg:"#085041",txt:"Kozmetsky launches ATI (1989) in a 75-second parking lot conversation. Laura Kilcrease builds it into a self-sustaining incubator. SXSW Interactive (1994). Capital Factory (2009) finally closes the gap between ideas and capital."},
bvl:{status:"2022–present",sbg:"#9fe1cb",sfg:"#085041",txt:"FLI launches at eBridge (2023). UTRGV entrepreneurship programs deepen. SpaceX supplier ecosystem begins forming. The earliest connective tissue — still thin, but intentional."},
insight:"Austin's germination phase lasted 20 years — ATI (1989) to Capital Factory (2009). That gap existed partly because Dell's wealth event wasn't recycled fast enough. Silicon Valley germinated in roughly 10 years because Fairchild's founders immediately became the next generation of founders and investors.",
lens:"FLI is doing ATI's work in Brownsville. The critical question is how quickly the region can compress this phase. Austin took 20 years partly because of the Dellionaire problem. Brownsville can do it in 7–10 years if the SpaceX wealth event is actively designed for recycling.",
action:"Scale FLI and similar programs as fast as resources allow. Build founder density before the wealth event arrives. The window between Signal and First Harvest is the highest-leverage moment in the region's history.",
metrics:"Number of active founders in the region. Existence of at least one incubator or accelerator. Three or more startup events monthly. First companies pursuing external funding."
},
{
num:"04",name:"First Harvest",cls:"",
hbg:"#faeeda",hborder:"#fac775",
tagBg:"#fac775",tagFg:"#633806",
title:"The Wealth Event",
tagline:"The first major IPO, acquisition, or funding event creates local millionaires. This is the most dangerous phase — wealth can compound the ecosystem or it can leave.",
trigger_lbl:"What tips First Harvest → Root System",
trigger:"20–30% of the newly wealthy choosing to reinvest locally — as angels, mentors, or co-founders of the next company. This is the Fairchild Mafia effect vs. the Dellionaire effect. The wealth event is the fuel. Recycling is the decision that determines everything.",
tc:"#c8822a",
sv:{status:"1968–1978",sbg:"#fac775",sfg:"#633806",txt:"Intel IPO (1968). The Fairchild founders become the first angel investors. Noyce and Moore seed the next generation. The PayPal Mafia (2002+) repeats this at scale. Each wealth event seeds the next cohort."},
atx:{status:"1988–2000",sbg:"#fac775",sfg:"#633806",txt:"Dell IPO (1988) creates the first wave of Dellionaires. Problem: most bought homes, boats, and ranches — not startups. Austin's angel infrastructure was thin for a decade after one of the largest wealth events in Texas history."},
bvl:{status:"Not yet — design now",sbg:"#d3d1c7",sfg:"#444441",txt:"The SpaceX wealth event hasn't fully arrived. But it will. The question Brownsville must answer NOW is: what systems will exist to capture and recycle it when it does?"},
insight:"THE DELLIONAIRE PROBLEM: Dell created hundreds of millionaires in Central Texas. Very few became angels or VCs. The culture of reinvestment didn't exist. Austin's angel ecosystem didn't mature until CTAN formed in the early 2000s — fifteen years after the wealth event. That gap cost Austin at least one generation of companies.",
lens:"Brownsville must solve the Dellionaire problem before the money arrives. The angel network, co-investment structures, and 'give before you get' culture need to exist before the SpaceX IPO or supplier exits land.",
action:"Form a proto-angel network now with FLI alumni and regional allies. Build the reinvestment norm into the current founder cohort before they have money to reinvest.",
metrics:"Nature of first exits. Are newly wealthy alumni staying in the region? Is anyone forming an angel network? Watch for real estate purchases vs. reinvestment patterns."
},
{
num:"05",name:"Root System",cls:"",
hbg:"#fef3e2",hborder:"#ef9f27",
tagBg:"#ef9f27",tagFg:"#412402",
title:"The Critical Threshold ★",
tagline:"Recycled capital begins to flow. Local angels and early-stage VCs form. Serial founders emerge. The ecosystem becomes capable of reproducing itself for the first time.",
trigger_lbl:"What tips Root System → Canopy",
trigger:"A second-generation founder — someone who came up through the ecosystem, built a company, exited, and then funded or co-founded the next one. This closes the loop and signals to outsiders that the ecosystem is real.",
tc:"#854f0b",
sv:{status:"1972–1985",sbg:"#ef9f27",sfg:"#412402",txt:"Kleiner Perkins (1972) and Sequoia Capital (1972) formalize what the Fairchild Mafia had been doing informally. The VC industry is invented. Apple, Sun, Cisco are all VC-backed. The infrastructure precedes the unicorns."},
atx:{status:"2009–2015",sbg:"#ef9f27",sfg:"#412402",txt:"Capital Factory + CTAN maturation finally creates the root system. WP Engine raises its Series A (2013). HomeAway is acquired by Expedia for $3.9B (2015). Austin's first generation of serial founders begins to form."},
bvl:{status:"Target: 2028–2033",sbg:"#d3d1c7",sfg:"#444441",txt:"The five-to-ten year target state. A local angel network with 15–25 active investors. FLI alumni-founded companies with meaningful revenue. A first exit from the SpaceX supplier ecosystem that recycles locally."},
insight:"Every ecosystem that failed — Detroit with auto, Gary with steel, Rochester with Kodak — failed here. They had wealth events but no recycling mechanism. Root System is where human capital programs pay their long-term dividend.",
lens:"FLI's long game is this phase. Every student who graduates, starts a company, exits, and then becomes an FLI mentor or investor is a Root System event. The goal for the next decade is enough of these cycles that the ecosystem sustains itself.",
action:"Run FLI alumni as the seed cohort of a future RGV angel network. Create co-investment structures so SpaceX supplier wealth recycles locally. Make it easy and prestigious to be an early-stage investor in the Valley.",
metrics:"Active angel investors. Are local founders raising locally? Second-generation founders emerging. A functioning angel network with regular deal flow."
},
{
num:"06",name:"Canopy",cls:"",
hbg:"#e1f5ee",hborder:"#9fe1cb",
tagBg:"#5dcaa5",tagFg:"#04342c",
title:"The Flywheel",
tagline:"Alumni hire alumni. Graduates mentor graduates. Capital circulates locally. The brand reputation of the city begins to attract talent from outside — the ecosystem becomes self-reinforcing.",
trigger_lbl:"What tips Canopy → Dense Forest",
trigger:"National press plus a first unicorn or billion-dollar exit. The signal to the outside world that the ecosystem is real. Talent migrates in without being recruited. VC firms arrive without invitations.",
tc:"#0f6e56",
sv:{status:"1985–2000",sbg:"#5dcaa5",sfg:"#04342c",txt:"Apple II era, Sun workstations, Cisco routers. The valley is now the gravity center of global technology. Stanford graduates choose to stay. National VC firms open Sand Hill Road offices."},
atx:{status:"2015–2020",sbg:"#5dcaa5",sfg:"#04342c",txt:"HomeAway, Dell Technologies post-EMC, NXP, WP Engine. SXSW is a global institution. Austin appears on 'best cities for startups' lists. Migration begins before Tesla and Oracle announce their moves."},
bvl:{status:"Goal: 2033–2038",sbg:"#d3d1c7",sfg:"#444441",txt:"SpaceX IPO or major supplier acquisition produces national visibility. First generation of FLI-adjacent founders running real companies. The RGV on a national list for the first time."},
insight:"The Canopy phase feels sudden to outsiders — 'Austin became a tech city overnight.' The people inside know it took 30 years. The overnight success narrative is dangerous because it makes other cities think they can skip phases.",
lens:"Brownsville's canopy moment will likely be SpaceX-anchored. The city's job between now and then is to ensure enough local human capital infrastructure exists to capture the economic value rather than watch it flow to Austin and Houston.",
action:"Begin telling the ecosystem story nationally — SXSW presence, conference circuit, thought leadership from RGV founders. Invite VCs before you need them. Build the narrative before the moment arrives.",
metrics:"National press mentions without pitching them. Inbound talent migration. VC firms visiting without being recruited. Alumni-to-alumni hiring patterns forming organically."
},
{
num:"07",name:"Dense Forest",cls:"",
hbg:"#eeedfe",hborder:"#cecbf6",
tagBg:"#afa9ec",tagFg:"#26215c",
title:"Mature Ecosystem",
tagline:"The ecosystem generates more value than is invested into it. Brand reputation attracts global talent. But maturity carries new dangers — cost inflation, talent extraction, monoculture.",
trigger_lbl:"The warning sign at this phase",
trigger:"High costs begin pricing out early-stage founders. Large companies absorb the best talent, leaving fewer people to start new things. If the ecosystem stops producing new growth, it starts extracting from itself — and Phase 8 begins.",
tc:"#534ab7",
sv:{status:"2000–2015",sbg:"#afa9ec",sfg:"#26215c",txt:"Post-Netscape, post-Google, post-Facebook. Global talent magnet. Median home price begins its climb toward $1.5M. The valley is now the most valuable real estate in the world — and that's the beginning of the problem."},
atx:{status:"2020–present",sbg:"#afa9ec",sfg:"#26215c",txt:"Tesla, Oracle, Apple, Goldman Sachs. Austin is Dense Forest — attracting global talent, national VC attention, producing unicorns. Housing costs tripled in three years. The early-stage founder and the working class face the same pressure."},
bvl:{status:"Not applicable yet",sbg:"#d3d1c7",sfg:"#444441",txt:"Brownsville's job is to observe what went wrong in Silicon Valley and Austin and design the ecosystem so that when Dense Forest arrives, the community it grew from is still in it."},
insight:"New York, Boston, and Chicago avoided Silicon Valley's monoculture by maintaining multiple strong industry verticals. Diversification is the hedge against stagnation — and against extraction.",
lens:"The lesson for Brownsville is to design for equity from the beginning. Silicon Valley and Austin both became dense forests that extracted from their founding communities. The RGV has an opportunity — because it's early enough — to build ownership and reinvestment norms into the DNA.",
action:"Introduce community benefit structures, local ownership requirements, and reinvestment covenants into early institutional charters before the wealth event makes it politically harder to do so.",
metrics:"Housing cost trajectory vs. founder formation rate. Builder-to-extractor ratio in new arrivals. Industry vertical diversity. Programs serving underrepresented founders."
},
{
num:"08",name:"Extraction",cls:"danger",
hbg:"#faece7",hborder:"#f5c4b3",
tagBg:"#f0997b",tagFg:"#4a1b0c",
title:"The Zombie Phase",
tagline:"The ecosystem jumps the shark. Transactional players dominate. Everyone is there to see what they can take. The spirit is gone. It still looks like an ecosystem — but it's a zombie.",
trigger_lbl:"What causes Extraction",
trigger:"A critical mass of players with extractive mindsets displaces the builders. This can happen through aggressive VC colonization, corporate monopolization of talent, or the founding generation cashing out without passing the torch. The culture tips from 'build' to 'harvest.'",
tc:"#d85a30",
sv:{status:"2015–present signs",sbg:"#f0997b",sfg:"#4a1b0c",txt:"Venture firms optimizing for exits over ecosystem health. Housing crisis displaces the working class and early founders. WeWork, the SPAC bubble, 'growth at all costs' — these are symptoms of extraction logic taking hold."},
atx:{status:"Risk: 2023–present",sbg:"#fac775",sfg:"#633806",txt:"Signs of extraction appearing: corporate relocations absorbing talent without creating new founders. Real estate speculation pricing out the creative class. The city is watching for whether it tips this way."},
bvl:{status:"Preventable",sbg:"#9fe1cb",sfg:"#085041",txt:"Brownsville has the advantage of seeing this pattern in advance. The extractive phase is not inevitable. It arrives when the ecosystem doesn't protect its generative core."},
insight:"The extraction phase is recognizable in real time — but most cities don't name it until it's already won. Key signal: the ratio of people arriving to take vs. people arriving to build crosses a threshold. When deal-making exceeds company-building, the zombie phase has begun.",
lens:"The best protection against extraction is a well-tended root system. Ecosystems with deep local capital, active alumni reinvestment, and strong community identity are harder to extract from. This is why FLI's model — building people who stay and build — is a long-term defense mechanism.",
action:"Name extraction risk publicly before it arrives. Create ecosystem health metrics that track the builder-to-extractor ratio. Celebrate and publicize local reinvestment stories. Make tending the garden prestigious.",
metrics:"Ratio of deal-making to company-building events. Are early-stage founders being priced out or absorbed? Presence of non-local VCs with no regional commitment or community ties."
},
{
num:"09",name:"Decay",cls:"decay",
hbg:"#fcebeb",hborder:"#f7c1c1",
tagBg:"#f7c1c1",tagFg:"#501313",
title:"The Empty Forest",
tagline:"Everything has been extracted. The skeleton stands. Institutions remain but they're hollow. Talent leaves. Capital chases the next hot city. The ecosystem is technically alive but functionally inert.",
trigger_lbl:"What determines how long decay lasts",
trigger:"Whether enough ecosystem-minded players remain — or return — with the vision and patience to rebuild. Decay can last decades if only extractors are present. It can be reversed in 5–10 years if the right people make the right investments with the right mindset.",
tc:"#a32d2d",
sv:{status:"Not there — warning signs",sbg:"#f7c1c1",sfg:"#501313",txt:"Silicon Valley has not decayed but shows pre-decay symptoms: talent exodus to Austin, Miami, New York. AI concentration may be the last consolidation before dispersal."},
atx:{status:"Not there — but monitor",sbg:"#fac775",sfg:"#633806",txt:"Austin's active startup community and Capital Factory network are buffers — but not permanent guarantees. Affordability pressures and corporate monoculture are the risk vectors to watch."},
bvl:{status:"Cautionary tale available",sbg:"#9fe1cb",sfg:"#085041",txt:"Detroit is the clearest American case study. Auto industry dominance → extraction → collapse → decades of decay → attempted regeneration now. The RGV has the advantage of studying it before rather than after."},
insight:"DETROIT: The auto industry was the greatest economic engine in American history — and it left the city a ghost of itself. Not through bad luck, but because wealth was systematically extracted rather than recycled. When GM and Ford optimized for shareholder returns over ecosystem health, they planted the seeds of decay 40 years in advance.",
lens:"The decay phase is the cautionary tale at the heart of every conversation about Brownsville's future. The region has seen enough extractive economics in the maquiladora model and border commerce patterns to recognize the pattern. That lived experience is actually an asset.",
action:"Study Detroit's trajectory in depth. Identify the specific decisions — policy, corporate, cultural — that accelerated its decay. Make those decisions explicitly visible in RGV planning conversations so they are never made again.",
metrics:"Rate of talent emigration. Hollowing of anchor institutions. Number of vacant commercial properties vs. new business formation. Are local leaders staying or leaving the region?"
},
{
num:"10",name:"Regeneration",cls:"regen",
hbg:"#e1f5ee",hborder:"#5dcaa5",
tagBg:"#5dcaa5",tagFg:"#04342c",
title:"The Replanting",
tagline:"The right players return or emerge with ecosystem-minded investment, long time horizons, and the humility to rebuild rather than extract. A five-to-ten year minimum. It doesn't work without the right people.",
trigger_lbl:"What makes regeneration succeed vs. fail",
trigger:"The difference between regeneration and a second extraction is the character of the investors. Ecosystem-minded players can still earn a return — but they understand they're planting an orchard, not strip-mining a field. They tend the garden. They don't abuse the commons.",
tc:"#1d9e75",
sv:{status:"Watching — not yet needed",sbg:"#9fe1cb",sfg:"#085041",txt:"The AI concentration wave may be Silicon Valley's opportunity to regenerate around a new vertical — or it may deepen the extraction. The outcome depends on whether today's builders apply the lessons or repeat the patterns."},
atx:{status:"Not applicable yet",sbg:"#d3d1c7",sfg:"#444441",txt:"Austin's job is to not need this phase. The interventions at Dense Forest and Extraction stages — if made now — can keep the ecosystem generative for decades."},
bvl:{status:"Detroit is the map",sbg:"#b5d4f4",sfg:"#0c447c",txt:"Detroit's regeneration is underway. Dan Gilbert's Bedrock Detroit and the Rocket Mortgage coalition are doing the work with an ecosystem mindset. But they've said it themselves: it requires more than a few players and a minimum five-to-ten year runway."},
insight:"WHAT DETROIT TEACHES: When extractors reset the clock, you don't just lose time — you lose the cultural memory of what made the ecosystem work. The founders who understood the norms are gone. The anchors are gone. You have to rebuild the belief infrastructure from scratch, which is harder the second time because the city has seen it fail once.",
lens:"The orchard metaphor is the right one. If you tend the garden — consistently, over years, with patience and vision — you will eventually have an orchard and a fruit forest. But it doesn't happen by accident. It requires specific people making specific decisions to invest without guarantee of return, to mentor without expecting credit, to build something larger than themselves. That's what FLI is doing. That's the bet.",
action:"Tell the regeneration story — Detroit, Pittsburgh, Cleveland — as a warning and a map. Build FLI's reinvestment culture now so it's already mature when the ecosystem reaches Dense Forest. The students in the room today are the tenders of the garden tomorrow.",
metrics:"Character of incoming investors — builder vs. extractor mindset. Time horizons on deployed capital. Alumni reinvestment rates. Cultural memory of what the ecosystem was built on."
}
];
let cur=0,tab=0;
function buildBtns(){
const c=document.getElementById('phaseBtns');
P.forEach((p,i)=>{
const b=document.createElement('button');
b.className='phase-btn'+(p.cls?' '+p.cls:'')+(i===0?' active':'');
b.id='pb'+i;
b.innerHTML='<span class="pnum">'+p.num+'</span>'+p.name;
b.onclick=()=>setPhase(i);
c.appendChild(b);
});
}
function switchTab(t){
tab=t;
document.querySelectorAll('.tab').forEach((el,i)=>el.classList.toggle('active',i===t));
render();
}
function setPhase(i){
cur=i;
P.forEach((_,j)=>document.getElementById('pb'+j).classList.toggle('active',j===i));
document.getElementById('prevBtn').disabled=i===0;
document.getElementById('nextBtn').disabled=i===P.length-1;
document.getElementById('phaseInd').textContent='Phase '+(i+1)+' of '+P.length;
render();
// scroll phase btn into view
document.getElementById('pb'+i).scrollIntoView({behavior:'smooth',block:'nearest',inline:'center'});
}
function navigate(d){setPhase(Math.max(0,Math.min(P.length-1,cur+d)));}
function render(){
const p=P[cur];
let body='';
if(tab===0){
body='<div class="sec">Phase description</div>'
+'<p style="font-size:14px;line-height:1.7;color:var(--ink-mid);margin-bottom:.9rem">'+p.tagline+'</p>'
+(p.insight?'<div class="callout" style="background:var(--amber-pale);border-color:var(--amber);"><div class="callout-lbl" style="color:var(--amber)">Key insight</div><div class="callout-txt">'+p.insight+'</div></div>':'');
} else if(tab===1){
body='<div class="tbox" style="border-left-color:'+p.tc+'">'
+'<div class="tbox-lbl" style="color:'+p.tc+'">'+p.trigger_lbl+'</div>'
+'<div class="tbox-txt">'+p.trigger+'</div></div>'
+'<div class="sec">What to measure and watch for</div>'
+'<p style="font-size:13.5px;line-height:1.65;color:var(--ink-mid)">'+p.metrics+'</p>';
} else if(tab===2){
body='<div class="sec">How each ecosystem navigated this phase</div>'
+'<div class="eco-grid">'
+'<div class="eco-card"><div class="eco-name" style="color:#185fa5">Silicon Valley</div>'
+'<div class="eco-chip" style="background:'+p.sv.sbg+';color:'+p.sv.sfg+'">'+p.sv.status+'</div>'
+'<div class="eco-txt">'+p.sv.txt+'</div></div>'
+'<div class="eco-card"><div class="eco-name" style="color:#854f0b">Austin</div>'
+'<div class="eco-chip" style="background:'+p.atx.sbg+';color:'+p.atx.sfg+'">'+p.atx.status+'</div>'
+'<div class="eco-txt">'+p.atx.txt+'</div></div>'
+'<div class="eco-card"><div class="eco-name" style="color:#085041">Brownsville / RGV</div>'
+'<div class="eco-chip" style="background:'+p.bvl.sbg+';color:'+p.bvl.sfg+'">'+p.bvl.status+'</div>'
+'<div class="eco-txt">'+p.bvl.txt+'</div></div>'
+'</div>';
} else if(tab===3){
body='<div class="sec">What this phase means for Brownsville right now</div>'
+'<p style="font-size:14px;line-height:1.7;color:var(--ink-mid);margin-bottom:.9rem">'+p.lens+'</p>'
+'<div class="tbox" style="border-left-color:'+p.tc+'">'
+'<div class="tbox-lbl" style="color:'+p.tc+'">Recommended action this decade</div>'
+'<div class="tbox-txt">'+p.action+'</div></div>';
}
document.getElementById('detailPanel').innerHTML=
'<div class="detail-header" style="background:'+p.hbg+';border-bottom:1px solid '+p.hborder+'">'
+'<div class="phase-tag" style="background:'+p.tagBg+';color:'+p.tagFg+'">'+p.num+' — '+p.name+'</div>'
+'<div class="detail-title">'+p.title+'</div>'
+'<div class="detail-tagline" style="color:'+p.tagFg+'">'+p.tagline+'</div>'
+'</div><div class="detail-body">'+body+'</div>';
}
buildBtns();
setPhase(0);
</script>
</body>
</html>