mlmihjaz Claude Opus 4.8 commited on
Commit
56a3eff
·
1 Parent(s): 55ec159

Slow goat leg animation and make typing input glassier

Browse files

Goat 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>

Files changed (2) hide show
  1. src/scene/Ground.js +1 -1
  2. 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 * 6 + l.userData.phase) * 0.5;
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,.35);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,.55);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)}
 
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)}