interactive intro to open social
at-me.zzstoatzz.io
fix: sync view/index.html with view.html
view/index.html was stale with old onboarding element IDs and old copy.
this is the file wisp serves for /view, which is why the deployed site
was broken — new JS looked for onboardingBackdrop/Ring/Card but the HTML
still had onboardingSpotlight/Content.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+21
-19
+21
-19
view/index.html
+21
-19
view/index.html
···
4
4
<head>
5
5
<meta charset="UTF-8">
6
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
-
<title>@me - explore your atproto identity</title>
7
+
<title>@me - explore the atmosphere</title>
8
8
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
9
9
10
10
<!-- Open Graph / Facebook -->
···
12
12
<meta property="og:url" content="https://at-me.wisp.place/">
13
13
<meta property="og:title" content="@me - explore your atproto identity">
14
14
<meta property="og:description"
15
-
content="visualize your decentralized identity and see what apps have stored data in your Personal Data Server">
15
+
content="see your atmosphere account — one account, all your apps and data">
16
16
<meta property="og:image" content="https://at-me.wisp.place/og-image.png">
17
17
18
18
<!-- Twitter -->
···
20
20
<meta property="twitter:url" content="https://at-me.wisp.place/">
21
21
<meta property="twitter:title" content="@me - explore your atproto identity">
22
22
<meta property="twitter:description"
23
-
content="visualize your decentralized identity and see what apps have stored data in your Personal Data Server">
23
+
content="see your atmosphere account — one account, all your apps and data">
24
24
<meta property="twitter:image" content="https://at-me.wisp.place/og-image.png">
25
25
</head>
26
26
···
101
101
102
102
<div class="overlay" id="overlay"></div>
103
103
<div class="info-modal" id="infoModal">
104
-
<h2>this is your data</h2>
105
-
<p>this visualization shows your <a href="https://atproto.com/guides/data-repos" target="_blank"
106
-
rel="noopener noreferrer" style="color: var(--text); text-decoration: underline;">Personal Data
107
-
Server</a> - where your social data actually lives. unlike traditional platforms that lock everything in
108
-
their database, your posts, likes, and follows are stored here, on infrastructure you control.</p>
109
-
<p>each circle represents an app that writes to your space. <a href="https://bsky.app" target="_blank"
104
+
<h2>this is your account</h2>
105
+
<p>you're looking at an <a href="https://augment.ink/the-everything-account" target="_blank"
106
+
rel="noopener noreferrer" style="color: var(--text); text-decoration: underline;">atmosphere account</a>
107
+
— one account that works across every app. your posts, likes, follows, and everything else you create
108
+
belongs to you, not to any single app.</p>
109
+
<p>each circle is an app connected to this account. <a href="https://bsky.app" target="_blank"
110
110
rel="noopener noreferrer" style="color: var(--text); text-decoration: underline;">bluesky</a> for
111
111
microblogging. <a href="https://whtwnd.com" target="_blank" rel="noopener noreferrer"
112
112
style="color: var(--text); text-decoration: underline;">whitewind</a> for long-form posts. <a
113
113
href="https://tangled.org" target="_blank" rel="noopener noreferrer"
114
-
style="color: var(--text); text-decoration: underline;">tangled.org</a> for code hosting. they're all
115
-
just different views of the same underlying data - <strong>your</strong> data.</p>
116
-
<p>this is what "<a href="https://overreacted.io/open-social/" target="_blank" rel="noopener noreferrer"
117
-
style="color: var(--text); text-decoration: underline;">open social</a>" means: your followers, your
118
-
content, your connections - they all belong to you, not the app. switch apps anytime and take everything
119
-
with you. no platform can hold your social graph hostage.</p>
120
-
<p style="margin-bottom: 1rem;"><strong>how to explore:</strong> click your avatar in the center to see the
121
-
details of your identity. click any app to browse the records it's created in your repository.</p>
114
+
style="color: var(--text); text-decoration: underline;">tangled.org</a> for code hosting. different
115
+
apps, same account, same data.</p>
116
+
<p>switch apps anytime. take everything with you. no platform can hold your
117
+
<a href="https://overreacted.io/open-social/" target="_blank" rel="noopener noreferrer"
118
+
style="color: var(--text); text-decoration: underline;">social graph</a> hostage.</p>
119
+
<p style="margin-bottom: 1rem;"><strong>how to explore:</strong> click the avatar in the center to see
120
+
account details. click any app to browse the data it's created.</p>
122
121
<button id="closeInfo">got it</button>
123
122
<p
124
123
style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.7rem; color: var(--text-light); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;">
124
+
<a href="#" id="replayTour" style="color: var(--text); text-decoration: underline;">replay tour</a>
125
+
<span style="opacity: 0.4;">·</span>
125
126
<span>view <a href="https://tangled.org/@zzstoatzz.io/at-me" target="_blank" rel="noopener noreferrer"
126
127
style="color: var(--text); text-decoration: underline;">the source code</a> on</span>
127
128
<a href="https://tangled.org" target="_blank" rel="noopener noreferrer"
···
135
136
</div>
136
137
137
138
<div class="onboarding-overlay" id="onboardingOverlay">
138
-
<div class="onboarding-spotlight" id="onboardingSpotlight"></div>
139
-
<div class="onboarding-content" id="onboardingContent"></div>
139
+
<div class="onboarding-backdrop" id="onboardingBackdrop"></div>
140
+
<div class="onboarding-ring" id="onboardingRing"></div>
141
+
<div class="onboarding-card" id="onboardingCard"></div>
140
142
</div>
141
143
142
144
<div class="canvas">