Skip to content

Commit f5df394

Browse files
Kaiming-YKaiming-Y
committed
Refresh research directory cover and layout with a separate AirJelly invitation
1 parent 2614847 commit f5df394

8 files changed

Lines changed: 349 additions & 5 deletions

File tree

‎website/assets/cover/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Proactive companion cover
2+
3+
Original editorial illustration generated with the built-in imagegen tool on 2026-10-04.
4+
Asset: `proactive-companion.png`, transparent PNG. Used only as decorative homepage artwork; it does not represent any paper's architecture or the AirJelly brand mascot.
5+
6+
## Final prompt
7+
8+
Use case: stylized-concept.
9+
Asset type: original website hero illustration for an open research directory called Awesome Proactive Agent. Produce only the illustration, no website mockup and no text.
10+
Primary request: an airy, beautifully composed editorial pixel-art illustration about AI that notices context and takes helpful initiative. A friendly original small sky-blue pixel research companion with two tiny dark eyes, an abstract rounded block body, floating at the center of an open orbital arrangement of three equally important miniature objects: a paper/document, an abstract neural/model tile, and a checkmarked benchmark/chart tile. The companion is original, not a copy of any existing brand mascot. A few tiny blue square sparkles and thin pale blue orbit arcs connect the scene. Subtle mint details on one tile. Restrained, premium, playful and precise.
11+
Style: crisp 2D pixel-inspired graphic illustration, carefully stepped silhouettes and flat colors, light cyan and saturated sky blue, dark navy tiny details. Minimal clean design, generous transparent negative space around the composition, no gradients on the character, no realistic 3D rendering, no heavy outlines, no busy circuitry. Suitable for a sophisticated white-background website inspired by AirJelly's airy blue aesthetic.
12+
Composition: one balanced self-contained floating constellation, all objects fully inside canvas with 12 percent empty margin. Square canvas, central subject large enough to read at 400px display size.
13+
Background: genuinely transparent alpha, no white rectangle, no ground plane, no drop shadow background.
14+
Constraints: absolutely no words, letters, numbers, logos, watermarks, fabricated scientific diagrams, or product interface screenshots.

‎website/assets/cover/proactive-companion.png‎

512 KB
Loading

‎website/build.mjs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ write('catalog.json', JSON.stringify({ ...catalog, selectionGuide: undefined, pa
2828
write('sitemap.xml', `<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${pages.map(p => p[0]).map(path => `<url><loc>https://lowentropyai.github.io${base}${esc(path)}</loc></url>`).join('')}</urlset>`);
2929
write('robots.txt', 'User-agent: *\nAllow: /\nSitemap: https://lowentropyai.github.io/awesome-proactive-agent/sitemap.xml\n');
3030
write('.nojekyll', '');
31-
for (const name of ['style.css', 'app.js', 'theme.js', 'search.mjs', 'resources.mjs', 'favicon.svg', 'social.svg']) { mkdirSync(resolve(out, 'assets'), { recursive: true }); copyFileSync(resolve(root, 'website', name), resolve(out, 'assets', name.endsWith('.mjs') ? name.replace('.mjs', '.js') : name)); }
31+
for (const name of ['style.css', 'experience.css', 'experience.js', 'app.js', 'theme.js', 'search.mjs', 'resources.mjs', 'favicon.svg', 'social.svg']) { mkdirSync(resolve(out, 'assets'), { recursive: true }); copyFileSync(resolve(root, 'website', name), resolve(out, 'assets', name.endsWith('.mjs') ? name.replace('.mjs', '.js') : name)); }
3232
copyFileSync(resolve(root, 'website/assets/lowentropyai.png'), resolve(out, 'assets/lowentropyai.png'));
33+
cpSync(resolve(root, 'website/assets/cover'), resolve(out, 'assets/cover'), { recursive: true });
3334
cpSync(resolve(root, 'website/assets/overviews'), resolve(out, 'assets/overviews'), { recursive: true });
3435
console.log(`Built ${pages.length} directory pages: ${JSON.stringify(catalog.stats)}`);

‎website/experience.css‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
/* Shared visual system: paper white, sky blue, editorial type, quiet motion. */
2+
:root {
3+
--bg: #fbfcfe;
4+
--surface: #fff;
5+
--text: #18212d;
6+
--muted: #667182;
7+
--line: #e3eaf1;
8+
--soft: #f3f7fa;
9+
--accent: #087bbd;
10+
--accent-soft: #eaf7ff;
11+
--sky: #0799e5;
12+
--radius: 13px;
13+
--cover-glow: #d8f1ff;
14+
--cover-grid: #4fa6d322;
15+
--shadow: 0 8px 32px #23496907;
16+
}
17+
html[data-theme=dark] {
18+
--bg: #101820;
19+
--surface: #16212c;
20+
--text: #edf5fc;
21+
--muted: #a4b6c6;
22+
--line: #2b3d4c;
23+
--soft: #1e2d3b;
24+
--accent: #71caff;
25+
--accent-soft: #16384d;
26+
--sky: #68c8ff;
27+
--cover-glow: #16394e;
28+
--cover-grid: #81cafa18;
29+
--shadow: 0 8px 32px #00000014;
30+
}
31+
body { background: var(--bg); }
32+
::selection { background: var(--accent-soft); color: var(--accent); }
33+
.site-header { position: relative; z-index: 5; background: var(--surface); }
34+
.header-inner { gap: 28px; }
35+
.brand strong { letter-spacing: -.5px; }
36+
.brand-project { color: var(--text); }
37+
.brand .brand-proactive { color: var(--accent); }
38+
nav { gap: clamp(16px, 1.7vw, 25px); font-size: 12px; }
39+
nav>a { color: var(--text); }
40+
nav>a:hover { color: var(--accent); }
41+
.add-paper-link { border-radius: 7px; padding: 8px 11px; }
42+
.github-link { border: 0; border-radius: 0; background: transparent; padding: 0; }
43+
.header-actions button { border-radius: 6px; }
44+
.header-actions button:hover { background: var(--soft); }
45+
46+
/* Full-width cover sits above the shared directory shell. */
47+
.cover {
48+
position: relative;
49+
isolation: isolate;
50+
display: grid;
51+
grid-template-columns: 1.1fr 1fr;
52+
align-items: center;
53+
column-gap: 20px;
54+
padding: 52px 40px 0;
55+
border-bottom: 1px solid var(--line);
56+
}
57+
.cover::before {
58+
content: '';
59+
position: absolute;
60+
inset: 0 -40px;
61+
z-index: -2;
62+
background: radial-gradient(ellipse at 78% 39%, var(--cover-glow), transparent 48%), var(--surface);
63+
}
64+
.cover::after {
65+
content: '';
66+
position: absolute;
67+
inset: 0 -40px;
68+
z-index: -1;
69+
pointer-events: none;
70+
background: radial-gradient(var(--cover-grid) 1px, transparent 1px) 0 0 / 22px 22px;
71+
mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
72+
}
73+
.cover-copy { position: relative; z-index: 1; padding-bottom: 26px; }
74+
.cover-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 600; letter-spacing: 1.8px; color: var(--muted); margin-bottom: 26px; }
75+
.pixel-mark { display: inline-block; width: 7px; height: 7px; background: var(--sky); box-shadow: 7px -7px 0 var(--sky), 7px 7px 0 var(--sky), 14px 0 0 var(--sky); margin-right: 14px; flex: 0 0 7px; }
76+
.cover-prelude { font: italic 24px/1.45 Georgia, 'Times New Roman', serif; letter-spacing: -.6px; color: var(--text); margin-bottom: 12px; }
77+
.cover h1 { font-size: clamp(56px, 6.1vw, 86px); line-height: 1.05; letter-spacing: -.05em; font-weight: 750; }
78+
.cover-proactive { color: var(--sky); }
79+
.cover-description { max-width: 440px; font-size: 15px; line-height: 1.8; margin: 22px 0 12px; text-wrap: pretty; }
80+
.cover-attribution { max-width: 430px; font-size: 11px; line-height: 1.7; margin-bottom: 22px; color: var(--muted); }
81+
.cover-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
82+
.cover-cta, .airjelly-cta { display: inline-flex; align-items: center; justify-content: center; gap: 25px; padding: 14px 20px; border-radius: 9px; font-size: 12px; font-weight: 600; background: #087fbe; color: white; box-shadow: 0 5px 15px #009be522; transition: background .2s, box-shadow .2s; }
83+
.cover-cta:hover, .airjelly-cta:hover { color: white; background: #05679e; box-shadow: 0 8px 22px #009be533; }
84+
.cover-art { position: relative; min-width: 0; width: 100%; max-width: 460px; justify-self: end; display: grid; place-items: center; aspect-ratio: 1; }
85+
.cover-illustration { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
86+
.cover-orbit { position: absolute; inset: 16%; border: 1px dashed var(--cover-grid); border-radius: 50%; }
87+
.cover-pixel { position: absolute; display: block; width: 9px; height: 9px; background: var(--sky); opacity: .35; }
88+
.pixel-one { top: 6%; left: 22%; }
89+
.pixel-two { top: 37%; right: 1%; width: 6px; height: 6px; }
90+
.pixel-three { bottom: 12%; left: 8%; width: 13px; height: 13px; }
91+
.cover-art-caption { display: flex; align-items: center; gap: 7px; position: absolute; bottom: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; letter-spacing: 1.8px; color: var(--muted); }
92+
.cover-art-caption span { width: 5px; height: 5px; background: var(--sky); }
93+
.cover-bottom { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 24px; padding: 24px 0; }
94+
.cover-stats { display: flex; gap: 48px; margin: 0; }
95+
.cover-stats>div { display: flex; align-items: baseline; gap: 10px; }
96+
.cover-stats dt { order: 2; font-size: 11px; color: var(--muted); }
97+
.cover-stats dd { margin: 0; font-size: 24px; letter-spacing: -1px; font-weight: 650; font-variant-numeric: tabular-nums; }
98+
.motion-toggle { border: 0; background: transparent; color: var(--muted); font-size: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 8px; }
99+
.motion-toggle:hover { color: var(--accent); background: var(--accent-soft); }
100+
.motion-icon { font-size: 12px; min-width: 12px; }
101+
.cover[data-motion=running] .cover-illustration { animation: companion-float 7s ease-in-out infinite; }
102+
.cover[data-motion=running] .cover-pixel { animation: pixel-drift 6s ease-in-out infinite alternate; }
103+
.cover[data-motion=running] .pixel-two { animation-delay: -2s; }
104+
.cover[data-motion=running] .pixel-three { animation-delay: -4s; }
105+
.cover[data-motion=paused] .cover-illustration, .cover[data-motion=paused] .cover-pixel { animation-play-state: paused; }
106+
@keyframes companion-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
107+
@keyframes pixel-drift { from { transform: translateY(0); opacity: .2; } to { transform: translateY(-10px); opacity: .6; } }
108+
109+
/* Directory rhythm and reading typography are shared across all routes. */
110+
#collection { scroll-margin-top: 20px; }
111+
.directory-layout { gap: 36px; }
112+
.directory-content { padding-top: 42px; padding-bottom: 64px; }
113+
.directory-sidebar { padding-top: 44px; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; }
114+
.sidebar-group { gap: 5px; padding-bottom: 32px; }
115+
.sidebar-group>a { padding: 9px 10px; border-radius: 7px; }
116+
.sidebar-icon { color: var(--accent); }
117+
.sidebar-label { font-size: 10px; letter-spacing: 1.5px; }
118+
.collection-intro { margin-bottom: 22px; }
119+
.collection-intro .eyebrow { color: var(--accent); margin-bottom: 10px; }
120+
.collection-intro h2 { font-size: 28px; letter-spacing: -1px; }
121+
.collection-intro p { margin-top: 7px; font-size: 12px; line-height: 1.8; }
122+
.page-heading h1, .prose h1 { font-size: 36px; letter-spacing: -1.3px; }
123+
.page-heading p { font-size: 13px; }
124+
.search-form { height: 53px; border-radius: 10px; box-shadow: var(--shadow); }
125+
.search-form input { font-size: 13px; }
126+
.search-form button { border-radius: 6px; background: var(--accent-soft); color: var(--accent); padding: 10px 14px; }
127+
.quick-topics { gap: 10px; margin-top: 14px; }
128+
.quick-topics>a { border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px; background: var(--surface); color: var(--muted); }
129+
.quick-topics>a:hover { color: var(--accent); border-color: var(--accent); }
130+
.directory-section { margin-top: 36px; }
131+
.section-heading { margin-bottom: 20px; }
132+
.section-heading h2 { font-size: 21px; letter-spacing: -.7px; }
133+
.section-heading>a { font-size: 11px; }
134+
.section-index { color: var(--accent); font-family: ui-monospace, monospace; font-size: 10px; }
135+
.selected-route-title { font-size: 13px; gap: 10px; }
136+
.route-symbol { padding: 5px; width: 32px; height: 32px; color: var(--accent); background: var(--accent-soft); border-radius: 8px; }
137+
.selected-card { box-shadow: var(--shadow); transition: box-shadow .2s, border-color .2s; }
138+
.selected-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px #1674a50d; }
139+
.selected-body { padding: 18px; }
140+
.selected-card h3 { font-size: 15px; letter-spacing: -.3px; margin: 8px 0 6px; }
141+
.selected-description { font-size: 12px; line-height: 1.8; margin: 12px 0 16px; }
142+
.image-credit { font-size: 9px; line-height: 1.6; }
143+
.paper-meta { font-size: 10px; }
144+
.resource-link { font-size: 10px; padding: 5px 8px; }
145+
.resource-link>span { font-size: 10px; }
146+
.tags>a, .tags>span { font-size: 10px; background: var(--soft); padding: 3px 6px; }
147+
.paper-card { padding: 22px 0; }
148+
.paper-card h3 { font-size: 14px; line-height: 1.65; }
149+
.project-card { padding: 24px; box-shadow: var(--shadow); }
150+
.project-card h2 { font-size: 18px; }
151+
.project-card p { font-size: 13px; }
152+
.prose { font-size: 14px; line-height: 1.9; }
153+
.prose h2 { font-size: 22px; margin-top: 32px; }
154+
.prose h3 { font-size: 17px; }
155+
.prose th { background: var(--soft); }
156+
.prose .markdown-table { border-radius: 9px; }
157+
.collection-map { margin: 40px 0; padding: 28px; background: var(--surface); box-shadow: var(--shadow); }
158+
.collection-map-heading h2 { font-size: 23px; letter-spacing: -.7px; }
159+
.map-route { background: var(--bg); border-radius: 10px; padding: 20px; }
160+
.map-icon { color: var(--accent); }
161+
.map-route strong { font-size: 13px; }
162+
.map-detail { font-size: 11px; }
163+
.initiative-flow>.decision-node { border-color: var(--line); background: var(--accent-soft); }
164+
footer { font-size: 11px; padding: 28px 0; width: calc(100% - 80px); }
165+
166+
/* One product invitation, with an abstract context-to-action illustration. */
167+
.airjelly-feature { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 28px; position: relative; overflow: hidden; margin: 0 0 44px; padding: 40px; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(ellipse at 100% 75%, var(--cover-glow), transparent 65%), var(--surface); }
168+
.airjelly-eyebrow { display: flex; align-items: center; gap: 5px; font-weight: 600; font-size: 10px; color: var(--muted); letter-spacing: 1.5px; margin-bottom: 22px; }
169+
.airjelly-prelude { font: italic 16px/1.5 Georgia, 'Times New Roman', serif; color: var(--text); margin-bottom: 8px; }
170+
.airjelly-copy h2 { font-size: clamp(22px, 2.3vw, 31px); line-height: 1.25; letter-spacing: -1px; }
171+
.airjelly-copy>p:not(.airjelly-prelude) { font-size: 12px; line-height: 1.8; margin: 16px 0 22px; max-width: 430px; }
172+
.airjelly-cta { padding: 12px 17px; font-size: 11px; }
173+
.airjelly-visual { min-width: 0; position: relative; padding: 20px 0; }
174+
.airjelly-window-label, .airjelly-visual-caption { display: block; text-align: center; font-size: 9px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1.5px; color: var(--muted); }
175+
.context-stack { position: relative; height: 200px; max-width: 260px; margin: 25px auto; }
176+
.context-card { position: absolute; width: 80%; padding: 20px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: 0 12px 25px #126b9a0d; font-size: 11px; font-weight: 600; color: var(--text); }
177+
.context-card:first-child { top: 0; left: 0; transform: rotate(-8deg); }
178+
.context-card:last-child { bottom: 0; right: 0; transform: rotate(5deg); }
179+
.context-glyph { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--accent); background: var(--accent-soft); border-radius: 5px; margin-right: 6px; font-size: 17px; }
180+
.context-card i { display: block; height: 5px; background: var(--soft); border-radius: 2px; margin-top: 14px; }
181+
.context-card i+i { margin-top: 7px; width: 65%; }
182+
.context-check { position: absolute; right: 16px; bottom: 16px; width: 22px; height: 22px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border-radius: 50%; }
183+
184+
@media (max-width: 1250px) {
185+
.cover { padding: 55px 20px 0; }
186+
.cover::before, .cover::after { left: -28px; right: -28px; }
187+
footer { width: auto; }
188+
.directory-layout { gap: 28px; }
189+
.selected-body { padding: 15px; }
190+
.selected-card h3 { font-size: 14px; }
191+
.airjelly-feature { padding: 30px; }
192+
}
193+
@media (max-width: 1000px) {
194+
.cover { column-gap: 0; padding: 45px 10px 0; }
195+
.cover h1 { font-size: 64px; }
196+
.cover-prelude { font-size: 20px; }
197+
.cover-description { font-size: 13px; }
198+
.cover-eyebrow { font-size: 8px; }
199+
.cover-stats { gap: 25px; }
200+
.cover-stats>div { gap: 7px; }
201+
.cover-stats dt { font-size: 10px; }
202+
.cover-stats dd { font-size: 22px; }
203+
.cover-bottom { margin-top: 20px; }
204+
.directory-layout { gap: 25px; }
205+
.selected-route-grid { gap: 28px; }
206+
.airjelly-feature { grid-template-columns: 1fr; }
207+
.airjelly-visual { display: none; }
208+
.airjelly-copy>p:not(.airjelly-prelude) { max-width: 480px; }
209+
}
210+
@media (max-width: 760px) {
211+
.header-inner { gap: 12px; }
212+
nav { gap: 6px 12px; }
213+
nav .github-link { padding: 0; border: 0; }
214+
.cover { grid-template-columns: 1fr; padding: 38px 4px 0; text-align: center; }
215+
.cover::before, .cover::after { left: -20px; right: -20px; }
216+
.cover::after { mask-image: linear-gradient(transparent, #000); }
217+
.cover-copy { padding: 0; }
218+
.cover-eyebrow { justify-content: center; font-size: 8px; letter-spacing: .65px; margin-bottom: 21px; }
219+
.cover-prelude { font-size: 20px; letter-spacing: -.3px; }
220+
.cover h1 { font-size: clamp(50px, 10.5vw, 72px); letter-spacing: -.06em; }
221+
.cover-description { max-width: 380px; margin: 20px auto 12px; font-size: 13px; }
222+
.cover-attribution { max-width: 320px; margin: 0 auto 22px; font-size: 10px; }
223+
.cover-actions { justify-content: center; }
224+
.cover-cta { padding: 12px 18px; }
225+
.cover-art { width: min(65%, 300px); justify-self: center; margin: 10px 0; }
226+
.cover-art-caption { font-size: 7px; letter-spacing: 1.2px; bottom: -6px; }
227+
.cover-bottom { margin-top: 24px; padding: 20px 0; flex-wrap: wrap; justify-content: center; gap: 14px; }
228+
.cover-stats { width: 100%; justify-content: center; gap: 36px; }
229+
.cover-stats>div { flex-direction: column; align-items: center; gap: 2px; }
230+
.cover-stats dt { font-size: 9px; }
231+
.cover-stats dd { font-size: 23px; }
232+
.motion-toggle { font-size: 9px; padding: 4px 8px; }
233+
.directory-sidebar { padding: 16px 0; position: static; max-height: none; }
234+
.directory-sidebar .sidebar-group>a { padding: 8px 7px; font-size: 10px; }
235+
.directory-content { padding-top: 28px; padding-bottom: 36px; }
236+
.collection-intro h2 { font-size: 26px; }
237+
.collection-intro p { font-size: 12px; }
238+
.page-heading h1, .prose h1 { font-size: 30px; }
239+
.page-heading p { font-size: 12px; }
240+
.section-heading h2 { font-size: 20px; }
241+
.section-heading>a { font-size: 10px; }
242+
.selected-body { padding: 18px; }
243+
.selected-card h3 { font-size: 15px; }
244+
.collection-map { padding: 22px; margin: 30px 0; }
245+
.airjelly-feature { margin: 30px 0; padding: 28px; }
246+
.airjelly-copy h2 { font-size: 28px; }
247+
.airjelly-prelude { font-size: 15px; }
248+
.airjelly-eyebrow { margin-bottom: 18px; }
249+
}
250+
@media (max-width: 450px) {
251+
.cover::before, .cover::after { left: -16px; right: -16px; }
252+
.cover h1 { font-size: clamp(40px, 13.3vw, 52px); }
253+
.cover-description { max-width: 305px; }
254+
.cover-art { width: 72%; }
255+
.cover-stats { gap: 25px; }
256+
.quick-topics { gap: 6px; }
257+
.quick-topics>a { font-size: 9px; padding: 3px 6px; }
258+
.search-form input { font-size: 12px; }
259+
.selected-card h3 { min-height: 0; }
260+
.airjelly-feature { padding: 24px; }
261+
.airjelly-copy h2 { font-size: 25px; }
262+
}
263+
@media (prefers-reduced-motion: reduce) {
264+
html { scroll-behavior: auto; }
265+
*, *::before, *::after { animation: none !important; transition: none !important; }
266+
.motion-toggle { display: none; }
267+
}

0 commit comments

Comments
 (0)