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.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016WzrvW7rjQbynnhF6pxh6i
This commit is contained in:
Melvin Strobl
2026-08-15 20:03:21 +02:00
co-authored by Claude Fable 5
parent f05831b4a5
commit aa0e760615
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 {