Skip to content

feat: implement pixel-esque PIN animation #1531

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dim-ghub wants to merge 8 commits into from
Closed

feat: implement pixel-esque PIN animation #1531

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d00c623
feat: implement pixel-esque PIN animation
dim-ghub Jun 9, 2026
5b1748e
remove pixel shapes
dim-ghub Jun 9, 2026
ea00c31
actually remove them this time
dim-ghub Jun 9, 2026
63e0e4b
Undo changes to session gif (oops)
dim-ghub Jun 9, 2026
ff19980
Fix qmlformat errors
dim-ghub Jun 9, 2026
6aa7b36
Refactor InputField.qml for improved readability
dim-ghub Jun 9, 2026
e508495
forgot to remove comment
dim-ghub Jun 9, 2026
463006f
please kill me
dim-ghub Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 70 additions & 27 deletions modules/lock/center/InputField.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ pragma ComponentBehavior: Bound

import QtQuick
import Quickshell
import M3Shapes
import Caelestia.Config
import qs.components
import qs.services
Expand All @@ -17,7 +18,7 @@ Item {
clip: true

Connections {
function onBufferChanged(): void {
function onBufferChanged() {
if (root.pam.buffer.length > root.buffer.length) {
charList.bindImWidth();
} else if (root.pam.buffer.length === 0) {
Expand Down Expand Up @@ -62,7 +63,7 @@ Item {

readonly property int fullWidth: count * (implicitHeight + spacing) - spacing

function bindImWidth(): void {
function bindImWidth() {
imWidthBehavior.enabled = false;
implicitWidth = Qt.binding(() => fullWidth);
imWidthBehavior.enabled = true;
Expand All @@ -75,67 +76,109 @@ Item {
implicitHeight: Tokens.font.body.medium.pointSize

orientation: Qt.Horizontal
spacing: Tokens.spacing.extraSmall
spacing: Tokens.spacing.small
interactive: false

model: ScriptModel {
values: root.buffer.split("")
}

delegate: StyledRect {
id: ch
delegate: Item {
id: delegateRoot

implicitWidth: implicitHeight
implicitWidth: charList.implicitHeight
implicitHeight: charList.implicitHeight

color: Colours.palette.m3onSurface
radius: Tokens.rounding.medium / 2

opacity: 0
scale: 0
Component.onCompleted: {
opacity = 1;
scale = 1;
}
ListView.onRemove: removeAnim.start()

SequentialAnimation {
id: removeAnim

PropertyAction {
target: ch
target: delegateRoot
property: "ListView.delayRemove"
value: true
}
ParallelAnimation {
Anim {
type: Anim.DefaultEffects
target: ch
target: delegateRoot
property: "opacity"
to: 0
}
Anim {
target: ch
property: "scale"
to: 0.5
property: "implicitSize"
to: 0
}
}
PropertyAction {
target: ch
target: delegateRoot
property: "ListView.delayRemove"
value: false
}
}

Behavior on opacity {
Anim {
type: Anim.DefaultEffects
MaterialShape {
id: ch

property int initialShape: {
const shapes = [MaterialShape.Square, MaterialShape.Slanted, MaterialShape.Arch, MaterialShape.Fan, MaterialShape.Arrow, MaterialShape.SemiCircle, MaterialShape.Triangle, MaterialShape.Diamond, MaterialShape.ClamShell, MaterialShape.Pentagon, MaterialShape.Gem, MaterialShape.Sunny, MaterialShape.VerySunny, MaterialShape.Cookie4Sided, MaterialShape.Cookie6Sided, MaterialShape.Cookie7Sided, MaterialShape.Cookie9Sided, MaterialShape.Cookie12Sided, MaterialShape.Ghostish, MaterialShape.Clover4Leaf, MaterialShape.Clover8Leaf, MaterialShape.Burst, MaterialShape.SoftBurst, MaterialShape.Boom, MaterialShape.SoftBoom, MaterialShape.Flower, MaterialShape.Puffy, MaterialShape.PuffyDiamond, MaterialShape.Bun, MaterialShape.Heart];
return shapes[Math.floor(Math.random() * shapes.length)];
}
}

Behavior on scale {
Anim {
type: Anim.FastSpatial
anchors.centerIn: parent

color: Colours.palette.m3onSurface

shape: initialShape
animationDuration: 200

opacity: 0
implicitSize: 0

Component.onCompleted: {
spawnAnim.start();
}

SequentialAnimation {
id: spawnAnim

ParallelAnimation {
NumberAnimation {
target: ch
property: "implicitSize"
from: 0
to: delegateRoot.implicitHeight * 1.5
duration: 250
easing.type: Easing.OutBack
}
NumberAnimation {
target: ch
property: "opacity"
from: 0
to: 1
duration: 100
}
}

PauseAnimation {
duration: 180
}

ScriptAction {
script: ch.shape = MaterialShape.Circle
}

ParallelAnimation {
NumberAnimation {
target: ch
property: "implicitSize"
to: delegateRoot.implicitHeight
duration: 200
easing.type: Easing.InOutQuad
}
}
}
}
}
Expand Down