Fluksio/app
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give the pulse its own duration, and let the editor fill the screen

Browse Source 
The shared duration tokens had been stretched to slow the pulses down, which
also slowed every panel and dock animation and left `motion.ts` out of step
with the CSS. Both are back to 200/300 ms, and the pulses use a new
`--duration-pulse` (500 ms): a message arriving is a signal, not a state
change, and it is the only thing here that should linger. The edge pulse read
its own 300 ms constant, so it now takes the token through `motion.ts` and the
two sides cannot drift again.

The code editor also expands: the same node panel fills the content region
beside the sidebar, the canvas chrome steps aside rather than floating on top,
and the settings above the editor keep a readable width.
This commit is contained in:
Melvin Strobl
2026-08-15 20:03:21 +02:00
parent df6b60363e
commit 037df4c75f
8 changed files with 95 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Flow/flow.css
+2 -2
View File
@@ -34,7 +34,7 @@
/* A message arriving lights its edge, then decays back to rest. */
@media (prefers-reduced-motion: no-preference) {
.react-flow__edge-path.edge-live {
animation: edge-pulse var(--duration-slow) var(--ease-emphasized);
animation: edge-pulse var(--duration-pulse) var(--ease-emphasized);
}
@keyframes edge-pulse {
@@ -58,7 +58,7 @@
border: 2px solid var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
pointer-events: none;
animation: node-pulse var(--duration-slow) var(--ease-emphasized) forwards;
animation: node-pulse var(--duration-pulse) var(--ease-emphasized) forwards;
}
@keyframes node-pulse {