[READ-ONLY] Mirror of https://github.com/bombshell-dev/tty. Platform independent 2D layout engine for terminal applications based on Clay
✨ add transitions demo (collapsing sidebar)
Charles Lowell
(Apr 22, 2026, 8:15 PM -0500)
31ce2cb9
9e273d43
+89
+89
demo/transitions.ts
+89
demo/transitions.ts
···
1
+
/**
2
+
* Transitions demo — a sidebar that smoothly toggles between collapsed and expanded states.
3
+
*
4
+
* Exercises v1 transitions: one duration, one easing, multiple properties
5
+
* (width + bg) on a single element.
6
+
*/
7
+
8
+
import { main, sleep, until } from "effection";
9
+
import {
10
+
close,
11
+
createTerm,
12
+
cursor,
13
+
fixed,
14
+
grow,
15
+
open,
16
+
rgba,
17
+
settings,
18
+
text,
19
+
} from "../mod.ts";
20
+
import { alternateBuffer } from "../settings.ts";
21
+
22
+
const BG_COLLAPSED = rgba(30, 30, 60);
23
+
const BG_EXPANDED = rgba(80, 80, 140);
24
+
const CONTENT_BG = rgba(20, 20, 20);
25
+
const TEXT_COLOR = rgba(220, 220, 220);
26
+
27
+
await main(function* () {
28
+
let term = yield* until(createTerm({ width: 60, height: 18 }));
29
+
let tty = settings(alternateBuffer(), cursor(false));
30
+
Deno.stdout.writeSync(tty.apply);
31
+
32
+
try {
33
+
let expanded = false;
34
+
let lastToggle = 0;
35
+
36
+
for (let i = 0; i < 400; i++) {
37
+
let wallMs = i * 25;
38
+
if (wallMs - lastToggle > 2000) {
39
+
expanded = !expanded;
40
+
lastToggle = wallMs;
41
+
}
42
+
43
+
let ops = [
44
+
open("root", {
45
+
layout: { width: grow(), height: grow(), direction: "ltr" },
46
+
}),
47
+
open("sidebar", {
48
+
layout: {
49
+
width: fixed(expanded ? 24 : 4),
50
+
height: grow(),
51
+
padding: { left: 1, right: 1, top: 1, bottom: 1 },
52
+
direction: "ttb",
53
+
},
54
+
bg: expanded ? BG_EXPANDED : BG_COLLAPSED,
55
+
transition: {
56
+
duration: 0.4,
57
+
easing: "easeInOut",
58
+
properties: ["width", "bg"],
59
+
},
60
+
}),
61
+
open("label", {
62
+
layout: { width: grow(), height: fixed(1) },
63
+
}),
64
+
text(expanded ? "Menu" : "", { color: TEXT_COLOR }),
65
+
close(),
66
+
close(),
67
+
open("content", {
68
+
layout: {
69
+
width: grow(),
70
+
height: grow(),
71
+
padding: { left: 2, right: 2, top: 1, bottom: 1 },
72
+
},
73
+
bg: CONTENT_BG,
74
+
}),
75
+
open("body", { layout: { width: grow(), height: grow() } }),
76
+
text("clayterm transitions demo", { color: TEXT_COLOR }),
77
+
close(),
78
+
close(),
79
+
close(),
80
+
];
81
+
82
+
let r = term.render(ops);
83
+
Deno.stdout.writeSync(r.output);
84
+
yield* sleep(25);
85
+
}
86
+
} finally {
87
+
Deno.stdout.writeSync(tty.revert);
88
+
}
89
+
});