Hugging Face's logo

Spaces:
ServiceNow-AI
/
NowAI-Bench
Running

App Files Community
bradsansnow commited on
Commit
df7f292
·
1 Parent(s): 9a74a7d

Add title animation demo with hover effects and accessibility considerations

Browse files
Files changed (2) hide show
  1. mockups/title-anim-demo.html +141 -0
  2. tasks/todo.md +28 -0
mockups/title-anim-demo.html ADDED
@@ -0,0 +1,141 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8"/>
5
+ <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6
+ <title>Title hover animation — black → colors → blue</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700&amp;display=swap" rel="stylesheet"/>
8
+ <style>
9
+ :root {
10
+ --infinite: #032D42; /* rest / black */
11
+ --indigo: #7661FF;
12
+ --blue: #52B8FF; /* FINAL settle color */
13
+ --green: #63DF4E;
14
+ }
15
+
16
+ body {
17
+ font-family: 'Hanken Grotesk', system-ui, sans-serif;
18
+ background: #faf9fb;
19
+ color: var(--infinite);
20
+ margin: 0;
21
+ padding: 64px 48px;
22
+ }
23
+ h1 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
24
+ .sub { color: #5b6b75; font-size: 14px; margin: 0 0 40px; }
25
+ .note { color: #5b6b75; font-size: 13px; max-width: 720px; line-height: 1.5; }
26
+ .note b { color: var(--infinite); }
27
+
28
+ .row {
29
+ display: grid;
30
+ grid-template-columns: 200px 1fr;
31
+ align-items: center;
32
+ gap: 32px;
33
+ padding: 30px 0;
34
+ border-top: 1px solid #E1E8ED;
35
+ }
36
+ .meta b { font-size: 15px; display: block; }
37
+ .meta span { font-size: 12px; color: #5b6b75; }
38
+
39
+ .title {
40
+ font-size: 30px;
41
+ font-weight: 700;
42
+ letter-spacing: -0.02em;
43
+ text-decoration: none;
44
+ cursor: pointer;
45
+ -webkit-background-clip: text;
46
+ background-clip: text;
47
+ }
48
+ .title:focus-visible {
49
+ outline: 2px solid var(--indigo);
50
+ outline-offset: 4px;
51
+ border-radius: 4px;
52
+ }
53
+
54
+ /* =========================================================
55
+ Take A — SWEEP TO BLUE
56
+ One gradient. Window slides L→R: infinite plateau → rainbow
57
+ → blue plateau. Reverses smoothly on un-hover.
58
+ ========================================================= */
59
+ .sweep {
60
+ background-image: linear-gradient(90deg,
61
+ var(--infinite) 0%, var(--infinite) 30%,
62
+ var(--indigo) 42%, var(--green) 52%, var(--blue) 64%,
63
+ var(--blue) 70%, var(--blue) 100%);
64
+ background-size: 320% 100%;
65
+ background-position: 0% 0; /* rest window = infinite plateau */
66
+ color: transparent;
67
+ -webkit-text-fill-color: transparent;
68
+ transition: background-position 0.5s ease; /* smooth revert */
69
+ }
70
+ .sweep:hover, .sweep:focus-visible {
71
+ animation: sweep-to-blue 0.9s ease forwards;
72
+ }
73
+ @keyframes sweep-to-blue {
74
+ 0% { background-position: 0% 0; }
75
+ 100% { background-position: 100% 0; } /* window = blue plateau */
76
+ }
77
+
78
+ /* =========================================================
79
+ Take B — BLOOM, THEN SETTLE TO BLUE
80
+ Colors bloom from center, then fade to solid blue.
81
+ ========================================================= */
82
+ .bloom {
83
+ background-image: radial-gradient(circle at 50% 50%,
84
+ var(--infinite) 0%, var(--infinite) 10%,
85
+ var(--indigo) 34%, var(--green) 58%, var(--blue) 80%, var(--blue) 100%);
86
+ background-position: center;
87
+ background-repeat: no-repeat;
88
+ background-size: 600% 600%;
89
+ color: transparent;
90
+ -webkit-text-fill-color: var(--infinite); /* rest = solid infinite */
91
+ transition: -webkit-text-fill-color 0.4s ease, background-size 0.4s ease; /* smooth revert */
92
+ }
93
+ .bloom:hover, .bloom:focus-visible {
94
+ animation: bloom-settle 1s ease forwards;
95
+ }
96
+ @keyframes bloom-settle {
97
+ 0% { background-size: 600% 600%; -webkit-text-fill-color: var(--infinite); }
98
+ 20% { -webkit-text-fill-color: transparent; }
99
+ 55% { background-size: 130% 130%; -webkit-text-fill-color: transparent; }
100
+ 100% { background-size: 130% 130%; -webkit-text-fill-color: var(--blue); } /* fade to blue */
101
+ }
102
+
103
+ /* accessibility: no motion — jump straight to the final blue, no journey */
104
+ @media (prefers-reduced-motion: reduce) {
105
+ .sweep, .bloom { transition: -webkit-text-fill-color 0.001s; }
106
+ .sweep:hover, .sweep:focus-visible,
107
+ .bloom:hover, .bloom:focus-visible {
108
+ animation: none;
109
+ color: var(--blue);
110
+ -webkit-text-fill-color: var(--blue);
111
+ }
112
+ }
113
+ </style>
114
+ </head>
115
+ <body>
116
+ <h1>Title hover — black → color animation → settles to blue</h1>
117
+ <p class="sub">Hover (or Tab to) each title. Rest = infinite-blue. End-of-animation = bright-blue, held while hovered.</p>
118
+
119
+ <div class="row">
120
+ <div class="meta"><b>A · Sweep → blue</b><span>infinite → rainbow sweep → settles blue · 0.9s</span></div>
121
+ <a class="title sweep" href="#" tabindex="0">EnterpriseOps-Gym</a>
122
+ </div>
123
+ <div class="row">
124
+ <div class="meta"><b>B · Bloom → blue</b><span>colors bloom from center → fade to blue · 1.0s</span></div>
125
+ <a class="title bloom" href="#" tabindex="0">EnterpriseOps-Gym</a>
126
+ </div>
127
+ <div class="row">
128
+ <div class="meta"><b>A · Sweep → blue</b><span>second title</span></div>
129
+ <a class="title sweep" href="#" tabindex="0">EVA-Bench</a>
130
+ </div>
131
+ <div class="row">
132
+ <div class="meta"><b>B · Bloom → blue</b><span>second title</span></div>
133
+ <a class="title bloom" href="#" tabindex="0">EVA-Bench</a>
134
+ </div>
135
+
136
+ <div class="row" style="border-bottom: 1px solid #E1E8ED;">
137
+ <div class="meta"><b>Note</b></div>
138
+ <p class="note"><b>Contrast flag:</b> final blue <code>#52B8FF</code> on white is low-contrast (~2:1, below WCAG AA for text). Fine as a transient hover state, but if titles should pass AA while hovered, settle on a deeper blue like <code>#006DAA</code> instead. Say which.</p>
139
+ </div>
140
+ </body>
141
+ </html>
tasks/todo.md ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Leaderboard Card Fixes — Task List
2
+
3
+ Source: annotated mockup review (2026-06-02). Targets `index.html` lines 161–292.
4
+
5
+ ## EnterpriseOps-Gym card
6
+
7
+ - [ ] **T1 — Clickable title.** Wrap `<h3>EnterpriseOps-Gym</h3>` (L165) in a link to the EOG webpage. Add hover-over info.
8
+ - [ ] **T2 — Drop "cascade".** `Anthropic · cascade` → `Anthropic` (L171).
9
+ - [ ] **T3 — Rename metric label.** `Success rate · Oracle mode` → `Task Success Rate · Oracle mode` (L175).
10
+ - [ ] **T4 — Metric hover.** Add hover-over def on the metric: "A task passes only if all verification conditions are met."
11
+
12
+ ## EVA-Bench card
13
+
14
+ - [ ] **T5 — Clickable title.** Wrap `<h3>EVA-Bench</h3>` (L217) in a link to the EVA webpage. Add hover-over info.
15
+ - [ ] **T6 — Accuracy section label.** `Accuracy` → `EVA-Accuracy` (L224).
16
+ - [ ] **T7 — Accuracy metric tag.** `EVA-A · PASS@3` → `Pass@1` (L225).
17
+ - [ ] **T8 — Accuracy metric hover.** Def: "Scores for accuracy. All values normalized to 0–1 (higher is better). 95% bootstrap confidence intervals shown for each value."
18
+ - [ ] **T9 — Cascade subtitle.** `cascade · mixed` (L230) — keep as-is (annotation just maps it to "Mixed Models | Cascade"; current value already correct). Confirm no change.
19
+ - [ ] **T10 — Experience section label.** `Experience` → `EVA-Experience` (L256).
20
+ - [ ] **T11 — Experience metric tag.** `EVA-X · PASS@3` → `Pass@1` (L257).
21
+ - [ ] **T12 — Experience metric hover.** Def: "Scores for conversational experience. All values normalized to 0–1 (higher is better). 95% bootstrap confidence intervals shown for each value."
22
+ - [ ] **T13 — S2S subtitle.** `Google · S2S` (L262) — keep as-is (annotation maps it to "Google | Speech-to-Speech"; current already correct). Confirm no change.
23
+
24
+ ## Open questions (need answers before implementing)
25
+
26
+ 1. **Title link URLs.** Use same as the "View full leaderboard" links? EOG → `https://enterpriseops-gym.github.io/`, EVA → `https://servicenow.github.io/eva/`. Confirm.
27
+ 2. **Hover mechanism.** Native `title=""` attribute (simple, less styled) vs custom CSS/JS tooltip (accessible, on-brand, more work)? Recommend custom accessible tooltip.
28
+ 3. **T7/T11.** Confirm full replace of `EVA-A · PASS@3` / `EVA-X · PASS@3` with just `Pass@1` (drops the EVA-A/EVA-X code and changes @3 → @1).