Skeuomorphic Retro Casio F-91W Watch

This is a Skeuomorphic Retro Casio F-91W Watch. It is a hyper-realistic, digital-first recreation of the iconic 1989 timepiece. Its function is to demonstrate the power of modern CSS and vanilla JavaScript for high-fidelity modeling, combining 3D depth illusions, custom fonts, and a live clock to create a fully interactive desktop widget.

Specs

• Weight: ~20 KB (including custom web fonts). Zero external dependencies.
• Performance: Excellent. The real-time clock updates via a lightweight setInterval that only manipulates text content, avoiding expensive layout reflows. The 3D effects are static and rendered by the CSS engine.
• Theming / Customization: Core aesthetics are managed by CSS variables (--model-color, --band-color).
• Responsiveness: Scales proportionally based on fixed width and height variables on the root .casio-f91w class.
• Graceful Degradation: The clock will fail to update without JavaScript. The 3D geometry relies on CSS clip-path and skew, and will flatten in legacy browsers.

Anatomy

The component uses a meticulous layering of styled div elements to mimic the physical construction of the watch.

• HTML (The Skeleton): The .casio-f91w container holds the top/bottom .bracelet bands and a .core-watch body. Nested within are elements for the crystal screen, LCD, and interactive buttons.
• CSS (The Skin): Sass logic uses clip-path, box-shadow (inset and outset), and linear-gradient to create the chiseled plastic body and wristband textures. A custom @font-face declaration for "DSEG7 Classic" replicates the iconic seven-segment display.
• JS (The Nervous System): A simple setInterval loop runs updateClock() every second to fetch the current Date() and inject the formatted time into the respective DOM elements. It also handles the “light” button interaction.

Logic

The standout technical achievement is the “LCD Backlight” simulation.

.inner-center.on {
  background:
    radial-gradient(circle at 0 50%, var(--led-color) 40%, transparent 60%),
    linear-gradient(#999 8%, var(--lcd-background-color) 11%);
}

Instead of using a simple color change, the developer simulates the uneven glow of a real 1980s side-lit LCD. When the user holds down the light button, a .on class is added via JavaScript. This triggers a CSS background change that overlays a large radial-gradient originating from the left side (circle at 0 50%). This gradient mimics the green LED light bleeding across the display, creating a far more authentic and nostalgic effect than a uniform background color.

Feel

Tactile and nostalgic. The multi-layered box-shadow and precise clip-path geometry give the watch a tangible physical presence. The use of a custom digital font is critical, perfectly capturing the retro aesthetic. Interacting with the “light” button feels responsive and rewarding, as the screen glows with a familiar, uneven green hue, completing the illusion of holding a real piece of vintage hardware.