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

feat(ui): show narrator video on talkie
🔍 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 10:52:28 +02:00
parent bce7d11b66
commit bdc704fe8e
3 changed files with 198 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+24 -16
View File
@@ -1240,24 +1240,24 @@ 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);
aspect-ratio: 1;
width: clamp(190px, 18vw, 310px);
aspect-ratio: 1.05;
overflow: visible;
pointer-events: none;
transform: translateY(0);
transition: transform 180ms ease;
}
.talkie-dialogue-overlay--raised {
transform: translateY(-10px);
transform: translateY(-8px);
}
.talkie-dialogue-overlay__model-frame {
position: absolute;
inset: 0;
animation: talkie-radio-shake 1s ease-in-out infinite;
inset: -18% -12% -6% -12%;
filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55));
}
@@ -1268,22 +1268,30 @@ canvas {
.talkie-dialogue-overlay__signals {
position: absolute;
right: -26%;
bottom: 34%;
bottom: 38%;
z-index: 2;
width: 58%;
height: 78%;
width: 34%;
height: 50%;
overflow: visible;
opacity: 0.8;
opacity: 0.72;
animation: talkie-signal-pulse 1s ease-in-out infinite;
}
.talkie-dialogue-overlay__signals--left {
left: 7%;
scale: -1 1;
}
.talkie-dialogue-overlay__signals--right {
right: 7%;
}
.talkie-dialogue-overlay__signals path {
fill: none;
stroke: rgba(235, 244, 255, 0.9);
stroke: rgba(162, 210, 255, 0.92);
stroke-linecap: round;
stroke-width: 5;
filter: drop-shadow(0 0 7px rgba(125, 211, 252, 0.72));
stroke-width: 4;
filter: drop-shadow(0 0 5px rgba(125, 211, 252, 0.58));
}
.talkie-dialogue-overlay__signals path:nth-child(2) {
@@ -1293,7 +1301,7 @@ canvas {
.talkie-dialogue-overlay__signals path:nth-child(3) {
animation-delay: 180ms;
opacity: 0.55;
opacity: 0.45;
}
@keyframes talkie-radio-shake {