Neon 3D Seven-Segment Digital Clock

This is a Neon 3D Seven-Segment Digital Clock. It procedurally generates a classic LCD/LED interface using pure CSS geometry. Its function is to provide a highly atmospheric, real-time clock that utilizes 3D space and realistic glowing floor reflections to enhance cyberpunk or dashboard aesthetics.

Specs

• Weight: ~4 KB. Zero dependencies. No external images.
• Performance: Moderate to High. The requestAnimationFrame loop correctly limits JS execution to once per second. However, the heavy use of filter: drop-shadow combined with preserve-3d can cause GPU strain on lower-end devices.
• Theming / Customization: Typography is defined purely by CSS clip-path polygons. The glow color inherits the currentColor of the parent, making hue shifts trivial via CSS variables.
• Responsiveness: Fluid. Relies strictly on vmin and rem units, allowing the entire 3D scene to scale perfectly by adjusting the :root font size.
• Graceful Degradation: Features a specific User-Agent regex check to disable CSS transitions on Safari due to known rendering bugs with clip-path and preserve-3d combinations.

Anatomy

The structure avoids SVGs or Canvas, opting instead for a highly nested, procedurally generated DOM tree to represent the segments.

• HTML (The Skeleton): Generated entirely by JavaScript. The #main container holds .digits and .colon groups. Each .digit is a <figure> containing seven <span> elements representing the distinct geometric bars.
• CSS (The Skin): SCSS maps clip-path: polygon() coordinates to shape the segments. A massive CSS variable matrix (--act: 0 or 1) dictates which segments are lit based on the [data-digit] attribute. The reflection is achieved by duplicating the groups, applying rotateX(-90.1deg), and using mask-image: linear-gradient().
• JS (The Nervous System): An Object-Oriented approach. It builds the DOM, groups the hours/minutes/seconds, and uses requestAnimationFrame to poll Date() and update the data-digit attributes only when a second actually ticks over.

Logic

The core logic is “Data-Driven Segment Toggling” via CSS attribute selectors:

main .digits .group .digit span {
  --act: 0;
  opacity: calc(0.03 + 0.97 * var(--act));
}

main .digits .group .digit[data-digit="2"] :not(.top.left, .bottom.right) {
  --act: 1;
}

Instead of using JavaScript to add/remove classes from seven individual spans every second, JS simply updates a single attribute (data-digit="2") on the parent wrapper. SCSS handles the logic map. By using the :not() pseudo-class, the stylesheet dictates exactly which segments should turn on (--act: 1). The opacity calculation then mathematically shifts the segment from a dim 0.03 to a glowing 1.0, leveraging the browser’s CSS engine rather than JavaScript for state resolution.

Feel

Atmospheric and cinematic. The slow, 40-second keyframe pan (camera-rotate) makes the clock feel like a massive physical installation floating in space. The way the individual segments fade in and out, casting immediate, blurred reflections on the invisible “floor” below, mimics the behavior of physical neon gas tubes firing up.