forked from
joebasser.com/atmosphere-account
this repo has no description
Clouds: drop Y-flip; use horizontal flip only for variety
Remove flipY and mobile scaleY from parallax. Restore scaleX(-1) from
data-flip only; adjust flipX on c1/c6 for mirrored variety alongside c3.
Made-with: Cursor
+5
-19
+2
-12
components/GlassClouds.tsx
+2
-12
components/GlassClouds.tsx
···
11
11
fillOpacity?: number;
12
12
blurRadius?: number;
13
13
flipX?: boolean;
14
-
/** When true, cloud is flipped on Y (applied on narrow viewports in scroll script) */
15
-
flipY?: boolean;
16
14
parallaxSpeed?: number;
17
15
/** Hide on narrow viewports — fewer clouds so the layer doesn’t feel crowded */
18
16
hideOnMobile?: boolean;
···
29
27
fillOpacity = 0.2,
30
28
blurRadius = 25,
31
29
flipX = false,
32
-
flipY = false,
33
30
parallaxSpeed = -0.05,
34
31
hideOnMobile = false,
35
32
}: CloudProps) {
···
43
40
class={`cloud-svg${hideOnMobile ? " cloud-svg--hide-sm" : ""}`}
44
41
data-speed={parallaxSpeed}
45
42
data-flip={flipX ? "1" : "0"}
46
-
data-flip-y={flipY ? "1" : "0"}
47
43
width={width}
48
44
height={height}
49
45
viewBox={`0 0 ${vbW} ${vbH}`}
···
138
134
"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",
139
135
fillOpacity: 0.18,
140
136
blurRadius: 25,
141
-
flipX: false,
142
-
flipY: true,
137
+
flipX: true,
143
138
parallaxSpeed: -0.04,
144
139
style: { position: "absolute", top: "3%", left: "-4%" },
145
140
},
···
152
147
fillOpacity: 0.15,
153
148
blurRadius: 22,
154
149
flipX: true,
155
-
flipY: true,
156
150
parallaxSpeed: -0.07,
157
151
hideOnMobile: true,
158
152
style: { position: "absolute", top: "12%", right: "-6%" },
···
166
160
fillOpacity: 0.14,
167
161
blurRadius: 28,
168
162
flipX: false,
169
-
flipY: false,
170
163
parallaxSpeed: -0.02,
171
164
style: { position: "absolute", top: "36%", left: "5%" },
172
165
},
···
179
172
fillOpacity: 0.2,
180
173
blurRadius: 20,
181
174
flipX: true,
182
-
flipY: true,
183
175
parallaxSpeed: -0.1,
184
176
hideOnMobile: true,
185
177
style: { position: "absolute", top: "58%", right: "2%" },
···
193
185
fillOpacity: 0.16,
194
186
blurRadius: 24,
195
187
flipX: true,
196
-
flipY: false,
197
188
parallaxSpeed: -0.05,
198
189
hideOnMobile: true,
199
190
style: { position: "absolute", top: "76%", left: "-2%" },
···
209
200
"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",
210
201
fillOpacity: 0.19,
211
202
blurRadius: 25,
212
-
flipX: false,
213
-
flipY: true,
203
+
flipX: true,
214
204
parallaxSpeed: -0.13,
215
205
style: { position: "absolute", top: "90%", right: "12%" },
216
206
},
+3
-7
routes/_app.tsx
+3
-7
routes/_app.tsx
···
85
85
var svgs=document.querySelectorAll('.cloud-svg');
86
86
var cData=[];
87
87
svgs.forEach(function(el){
88
-
cData.push({el:el,speed:parseFloat(el.dataset.speed)||0,flip:el.dataset.flip==='1',flipY:el.dataset.flipY==='1'});
88
+
cData.push({el:el,speed:parseFloat(el.dataset.speed)||0,flip:el.dataset.flip==='1'});
89
89
});
90
90
91
91
/* ---- Main scroll update ---- */
···
169
169
raysEl.style.opacity='0';
170
170
}
171
171
172
-
/* Cloud parallax — frozen at first-load position when static; Y-flip on mobile only */
173
-
var mobile=window.innerWidth<=768;
172
+
/* Cloud parallax — frozen at first-load position when static; horizontal flip via data-flip */
174
173
for(var i=0;i<cData.length;i++){
175
174
var d=cData[i];
176
175
var ty=skyAnimated()?scrollY*d.speed:0;
177
-
var sx=d.flip?-1:1;
178
-
var sy=mobile&&d.flipY?-1:1;
179
-
var scaleStr=(sx!==1||sy!==1)?' scale('+sx+','+sy+')':'';
180
-
d.el.style.transform='translate3d(0,'+ty+'px,0)'+scaleStr;
176
+
d.el.style.transform='translate3d(0,'+ty+'px,0)'+(d.flip?' scaleX(-1)':'');
181
177
}
182
178
183
179
if(nav){