naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Eliminate all blue tint from canvas trailing colors and CSS variables

Browse Source
This commit is contained in:
ectasy663
2026-07-10 16:24:07 +05:30
parent 7a293b6df0
commit d04295552e
2 changed files with 23 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/streak-animation.html
View File

@@ -6,7 +6,7 @@
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style> <style>
:root{ :root{
--navy-900:#081226; --navy-800:#0c1c39; --navy-700:#13294d; --navy-900:#000000; --navy-800:#000000; --navy-700:#000000;
--gold-200:#fdeeb8; --gold-300:#f6dd93; --gold-400:#e8c463; --gold-500:#d4af37; --gold-200:#fdeeb8; --gold-300:#f6dd93; --gold-400:#e8c463; --gold-500:#d4af37;
--gold-600:#b1892a; --gold-700:#7d5f18; --gold-600:#b1892a; --gold-700:#7d5f18;
--ink:#e9eefb; --badge:240px; --grow:1.18; --halo-w:170%; --ink:#e9eefb; --badge:240px; --grow:1.18; --halo-w:170%;
@@ -16,12 +16,12 @@
html,body{height:100%} html,body{height:100%}
body{ body{
margin:0; font-family:var(--font); color:var(--ink); margin:0; font-family:var(--font); color:var(--ink);
background:radial-gradient(120% 90% at 50% -10%, #16305c 0%, var(--navy-800) 42%, var(--navy-900) 100%); background:radial-gradient(120% 90% at 50% -10%, #000000 0%, var(--navy-800) 42%, var(--navy-900) 100%);
display:flex; align-items:center; justify-content:center; overflow:hidden; display:flex; align-items:center; justify-content:center; overflow:hidden;
-webkit-font-smoothing:antialiased; transition:background .6s ease; -webkit-font-smoothing:antialiased; transition:background .6s ease;
} }
/* sad sky */ /* sad sky */
body.sad{background:radial-gradient(120% 90% at 50% -10%, #22303f 0%, #131c26 46%, #0a1017 100%)} body.sad{background:radial-gradient(120% 90% at 50% -10%, #000000 0%, #000000 46%, #000000 100%)}
body::after{ body::after{
content:""; position:fixed; inset:0; pointer-events:none; z-index:0; content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
background:radial-gradient(70% 60% at 50% 44%, transparent 55%, rgba(0,0,0,.45) 100%); background:radial-gradient(70% 60% at 50% 44%, transparent 55%, rgba(0,0,0,.45) 100%);
@@ -56,7 +56,7 @@
} }
.stage.play.happy .halo{animation:bloom 850ms cubic-bezier(.2,.8,.3,1) 1850ms forwards, pulse 2.8s ease-in-out 2700ms infinite} .stage.play.happy .halo{animation:bloom 850ms cubic-bezier(.2,.8,.3,1) 1850ms forwards, pulse 2.8s ease-in-out 2700ms infinite}
.stage.sad .halo{ .stage.sad .halo{
background:radial-gradient(circle, rgba(130,160,200,.30) 0%, rgba(96,124,164,.14) 42%, transparent 70%); background:radial-gradient(circle, rgba(100,100,100,.30) 0%, rgba(80,80,80,.14) 42%, transparent 70%);
} }
.stage.play.sad .halo{animation:bloomcold 1000ms ease-out 1900ms forwards} .stage.play.sad .halo{animation:bloomcold 1000ms ease-out 1900ms forwards}
@@ -227,7 +227,7 @@
const SPARK=['#f6dd93','#e8c463','#d4af37','#fff4cf','#ffffff','#8fb4ff']; const SPARK=['#f6dd93','#e8c463','#d4af37','#fff4cf','#ffffff','#8fb4ff'];
const CONF =['#f6dd93','#e8c463','#d4af37','#ffffff','#ffd34d']; const CONF =['#f6dd93','#e8c463','#d4af37','#ffffff','#ffd34d'];
let parts=[], running=false, mode='fireworks', rafFW=null, fwTimers=[], fadeCol='rgba(8,18,38,0.22)'; let parts=[], running=false, mode='fireworks', rafFW=null, fwTimers=[], fadeCol='rgba(0,0,0,0.22)';
function burst(xr,yr,count){ function burst(xr,yr,count){
const x=xr*W, y=yr*H, n=count|0; const x=xr*W, y=yr*H, n=count|0;
@@ -318,7 +318,7 @@
function stopFw(){ fwTimers.forEach(clearTimeout); fwTimers=[]; running=false; parts=[]; if(W&&H) ctx.clearRect(0,0,W,H); } function stopFw(){ fwTimers.forEach(clearTimeout); fwTimers=[]; running=false; parts=[]; if(W&&H) ctx.clearRect(0,0,W,H); }
function celebrate(t){ // t: 0..1 intensity function celebrate(t){ // t: 0..1 intensity
stopFw(); parts=[]; mode='fireworks'; fadeCol='rgba(8,18,38,0.22)'; running=true; stopFw(); parts=[]; mode='fireworks'; fadeCol='rgba(0,0,0,0.22)'; running=true;
if(!rafFW) rafFW=requestAnimationFrame(tick); if(!rafFW) rafFW=requestAnimationFrame(tick);
const rounds=Math.round(5+t*10); // 5..15 const rounds=Math.round(5+t*10); // 5..15
const gap=Math.round(345-t*155); // 345..190 ms const gap=Math.round(345-t*155); // 345..190 ms

17
scratch/port_streak_clean.py
View File

@@ -61,6 +61,23 @@ def port_html():
html = html.replace("Math.max(target,5)/5", "Math.max(target,3)/3") html = html.replace("Math.max(target,5)/5", "Math.max(target,3)/3")
html = html.replace("(4 - target) / 3", "(3 - target) / 3") html = html.replace("(4 - target) / 3", "(3 - target) / 3")
# Replace blue canvas trailing colors
html = html.replace("'rgba(8,18,38,0.22)'", "'rgba(0,0,0,0.22)'")
html = html.replace("'rgba(10,16,23,0.3)'", "'rgba(0,0,0,0.3)'")
html = html.replace("rgba(8,18,38,0.22)", "rgba(0,0,0,0.22)")
html = html.replace("rgba(10,16,23,0.3)", "rgba(0,0,0,0.3)")
# Replace blue root CSS variables
html = html.replace("#081226", "#000000")
html = html.replace("#0c1c39", "#000000")
html = html.replace("#13294d", "#000000")
html = html.replace("#16305c", "#000000")
html = html.replace("#22303f", "#000000")
html = html.replace("#131c26", "#000000")
html = html.replace("#0a1017", "#000000")
html = html.replace("rgba(130,160,200,.30)", "rgba(100,100,100,.30)")
html = html.replace("rgba(96,124,164,.14)", "rgba(80,80,80,.14)")
# 5. Adjust badge size from 230px to 240px # 5. Adjust badge size from 230px to 240px
html = html.replace("--badge:230px;", "--badge:240px;") html = html.replace("--badge:230px;", "--badge:240px;")