forked from
joebasser.com/atmosphere-account
this repo has no description
fix: lighter cloud layer on mobile (hide 3 clouds, zoom)
- Hide c2/c4/c5 below 768px; scale layer with zoom at 768/480 breakpoints
Made-with: Cursor
+28
-1
+21
assets/styles.css
+21
assets/styles.css
···
101
101
isolation: isolate;
102
102
}
103
103
104
+
/* Mobile: fewer clouds + slightly smaller layer (zoom avoids fighting per-SVG parallax transforms) */
105
+
@media (max-width: 768px) {
106
+
.cloud-layer {
107
+
zoom: 0.82;
108
+
}
109
+
110
+
.cloud-layer svg.cloud-svg--hide-sm {
111
+
display: none !important;
112
+
}
113
+
114
+
.cloud-layer svg.cloud-svg {
115
+
filter: drop-shadow(0 0 0.5px rgba(120, 200, 255, 0.35));
116
+
}
117
+
}
118
+
119
+
@media (max-width: 480px) {
120
+
.cloud-layer {
121
+
zoom: 0.72;
122
+
}
123
+
}
124
+
104
125
.cloud-layer svg.cloud-svg {
105
126
position: absolute;
106
127
display: block;
+7
-1
components/GlassClouds.tsx
+7
-1
components/GlassClouds.tsx
···
12
12
blurRadius?: number;
13
13
flipX?: boolean;
14
14
parallaxSpeed?: number;
15
+
/** Hide on narrow viewports — fewer clouds so the layer doesn’t feel crowded */
16
+
hideOnMobile?: boolean;
15
17
}
16
18
17
19
function GlassCloud({
···
26
28
blurRadius = 25,
27
29
flipX = false,
28
30
parallaxSpeed = -0.05,
31
+
hideOnMobile = false,
29
32
}: CloudProps) {
30
33
const vbW = viewBoxWidth ?? width;
31
34
const vbH = viewBoxHeight ?? height;
···
34
37
const pad = Math.max(Math.ceil(blurRadius * 3), 72);
35
38
return (
36
39
<svg
37
-
class="cloud-svg"
40
+
class={`cloud-svg${hideOnMobile ? " cloud-svg--hide-sm" : ""}`}
38
41
data-speed={parallaxSpeed}
39
42
data-flip={flipX ? "1" : "0"}
40
43
width={width}
···
145
148
blurRadius: 22,
146
149
flipX: true,
147
150
parallaxSpeed: -0.07,
151
+
hideOnMobile: true,
148
152
style: { position: "absolute", top: "12%", right: "-6%" },
149
153
},
150
154
{
···
169
173
blurRadius: 20,
170
174
flipX: true,
171
175
parallaxSpeed: -0.1,
176
+
hideOnMobile: true,
172
177
style: { position: "absolute", top: "58%", right: "2%" },
173
178
},
174
179
{
···
181
186
blurRadius: 24,
182
187
flipX: true,
183
188
parallaxSpeed: -0.05,
189
+
hideOnMobile: true,
184
190
style: { position: "absolute", top: "76%", left: "-2%" },
185
191
},
186
192
{