diff --git a/GlassSurface.qml b/GlassSurface.qml new file mode 100644 index 0000000..9eb9969 --- /dev/null +++ b/GlassSurface.qml @@ -0,0 +1,85 @@ +import QtQuick +import Quickshell.Widgets +import Qt5Compat.GraphicalEffects + +ClippingRectangle { + id: root + color: "transparent" + border.width: 1 + border.color: Qt.rgba(1, 1, 1, 0.1) + + property var source + property real time: 0.5 + property real strength: 0.3 + property real speed: 0.25 + property real scale: 3.0 + property real edgeReflectionStrength: 0.2 + property real edgeReflectionWidth: 0 + + // Blur + ShaderEffectSource { + id: blurredBackground + anchors.fill: parent + sourceItem: root.source + sourceRect: Qt.rect(root.x, root.y, root.width, root.height) + hideSource: false + live: true + } + + FastBlur { + id: backgroundBlur + anchors.fill: parent + source: blurredBackground + radius: 16 + transparentBorder: true + } + + // Liquid glass shader warp + ShaderEffect { + anchors.fill: parent + fragmentShader: "root:shaders/liquid-glass.frag.qsb" + + property real time: root.time + property real flowSpeed: root.speed + property real warpStrength: root.strength + property real scale: root.scale + property real edgeReflectionStrength: root.edgeReflectionStrength + property real edgeReflectionWidth: root.edgeReflectionWidth + + property variant source: ShaderEffectSource { + sourceItem: backgroundBlur + hideSource: false + live: true + } + } + + // Subtle glass overlay + Rectangle { + anchors.fill: parent + color: "transparent" + + Rectangle { + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + anchors.margins: 1 + height: parent.height * 0.3 + radius: parent.radius - 1 + + gradient: Gradient { + GradientStop { + position: 0.0 + color: Qt.rgba(1, 1, 1, 0.08) + } + GradientStop { + position: 0.5 + color: Qt.rgba(1, 1, 1, 0.0) + } + GradientStop { + position: 1.0 + color: Qt.rgba(1, 1, 1, 0.0) + } + } + } + } +} diff --git a/shaders/liquid-glass.frag b/shaders/liquid-glass.frag index 36d746f..45855d7 100644 --- a/shaders/liquid-glass.frag +++ b/shaders/liquid-glass.frag @@ -63,7 +63,7 @@ void main() { vec4 glassColor = vec4(r, g, b, 1.0); - // Simple edge reflection - back to what worked + // Simple edge reflection float edgeWidth = ubuf.edgeReflectionWidth; // Calculate distance from edges @@ -84,16 +84,16 @@ void main() { // Simple reflection logic if (minDistToEdge == distFromLeft) { // Left edge - flip horizontally - reflectionUV.x = 1.0 - distortedUV.x; + reflectionUV.x = 0.5 - distortedUV.x; } else if (minDistToEdge == distFromRight) { // Right edge - keep as is but sample from further right reflectionUV.x = distortedUV.x + 0.1; } else if (minDistToEdge == distFromTop) { // Top edge - flip vertically - reflectionUV.y = 1.0 - distortedUV.y; + reflectionUV.y = 0.5 - distortedUV.y; } else { // Bottom edge - flip vertically - reflectionUV.y = 1.0 - distortedUV.y + 0.1; + reflectionUV.y = 0.5 - distortedUV.y + 0.1; } // Clamp to valid range diff --git a/shaders/liquid-glass.frag.qsb b/shaders/liquid-glass.frag.qsb index 8f49b0f..bcf4206 100644 Binary files a/shaders/liquid-glass.frag.qsb and b/shaders/liquid-glass.frag.qsb differ diff --git a/shell.qml b/shell.qml index 90b06e5..7368777 100644 --- a/shell.qml +++ b/shell.qml @@ -4,8 +4,6 @@ import QtQuick import QtQuick.Layouts import QtQuick.Controls import Quickshell -import Quickshell.Widgets -import Qt5Compat.GraphicalEffects ShellRoot { FloatingWindow { @@ -39,91 +37,57 @@ ShellRoot { anchors.fill: parent } - ClippingRectangle { - id: glassContainer - color: "transparent" - radius: 20 - anchors.centerIn: parent + GlassSurface { + source: backgroundContent width: 400 height: 300 + radius: 20 + anchors.centerIn: parent - // Blur - ShaderEffectSource { - id: blurredBackground - anchors.fill: parent - sourceItem: backgroundContent - sourceRect: Qt.rect(glassContainer.x, glassContainer.y, glassContainer.width, glassContainer.height) - hideSource: false - live: true - } + // parameters + time: timeSlider.value + speed: speedSlider.value + strength: warpSlider.value + scale: scaleSlider.value + edgeReflectionStrength: edgeReflectionSlider.value + edgeReflectionWidth: edgeWidthSlider.value + } - GaussianBlur { - id: backgroundBlur - anchors.fill: parent - source: blurredBackground - radius: 4 - samples: 4 - // transparentBorder: true - } + RowLayout { + spacing: 40 - // Liquid glass shader warp - ShaderEffect { - anchors.fill: parent - fragmentShader: "root:shaders/liquid-glass.frag.qsb" + Repeater { + model: ["1", "2", "3"] + delegate: GlassSurface { + id: surface + required property var modelData + source: backgroundContent + width: 100 + height: 100 + radius: 40 - property real time: timeSlider.value - property real warpStrength: warpSlider.value - property real flowSpeed: speedSlider.value - property real scale: 3.0 - property real edgeReflectionStrength: edgeReflectionSlider.value - property real edgeReflectionWidth: edgeWidthSlider.value - property real cornerRadius: 0.1 + time: timeSlider.value + speed: speedSlider.value + strength: warpSlider.value + scale: scaleSlider.value + edgeReflectionStrength: edgeReflectionSlider.value + edgeReflectionWidth: edgeWidthSlider.value - property variant source: ShaderEffectSource { - sourceItem: backgroundBlur - hideSource: false - live: true - } - } - - // Subtle glass overlay - Rectangle { - anchors.fill: parent - color: "transparent" - radius: 20 - - // Subtle inner glow - Rectangle { - anchors.fill: parent - anchors.margins: 1 - radius: parent.radius - 1 - color: "transparent" - border.width: 1 - border.color: Qt.rgba(1, 1, 1, 0.05) - } - - border.width: 1 - border.color: Qt.rgba(1, 1, 1, 0.15) - - Rectangle { - anchors.top: parent.top - anchors.left: parent.left - anchors.right: parent.right - anchors.margins: 1 - height: parent.height * 0.3 - radius: parent.radius - 1 - gradient: Gradient { - GradientStop { - position: 0.0 - color: Qt.rgba(1, 1, 1, 0.08) - } - GradientStop { - position: 1.0 - color: Qt.rgba(1, 1, 1, 0.0) - } + Text { + text: surface.modelData + color: Qt.rgba(1, 1, 1, 0.2) + font.bold: true + font.pointSize: 16 + anchors.centerIn: parent } } } + + anchors { + horizontalCenter: parent.horizontalCenter + bottom: parent.bottom + bottomMargin: 25 + } } } @@ -206,6 +170,22 @@ ShellRoot { Layout.preferredHeight: 30 } } + + RowLayout { + Text { + text: "Scale:" + } + + Slider { + id: scaleSlider + from: 0.0 + to: 20.0 + value: 3.0 + + Layout.fillWidth: true + Layout.preferredHeight: 30 + } + } } } }