liquid-ass/shell.qml

pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Quickshell
import Quickshell.Widgets
import Qt5Compat.GraphicalEffects

ShellRoot {
    FloatingWindow {
        color: "grey"
        implicitWidth: 840
        implicitHeight: 845

        maximumSize {
            width: 840
            height: 845
        }

        minimumSize {
            width: 840
            height: 845
        }

        ColumnLayout {
            // anchors.fill: parent
            anchors {
                centerIn: parent
            }

            Item {
                Layout.preferredWidth: 600
                Layout.preferredHeight: 600

                Image {
                    id: backgroundContent
                    fillMode: Image.PreserveAspectCrop
                    source: "root:resources/scene.jpg"
                    anchors.fill: parent
                }

                ClippingRectangle {
                    id: glassContainer
                    color: "transparent"
                    radius: 20
                    anchors.centerIn: parent
                    width: 400
                    height: 300

                    // Blur
                    ShaderEffectSource {
                        id: blurredBackground
                        anchors.fill: parent
                        sourceItem: backgroundContent
                        sourceRect: Qt.rect(glassContainer.x, glassContainer.y, glassContainer.width, glassContainer.height)
                        hideSource: false
                        live: true
                    }

                    FastBlur {
                        id: backgroundBlur
                        anchors.fill: parent
                        source: blurredBackground
                        radius: 32
                        transparentBorder: true
                    }

                    // Liquid glass shader warp
                    ShaderEffect {
                        anchors.fill: parent
                        fragmentShader: "root:shaders/liquid-glass.frag.qsb"

                        property real time: timeSlider.value
                        property real warpStrength: warpSlider.value
                        property real flowSpeed: speedSlider.value
                        property real scale: 3.0

                        property variant source: ShaderEffectSource {
                            sourceItem: backgroundBlur
                            hideSource: false
                            live: true
                        }
                    }

                    // Glass overlay
                    Rectangle {
                        anchors.fill: parent
                        color: "transparent"
                        border.width: 1
                        border.color: Qt.rgba(1, 1, 1, 0.2)
                        radius: 20

                        Rectangle {
                            anchors.fill: parent
                            anchors.margins: 1
                            radius: parent.radius - 1
                            gradient: Gradient {
                                GradientStop {
                                    position: 0.0
                                    color: Qt.rgba(1, 1, 1, 0.1)
                                }
                                GradientStop {
                                    position: 0.3
                                    color: Qt.rgba(1, 1, 1, 0.05)
                                }
                                GradientStop {
                                    position: 1.0
                                    color: Qt.rgba(0, 0, 0, 0.05)
                                }
                            }
                        }
                    }
                }
            }

            RowLayout {
                Text {
                    text: "Time:"
                }

                Slider {
                    id: timeSlider
                    from: 0
                    to: Math.PI * 2

                    Layout.fillWidth: true
                    Layout.preferredHeight: 30
                }
            }

            RowLayout {
                Text {
                    text: "Warp Strength:"
                }

                Slider {
                    id: warpSlider
                    from: 0
                    to: 10

                    Layout.fillWidth: true
                    Layout.preferredHeight: 30
                }
            }

            RowLayout {
                Text {
                    text: "Flow Speed:"
                }

                Slider {
                    id: speedSlider
                    from: 0
                    to: 1

                    Layout.fillWidth: true
                    Layout.preferredHeight: 30
                }
            }
        }
    }
}