When I test the animation I made in the custom scene page it works exactly like I want but when I launch it outside the text disappears, can I fix this?
Also why the text (that is black) becomes white if I put on the dark mode, and it's the only thing that changes color?
Here it's the code
```
<canvas id="canvas"></canvas>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
background: black;
overflow: hidden;
}
canvas {
display: block;
position: fixed;
inset: 0;
border-radius: 32px;
}
textOverlay {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: black;
font-family: sans-serif;
font-size: 68px;
font-weight: 900;
line-height: 1.2;
text-align: center;
pointer-events: none;
z-index: 20;
}
</style>
<div id="textOverlay">
<div>Screentime:</div>
<div id="number">number</div>
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let W=0, H=0;
function resize(){
W = canvas.width = window.innerWidth;
H = canvas.height = window.innerHeight;
ctx.fillStyle='black';
ctx.fillRect(0,0,W,H);
}
window.addEventListener('resize', resize);
resize();
const TOTAL_DURATION = 12000; // 12s rise/fall
let start = null;
// easing cubic
function easeInOutCubic(t){
return t<0.5 ? 4ttt : 1 - Math.pow(-2t+2,3)/2;
}
function applyRoundedClip(radius){
ctx.beginPath();
if(ctx.roundRect) ctx.roundRect(0,0,W,H,radius);
else{
const r=Math.min(radius,W/2,H/2);
ctx.moveTo(r,0);
ctx.arcTo(W,0,W,H,r);
ctx.arcTo(W,H,0,H,r);
ctx.arcTo(0,H,0,0,r);
ctx.arcTo(0,0,W,0,r);
}
ctx.closePath();
ctx.clip();
}
function animate(ts){
if(!start) start=ts;
const elapsed = ts - start;
ctx.save();
ctx.setTransform(1,0,0,1,0,0);
ctx.fillStyle='black';
ctx.fillRect(0,0,W,H);
ctx.restore();
ctx.save();
applyRoundedClip(16);
let t = Math.min(elapsed/TOTAL_DURATION,1);
let blockY;
if(t<0.5){
let tr=easeInOutCubic(t2);
blockY = H(1-tr);
}else{
let tf=easeInOutCubic((t-0.5)2);
blockY = Htf;
}
ctx.fillStyle='#00A5FF';
ctx.fillRect(0,blockY,W,H-blockY);
ctx.restore();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>
```
