Time Warp Clock — Interactive Space-Time Distortion Animation with Source Code
The Time Warp Clock is a mind-bending interactive component that warps the surrounding space-time fabric as you hover over it. It features a realistic analog clock with hands that move erratically when time is “distorted.”
How It Works
This effect uses a sophisticated combination of CSS filters and SVG displacement maps. An SVG <filter> with <feTurbulence> and <feDisplacementMap> is defined in the HTML. When the user hovers over the clock, JavaScript dynamically increases the scale of the displacement map, creating the “warp” effect. Simultaneously, the clock’s hands are given random offsets to simulate time itself becoming unstable.
Key Features
- Space-Time Grid: A perspective-shifted background grid that accentuates the distortion.
- SVG Displacement Mapping: High-quality warping effect that affects both the clock and the background.
- Erratic Time Physics: Hands move and vibrate in response to the “warp intensity.”
- Glassmorphism Face: A blurred, semi-transparent clock face that fits modern web aesthetics.
Frequently Asked Questions
Can I change the warp pattern?
Yes! In the SVG section, you can modify the baseFrequency of the <feTurbulence> element. Lower values create smoother warps, while higher values create more jagged, “glitchy” distortion.
How do I use a different clock style?
The clock is built with standard HTML and CSS. You can change the .face, .hand, or .dot styles to match your design without affecting the warp logic.
Is this compatible with all browsers?
SVG filters have excellent support across modern browsers (Chrome, Firefox, Safari, Edge). The feDisplacementMap effect is a standard web technology and should work seamlessly.
