forked from
joebasser.com/atmosphere-account
this repo has no description
fix: bottom cloud uses source SVG path; shorten moderation tiles
- c6: Figma Glass cloud path + optional viewBox for display scaling
- Moderation & Algorithms: tighter single-paragraph copy per tile
Made-with: Cursor
+58
-37
+20
-10
components/GlassClouds.tsx
+20
-10
components/GlassClouds.tsx
···
1
1
interface CloudProps {
2
2
id: string;
3
+
/** Display size (SVG width/height attributes) */
3
4
width: number;
4
5
height: number;
6
+
/** If set, viewBox uses this so path coordinates match the source asset while scaling down */
7
+
viewBoxWidth?: number;
8
+
viewBoxHeight?: number;
5
9
style: Record<string, string | number>;
6
10
path: string;
7
11
fillOpacity?: number;
···
14
18
id,
15
19
width,
16
20
height,
21
+
viewBoxWidth,
22
+
viewBoxHeight,
17
23
style,
18
24
path,
19
25
fillOpacity = 0.2,
···
21
27
flipX = false,
22
28
parallaxSpeed = -0.05,
23
29
}: CloudProps) {
30
+
const vbW = viewBoxWidth ?? width;
31
+
const vbH = viewBoxHeight ?? height;
24
32
/* Padding: feGaussianBlur (stdDev 20) + stroke 4 need room past viewBox.
25
33
(No foreignObject/backdrop-filter here — that combo with parallax transform caused GPU line artifacts.) */
26
34
const pad = Math.max(Math.ceil(blurRadius * 3), 72);
···
31
39
data-flip={flipX ? "1" : "0"}
32
40
width={width}
33
41
height={height}
34
-
viewBox={`0 0 ${width} ${height}`}
42
+
viewBox={`0 0 ${vbW} ${vbH}`}
35
43
overflow="visible"
36
44
fill="none"
37
45
xmlns="http://www.w3.org/2000/svg"
···
61
69
id={`filter_${id}`}
62
70
x={-pad}
63
71
y={-pad}
64
-
width={width + pad * 2}
65
-
height={height + pad * 2}
72
+
width={vbW + pad * 2}
73
+
height={vbH + pad * 2}
66
74
filterUnits="userSpaceOnUse"
67
75
color-interpolation-filters="sRGB"
68
76
>
···
91
99
{/* Rim gradient: bottom stop must not hit opacity 0 or flat edges at max-Y lose stroke. */}
92
100
<linearGradient
93
101
id={`grad_${id}`}
94
-
x1={width / 2}
102
+
x1={vbW / 2}
95
103
y1="0"
96
-
x2={width / 2}
97
-
y2={height}
104
+
x2={vbW / 2}
105
+
y2={vbH}
98
106
gradientUnits="userSpaceOnUse"
99
107
>
100
108
<stop stop-color="var(--cloud-stroke-top, #D0FCFF)" />
···
177
185
},
178
186
{
179
187
id: "c6",
180
-
/* Path extends to y=213 and x=350; was 210×350 so bottom/right + stroke were clipped */
188
+
/* Same path as Glass cloud.svg / c1 — unedited Figma geometry; scaled via display size only */
181
189
width: 356,
182
-
height: 218,
190
+
height: 211,
191
+
viewBoxWidth: 545,
192
+
viewBoxHeight: 324,
183
193
path:
184
-
"M276 209.96C276.7 209.98 277.39 210 278.1 210C317.61 210 350 181.88 350 147.07C350 113.33 319.85 85.88 281.52 84.1C271.82 58.57 245.12 40 213.82 40C209.23 40 204.74 40.4 200.4 41.16C189.88 16.87 164.12 0 134.02 0C94.51 0 62.12 28.12 62.12 62.93C62.12 69.76 63.14 76.36 65.04 82.62C32.13 85.08 6 113.59 6 148.07C6 183.88 38.06 213 77.57 213L81.04 213H276V209.96Z",
194
+
"M430.377 323.959C431.455 323.986 432.536 324 433.621 324C495.134 324 545 279.795 545 225.266C545 172.442 498.203 129.307 439.355 126.661C424.209 88.0793 382.821 60.3905 334.137 60.3905C326.999 60.3905 320.017 60.9858 313.253 62.1233C296.847 25.72 256.703 0 209.782 0C148.269 0 98.4028 44.2046 98.4028 98.7337C98.4028 108.487 99.9982 117.911 102.97 126.81C45.3852 130.62 0 173.245 0 225.266C0 279.795 49.8661 324 111.379 324C113.192 324 114.994 323.962 116.786 323.886V324H430.377V323.959Z",
185
195
fillOpacity: 0.19,
186
-
blurRadius: 22,
196
+
blurRadius: 25,
187
197
flipX: false,
188
198
parallaxSpeed: -0.13,
189
199
style: { position: "absolute", top: "90%", right: "12%" },
+38
-27
components/ModerationAndAlgorithms.tsx
+38
-27
components/ModerationAndAlgorithms.tsx
···
5
5
<div class="text-center">
6
6
<h2 class="text-section">You choose the rules.</h2>
7
7
<div class="divider" />
8
-
<p class="text-body mt-2" style={{ maxWidth: "640px", margin: "1rem auto 0" }}>
8
+
<p
9
+
class="text-body mt-2"
10
+
style={{ maxWidth: "640px", margin: "1rem auto 0" }}
11
+
>
9
12
In the Atmosphere, no single company decides what you see or what
10
13
counts as acceptable. Moderation and algorithms are yours to choose.
11
14
</p>
···
14
17
<div class="mod-algo-grid">
15
18
<div class="glass mod-algo-card">
16
19
<div class="mod-algo-icon" aria-hidden="true">
17
-
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
20
+
<svg
21
+
width="28"
22
+
height="28"
23
+
viewBox="0 0 24 24"
24
+
fill="none"
25
+
stroke="currentColor"
26
+
stroke-width="1.5"
27
+
stroke-linecap="round"
28
+
stroke-linejoin="round"
29
+
>
18
30
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
19
31
</svg>
20
32
</div>
21
33
<h3 class="text-subsection mb-1">Moderation</h3>
22
34
<p class="text-body-sm">
23
-
Each app can set its own rules, and users can subscribe to
24
-
third-party moderation services that layer on top — labels, filters,
25
-
and block lists created and managed by the very communities they aim
26
-
to protect. Who understands a community's needs better than the
27
-
people who live in it?
28
-
</p>
29
-
<p class="text-body-sm mt-2">
30
-
If you don't like how an app handles moderation, you don't have to
31
-
argue with a support bot. You can add another moderation layer, or
32
-
switch to a different app entirely — one that better fits your
33
-
values.
35
+
Subscribe to community-built moderation — labels, filters, and
36
+
block lists made by the people who understand the problem best.
37
+
Don't like an app's rules? Layer on your own, or switch apps
38
+
entirely.
34
39
</p>
35
40
</div>
36
41
37
42
<div class="glass mod-algo-card">
38
43
<div class="mod-algo-icon" aria-hidden="true">
39
-
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
44
+
<svg
45
+
width="28"
46
+
height="28"
47
+
viewBox="0 0 24 24"
48
+
fill="none"
49
+
stroke="currentColor"
50
+
stroke-width="1.5"
51
+
stroke-linecap="round"
52
+
stroke-linejoin="round"
53
+
>
40
54
<line x1="4" y1="21" x2="4" y2="14" />
41
55
<line x1="4" y1="10" x2="4" y2="3" />
42
56
<line x1="12" y1="21" x2="12" y2="12" />
···
50
64
</div>
51
65
<h3 class="text-subsection mb-1">Algorithms</h3>
52
66
<p class="text-body-sm">
53
-
Feeds are open. Anyone can build and run one. You can pick which
54
-
algorithm you use, or switch between them like playlists — a
55
-
friends-only feed, an independent art feed, a slow news feed, or
56
-
something deeply niche that feels alive rather than gamed.
57
-
</p>
58
-
<p class="text-body-sm mt-2">
59
-
No single algorithm quietly decides culture for billions of people.
60
-
Feeds compete on taste, care, and usefulness — not on how
61
-
effectively they can keep you stuck. Open algorithms are
62
-
censorship-resistant: no amount of sucking up to authoritarian
63
-
governments can shift what users see.
67
+
Feeds are open — anyone can build one. Switch between them like
68
+
playlists: friends-only, indie art, slow news, or something deeply
69
+
niche. No single algorithm quietly decides culture for everyone.
64
70
</p>
65
71
</div>
66
72
</div>
67
73
68
74
<p
69
75
class="text-body-sm text-center mt-3"
70
-
style={{ maxWidth: "560px", margin: "1.5rem auto 0", fontStyle: "italic" }}
76
+
style={{
77
+
maxWidth: "560px",
78
+
margin: "1.5rem auto 0",
79
+
fontStyle: "italic",
80
+
}}
71
81
>
72
82
Together, account ownership, moderation, and algorithmic choice make
73
-
exploitation difficult to sustain. The system is locked open by design.
83
+
exploitation difficult to sustain. The system is locked open by
84
+
design.
74
85
</p>
75
86
</div>
76
87
</section>