goose.art
extremely claude-assisted go game based on atproto! working on cleaning up and giving a more unique design, still has a bit of a slop vibe to it.
Add subtle rotation to game items for natural floating look
- Replace translateX with rotate for off-kilter effect
- Apply small rotations (0.25deg to 1deg) to game list items
- Alternating left/right rotation creates natural cloud-like float
- 5 rotation variations for organic, non-repetitive pattern
- Makes game cards feel like they're drifting at different angles
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
+10
-5
src/app.css
+10
-5
src/app.css
···
274
274
font-weight: 600;
275
275
}
276
276
277
-
/* Drifting cloud effect - only for game lists and repeated items */
277
+
/* Floating cloud effect - subtle rotation for natural off-kilter look */
278
278
.games-list .game-item:nth-child(odd),
279
279
.archive-list .game-item:nth-child(odd) {
280
-
transform: translateX(1rem);
280
+
transform: rotate(0.5deg);
281
281
}
282
282
283
283
.games-list .game-item:nth-child(even),
284
284
.archive-list .game-item:nth-child(even) {
285
-
transform: translateX(-1rem);
285
+
transform: rotate(-0.5deg);
286
286
}
287
287
288
288
.games-list .game-item:nth-child(3n),
289
289
.archive-list .game-item:nth-child(3n) {
290
-
transform: translateX(0.5rem);
290
+
transform: rotate(1deg);
291
291
}
292
292
293
293
.games-list .game-item:nth-child(4n),
294
294
.archive-list .game-item:nth-child(4n) {
295
-
transform: translateX(-0.5rem);
295
+
transform: rotate(-1deg);
296
+
}
297
+
298
+
.games-list .game-item:nth-child(5n),
299
+
.archive-list .game-item:nth-child(5n) {
300
+
transform: rotate(0.25deg);
296
301
}
297
302
298
303
/* Modal styles */