nova-shell/modules/OverviewBackdrop.qml

import QtQuick
import Quickshell
import Quickshell.Wayland
import "." as M

PanelWindow {
    id: root

    required property var screen

    color: "transparent"

    WlrLayershell.layer: WlrLayer.Background
    WlrLayershell.exclusiveZone: -1
    WlrLayershell.namespace: "nova-overview-backdrop"
    mask: Region {}

    anchors.top: true
    anchors.left: true
    anchors.right: true
    anchors.bottom: true

    // Solid dark background — base01 is darker than base00
    Rectangle {
        anchors.fill: parent
        color: M.Theme.base01
    }

    // Hex grid with gradient-filled cells, no outlines
    Canvas {
        anchors.fill: parent

        onPaint: {
            const ctx = getContext("2d");
            const w = width, h = height;
            ctx.clearRect(0, 0, w, h);

            const size = 50;
            const dx = size * 1.5;
            const dy = size * Math.sqrt(3);

            const c0 = M.Theme.base0C;
            const c1 = M.Theme.base0E;
            const c2 = M.Theme.base09;

            for (let col = -1; col < w / dx + 2; col++) {
                for (let row = -1; row < h / dy + 2; row++) {
                    const cx = col * dx;
                    const cy = row * dy + (col % 2 ? dy / 2 : 0);

                    // Position-based color interpolation across the screen
                    const fx = Math.max(0, Math.min(1, cx / w));
                    const fy = Math.max(0, Math.min(1, cy / h));

                    // Blend: left=base0C, center=base0E, right=base09, modulated by y
                    const t = fx;
                    const r = t < 0.5 ? c0.r + (c1.r - c0.r) * (t * 2) : c1.r + (c2.r - c1.r) * ((t - 0.5) * 2);
                    const g = t < 0.5 ? c0.g + (c1.g - c0.g) * (t * 2) : c1.g + (c2.g - c1.g) * ((t - 0.5) * 2);
                    const b = t < 0.5 ? c0.b + (c1.b - c0.b) * (t * 2) : c1.b + (c2.b - c1.b) * ((t - 0.5) * 2);

                    // Opacity varies: brighter near edges, dimmer in center
                    const distFromCenter = Math.sqrt(Math.pow(fx - 0.5, 2) + Math.pow(fy - 0.5, 2));
                    const alpha = 0.03 + distFromCenter * 0.06;

                    ctx.fillStyle = "rgba(" + Math.round(r * 255) + "," + Math.round(g * 255) + "," + Math.round(b * 255) + "," + alpha + ")";

                    ctx.beginPath();
                    for (let i = 0; i < 6; i++) {
                        const angle = Math.PI / 3 * i - Math.PI / 6;
                        const px = cx + size * 0.48 * Math.cos(angle);
                        const py = cy + size * 0.48 * Math.sin(angle);
                        if (i === 0)
                            ctx.moveTo(px, py);
                        else
                            ctx.lineTo(px, py);
                    }
                    ctx.closePath();
                    ctx.fill();
                }
            }
        }
    }

    // Randomly spinning hexagons overlaid on the grid
    Repeater {
        model: 12

        Item {
            id: spinHex
            required property int index

            readonly property real _size: 50
            readonly property real _dx: _size * 1.5
            readonly property real _dy: _size * Math.sqrt(3)

            // Pick a random grid position
            readonly property int _col: Math.floor(Math.random() * (root.width / _dx))
            readonly property int _row: Math.floor(Math.random() * (root.height / _dy))

            x: _col * _dx - _size * 0.48
            y: _row * _dy + (_col % 2 ? _dy / 2 : 0) - _size * 0.48
            width: _size
            height: _size

            // Color from position (matching the canvas gradient)
            readonly property real _fx: Math.max(0, Math.min(1, (_col * _dx) / root.width))
            readonly property color _c0: M.Theme.base0C
            readonly property color _c1: M.Theme.base0E
            readonly property color _c2: M.Theme.base09
            readonly property color _hexColor: Qt.rgba(_fx < 0.5 ? _c0.r + (_c1.r - _c0.r) * _fx * 2 : _c1.r + (_c2.r - _c1.r) * (_fx - 0.5) * 2, _fx < 0.5 ? _c0.g + (_c1.g - _c0.g) * _fx * 2 : _c1.g + (_c2.g - _c1.g) * (_fx - 0.5) * 2, _fx < 0.5 ? _c0.b + (_c1.b - _c0.b) * _fx * 2 : _c1.b + (_c2.b - _c1.b) * (_fx - 0.5) * 2, 1)

            readonly property real _distFromCenter: Math.sqrt(Math.pow(_fx - 0.5, 2) + Math.pow(Math.max(0, Math.min(1, (_row * _dy) / root.height)) - 0.5, 2))
            opacity: 0.03 + _distFromCenter * 0.06

            rotation: 0
            transformOrigin: Item.Center

            Canvas {
                anchors.fill: parent
                onPaint: {
                    const ctx = getContext("2d");
                    const s = spinHex._size;
                    const cx = s / 2, cy = s / 2;
                    ctx.clearRect(0, 0, s, s);
                    ctx.fillStyle = spinHex._hexColor.toString();
                    ctx.beginPath();
                    for (let i = 0; i < 6; i++) {
                        const angle = Math.PI / 3 * i - Math.PI / 6;
                        const px = cx + s * 0.48 * Math.cos(angle);
                        const py = cy + s * 0.48 * Math.sin(angle);
                        if (i === 0)
                            ctx.moveTo(px, py);
                        else
                            ctx.lineTo(px, py);
                    }
                    ctx.closePath();
                    ctx.fill();
                }
            }

            Timer {
                interval: 3000 + Math.random() * 12000
                running: true
                repeat: true
                onTriggered: {
                    interval = 3000 + Math.random() * 12000;
                    spinAnim.duration = 1000 + Math.random() * 2000;
                    spinAnim.start();
                }
            }

            RotationAnimation {
                id: spinAnim
                target: spinHex
                from: 0
                to: 360
                duration: 2000
                easing.type: Easing.InOutCubic
            }
        }
    }
}