From 0cf7d75353946e67e6c5cc1f30fcab197c9c39fb Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Thu, 5 Jun 2025 23:21:52 -0700
Subject: [PATCH] Add random 0 to 5s animation delay

It is better aesthetically if each effect flickers out of sync, to show their independence.
---
 index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index d59fad9..afee7de 100644
--- a/index.html
+++ b/index.html
@@ -82,7 +82,7 @@
         inline-size: 100%;
         block-size: 100%;
         border-radius: 2ch;
-        animation: flicker 1s linear infinite alternate;
+        animation: flicker 1s linear var(--delay) infinite alternate;
       }
 
       &.color {
@@ -186,6 +186,7 @@
     // Add hidden effect
     const colorEffect = document.createElement('button');
     colorEffect.classList.add('effect', 'color');
+    colorEffect.style.setProperty('--delay', `${Math.floor(Math.random() * 5000)}ms`);
     const highlightStyle = document.createElement('style');
     document.head.appendChild(highlightStyle);
     colorEffect.addEventListener('click', e => {
@@ -211,6 +212,7 @@
     // Add hidden effect 2
     const translateEffect = document.createElement('button');
     translateEffect.classList.add('effect', 'translate');
+    translateEffect.style.setProperty('--delay', `${Math.floor(Math.random() * 5000)}ms`);
     translateEffect.addEventListener('click', e => {
       e.target.textContent = '!';
 
-- 
2.47.3