mlmihjaz Claude Opus 4.8 commited on
Commit ·
56a3eff
1
Parent(s): 55ec159
Slow goat leg animation and make typing input glassier
Browse filesGoat leg swing frequency lowered 6 -> 4 (~33% slower kick) in Ground.js.
#typed background alpha reduced .35 -> .18 (.55 -> .32 on focus) so the
typing field reads as glass like the surrounding card.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- src/scene/Ground.js +1 -1
- src/styles/main.css +2 -2
src/scene/Ground.js
CHANGED
|
@@ -303,7 +303,7 @@ class Goat {
|
|
| 303 |
// gentle vertical bob
|
| 304 |
this.group.position.y = Math.sin(elapsed * 4 + this.group.position.x) * 0.04;
|
| 305 |
for (const l of this.legs) {
|
| 306 |
-
l.rotation.z = Math.sin(elapsed *
|
| 307 |
}
|
| 308 |
|
| 309 |
if (this.centerX !== undefined) {
|
|
|
|
| 303 |
// gentle vertical bob
|
| 304 |
this.group.position.y = Math.sin(elapsed * 4 + this.group.position.x) * 0.04;
|
| 305 |
for (const l of this.legs) {
|
| 306 |
+
l.rotation.z = Math.sin(elapsed * 4 + l.userData.phase) * 0.5;
|
| 307 |
}
|
| 308 |
|
| 309 |
if (this.centerX !== undefined) {
|
src/styles/main.css
CHANGED
|
@@ -200,11 +200,11 @@ header{display:flex;align-items:center;justify-content:space-between;flex-wrap:w
|
|
| 200 |
.tiles.shake{animation:shake .4s}
|
| 201 |
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
|
| 202 |
|
| 203 |
-
#typed{width:100%;background:rgba(8,10,18,.
|
| 204 |
font-family:var(--mono);font-size:22px;letter-spacing:.04em;text-align:center;padding:12px 8px;outline:none;border-radius:10px;
|
| 205 |
caret-color:var(--amber);transition:border-color .15s ease,background .15s ease;margin-top:14px;
|
| 206 |
text-shadow:0 1px 2px rgba(0,0,0,.7)}
|
| 207 |
-
#typed:focus{border-color:var(--amber);background:rgba(8,10,18,.
|
| 208 |
#typed::placeholder{color:#aab2c4;letter-spacing:0;font-family:var(--sans);font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
|
| 209 |
#typed:disabled{opacity:.5}
|
| 210 |
.feedback{text-align:center;margin-top:14px;font-size:14px;min-height:22px;color:#dde2ed;text-shadow:0 1px 2px rgba(0,0,0,.7)}
|
|
|
|
| 200 |
.tiles.shake{animation:shake .4s}
|
| 201 |
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
|
| 202 |
|
| 203 |
+
#typed{width:100%;background:rgba(8,10,18,.18);border:1px solid rgba(255,255,255,.08);border-bottom:2px solid var(--mist);color:#fff;
|
| 204 |
font-family:var(--mono);font-size:22px;letter-spacing:.04em;text-align:center;padding:12px 8px;outline:none;border-radius:10px;
|
| 205 |
caret-color:var(--amber);transition:border-color .15s ease,background .15s ease;margin-top:14px;
|
| 206 |
text-shadow:0 1px 2px rgba(0,0,0,.7)}
|
| 207 |
+
#typed:focus{border-color:var(--amber);background:rgba(8,10,18,.32);box-shadow:0 0 0 3px rgba(240,168,48,.25)}
|
| 208 |
#typed::placeholder{color:#aab2c4;letter-spacing:0;font-family:var(--sans);font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
|
| 209 |
#typed:disabled{opacity:.5}
|
| 210 |
.feedback{text-align:center;margin-top:14px;font-size:14px;min-height:22px;color:#dde2ed;text-shadow:0 1px 2px rgba(0,0,0,.7)}
|