C.T by Samin Sami

by Samin Sami

HTML

<style>
    :root {
        color-scheme: dark;
        --accent-a: 84, 226, 255;
        --accent-b: 160, 88, 255;
        --glass-border: rgba(184, 220, 255, 0.18);
        --muted: rgba(220, 235, 255, 0.62);
    }

    * {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
        background: #02030a;
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        user-select: none;
        -webkit-user-select: none;
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(circle at 50% 45%, rgba(var(--accent-a), 0.065), transparent 27%),
            radial-gradient(circle at 20% 10%, rgba(var(--accent-b), 0.045), transparent 26%),
            linear-gradient(180deg, rgba(9, 13, 32, 0.24), rgba(0, 0, 0, 0.2));
        transition: background 900ms ease;
    }

    #canvas-container {
        position: fixed;
        inset: 0;
        z-index: 1;
    }

    canvas {
        display: block;
        width: 100%;
        height: 100%;
        touch-action: none;
    }

    .glass-panel {
        border: 1px solid var(--glass-border);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
            rgba(3, 7, 17, 0.48);
        box-shadow:
            0 18px 60px rgba(0, 0, 0, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.13);
        backdrop-filter: blur(18px) saturate(145%);
        -webkit-backdrop-filter: blur(18px) saturate(145%);
    }

    #brand {
        position: fixed;
        top: 18px;
        left: 20px;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 10px;
        pointer-events: none;
    }

  ...