[READ-ONLY] Mirror of https://github.com/bombshell-dev/tty. Platform independent 2D layout engine for terminal applications based on Clay
🎨 use border-only boxes in clay-transitions demo
Charles Lowell
(Apr 23, 2026, 11:22 AM -0500)
b7eb6bbf
c6c7f87f
+10
-4
+10
-4
demo/clay-transitions.ts
+10
-4
demo/clay-transitions.ts
···
231
231
let b = boxes[i];
232
232
let bid = `box:${b.id}`;
233
233
let hov = state.entered.has(bid);
234
-
let bg = hov ? lighten(b.color, HOVER_LIGHTEN) : b.color;
234
+
let borderColor = hov ? lighten(b.color, HOVER_LIGHTEN) : b.color;
235
235
ops.push(
236
236
open(bid, {
237
237
layout: {
···
240
240
alignX: 2,
241
241
alignY: 2,
242
242
},
243
-
bg,
243
+
border: {
244
+
color: borderColor,
245
+
left: 1,
246
+
right: 1,
247
+
top: 1,
248
+
bottom: 1,
249
+
},
244
250
transition: {
245
251
duration: 0.4,
246
252
easing: "easeInOut",
247
-
properties: ["width", "position", "bg"],
253
+
properties: ["width", "position", "borderColor"],
248
254
interactive: true,
249
255
},
250
256
}),
251
-
text(`${b.id < 10 ? "0" : ""}${b.id}`, { color: LABEL_COLOR }),
257
+
text(`${b.id < 10 ? "0" : ""}${b.id}`, { color: b.color }),
252
258
close(),
253
259
);
254
260
}