forked from
joebasser.com/atmosphere-account
this repo has no description
Copy updates, mobile sky behavior, and richer cloud layer
Features: shorten universal identity title; key icon for ownership card; drop
portability sentence from You own your account.
Provider section: personal data storage wording; independent providers mention
privacy or geographic location.
Mobile: force static sky (effects off), hide Effects toggle, zero nav strip
padding; viewport listener restores desktop preferences from localStorage.
Show two additional clouds on narrow viewports (c2, c4).
Made-with: Cursor
+53
-24
+11
assets/styles.css
+11
assets/styles.css
···
340
340
pointer-events: auto;
341
341
}
342
342
343
+
/* Mobile: no sky effects toggle — JS keeps static sky; strip height removed for hero padding */
344
+
@media (max-width: 768px) {
345
+
.nav-effects-bar {
346
+
display: none;
347
+
}
348
+
349
+
:root {
350
+
--nav-effects-strip: 0;
351
+
}
352
+
}
353
+
343
354
@media (max-width: 480px) {
344
355
:root {
345
356
--nav-bar-height: 4.35rem;
+3
-3
components/BlueskySection.tsx
+3
-3
components/BlueskySection.tsx
···
10
10
style={{ maxWidth: "640px", margin: "1rem auto 0" }}
11
11
>
12
12
Your Atmosphere account lives with a <strong>provider</strong>{" "}
13
-
— a service that stores your data and keeps it available across
14
-
every app. That provider might be an app you already use, or a host
13
+
— a service that stores your data in your personal data storage and
14
+
keeps it available across every app. That provider might be an app you already use, or a host
15
15
that only holds accounts. You pick who hosts your account, and you
16
16
can switch any time.
17
17
</p>
···
88
88
Independent providers are account hosts — they are not apps
89
89
themselves, they only hold your account and data. A growing number
90
90
of them offer Atmosphere accounts: some are community-run, some
91
-
focus on privacy.
91
+
focus on privacy or geographic location.
92
92
</p>
93
93
</div>
94
94
+10
-11
components/Features.tsx
+10
-11
components/Features.tsx
···
25
25
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
26
26
</Icon>
27
27
),
28
-
atSign: (
29
-
<Icon>
30
-
<circle cx="12" cy="12" r="4" />
31
-
<path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94" />
32
-
</Icon>
33
-
),
34
28
blocks: (
35
29
<Icon>
36
30
<rect x="2" y="6" width="8" height="8" rx="1" />
···
43
37
<Icon>
44
38
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
45
39
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
40
+
</Icon>
41
+
),
42
+
key: (
43
+
<Icon>
44
+
<path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
46
45
</Icon>
47
46
),
48
47
};
···
51
50
const features = [
52
51
{
53
52
icon: icons.globe,
54
-
title: "Works everywhere",
53
+
title: "Universal identity",
55
54
description:
56
-
"Your Atmosphere account works on every Atmosphere app. One login, hundreds of apps.",
55
+
"One login across Atmosphere apps, and the same @handle everywhere — so when someone mentions you, it’s the same you, recognized across the network.",
57
56
},
58
57
{
59
-
icon: icons.atSign,
60
-
title: "Universal identity",
58
+
icon: icons.key,
59
+
title: "You own your account",
61
60
description:
62
-
"Use the same @handle in every app. When someone mentions you, it works everywhere — one identity, recognized across the Atmosphere.",
61
+
"Your data isn’t trapped in any one app. Unlike traditional social accounts, where your profile and content belong to the platform, an Atmosphere account puts you in charge — you genuinely own your identity and your data.",
63
62
},
64
63
{
65
64
icon: icons.blocks,
-2
components/GlassClouds.tsx
-2
components/GlassClouds.tsx
···
148
148
blurRadius: 22,
149
149
flipX: true,
150
150
parallaxSpeed: -0.07,
151
-
hideOnMobile: true,
152
151
style: { position: "absolute", top: "12%", right: "-6%" },
153
152
},
154
153
{
···
173
172
blurRadius: 20,
174
173
flipX: true,
175
174
parallaxSpeed: -0.1,
176
-
hideOnMobile: true,
177
175
style: { position: "absolute", top: "58%", right: "2%" },
178
176
},
179
177
{
+29
-8
routes/_app.tsx
+29
-8
routes/_app.tsx
···
184
184
}
185
185
186
186
var toggleInput=document.getElementById('sky-effects-toggle');
187
+
function syncSkyToggle(){
188
+
if(!toggleInput)return;
189
+
var on=skyAnimated();
190
+
toggleInput.checked=on;
191
+
toggleInput.setAttribute('aria-label',on?'Effects on. Turn off to keep colors and clouds fixed like the first screen.':'Effects off. Sky matches the first-load colors and cloud positions.');
192
+
}
187
193
if(toggleInput){
188
-
function syncSkyToggle(){
189
-
var on=skyAnimated();
190
-
toggleInput.checked=on;
191
-
toggleInput.setAttribute('aria-label',on?'Effects on. Turn off to keep colors and clouds fixed like the first screen.':'Effects off. Sky matches the first-load colors and cloud positions.');
192
-
}
193
194
toggleInput.addEventListener('change',function(){
194
195
if(toggleInput.checked){
195
196
document.documentElement.classList.remove('sky-static');
···
201
202
syncSkyToggle();
202
203
update();
203
204
});
205
+
}
206
+
207
+
function isMobileViewport(){
208
+
return typeof window.matchMedia==='function'&&window.matchMedia('(max-width: 768px)').matches;
209
+
}
210
+
function applySkyForViewport(){
211
+
if(isMobileViewport()){
212
+
document.documentElement.classList.add('sky-static');
213
+
}else{
214
+
try{
215
+
if(localStorage.getItem(SKY_KEY)==='0')document.documentElement.classList.add('sky-static');
216
+
else document.documentElement.classList.remove('sky-static');
217
+
}catch(_){
218
+
document.documentElement.classList.remove('sky-static');
219
+
}
220
+
}
204
221
syncSkyToggle();
222
+
update();
205
223
}
224
+
var mqSky=window.matchMedia('(max-width: 768px)');
225
+
if(mqSky.addEventListener)mqSky.addEventListener('change',applySkyForViewport);
226
+
else if(mqSky.addListener)mqSky.addListener(applySkyForViewport);
227
+
applySkyForViewport();
206
228
207
229
window.addEventListener('scroll',function(){
208
230
if(!ticking){ticking=true;requestAnimationFrame(update);}
209
231
},{passive:true});
210
232
window.addEventListener('resize',function(){
211
233
if(!ticking){ticking=true;requestAnimationFrame(update);}
212
-
},{passive:true});
213
-
update();
234
+
}, {passive:true});
214
235
})();
215
236
`;
216
237
···
249
270
<script
250
271
dangerouslySetInnerHTML={{
251
272
__html:
252
-
"(function(){try{if(localStorage.getItem('atmosphere-sky-effects')==='0')document.documentElement.classList.add('sky-static');}catch(e){}})();",
273
+
"(function(){try{var m=window.matchMedia&&window.matchMedia('(max-width: 768px)');if(m&&m.matches)document.documentElement.classList.add('sky-static');else if(localStorage.getItem('atmosphere-sky-effects')==='0')document.documentElement.classList.add('sky-static');}catch(e){}})();",
253
274
}}
254
275
/>
255
276
<script