Update readme.md

ConfigureSheet.xib

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="13771" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
+<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="21507" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
     <dependencies>
         <deployment identifier="macosx"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="13771"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="21507"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -18,7 +18,7 @@
             <windowStyleMask key="styleMask" titled="YES" closable="YES"/>
             <windowPositionMask key="initialPositionMask" leftStrut="YES" rightStrut="YES" topStrut="YES" bottomStrut="YES"/>
             <rect key="contentRect" x="196" y="240" width="320" height="102"/>
-            <rect key="screenRect" x="0.0" y="0.0" width="2560" height="1418"/>
+            <rect key="screenRect" x="0.0" y="0.0" width="3440" height="1415"/>
             <view key="contentView" wantsLayer="YES" id="EiT-Mj-1SZ">
                 <rect key="frame" x="0.0" y="0.0" width="320" height="102"/>
                 <autoresizingMask key="autoresizingMask"/>
@@ -77,7 +77,7 @@ Gw
                     </button>
                 </subviews>
             </view>
-            <point key="canvasLocation" x="34" y="50"/>
+            <point key="canvasLocation" x="126" y="23"/>
         </window>
     </objects>
 </document>

EpochFlipClock.m

@@ -19,9 +19,11 @@ static NSString * const epochFlipClockModule = @"com.epochflipclock";
     // Webview
     NSURL* indexHTMLDocumentURL = [NSURL URLWithString:[[[NSURL fileURLWithPath:[[NSBundle bundleForClass:self.class].resourcePath stringByAppendingString:@"/Webview/index.html"] isDirectory:NO] description] stringByAppendingFormat:@"?screensaver=1%@", self.isPreview ? @"&is_preview=1" : @""]];
 
-    WebView* webView = [[WebView alloc] initWithFrame:NSMakeRect(0, 0, frame.size.width, frame.size.height)];
+    WKWebView* webView = [[WKWebView alloc] initWithFrame:NSMakeRect(0, 0, frame.size.width, frame.size.height)];
-    webView.drawsBackground = NO; // Avoids a "white flash" just before the index.html file has loaded
+    NSColor *color = [NSColor colorWithCalibratedWhite:0.0 alpha:1.0];
-    [webView.mainFrame loadRequest:[NSURLRequest requestWithURL:indexHTMLDocumentURL cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:30.0]];
+    [[webView layer] setBackgroundColor:color.CGColor]; // hacky af but it works,
+    [webView setValue:@(YES) forKey:@"drawsTransparentBackground"]; // prevents a white flash while loading the web view
+    [webView loadRequest:[NSURLRequest requestWithURL:indexHTMLDocumentURL cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:30.0]];
     
     // Show on screens based on preferences
     NSArray* screens = [NSScreen screens];
@@ -68,9 +70,11 @@ static NSString * const epochFlipClockModule = @"com.epochflipclock";
     ScreenSaverDefaults *defaults;
     defaults = [ScreenSaverDefaults defaultsForModuleWithName:epochFlipClockModule];
     
+    NSBundle* bundle = [NSBundle bundleForClass:[self class]];
+    
     if (!configSheet)
     {
-        if (![NSBundle loadNibNamed:@"ConfigureSheet" owner:self])
+        if (![bundle loadNibNamed:@"ConfigureSheet" owner:self topLevelObjects:nil])
         {
             NSLog( @"Failed to load configure sheet." );
         }
@@ -104,7 +108,7 @@ static NSString * const epochFlipClockModule = @"com.epochflipclock";
 
 #pragma mark - WebFrameLoadDelegate
 
-- (void)webView:(WebView *)sender didFailLoadWithError:(NSError *)error forFrame:(WebFrame *)frame {
+- (void)webView:(WKWebView *)sender didFailLoadWithError:(NSError *)error {
     NSLog(@"%@ error=%@", NSStringFromSelector(_cmd), error);
 }
 

Fast Epoch Flip Clock.xcodeproj/project.pbxproj

@@ -3,7 +3,7 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 47;
+	objectVersion = 56;
 	objects = {
 
 /* Begin PBXBuildFile section */
@@ -17,7 +17,7 @@
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
-		3A40066818B53112005F43A6 /* Epoch Flip Clock.saver */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "Epoch Flip Clock.saver"; sourceTree = BUILT_PRODUCTS_DIR; };
+		3A40066818B53112005F43A6 /* Fast Epoch Flip Clock.saver */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "Fast Epoch Flip Clock.saver"; sourceTree = BUILT_PRODUCTS_DIR; };
 		3A40066D18B53113005F43A6 /* ScreenSaver.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = ScreenSaver.framework; path = System/Library/Frameworks/ScreenSaver.framework; sourceTree = SDKROOT; };
 		3A40068218B53129005F43A6 /* WebKit.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = WebKit.framework; path = System/Library/Frameworks/WebKit.framework; sourceTree = SDKROOT; };
 		3A95A94B18EA12D30036779C /* EpochFlipClock.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = EpochFlipClock.h; sourceTree = SOURCE_ROOT; };
@@ -56,7 +56,7 @@
 		3A40066918B53112005F43A6 /* Products */ = {
 			isa = PBXGroup;
 			children = (
-				3A40066818B53112005F43A6 /* Epoch Flip Clock.saver */,
+				3A40066818B53112005F43A6 /* Fast Epoch Flip Clock.saver */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -97,9 +97,9 @@
 /* End PBXHeadersBuildPhase section */
 
 /* Begin PBXNativeTarget section */
-		3A40066718B53112005F43A6 /* Epoch Flip Clock */ = {
+		3A40066718B53112005F43A6 /* Fast Epoch Flip Clock */ = {
 			isa = PBXNativeTarget;
-			buildConfigurationList = 3A40067F18B53113005F43A6 /* Build configuration list for PBXNativeTarget "Epoch Flip Clock" */;
+			buildConfigurationList = 3A40067F18B53113005F43A6 /* Build configuration list for PBXNativeTarget "Fast Epoch Flip Clock" */;
 			buildPhases = (
 				3A40066218B53112005F43A6 /* Sources */,
 				3A40066318B53112005F43A6 /* Frameworks */,
@@ -111,9 +111,9 @@
 			);
 			dependencies = (
 			);
-			name = "Epoch Flip Clock";
+			name = "Fast Epoch Flip Clock";
 			productName = "Epoch Flip Clock";
-			productReference = 3A40066818B53112005F43A6 /* Epoch Flip Clock.saver */;
+			productReference = 3A40066818B53112005F43A6 /* Fast Epoch Flip Clock.saver */;
 			productType = "com.apple.product-type.bundle";
 		};
 /* End PBXNativeTarget section */
@@ -122,27 +122,23 @@
 		3A40065E18B53112005F43A6 /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 0810;
+				LastUpgradeCheck = 1420;
-				ORGANIZATIONNAME = chrstphrknwtn;
+				ORGANIZATIONNAME = smparkin;
-				TargetAttributes = {
-					3A40066718B53112005F43A6 = {
-						ProvisioningStyle = Manual;
 			};
-				};
+			buildConfigurationList = 3A40066118B53112005F43A6 /* Build configuration list for PBXProject "Fast Epoch Flip Clock" */;
-			};
+			compatibilityVersion = "Xcode 14.0";
-			buildConfigurationList = 3A40066118B53112005F43A6 /* Build configuration list for PBXProject "Epoch Flip Clock" */;
+			developmentRegion = en;
-			compatibilityVersion = "Xcode 6.3";
-			developmentRegion = English;
 			hasScannedForEncodings = 0;
 			knownRegions = (
 				en,
+				Base,
 			);
 			mainGroup = 3A40065D18B53112005F43A6;
 			productRefGroup = 3A40066918B53112005F43A6 /* Products */;
 			projectDirPath = "";
 			projectRoot = "";
 			targets = (
-				3A40066718B53112005F43A6 /* Epoch Flip Clock */,
+				3A40066718B53112005F43A6 /* Fast Epoch Flip Clock */,
 			);
 		};
 /* End PBXProject section */
@@ -185,23 +181,34 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
 				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
 				CLANG_CXX_LIBRARY = "libc++";
 				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
 				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
 				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
 				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
 				CLANG_WARN_EMPTY_BODY = YES;
 				CLANG_WARN_ENUM_CONVERSION = YES;
 				CLANG_WARN_INFINITE_RECURSION = YES;
 				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
 				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
 				CLANG_WARN_SUSPICIOUS_MOVE = YES;
 				CLANG_WARN_UNREACHABLE_CODE = YES;
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
 				CODE_SIGN_IDENTITY = "";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = YES;
+				DEAD_CODE_STRIPPING = YES;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				ENABLE_NS_ASSERTIONS = YES;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
@@ -232,23 +239,34 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
 				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
 				CLANG_CXX_LIBRARY = "libc++";
 				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
 				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
 				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
 				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
 				CLANG_WARN_EMPTY_BODY = YES;
 				CLANG_WARN_ENUM_CONVERSION = YES;
 				CLANG_WARN_INFINITE_RECURSION = YES;
 				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
 				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
 				CLANG_WARN_SUSPICIOUS_MOVE = YES;
 				CLANG_WARN_UNREACHABLE_CODE = YES;
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
 				CODE_SIGN_IDENTITY = "";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = YES;
+				DEAD_CODE_STRIPPING = YES;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				ENABLE_NS_ASSERTIONS = YES;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
@@ -272,13 +290,20 @@
 		3A40068018B53113005F43A6 /* Debug */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
-				CODE_SIGN_IDENTITY = "";
+				CODE_SIGN_IDENTITY = "Apple Development";
+				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
+				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
-				DEVELOPMENT_TEAM = "";
+				CURRENT_PROJECT_VERSION = 1;
+				DEAD_CODE_STRIPPING = YES;
+				DEVELOPMENT_TEAM = QR825BQSTL;
 				INFOPLIST_FILE = Info.plist;
 				INSTALL_PATH = "$(HOME)/Library/Screen Savers";
-				PRODUCT_BUNDLE_IDENTIFIER = "com.chrstphrknwtn.${PRODUCT_NAME:rfc1034identifier}";
+				MACOSX_DEPLOYMENT_TARGET = 12.0;
+				MARKETING_VERSION = 2022.1.24;
+				PRODUCT_BUNDLE_IDENTIFIER = "in.smpark.Fast-Epoch-Flip-Clock";
 				PRODUCT_NAME = $TARGET_NAME;
+				PROVISIONING_PROFILE_SPECIFIER = "";
 				WRAPPER_EXTENSION = saver;
 			};
 			name = Debug;
@@ -286,13 +311,20 @@
 		3A40068118B53113005F43A6 /* Release */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
-				CODE_SIGN_IDENTITY = "";
+				CODE_SIGN_IDENTITY = "Apple Development";
+				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
+				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
-				DEVELOPMENT_TEAM = "";
+				CURRENT_PROJECT_VERSION = 1;
+				DEAD_CODE_STRIPPING = YES;
+				DEVELOPMENT_TEAM = QR825BQSTL;
 				INFOPLIST_FILE = Info.plist;
 				INSTALL_PATH = "$(HOME)/Library/Screen Savers";
-				PRODUCT_BUNDLE_IDENTIFIER = "com.chrstphrknwtn.${PRODUCT_NAME:rfc1034identifier}";
+				MACOSX_DEPLOYMENT_TARGET = 12.0;
+				MARKETING_VERSION = 2022.1.24;
+				PRODUCT_BUNDLE_IDENTIFIER = "in.smpark.Fast-Epoch-Flip-Clock";
 				PRODUCT_NAME = $TARGET_NAME;
+				PROVISIONING_PROFILE_SPECIFIER = "";
 				WRAPPER_EXTENSION = saver;
 			};
 			name = Release;
@@ -300,7 +332,7 @@
 /* End XCBuildConfiguration section */
 
 /* Begin XCConfigurationList section */
-		3A40066118B53112005F43A6 /* Build configuration list for PBXProject "Epoch Flip Clock" */ = {
+		3A40066118B53112005F43A6 /* Build configuration list for PBXProject "Fast Epoch Flip Clock" */ = {
 			isa = XCConfigurationList;
 			buildConfigurations = (
 				3A40067D18B53113005F43A6 /* Debug */,
@@ -309,7 +341,7 @@
 			defaultConfigurationIsVisible = 0;
 			defaultConfigurationName = Release;
 		};
-		3A40067F18B53113005F43A6 /* Build configuration list for PBXNativeTarget "Epoch Flip Clock" */ = {
+		3A40067F18B53113005F43A6 /* Build configuration list for PBXNativeTarget "Fast Epoch Flip Clock" */ = {
 			isa = XCConfigurationList;
 			buildConfigurations = (
 				3A40068018B53113005F43A6 /* Debug */,

Info.plist

@@ -11,19 +11,19 @@
 	<key>CFBundleIdentifier</key>
 	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
 	<key>CFBundleInfoDictionaryVersion</key>
-	<string>0.0.2</string>
+	<string>2022.12.22</string>
 	<key>CFBundleName</key>
 	<string>${PRODUCT_NAME}</string>
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>0.0.3</string>
+	<string>$(MARKETING_VERSION)</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>0.0.3</string>
+	<string>$(CURRENT_PROJECT_VERSION)</string>
 	<key>NSHumanReadableCopyright</key>
-	<string>Copyright © 2016 Christopher Newton. All rights reserved.</string>
+	<string>Hi</string>
 	<key>NSPrincipalClass</key>
 	<string>EpochFlipClock</string>
 </dict>

Webview/index.css

@@ -3,6 +3,7 @@ html, body {
   height: 100%;
 }
 
+@media (prefers-color-scheme: dark) {
     body {
         display: flex;
         margin: 0;
@@ -14,6 +15,21 @@ body {
         perspective: 100vw;
         -webkit-text-smoothing: anti-aliased;
     }
+}
+
+@media (prefers-color-scheme: light) {
+    body {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        font-family: '-apple-system', sans-serif;
+        align-items: center;
+        justify-content: center;
+        background-color: white;
+        perspective: 100vw;
+        -webkit-text-smoothing: anti-aliased;
+    }
+}
 
 digit {
   position: relative;
@@ -25,6 +41,7 @@ digit {
 
 /* Flip Flaps
 ------------------------------------------------*/
+@media (prefers-color-scheme: dark) {
     flap-top,
     flap-top-flip,
     flap-bottom,
@@ -42,6 +59,28 @@ flap-bottom-flip {
       box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04);
       -webkit-backface-visibility: hidden;
     }
+}
+
+@media (prefers-color-scheme: light) {
+    flap-top,
+    flap-top-flip,
+    flap-bottom,
+    flap-bottom-flip {
+      box-sizing: border-box;
+      position: absolute;
+      display: flex;
+      width: 100%;
+      height: 50%;
+      left: 0;
+      justify-content: center;
+      overflow: hidden;
+      color: #323232;
+      background-color: rgb(200,200,200);
+      box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.04);
+      -webkit-backface-visibility: hidden;
+    }
+}
+
 flap-top,
 flap-top-flip {
   top: 0;
@@ -56,12 +95,12 @@ flap-bottom-flip {
 flap-top-flip {
   display: none;
   transform-origin: 100% 100%;
-  animation: flip-top-down 300ms ease-in;
+  animation: flip-top-down var(--anim) ease-in;
 }
 flap-bottom-flip {
   display: none;
   transform-origin: 100% 0%;
-  animation: flip-bottom-down 150ms ease-out;
+  animation: flip-bottom-down var(--anim) ease-out;
 }
 
 flap-top > n,
@@ -129,6 +168,76 @@ n {
 
 /* Animations
 ------------------------------------------------*/
+@media (prefers-color-scheme: light) {
+    @keyframes flip-top-down {
+      0% {
+        transform: rotateX(0);
+      }
+      100% {
+        transform: rotateX(-90deg);
+        color: gray;
+        background-color: gray;
+      }
+    }
+    @keyframes flip-bottom-down {
+      0% {
+        color: black;
+        background-color: rgb(220,220,220);
+        transform: rotateX(90deg);
+      }
+      100% {
+        transform: rotateX(0deg);
+      }
+    }
+
+    @media screen and (min-width: 800px) {
+      @keyframes flip-top-down {
+        0% {
+          transform: translateY(-1px) rotateX(0);
+        }
+        100% {
+          transform: translateY(-1px) rotateX(-90deg);
+          color: gray;
+          background-color: gray;
+        }
+      }
+      @keyframes flip-bottom-down {
+        0% {
+          color: black;
+          background-color: rgb(220,220,220);
+          transform: translateY(1px) rotateX(90deg);
+        }
+        100% {
+          transform: translateY(1px) rotateX(0deg);
+        }
+      }
+    }
+
+    @media screen and (min-width: 1280px) {
+      @keyframes flip-top-down {
+        0% {
+          transform: translateY(-2px) rotateX(0);
+        }
+        100% {
+          transform: translateY(-2px) rotateX(-90deg);
+          color: gray;
+          background-color: gray;
+        }
+      }
+      @keyframes flip-bottom-down {
+        0% {
+          color: black;
+          background-color: rgb(220,220,220);
+          transform: translateY(2px) rotateX(90deg);
+        }
+        100% {
+          transform: translateY(2px) rotateX(0deg);
+        }
+      }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
     @keyframes flip-top-down {
       0% {
         transform: rotateX(0);
@@ -195,3 +304,4 @@ n {
         }
       }
     }
+}

Webview/index.js

@@ -1,22 +1,25 @@
 'use strict';
 
 var digits = [];
+const digitDict = {};
 
 function getEpoch() {
-  return Date.now().toString().slice(0,-3);
+  return Date.now().toString();
 }
 
-function createDigit() {
+function createDigit(i) {
+  var anim = [10, 11, 12].includes(i) ? 30 : (10-i) * 300;
+  var anim2 = Math.floor(anim/2)
   var digit = document.createElement('digit');
-  digit.innerHTML = '\
+  digit.innerHTML = `\
   <flap-top>          <n></n>   </flap-top>\
-  <flap-top-flip>     <n></n>   </flap-top-flip>\
+  <flap-top-flip style="--anim: ${anim}ms;">     <n></n>   </flap-top-flip>\
   <flap-bottom>       <n></n>   </flap-bottom>\
-  <flap-bottom-flip>  <n></n>   </flap-bottom-flip>';
+  <flap-bottom-flip style="--anim: ${anim2}ms;">  <n></n>   </flap-bottom-flip>`;
   return digit;
 }
 
-function flipDigitTo(digit, currentVal, updatedVal) {
+function flipDigitTo(digit, currentVal, updatedVal, i) {
   var topFlapNum        = digit.querySelector('flap-top > n'),
       topFlapFlip       = digit.querySelector('flap-top-flip'),
       topFlapFlipNum    = topFlapFlip.querySelector('n'),
@@ -32,56 +35,48 @@ function flipDigitTo(digit, currentVal, updatedVal) {
 
   setTimeout(function() {
     topFlapFlip.style.display = 'none';
-  }, 300);
+  }, [10, 11, 12].includes(i) ? 30 : (10-i) * 300);
 
   setTimeout(function() {
     bottomFlapFlipNum.innerHTML = updatedVal;
     bottomFlapFlip.style.display = 'block';
-  }, 300);
+  }, [10, 11, 12].includes(i) ? 30 : (10-i) * 300);
 
   setTimeout(function() {
     bottomFlapNum.innerHTML = updatedVal;
     bottomFlapFlip.style.display = 'none';
-  }, 450);
+  }, [10, 11, 12].includes(i) ? 45 : (10-i) * 425);
 
   digit.setAttribute('current-val', updatedVal);
 }
 
 function updateClock() {
   var epoch = getEpoch(),
-      staggerDelay,
       currentVal,
       updatedVal,
       i;
 
   for (i = 0; i < epoch.length; i+=1) {
-    if(i === epoch.length-1) {
-      staggerDelay = 0;
-    } else {
-      staggerDelay = Math.random() * 400;
-    }
     currentVal = digits[i].getAttribute('current-val');
     updatedVal = epoch[i];
     if(currentVal !== updatedVal) {
-      setTimeout(flipDigitTo, staggerDelay, digits[i], currentVal, updatedVal);
+      setTimeout(flipDigitTo, 0, digits[i], currentVal, updatedVal, i);
     }
   }
 }
 
 function setupClock() {
   var epoch = getEpoch(),
-      staggerDelay,
       digit,
       i;
 
   for (i = 0; i < epoch.length; i+=1) {
-    digit = createDigit();
+    digit = createDigit(i);
-    staggerDelay = Math.random() * 400;
     document.body.appendChild(digit);
-    setTimeout(flipDigitTo, staggerDelay, digit, null, epoch[i]);
+    setTimeout(flipDigitTo, 0, digit, null, epoch[i], i);
   }
   digits = document.querySelectorAll('digit');
 }
 
 setupClock();
-setInterval(updateClock, 1000);
+setInterval(updateClock, 1);

readme.md

@@ -4,4 +4,8 @@ Unix [epoch](https://en.wikipedia.org/wiki/Unix_time) flip clock macOS screensav
 ![Epoch Flip Clock Screenshot](https://raw.githubusercontent.com/chrstphrknwtn/epoch-flip-clock/master/epochFlipClock.png)
 
 ## Install
-Download [`Epock Flip Clock.saver`](https://github.com/chrstphrknwtn/epoch-flip-clock/releases/download/0.0.3/Epoch.Flip.Clock.saver.zip)
+Download [`Fast Epock Flip Clock.saver`](https://github.com/smparkin/epoch-flip-clock-screensaver/releases/download/latest/Fast.Epoch.Flip.Clock.saver.zip)
+
+## Related
+- [Grid Clock Screensaver](https://github.com/chrstphrknwtn/grid-clock-screensaver)
+- [Word Clock Screensaver](https://github.com/chrstphrknwtn/word-clock-screensaver)