public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

feat(animation): add bowl smiley peek animation on success

Browse Source 
Bowl mascot now peeks up from bottom right corner when a lesson
is completed, synced with the existing "Crispyyyyyy!" animation.
This commit is contained in:
Michael Czechowski
2026-01-14 15:44:58 +01:00
parent 4bed75eb74
commit f830cf9a70
1 changed files with 38 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/main.css
View File

@@ -712,6 +712,44 @@ kbd {
} }
} }
/* Bowl smiley peek animation from bottom right corner */
.preview-section.matched::after {
content: "";
position: absolute;
bottom: 0;
right: 40px;
width: 80px;
height: 80px;
background: url("/bowl.png") center/contain no-repeat;
z-index: 20;
pointer-events: none;
animation: bowl-peek 3s ease-in-out forwards;
transform: translateY(100%);
}
@keyframes bowl-peek {
0% {
transform: translateY(100%);
opacity: 0;
}
15% {
opacity: 1;
}
30% {
transform: translateY(30%);
}
50% {
transform: translateY(30%);
}
70% {
transform: translateY(30%);
}
100% {
transform: translateY(100%);
opacity: 0;
}
}
@keyframes crispy-bounce { @keyframes crispy-bounce {
0% { 0% {
top: 100%; top: 100%;