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:
@@ -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
|
||||
}))
|
||||
)
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user