CRT/storebound
1
0
Fork 0
Code Issues Pull requests Releases 1 Packages 1 Activity Actions

teaser: no text overflows anywhere: teaser.textCheck(t) checks every visible text node (scroll size within its element, its box inside its card, every card in frame as drawn), render.ts --animatic runs it at every frame of the whole teaser into animatic-checks.json and tests/teaser.test.ts requires zero problems; reject titles shortened ('No demo account', 'Manifest refused'); fixes it found: terminal and pile rows wrap instead of being cut with an ellipsis, the scan findings wrap, the pile shows only the rows that fit whole (no streaming past the edge), caption, edge word, labels and end card line heights fit their glyphs, builds and products push straight in so the terminal stays in frame

Browse source
This commit is contained in:
CRTkafa 2026-10-14 05:47:40 +08:00
parent 20a764b3ee
commit 49557b4c74
6 changed files with 60 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

21
media/teaser/index.html
View file

@ -47,12 +47,12 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
#capband { left: 0; right: 0; top: 0; height: 260px; z-index: 45; pointer-events: none; opacity: 0;
background: linear-gradient(rgba(7,11,22,.88) 0%, rgba(7,11,22,.65) 60%, rgba(7,11,22,0) 100%); }
#cap { z-index: 50; left: 80px; right: 80px; top: 64px; text-align: center; font-family: var(--display); font-weight: 750;
font-size: 88px; letter-spacing: -0.03em; line-height: 1.1; color: #fff; white-space: nowrap; text-shadow: 0 4px 30px rgba(0,0,0,.55); opacity: 0; }
font-size: 88px; letter-spacing: -0.03em; line-height: 1.2; color: #fff; white-space: nowrap; text-shadow: 0 4px 30px rgba(0,0,0,.55); opacity: 0; }
#cap .hl { color: var(--accent); } #cap.red .hl { color: var(--red); } #cap.green .hl { color: var(--green); }
#edgeband { left: 0; right: 0; bottom: 0; height: 300px; z-index: 45; pointer-events: none; opacity: 0;
background: linear-gradient(rgba(7,11,22,0) 0%, rgba(7,11,22,.75) 55%, rgba(7,11,22,.92) 100%); }
#edge { z-index: 50; left: 96px; bottom: 70px; font-family: var(--display); font-weight: 850; font-size: 108px; letter-spacing: -0.035em;
line-height: 1; color: #fff; white-space: nowrap; text-shadow: 0 6px 30px rgba(0,0,0,.6); opacity: 0; }
line-height: 1.2; color: #fff; white-space: nowrap; text-shadow: 0 6px 30px rgba(0,0,0,.6); opacity: 0; }
/* ---------- shared: cards, terminal ---------- */
.card { position: absolute; background: var(--surface); border: 2px solid var(--line); border-radius: 24px; overflow: hidden;
@ -60,9 +60,9 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
.card .ch { display: flex; align-items: center; gap: 14px; padding: 18px 26px; border-bottom: 2px solid var(--line);
font: 700 26px/1.2 var(--mono); color: #fff; background: rgba(255,255,255,.02); white-space: nowrap; }
.card .ch .dots { display: flex; gap: 9px; margin-right: 8px; } .card .ch .dots i { width: 14px; height: 14px; border-radius: 50%; background: #3a4255; display: block; }
.card .ch .sub { margin-left: auto; font: 600 22px/1 var(--text); color: var(--muted); }
.card .ch .sub { margin-left: auto; font: 600 22px/1.2 var(--text); color: var(--muted); }
.term { font-family: var(--mono); color: var(--ink-2); }
.term .ln { display: block; white-space: pre; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.term .ln { display: block; white-space: pre-wrap; overflow-wrap: anywhere; opacity: 0; }
.ps { color: var(--green); font-weight: 700; } .cmd { color: #fff; font-weight: 700; }
.caret { display: inline-block; width: .5em; height: 1.05em; background: #e5e7eb; vertical-align: -0.18em; margin-left: 4px; }
.tag { color: var(--dim); } .okk { color: var(--green); font-weight: 800; } .bad { color: var(--red); font-weight: 800; }
@ -76,7 +76,7 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
.pcard { opacity: 0; transform-origin: 50% 50%; }
.pcard .body { position: relative; height: 330px; overflow: hidden; }
.pcard .rows { position: absolute; left: 0; right: 0; top: 0; padding: 14px 26px; font: 500 21px/1.6 var(--mono); color: var(--ink-2); }
.pcard .rows div { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.pcard .rows div { white-space: pre-wrap; overflow-wrap: anywhere; }
.pcard .rows .okk { font-weight: 800; }
.pcard .shade { position: absolute; inset: 0; background: #04060c; opacity: 0; pointer-events: none; }
.pcard .grid { position: absolute; inset: 16px 22px; }
@ -98,7 +98,7 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
/* ---------- 4 ask: the request ---------- */
#prompt { left: 260px; top: 470px; width: 1400px; padding: 30px 38px; display: flex; flex-direction: column; gap: 16px;
background: rgba(21,31,54,.92); border: 2px solid var(--accent-2); border-radius: 26px; box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 8px rgba(91,92,240,.12); opacity: 0; }
#prompt .who { display: flex; align-items: center; gap: 12px; font: 800 22px/1 var(--text); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .1em; }
#prompt .who { display: flex; align-items: center; gap: 12px; font: 800 22px/1.2 var(--text); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .1em; }
#prompt .txt { font: 700 50px/1.2 var(--display); color: #fff; letter-spacing: -0.015em; white-space: nowrap; }
#prompt .sent { position: absolute; right: 30px; bottom: 30px; width: 58px; height: 58px; border-radius: 50%; background: var(--accent-2);
display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; opacity: .35; }
@ -138,13 +138,14 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
/* ---------- 6 scan ---------- */
#scanterm { left: 120px; top: 290px; width: 1680px; }
#scanterm .body { padding: 20px 32px 26px; font-size: 27px; line-height: 1.5; }
.fd { position: relative; display: flex; align-items: center; gap: 16px; margin: 8px 0; padding: 10px 18px; border-radius: 14px; white-space: nowrap; opacity: 0; }
.fd { position: relative; display: flex; align-items: center; gap: 16px; margin: 6px 0; padding: 8px 18px; border-radius: 14px; opacity: 0; }
.fd .tx { min-width: 0; overflow-wrap: anywhere; }
.fd .tint { position: absolute; inset: 0; border-radius: 14px; }
.fd .tint.b { background: var(--red-bg); border: 2px solid rgba(255,90,95,.4); }
.fd .tint.g { background: var(--green-bg); border: 2px solid rgba(61,220,132,.55); opacity: 0; }
.fd > *:not(.tint) { position: relative; }
.fd .pi { font-size: 30px; }
.fd .tx { overflow: hidden; text-overflow: ellipsis; color: #ffd6d7; font-weight: 600; }
.fd .tx { color: #ffd6d7; font-weight: 600; }
.fd .sev { font-weight: 800; color: #fff; }
/* ---------- desktop window ---------- */
@ -170,11 +171,11 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
#brand { left: 0; right: 0; top: 150px; text-align: center; }
#brand > * { opacity: 0; }
#brand .mark { width: 200px; height: 200px; display: block; margin: 0 auto; filter: drop-shadow(0 30px 70px rgba(91,92,240,.6)); }
#brand .word { margin-top: 20px; font: 900 120px/1 var(--display); letter-spacing: -0.05em; color: #fff; }
#brand .word { margin-top: 20px; font: 900 120px/1.15 var(--display); letter-spacing: -0.05em; color: #fff; }
#brand .cmdl { display: inline-block; margin-top: 44px; padding: 26px 48px; min-width: 1040px; text-align: left; border-radius: 22px;
background: #0b1222; border: 2px solid var(--line-2); box-shadow: 0 30px 80px rgba(0,0,0,.5); font: 800 76px/1.1 var(--mono); color: #fff; white-space: pre; }
#brand .cmdl .caret { width: .55em; height: 1em; vertical-align: -0.12em; margin-left: 6px; }
#brand .url { margin-top: 40px; font: 750 56px/1 var(--display); color: var(--accent); letter-spacing: -0.01em; }
#brand .url { margin-top: 40px; font: 750 56px/1.2 var(--display); color: var(--accent); letter-spacing: -0.01em; }
</style>
</head>
<body>