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">
<style>
: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-600:#b1892a; --gold-700:#7d5f18;
--ink:#e9eefb; --badge:240px; --grow:1.18; --halo-w:170%;
@@ -16,12 +16,12 @@
html,body{height:100%}
body{
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;
-webkit-font-smoothing:antialiased; transition:background .6s ease;
}
/* 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{
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%);
@@ -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.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}
@@ -227,7 +227,7 @@
const SPARK=['#f6dd93','#e8c463','#d4af37','#fff4cf','#ffffff','#8fb4ff'];
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){
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 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);
const rounds=Math.round(5+t*10); // 5..15
const gap=Math.round(345-t*155); // 345..190 ms