Design health

OpenVibe.Codes

94.9 8 files read at 661a4df, Nov 1, 2026.

Spinners0
No reduced motion0
Hand-set timings13
Hand-set curves6
Colours outside the theme7

Where

25 of 26: the ones that cost most, from as many files as possible. Each opens its line on GitHub.

  1. Timingpublic/css/c4.css:51.c4-progress-content{grid-template-rows:0fr;opacity:0;overflow:hidden;transition:grid-template-rows .24s ease,opacity .24s ease}.c4-progress-content.is-open,.c4
  2. Timingpublic/css/c4.css:51.c4-progress-content{grid-template-rows:0fr;opacity:0;overflow:hidden;transition:grid-template-rows .24s ease,opacity .24s ease}.c4-progress-content.is-open,.c4
  3. Curvepublic/css/c4.css:51.c4-progress-content{grid-template-rows:0fr;opacity:0;overflow:hidden;transition:grid-template-rows .24s ease,opacity .24s ease}.c4-progress-content.is-open,.c4
  4. Curvepublic/css/c4.css:51.c4-progress-content{grid-template-rows:0fr;opacity:0;overflow:hidden;transition:grid-template-rows .24s ease,opacity .24s ease}.c4-progress-content.is-open,.c4
  5. Timingpublic/css/chat.css:24.ch-dot.is-busy{background:var(--ch-accent);animation:ch-breathe 1.6s ease-in-out infinite}
  6. Curvepublic/css/chat.css:24.ch-dot.is-busy{background:var(--ch-accent);animation:ch-breathe 1.6s ease-in-out infinite}
  7. Timingpublic/css/chat.css:69.ch-caret{width:14px;height:14px;transition:rotate .2s}
  8. Timingpublic/css/chat.css:77.ch-step.is-new{animation:ch-in .35s ease-out}
  9. Curvepublic/css/chat.css:77.ch-step.is-new{animation:ch-in .35s ease-out}
  10. Timingpublic/css/chat.css:83.ch-dots i{width:6px;height:6px;border-radius:50%;background:var(--ch-accent);animation:ch-hop 1s ease-in-out infinite}
  11. Curvepublic/css/chat.css:83.ch-dots i{width:6px;height:6px;border-radius:50%;background:var(--ch-accent);animation:ch-hop 1s ease-in-out infinite}
  12. Timingpublic/css/chat.css:150.ch-send{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:50%;background:var(--ch-accent);color:var(--ch-on-accent
  13. Timingpublic/css/chat.css:150.ch-send{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:50%;background:var(--ch-accent);color:var(--ch-on-accent
  14. Timingpublic/css/chat.css:172.ch-mode{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:2px 11px;padding:12px 14px;border:1px solid var(--ch-li
  15. Timingpublic/css/chat.css:172.ch-mode{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:2px 11px;padding:12px 14px;border:1px solid var(--ch-li
  16. Timingpublic/css/chat.css:212.ch-idea{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;border-radius:14px;border:1px solid var(--ch-line);background:var(--ch-card);c
  17. Timingpublic/css/chat.css:212.ch-idea{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;border-radius:14px;border:1px solid var(--ch-line);background:var(--ch-card);c
  18. Timingpublic/css/chat.css:248.ch-side{position:fixed;z-index:10060;top:0;right:0;bottom:0;width:min(340px,88vw);translate:100% 0;transition:translate .25s ease;box-shadow:-12px 0 32px rgba(
  19. Curvepublic/css/chat.css:248.ch-side{position:fixed;z-index:10060;top:0;right:0;bottom:0;width:min(340px,88vw);translate:100% 0;transition:translate .25s ease;box-shadow:-12px 0 32px rgba(
  20. Colourpublic/css/chat.css:132.ch-composer{position:relative;margin:0 max(16px,calc((100% - var(--ch-col)) / 2)) 14px;padding:10px 10px 8px 16px;border:1px solid var(--ch-line);border-radius
  21. Colourpublic/css/chat.css:207.ch-spark-view{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(
  22. Colourpublic/css/chat.css:207.ch-spark-view{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(
  23. Colourpublic/css/chat.css:207.ch-spark-view{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(
  24. Colourpublic/css/chat.css:207.ch-spark-view{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(
  25. Colourpublic/css/chat.css:248.ch-side{position:fixed;z-index:10060;top:0;right:0;bottom:0;width:min(340px,88vw);translate:100% 0;transition:translate .25s ease;box-shadow:-12px 0 32px rgba(

Every site · How it is measured · /api/v1/design-health/codes