@danieldeusing/design 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +3 -3
  2. package/dist/danieldeusing-design.css +17 -3
  3. package/dist/danieldeusing-design.min.css +2 -2
  4. package/package.json +1 -1
  5. package/runtime/terminal.js +22 -3
  6. package/src/components.css +16 -2
package/README.md CHANGED
@@ -43,9 +43,9 @@ Link the built bundle from jsDelivr and you have the whole look. **Pin a release
43
43
  })();
44
44
  </script>
45
45
 
46
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/danieldeusing/danieldeusing-design@v0.1.0/dist/danieldeusing-design.min.css" />
46
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/danieldeusing/danieldeusing-design@v0.1.1/dist/danieldeusing-design.min.css" />
47
47
  <!-- optional: the real JetBrains Mono webfont (otherwise falls back to Menlo) -->
48
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/danieldeusing/danieldeusing-design@v0.1.0/src/fonts.css" />
48
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/danieldeusing/danieldeusing-design@v0.1.1/src/fonts.css" />
49
49
  </head>
50
50
  <body>
51
51
  <p class="prompt">cat hello.txt</p>
@@ -54,7 +54,7 @@ Link the built bundle from jsDelivr and you have the whole look. **Pin a release
54
54
 
55
55
  <script type="module">
56
56
  import { initThemeSwitcher, initDropdowns, initTerminal } from
57
- "https://cdn.jsdelivr.net/gh/danieldeusing/danieldeusing-design@v0.1.0/runtime/index.js";
57
+ "https://cdn.jsdelivr.net/gh/danieldeusing/danieldeusing-design@v0.1.1/runtime/index.js";
58
58
  initThemeSwitcher();
59
59
  initDropdowns();
60
60
  initTerminal();
package/dist/danieldeusing-design.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! danieldeusing-design v0.1.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
1
+ /*! danieldeusing-design v0.1.1 | MIT | https://github.com/danieldeusing/danieldeusing-design */
2
2
  /* ===== reset.css ===== */
3
3
  /*
4
4
  * danieldeusing-design — minimal reset.
@@ -506,10 +506,9 @@ html.anim-off *,
506
506
  html.anim-off *::before,
507
507
  html.anim-off *::after {
508
508
  animation: none !important;
509
- transition: none !important;
510
509
  }
511
510
  html.anim-off .cursor-block {
512
- opacity: 1;
511
+ display: none;
513
512
  }
514
513
 
515
514
  /* ─────────────────────────────────────────────────────────────────────────
@@ -541,6 +540,21 @@ html.anim-off .cursor-block {
541
540
  opacity: 0;
542
541
  }
543
542
  }
543
+ /* a revealed box cascades its direct children (rows/lines) in one by one —
544
+ applies to every card on every page */
545
+ html.term-anim [data-term] [data-term-out].term-show > * {
546
+ animation: ddd-term-output 0.25s steps(3, end) both;
547
+ }
548
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(2) { animation-delay: 0.09s; }
549
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(3) { animation-delay: 0.18s; }
550
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(4) { animation-delay: 0.27s; }
551
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(5) { animation-delay: 0.36s; }
552
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(6) { animation-delay: 0.45s; }
553
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(7) { animation-delay: 0.54s; }
554
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(8) { animation-delay: 0.63s; }
555
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(9) { animation-delay: 0.72s; }
556
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(10) { animation-delay: 0.81s; }
557
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(n + 11) { animation-delay: 0.9s; }
544
558
  /* caret at the typing edge (created by runtime/terminal.js) */
545
559
  .term-caret {
546
560
  display: inline-block;
package/dist/danieldeusing-design.min.css CHANGED
@@ -1,2 +1,2 @@
1
- /*! danieldeusing-design v0.1.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
2
- *,*::before,*::after{box-sizing: border-box}*{margin: 0}html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%;tab-size: 4}body{min-height: 100vh;min-height: 100dvh;line-height: 1.5}img,picture,video,canvas,svg{display: block;max-width: 100%}input,button,textarea,select{font: inherit;color: inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap: break-word}ul,ol{list-style: none;padding: 0}a{color: inherit;text-decoration: none}table{border-collapse: collapse}:root{--background: #f5efe2;--foreground: #43352a;--card: #efe7d4;--card-foreground: #43352a;--popover: #efe7d4;--popover-foreground: #43352a;--primary: #8a4516;--primary-foreground: #f8f3e8;--secondary: #ece3cf;--secondary-foreground: #43352a;--muted: #ece3cf;--muted-foreground: #71614e;--accent: #8a4516;--accent-foreground: #f8f3e8;--destructive: #a02c2c;--border: #d9cdb6;--input: #d9cdb6;--ring: #8a4516;--glow: rgba(160,82,45,0.1);--glow-soft: rgba(160,82,45,0.05);--scanline-opacity: 0.15;--radius: 0rem;--font-mono: "JetBrains Mono Variable","JetBrains Mono","Menlo",monospace}html[data-theme="green"]{--background: #020604;--foreground: #4fdd7d;--card: #04110a;--card-foreground: #4fdd7d;--popover: #04110a;--popover-foreground: #4fdd7d;--primary: #33ff66;--primary-foreground: #02160a;--secondary: #071509;--secondary-foreground: #4fdd7d;--muted: #071509;--muted-foreground: #3da45e;--accent: #33ff66;--accent-foreground: #02160a;--destructive: #ff5c5c;--border: #1c4a2c;--input: #1c4a2c;--ring: #33ff66;--glow: rgba(51,255,102,0.35);--glow-soft: rgba(51,255,102,0.12);--scanline-opacity: 0.5}html[data-theme="mono"]{--background: #050505;--foreground: #d4d4d4;--card: #0d0d0d;--card-foreground: #d4d4d4;--popover: #0d0d0d;--popover-foreground: #d4d4d4;--primary: #ffffff;--primary-foreground: #050505;--secondary: #111111;--secondary-foreground: #d4d4d4;--muted: #111111;--muted-foreground: #8a8a8a;--accent: #ffffff;--accent-foreground: #050505;--destructive: #ff5c5c;--border: #333333;--input: #333333;--ring: #ffffff;--glow: rgba(255,255,255,0.25);--glow-soft: rgba(255,255,255,0.08);--scanline-opacity: 0.45}html[data-theme="paper"]{--background: #fafafa;--foreground: #1f1f1f;--card: #f1f1f1;--card-foreground: #1f1f1f;--popover: #f1f1f1;--popover-foreground: #1f1f1f;--primary: #000000;--primary-foreground: #fafafa;--secondary: #efefef;--secondary-foreground: #1f1f1f;--muted: #efefef;--muted-foreground: #595959;--accent: #000000;--accent-foreground: #fafafa;--destructive: #b3261e;--border: #d4d4d4;--input: #d4d4d4;--ring: #000000;--glow: rgba(0,0,0,0.06);--glow-soft: rgba(0,0,0,0.04);--scanline-opacity: 0.12}html{scroll-behavior: smooth}*,*::before,*::after{border-color: var(--border)}:focus-visible{outline: 2px solid var(--ring);outline-offset: 2px}body{background: var(--background);color: var(--foreground);font-family: var(--font-mono);font-size: 0.75rem;line-height: 1.5;overflow-x: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}button:not(:disabled),summary,[role="button"]{cursor: pointer}body::after{content: "";position: fixed;inset: 0;z-index: 40;pointer-events: none;background: repeating-linear-gradient( 0deg,rgba(0,0,0,0.25) 0px,rgba(0,0,0,0.25) 1px,transparent 1px,transparent 3px );opacity: var(--scanline-opacity)}::selection{background: var(--primary);color: var(--primary-foreground)}.glow{color: var(--primary);text-shadow: 0 0 8px var(--glow)}.glow-lg{color: var(--primary);text-shadow: 0 0 12px var(--glow)}.prompt{font-size: 0.75rem;font-weight: 700;color: var(--muted-foreground)}.prompt::before{content: "$ ";color: var(--primary)}.comment::before{content: "# ";color: var(--border)}.cursor-block{display: inline-block;width: 0.55em;height: 1em;margin-left: 8px;background: var(--primary);vertical-align: baseline;transform: translateY(0.12em);animation: ddd-blink 1.1s step-end infinite}@keyframes ddd-blink{50%{opacity: 0}}.btn-terminal{display: inline-block;background: var(--primary);color: var(--primary-foreground);font-weight: 700;padding: 12px 24px;box-shadow: 0 0 16px var(--glow);transition: box-shadow 0.15s ease,transform 0.15s ease}.btn-terminal::before{content: "> "}.btn-terminal:hover{box-shadow: 0 0 28px var(--glow);transform: translateY(-2px)}.link-quiet{color: var(--muted-foreground);text-decoration: underline;text-underline-offset: 4px;transition: color 0.15s ease}.link-quiet:hover{color: var(--primary)}.ascii-rule{margin: 1rem 0;border: 0;color: var(--border);line-height: 1;white-space: nowrap;overflow: hidden;user-select: none}.ascii-rule::before{content: "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"}.card-terminal{background: var(--card);border: 1px solid var(--border);transition: border-color 0.15s ease,box-shadow 0.15s ease}.card-terminal:hover{border-color: var(--primary);box-shadow: 0 0 20px var(--glow-soft)}.dropdown{position: relative}.dropdown>summary{display: inline-flex;align-items: center;gap: 6px;cursor: pointer;user-select: none;list-style: none;color: var(--muted-foreground);transition: color 0.15s ease}.dropdown>summary::-webkit-details-marker{display: none}.dropdown>summary:hover,.dropdown[open]>summary{color: var(--primary)}.dropdown-panel{position: absolute;right: 0;bottom: calc(100% + 12px);z-index: 50;min-width: 128px;margin: 0;padding: 4px 0;list-style: none;background: var(--card);border: 1px solid var(--border);border-radius: 0;box-shadow: 0 0 20px var(--glow-soft)}.dropdown-panel--down{top: calc(100% + 8px);bottom: auto;left: 0;right: auto}.dropdown-item{display: flex;align-items: center;gap: 8px;width: 100%;padding: 5px 14px;text-align: left;font: inherit;line-height: 1.5;background: none;border: 0;color: var(--muted-foreground);cursor: pointer;white-space: nowrap;transition: color 0.15s ease}.dropdown-item:hover{color: var(--primary);background: var(--muted)}.dropdown-item[aria-current="true"],html:not([data-theme]) .dropdown-item[data-theme-value="warm"],html[data-theme="green"] .dropdown-item[data-theme-value="green"],html[data-theme="mono"] .dropdown-item[data-theme-value="mono"],html[data-theme="paper"] .dropdown-item[data-theme-value="paper"],html[data-theme="warm"] .dropdown-item[data-theme-value="warm"]{color: var(--primary);text-shadow: 0 0 8px var(--glow)}.eli5{margin: 1.25em 0;padding: 0.7em 1em;color: var(--foreground);background: color-mix(in srgb,var(--primary) 7%,var(--card));border: 1px solid var(--border);border-left: 3px solid var(--primary);border-radius: var(--radius);font-size: 0.92em;line-height: 1.6}.eli5::before{content: "ELI5";display: inline-flex;align-items: center;justify-content: center;margin-right: 0.6em;vertical-align: 0.08em;font-family: var(--font-mono);font-size: 0.72em;font-weight: 700;line-height: 1;letter-spacing: 0.04em;padding: 0.34em 0.6em;border-radius: 5px;background: #b42318;color: #fff}.eli5-term{font-weight: 700;color: var(--primary)}html.anim-off *,html.anim-off *::before,html.anim-off *::after{animation: none !important;transition: none !important}html.anim-off .cursor-block{opacity: 1}@media (prefers-reduced-motion: no-preference){html.term-anim [data-term] .prompt:not(.term-live),html.term-anim [data-term] .prompt:not(.term-live)::before{color: transparent}html.term-anim [data-term] [data-term-out]:not(.term-show){visibility: hidden}html.term-anim [data-term] [data-term-out].term-show{animation: ddd-term-output 0.2s steps(3,end) both}@keyframes ddd-term-output{from{opacity: 0}}.term-caret{display: inline-block;width: 0.55em;height: 1em;margin-left: 2px;background: var(--primary);vertical-align: baseline;transform: translateY(0.12em)}}
1
+ /*! danieldeusing-design v0.1.1 | MIT | https://github.com/danieldeusing/danieldeusing-design */
2
+ *,*::before,*::after{box-sizing: border-box}*{margin: 0}html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%;tab-size: 4}body{min-height: 100vh;min-height: 100dvh;line-height: 1.5}img,picture,video,canvas,svg{display: block;max-width: 100%}input,button,textarea,select{font: inherit;color: inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap: break-word}ul,ol{list-style: none;padding: 0}a{color: inherit;text-decoration: none}table{border-collapse: collapse}:root{--background: #f5efe2;--foreground: #43352a;--card: #efe7d4;--card-foreground: #43352a;--popover: #efe7d4;--popover-foreground: #43352a;--primary: #8a4516;--primary-foreground: #f8f3e8;--secondary: #ece3cf;--secondary-foreground: #43352a;--muted: #ece3cf;--muted-foreground: #71614e;--accent: #8a4516;--accent-foreground: #f8f3e8;--destructive: #a02c2c;--border: #d9cdb6;--input: #d9cdb6;--ring: #8a4516;--glow: rgba(160,82,45,0.1);--glow-soft: rgba(160,82,45,0.05);--scanline-opacity: 0.15;--radius: 0rem;--font-mono: "JetBrains Mono Variable","JetBrains Mono","Menlo",monospace}html[data-theme="green"]{--background: #020604;--foreground: #4fdd7d;--card: #04110a;--card-foreground: #4fdd7d;--popover: #04110a;--popover-foreground: #4fdd7d;--primary: #33ff66;--primary-foreground: #02160a;--secondary: #071509;--secondary-foreground: #4fdd7d;--muted: #071509;--muted-foreground: #3da45e;--accent: #33ff66;--accent-foreground: #02160a;--destructive: #ff5c5c;--border: #1c4a2c;--input: #1c4a2c;--ring: #33ff66;--glow: rgba(51,255,102,0.35);--glow-soft: rgba(51,255,102,0.12);--scanline-opacity: 0.5}html[data-theme="mono"]{--background: #050505;--foreground: #d4d4d4;--card: #0d0d0d;--card-foreground: #d4d4d4;--popover: #0d0d0d;--popover-foreground: #d4d4d4;--primary: #ffffff;--primary-foreground: #050505;--secondary: #111111;--secondary-foreground: #d4d4d4;--muted: #111111;--muted-foreground: #8a8a8a;--accent: #ffffff;--accent-foreground: #050505;--destructive: #ff5c5c;--border: #333333;--input: #333333;--ring: #ffffff;--glow: rgba(255,255,255,0.25);--glow-soft: rgba(255,255,255,0.08);--scanline-opacity: 0.45}html[data-theme="paper"]{--background: #fafafa;--foreground: #1f1f1f;--card: #f1f1f1;--card-foreground: #1f1f1f;--popover: #f1f1f1;--popover-foreground: #1f1f1f;--primary: #000000;--primary-foreground: #fafafa;--secondary: #efefef;--secondary-foreground: #1f1f1f;--muted: #efefef;--muted-foreground: #595959;--accent: #000000;--accent-foreground: #fafafa;--destructive: #b3261e;--border: #d4d4d4;--input: #d4d4d4;--ring: #000000;--glow: rgba(0,0,0,0.06);--glow-soft: rgba(0,0,0,0.04);--scanline-opacity: 0.12}html{scroll-behavior: smooth}*,*::before,*::after{border-color: var(--border)}:focus-visible{outline: 2px solid var(--ring);outline-offset: 2px}body{background: var(--background);color: var(--foreground);font-family: var(--font-mono);font-size: 0.75rem;line-height: 1.5;overflow-x: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}button:not(:disabled),summary,[role="button"]{cursor: pointer}body::after{content: "";position: fixed;inset: 0;z-index: 40;pointer-events: none;background: repeating-linear-gradient( 0deg,rgba(0,0,0,0.25) 0px,rgba(0,0,0,0.25) 1px,transparent 1px,transparent 3px );opacity: var(--scanline-opacity)}::selection{background: var(--primary);color: var(--primary-foreground)}.glow{color: var(--primary);text-shadow: 0 0 8px var(--glow)}.glow-lg{color: var(--primary);text-shadow: 0 0 12px var(--glow)}.prompt{font-size: 0.75rem;font-weight: 700;color: var(--muted-foreground)}.prompt::before{content: "$ ";color: var(--primary)}.comment::before{content: "# ";color: var(--border)}.cursor-block{display: inline-block;width: 0.55em;height: 1em;margin-left: 8px;background: var(--primary);vertical-align: baseline;transform: translateY(0.12em);animation: ddd-blink 1.1s step-end infinite}@keyframes ddd-blink{50%{opacity: 0}}.btn-terminal{display: inline-block;background: var(--primary);color: var(--primary-foreground);font-weight: 700;padding: 12px 24px;box-shadow: 0 0 16px var(--glow);transition: box-shadow 0.15s ease,transform 0.15s ease}.btn-terminal::before{content: "> "}.btn-terminal:hover{box-shadow: 0 0 28px var(--glow);transform: translateY(-2px)}.link-quiet{color: var(--muted-foreground);text-decoration: underline;text-underline-offset: 4px;transition: color 0.15s ease}.link-quiet:hover{color: var(--primary)}.ascii-rule{margin: 1rem 0;border: 0;color: var(--border);line-height: 1;white-space: nowrap;overflow: hidden;user-select: none}.ascii-rule::before{content: "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"}.card-terminal{background: var(--card);border: 1px solid var(--border);transition: border-color 0.15s ease,box-shadow 0.15s ease}.card-terminal:hover{border-color: var(--primary);box-shadow: 0 0 20px var(--glow-soft)}.dropdown{position: relative}.dropdown>summary{display: inline-flex;align-items: center;gap: 6px;cursor: pointer;user-select: none;list-style: none;color: var(--muted-foreground);transition: color 0.15s ease}.dropdown>summary::-webkit-details-marker{display: none}.dropdown>summary:hover,.dropdown[open]>summary{color: var(--primary)}.dropdown-panel{position: absolute;right: 0;bottom: calc(100% + 12px);z-index: 50;min-width: 128px;margin: 0;padding: 4px 0;list-style: none;background: var(--card);border: 1px solid var(--border);border-radius: 0;box-shadow: 0 0 20px var(--glow-soft)}.dropdown-panel--down{top: calc(100% + 8px);bottom: auto;left: 0;right: auto}.dropdown-item{display: flex;align-items: center;gap: 8px;width: 100%;padding: 5px 14px;text-align: left;font: inherit;line-height: 1.5;background: none;border: 0;color: var(--muted-foreground);cursor: pointer;white-space: nowrap;transition: color 0.15s ease}.dropdown-item:hover{color: var(--primary);background: var(--muted)}.dropdown-item[aria-current="true"],html:not([data-theme]) .dropdown-item[data-theme-value="warm"],html[data-theme="green"] .dropdown-item[data-theme-value="green"],html[data-theme="mono"] .dropdown-item[data-theme-value="mono"],html[data-theme="paper"] .dropdown-item[data-theme-value="paper"],html[data-theme="warm"] .dropdown-item[data-theme-value="warm"]{color: var(--primary);text-shadow: 0 0 8px var(--glow)}.eli5{margin: 1.25em 0;padding: 0.7em 1em;color: var(--foreground);background: color-mix(in srgb,var(--primary) 7%,var(--card));border: 1px solid var(--border);border-left: 3px solid var(--primary);border-radius: var(--radius);font-size: 0.92em;line-height: 1.6}.eli5::before{content: "ELI5";display: inline-flex;align-items: center;justify-content: center;margin-right: 0.6em;vertical-align: 0.08em;font-family: var(--font-mono);font-size: 0.72em;font-weight: 700;line-height: 1;letter-spacing: 0.04em;padding: 0.34em 0.6em;border-radius: 5px;background: #b42318;color: #fff}.eli5-term{font-weight: 700;color: var(--primary)}html.anim-off *,html.anim-off *::before,html.anim-off *::after{animation: none !important}html.anim-off .cursor-block{display: none}@media (prefers-reduced-motion: no-preference){html.term-anim [data-term] .prompt:not(.term-live),html.term-anim [data-term] .prompt:not(.term-live)::before{color: transparent}html.term-anim [data-term] [data-term-out]:not(.term-show){visibility: hidden}html.term-anim [data-term] [data-term-out].term-show{animation: ddd-term-output 0.2s steps(3,end) both}@keyframes ddd-term-output{from{opacity: 0}}html.term-anim [data-term] [data-term-out].term-show>*{animation: ddd-term-output 0.25s steps(3,end) both}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(2){animation-delay: 0.09s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(3){animation-delay: 0.18s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(4){animation-delay: 0.27s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(5){animation-delay: 0.36s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(6){animation-delay: 0.45s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(7){animation-delay: 0.54s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(8){animation-delay: 0.63s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(9){animation-delay: 0.72s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(10){animation-delay: 0.81s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(n + 11){animation-delay: 0.9s}.term-caret{display: inline-block;width: 0.55em;height: 1em;margin-left: 2px;background: var(--primary);vertical-align: baseline;transform: translateY(0.12em)}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@danieldeusing/design",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "The danieldeusing terminal design system — framework-agnostic CSS tokens, components, and a vanilla-JS runtime for the CRT/JetBrains-Mono look used across danieldeusing.de, seedr, and briefs.",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/runtime/terminal.js CHANGED
@@ -23,8 +23,24 @@
23
23
 
24
24
  export function initTerminal() {
25
25
  if (typeof window === "undefined") return;
26
- if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
27
- // honour the manual kill-switch (components.css html.anim-off)
26
+
27
+ // Animation policy: an explicit pick (localStorage "anim", e.g. from a footer
28
+ // toggle) wins over the OS setting. "off" — or no pick while the OS prefers
29
+ // reduced motion — disables every animation by marking html.anim-off
30
+ // (components.css then kills keyframes and hides the cursor). An explicit "on"
31
+ // animates even when the OS prefers reduced motion.
32
+ let animPref = null;
33
+ try {
34
+ animPref = localStorage.getItem("anim");
35
+ } catch {
36
+ /* localStorage can throw in private mode / sandboxed frames */
37
+ }
38
+ const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
39
+ if (animPref === "off" || (animPref === null && prefersReduced)) {
40
+ document.documentElement.classList.add("anim-off");
41
+ return;
42
+ }
43
+ // already gated off pre-paint (e.g. by an inline script) — respect it
28
44
  if (document.documentElement.classList.contains("anim-off")) return;
29
45
 
30
46
  document.documentElement.classList.add("term-anim");
@@ -75,7 +91,10 @@ export function initTerminal() {
75
91
  if (offscreen) prompt.classList.add("term-live");
76
92
  else await typePrompt(prompt);
77
93
  }
78
- await revealOutputs(section, offscreen);
94
+ // reveal the box and let its rows cascade in, but don't await it: the box
95
+ // animation runs in parallel so the next prompt keeps typing and nothing
96
+ // waits on a box finishing.
97
+ void revealOutputs(section, offscreen);
79
98
  };
80
99
 
81
100
  // sections play one after another, in the order they were triggered
package/src/components.css CHANGED
@@ -240,10 +240,9 @@ html.anim-off *,
240
240
  html.anim-off *::before,
241
241
  html.anim-off *::after {
242
242
  animation: none !important;
243
- transition: none !important;
244
243
  }
245
244
  html.anim-off .cursor-block {
246
- opacity: 1;
245
+ display: none;
247
246
  }
248
247
 
249
248
  /* ─────────────────────────────────────────────────────────────────────────
@@ -275,6 +274,21 @@ html.anim-off .cursor-block {
275
274
  opacity: 0;
276
275
  }
277
276
  }
277
+ /* a revealed box cascades its direct children (rows/lines) in one by one —
278
+ applies to every card on every page */
279
+ html.term-anim [data-term] [data-term-out].term-show > * {
280
+ animation: ddd-term-output 0.25s steps(3, end) both;
281
+ }
282
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(2) { animation-delay: 0.09s; }
283
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(3) { animation-delay: 0.18s; }
284
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(4) { animation-delay: 0.27s; }
285
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(5) { animation-delay: 0.36s; }
286
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(6) { animation-delay: 0.45s; }
287
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(7) { animation-delay: 0.54s; }
288
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(8) { animation-delay: 0.63s; }
289
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(9) { animation-delay: 0.72s; }
290
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(10) { animation-delay: 0.81s; }
291
+ html.term-anim [data-term] [data-term-out].term-show > *:nth-child(n + 11) { animation-delay: 0.9s; }
278
292
  /* caret at the typing edge (created by runtime/terminal.js) */
279
293
  .term-caret {
280
294
  display: inline-block;