dostulata/initiative
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Center action bar in empty state for better onboarding UX

Browse Source 
Replace the abstract + icon with the actual input field centered at the
optical center when no combatants exist. Animate the transition in both
directions: settling down when the first combatant is added, rising up
when all combatants are removed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-13 14:29:51 +01:00
parent 96b37d4bdd
commit 72d4f30e60
3 changed files with 136 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/web/src/index.css
View File

@@ -80,20 +80,40 @@
}
}
@keyframes breathe {
0%,
100% {
opacity: 0.4;
scale: 0.9;
@keyframes settle-to-bottom {
from {
transform: translateY(-40vh);
opacity: 0;
}
50% {
40% {
opacity: 1;
}
to {
transform: translateY(0);
opacity: 1;
scale: 1.1;
}
}
@utility animate-breathe {
animation: breathe 3s ease-in-out infinite;
@utility animate-settle-to-bottom {
animation: settle-to-bottom 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes rise-to-center {
from {
transform: translateY(40vh);
opacity: 0;
}
40% {
opacity: 1;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@utility animate-rise-to-center {
animation: rise-to-center 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
@custom-variant pointer-coarse (@media (pointer: coarse));