fix: smooth continuous second-hand motion with millisecond precision …

[dfleper]

Summary

This PR fixes the analog clock second-hand behavior reported in #102.

The second hand now moves continuously (instead of stepping once per second), uses millisecond precision, and keeps forward continuity when crossing minute boundaries (59.xs -> 0.xs) to avoid backward visual jumps.

Root cause

• The previous implementation relied on second-level granularity for second-hand rotation.
• Refresh cadence and rotation application caused visible stepping.
• At minute rollover, direct 0–360 mapping could create a backward-looking animation.

Changes made

• File changed: scripts/clock.js only.
• Read currentMilliseconds and compute:
  • newSecondRotation = (currentSeconds + (currentMilliseconds / 1000)) * 6
• Keep second-hand rotation continuous using cumulative forward rotation logic across turns.
• Apply direct second-hand transform update with a short linear transition:
  • transform 0.05s linear
• Increase analog update interval from 500ms to 50ms.
• Keep minute/hour hand logic via existing updateHandRotation flow (no refactor).

Why this is minimal and safe

• Single-file, scoped change.
• No dependency/version updates.
• No HTML/CSS/layout modifications.
• No route/API/contract changes.
• Existing behavior for digital clock and other features remains intact.

Validation

• Syntax check:
  • node --check scripts/clock.js ✅
• Manual verification:
  1. Enable analog clock.
  2. Observe second hand for smooth motion.
  3. Observe transition around minute rollover (59.xs -> 0.xs); it should continue forward without visual backward jump.

Notes

• This is a functional bug fix (not chore), aligned with issue [Feature]: Continuous second hand movement #102.

Summary

This PR fixes the analog clock's second-hand animation to display smooth continuous motion with proper minute-boundary handling.

Changes

scripts/clock.js

• Second-hand millisecond precision: Updated second-hand rotation calculation from using only seconds to (seconds + milliseconds/1000) * 6, enabling sub-second granularity and smoother visual motion.

• Increased update frequency: Changed the analog clock refresh interval from 500ms to 50ms via setInterval(updateanalogclock, 50), reducing perceived stepping artifacts.

• Smooth second-hand animation: Applied a short linear CSS transition (transform 0.05s linear) to the second hand, replacing the previous approach and creating fluid motion between updates.

• Cumulative forward rotation logic: Implemented logic to compute continuous second-hand rotation across minute boundaries by tracking cumulative rotation (cumulativeSecondRotation) and detecting when the computed angle would represent a backward motion, then adding 360° to preserve forward continuity (preventing a visual backward jump at 59.x → 0.x seconds).

• Preserved minute/hour hand behavior: The minute and hour hands continue to use the existing updateHandRotation() function with its 1-second ease transition, ensuring no change to their animation behavior.

Details

The second hand now directly updates its cumulative rotation state within updateanalogclock() rather than relying on the reset-condition logic used for minute/hour hands. The formula currentSecondTurn + newSecondRotation with forward-continuity checks ensures the second hand rotates forward across all minute rollovers.

No changes to HTML, CSS, layout, dependencies, or API surface. The fix is confined to animation logic within a single file.

Lines changed: +15/-6

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d85b2f29-d2e2-4ff9-9e19-c484102890f8

📥 Commits

Reviewing files that changed from the base of the PR and between b3a3b1a and 4dff75c.

📒 Files selected for processing (1)

• scripts/clock.js

---

📝 Walkthrough

Walkthrough

The PR refines the analog clock's second-hand animation behavior by introducing millisecond-precision timing, eliminating backward rotation jumps at minute boundaries through continuous cumulativeSecondRotation tracking, applying a tighter animation transition (0.05s linear), and increasing the clock update frequency from 500ms to 50ms per tick.

Changes

Analog Clock Timing and Animation

Layer / File(s)

Summary

Millisecond-precision second-hand animation and refresh rate scripts/clock.js

The updateanalogclock() function now computes second-hand rotation with millisecond precision and maintains cumulativeSecondRotation for continuous forward motion across minute boundaries, replacing the previous reset-based approach. The transition animation is tightened to transform 0.05s linear. The clock refresh interval in startAnalogClock() is increased from 500ms to 50ms to match the higher precision timing model.

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: fixing smooth continuous second-hand motion with millisecond precision, which is the primary objective of this PR.
Description check	✅ Passed	The PR description is comprehensive and covers all essential information: summary, root cause, specific changes, rationale, validation, and scope. All required template sections are present and properly filled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}