script

<script>
// Canvas fallback function
function loadCanvasBackground() {
    const canvas = document.createElement("canvas");
    canvas.id = "kbBackgroundCanvas";
    canvas.style.position = "fixed";
    canvas.style.top = 0;
    canvas.style.left = 0;
    canvas.style.width = "100%";
    canvas.style.height = "100%";
    canvas.style.zIndex = "-1";
    canvas.style.pointerEvents = "none";

    document.body.appendChild(canvas);

    const ctx = canvas.getContext("2d");

    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }

    window.addEventListener("resize", resize);
    resize();

    const count = 60;
    const color = "rgba(255,255,255,0.8)";
    const dots = [];

    for (let i = 0; i < count; i++) {
        dots.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            r: Math.random() * 3 + 1
        });
    }

    function draw() {
        //  Firefox bg
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Draw particles
        ctx.fillStyle = color;

        dots.forEach(dot => {
            ctx.beginPath();
            ctx.arc(dot.x, dot.y, dot.r, 0, Math.PI * 2);
            ctx.fill();
        });

        requestAnimationFrame(draw);
    }

    draw();
}
</script>

<script>
// 2. Firefox detection + PaintWorklet loader
const isFirefox = navigator.userAgent.toLowerCase().includes("firefox");

if (!isFirefox && 'paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('https://kryptonbytes.com/work.js');
} else {
    loadCanvasBackground();
}
</script>

<script>
// 3. Typing animation
const text = "> Secure. Reliable. Engineered.";
let i = 0;

function type() {
  if (i < text.length) {
    document.getElementById("kb-typed").textContent += text.charAt(i);
    i++;
    setTimeout(type, 80);
  }
}

document.addEventListener("DOMContentLoaded", type);
</script>

<script>
// 5. Time animation for worklet — FIXED
let t = 0;
function animate() {
  t += 0.02;
  document.body.style.setProperty('--t', t);
  requestAnimationFrame(animate);
}
animate();
</script>