pragma ComponentBehavior: Bound import QtQuick import M3Shapes import qs.Components import qs.Services import qs.Helpers Item { id: root property int count: 14 property list darkOpacities: [0.10, 0.20, 0.10, 0.20] property list lightOpacities: [0.34, 0.34, 0.08, 0.2] property real maxRotSpeed: 12 property real maxSize: 124 property real maxSpeed: 18 property real minRotSpeed: -12 property real minSize: 36 property real minSpeed: 4 readonly property list shapePool: [MaterialShape.Circle, MaterialShape.Cookie4Sided, MaterialShape.Cookie6Sided, MaterialShape.Cookie7Sided, MaterialShape.Cookie9Sided, MaterialShape.Cookie12Sided, MaterialShape.Sunny, MaterialShape.VerySunny, MaterialShape.SoftBurst, MaterialShape.Pentagon, MaterialShape.Gem, MaterialShape.Arch, MaterialShape.Arrow, MaterialShape.Pill, MaterialShape.Triangle, MaterialShape.Fan, MaterialShape.Oval] function rand(min: real, max: real): real { return min + Math.random() * (max - min); } function signedRand(min: real, max: real): real { return rand(min, max) * (Math.random() < 0.5 ? -1 : 1); } Component.onCompleted: shapes.model = count Repeater { id: shapes DriftingShape { } } FrameAnimation { running: root.visible && root.width > 0 && root.height > 0 && (Players.active?.isPlaying ?? false) onTriggered: { const dt = frameTime; for (let i = 0; i < shapes.count; i++) { const s = shapes.itemAt(i) as DriftingShape; if (!s) continue; s.x += s.vx * dt; s.y += s.vy * dt; s.rotation += s.vr * dt; if (s.x + s.width < 0) s.x = root.width; else if (s.x > root.width) s.x = -s.width; if (s.y + s.height < 0) s.y = root.height; else if (s.y > root.height) s.y = -s.height; } } } component DriftingShape: MaterialShape { id: shapeItem readonly property int colorIdx: Math.floor(Math.random() * 4) required property int index property real vr: root.rand(root.minRotSpeed, root.maxRotSpeed) property real vx: root.signedRand(root.minSpeed, root.maxSpeed) property real vy: root.signedRand(root.minSpeed, root.maxSpeed) color: [Colors.palette.m3primaryContainer, Colors.palette.m3secondaryContainer, Colors.palette.m3tertiaryContainer, Colors.palette.m3outlineVariant][colorIdx] implicitSize: root.minSize + (index / root.count) * (root.maxSize - root.minSize) opacity: Colors.light ? root.lightOpacities[colorIdx] : root.darkOpacities[colorIdx] rotation: root.rand(0, 360) shape: root.shapePool[Math.floor(Math.random() * root.shapePool.length)] Behavior on color { CAnim { } } Behavior on opacity { Anim { type: Anim.SlowEffects } } Component.onCompleted: { x = root.rand(0, root.width - implicitSize); y = root.rand(0, root.height - implicitSize); } } }