perf(complement-race): increase spring animation responsiveness to reduce lag

Increased spring animation config from tension:280/friction:60 to
tension:600/friction:35 for both local and ghost trains. This makes the
animations much more responsive and reduces visual lag behind the actual
game state position.

The previous slow springs caused the visual train to lag noticeably behind
the actual position, especially when answering questions (which adds momentum
and increases speed). The train would appear "stuck" even though position was
updating correctly in the game loop.

The new faster config still provides smooth interpolation to hide 100ms update
jitter, but responds quickly enough to avoid noticeable lag.

Changes:
- useTrainTransforms: Update locomotive and car spring configs to tension:600, friction:35
- GhostTrain: Update locomotive and car spring configs to match local train

Fixes:
- Train now moves immediately when answering questions
- No more "needing multiple answers" to see train movement
- Reduces perceived flashing/stuttering from render lag

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-10-22 19:50:00 -05:00
parent 755487c42d
commit 5bd0dadfdf
2 changed files with 5 additions and 5 deletions

View File

@@ -89,7 +89,7 @@ export function GhostTrain({
y: locomotiveTarget?.y ?? 0,
rotation: locomotiveTarget?.rotation ?? 0,
opacity: locomotiveTarget?.opacity ?? 1,
config: { tension: 280, friction: 60 }, // Smooth but responsive
config: { tension: 600, friction: 35 }, // Fast/responsive to match local train
})
// Calculate target transforms for cars (used by spring animations)
@@ -133,7 +133,7 @@ export function GhostTrain({
y: target.y,
rotation: target.rotation,
opacity: target.opacity,
config: { tension: 280, friction: 60 },
config: { tension: 600, friction: 35 }, // Fast/responsive to match local train
}))
)

View File

@@ -41,7 +41,7 @@ export function useTrainTransforms({
x: locomotiveTarget.x,
y: locomotiveTarget.y,
rotation: locomotiveTarget.rotation,
config: { tension: 280, friction: 60 },
config: { tension: 600, friction: 35 }, // Fast/responsive to avoid lag
})
// Calculate target transforms for train cars (each car follows behind the locomotive)
@@ -98,7 +98,7 @@ export function useTrainTransforms({
rotation: target.rotation,
opacity: target.opacity,
position: target.position,
config: { tension: 280, friction: 60 },
config: { tension: 600, friction: 35 }, // Fast/responsive to avoid lag
}))
)
@@ -128,7 +128,7 @@ export function useTrainTransforms({
// Animated spring for smooth locomotive opacity
const locomotiveOpacity = useSpring({
opacity: locomotiveOpacityTarget,
config: { tension: 280, friction: 60 },
config: { tension: 600, friction: 35 }, // Fast/responsive to avoid lag
})
return {