math-pixel/La-Fabrik
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(ui): split talkie dialogue overlay
🔍 Lint / 🪄 Check lint (pull_request) Has been cancelled
Details
🔍 Lint / 🎨 Check format (pull_request) Has been cancelled
Details
🔍 Lint / 🔎 Typecheck (pull_request) Has been cancelled
Details
📊 Quality / 🔒 Security Audit (pull_request) Has been cancelled
Details
📊 Quality / 📋 Dependency Freshness (pull_request) Has been cancelled
Details
📊 Quality / 📦 Bundle Size (pull_request) Has been cancelled
Details
🔍 Lint / 🏗 Build (pull_request) Has been cancelled
Details

Browse Source
This commit is contained in:
Tom Boullay
2026-06-01 21:43:58 +02:00
parent 3b07f40f2d
commit a1798aecb3
5 changed files with 158 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+16 -16
View File
@@ -1240,18 +1240,12 @@ canvas {
/* Dialogue talkie */
.talkie-dialogue-overlay {
position: fixed;
left: clamp(12px, 2.2vw, 28px);
bottom: clamp(24px, 7vh, 76px);
left: 0;
bottom: 0;
z-index: 16;
width: clamp(120px, 13vw, 190px);
width: clamp(190px, 18vw, 300px);
aspect-ratio: 1;
pointer-events: none;
transform: translateY(0);
transition: transform 180ms ease;
}
.talkie-dialogue-overlay--raised {
transform: translateY(-10px);
}
.talkie-dialogue-overlay__model-frame {
@@ -1271,16 +1265,25 @@ canvas {
.talkie-dialogue-overlay__signals {
position: absolute;
right: -26%;
bottom: 34%;
top: 52%;
z-index: 2;
width: 58%;
height: 78%;
width: 38%;
height: 52%;
overflow: visible;
opacity: 0.8;
animation: talkie-signal-pulse 1s ease-in-out infinite;
}
.talkie-dialogue-overlay__signals--left {
right: 62%;
transform: translateY(-50%) scaleX(-1);
}
.talkie-dialogue-overlay__signals--right {
left: 62%;
transform: translateY(-50%);
}
.talkie-dialogue-overlay__signals path {
fill: none;
stroke: rgba(235, 244, 255, 0.9);
@@ -1330,18 +1333,15 @@ canvas {
0%,
100% {
opacity: 0.28;
transform: translate3d(-4px, 4px, 0) scale(0.92);
}
18%,
38% {
opacity: 0.95;
transform: translate3d(0, 0, 0) scale(1);
}
60% {
opacity: 0.45;
transform: translate3d(4px, -6px, 0) scale(1.05);
}
}