Animated Sliding Digital Clock

This is an Animated Sliding Digital Clock. It replaces instantaneous digit swapping with a vertical mechanical scrolling effect. Its function is to provide an engaging, high-fidelity timekeeping element for dashboards or hero sections, turning a passive metric into an active visual component.

Specs

• Weight: ~3 KB (excluding React/ReactDOM footprint).
• Performance: Optimized rendering. Only the specific digits that change (e.g., seconds) trigger a local re-render and CSS transition, preserving GPU resources.
• Theming / Customization: CSS-driven. The outer shell uses a gradient background mapped behind a dark inner container to simulate a vibrant, glowing border.
• Responsiveness: Fluid. Utilizes deep CSS media queries to scale down digit heights, font sizes, and container padding for mobile viewports without breaking the absolute positioning math.
• [!] Graceful Degradation: Fails completely if JavaScript is disabled, as the entire DOM structure, time polling, and style calculations are deeply bound to the React lifecycle.

Anatomy

The component bridges React’s virtual state with physical DOM measurements.

• HTML (The Skeleton): A React-rendered tree. Each digit (TimerChar) generates a hidden overflow container holding a vertical strip of numbers (0 through 9).
• CSS (The Skin): SCSS manages the layout and typography scaling. The active number is styled with opacity: 1 and a larger font size, while surrounding numbers fade out.
• JS (The Nervous System): React’s useEffect hook runs a 100ms setInterval to poll the system Date. useState triggers the UI update, and component refs (useRef) measure actual DOM heights to calculate the exact pixel offset for the sliding columns.

Logic

The mechanism relies on “Translational Array Indexing”. This is the Glyph-logic of the snippet:

const height: number = ref.current ? ref.current.offsetHeight : 0;
const top: string = `${number * height * -1}px`;

Instead of destroying and mounting new digit nodes every second, the component pre-renders the entire 0-9 sequence in a vertical column. By multiplying the current time digit (number) by the container’s physical height (offsetHeight) and making it negative, the script shifts the top property to precisely align the target number within the visible mask. The CSS transition: top 200ms handles the smooth physical interpolation between these calculated states.

Feel

Mechanical and deliberate. The vertical sliding motion mimics physical split-flap displays or combination locks. The synchronized scale and opacity shifts make the active digit appear to physically lock into focus, providing a satisfying, rhythmic tick every second.