Skip to content

Commit c36e412

Browse files
calesthiocalesthio
committed
Make Monty the Clapper the OpenMontage mascot
Replace the play-button logo in both READMEs with animated SVG versions of Monty, served via <picture> + prefers-color-scheme so the mark reads on GitHub's light and dark themes. Motion uses SMIL animateTransform rather than CSS keyframes so it survives the <img> rendering context without depending on transform-box: view-box. Rebuild the 1280x640 social preview around Monty in the ink/cream/terracotta palette, and refresh its stat row to the current counts (12 pipelines, 100+ tools, 700+ agent skills). The card's source HTML ships alongside it so future count updates are an edit and a re-screenshot.
1 parent 0af32ce commit c36e412

6 files changed

Lines changed: 200 additions & 2 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<p align="center">
2-
<img src="assets/logo.png" alt="OpenMontage" width="200">
2+
<picture>
3+
<source media="(prefers-color-scheme: dark)" srcset="assets/monty-dark.svg">
4+
<img src="assets/monty-light.svg" alt="Monty the Clapper — the official mascot of OpenMontage" width="200">
5+
</picture>
36
</p>
47

8+
<p align="center"><sub><em>Monty the Clapper — the official mascot of OpenMontage</em></sub></p>
9+
510
<h1 align="center">OpenMontage</h1>
611

712
<p align="center"><strong>The first open-source, agentic video production system.</strong></p>

‎README_zh-CN.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<p align="center">
2-
<img src="assets/logo.png" alt="OpenMontage" width="200">
2+
<picture>
3+
<source media="(prefers-color-scheme: dark)" srcset="assets/monty-dark.svg">
4+
<img src="assets/monty-light.svg" alt="Monty the Clapper — OpenMontage 官方吉祥物" width="200">
5+
</picture>
36
</p>
47

8+
<p align="center"><sub><em>Monty the Clapper — OpenMontage 官方吉祥物</em></sub></p>
9+
510
<h1 align="center">OpenMontage</h1>
611

712
<p align="center"><strong>首个开源的，代理化（agentic）的视频制作系统</strong></p>

‎assets/monty-dark.svg‎

Lines changed: 47 additions & 0 deletions
Loading

‎assets/monty-light.svg‎

Lines changed: 47 additions & 0 deletions
Loading

‎assets/social_preview.png‎

61.8 KB
Loading

‎assets/social_preview.source.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<style>
6+
* { margin:0; padding:0; box-sizing:border-box; }
7+
html,body { width:1280px; height:640px; }
8+
body {
9+
background:#171310;
10+
font-family:"Segoe UI", system-ui, sans-serif;
11+
display:flex; align-items:center; justify-content:center;
12+
overflow:hidden; position:relative;
13+
}
14+
/* warm key light behind the mascot */
15+
.glow {
16+
position:absolute; left:150px; top:50%; transform:translateY(-50%);
17+
width:620px; height:620px; border-radius:50%;
18+
background:radial-gradient(circle, rgba(224,112,79,.20) 0%, rgba(224,112,79,.07) 42%, rgba(23,19,16,0) 68%);
19+
}
20+
/* clapper-stripe motif, bottom-right, very quiet */
21+
.motif {
22+
position:absolute; right:0; bottom:0; width:560px; height:360px;
23+
background:repeating-linear-gradient(45deg,#f2ecdf 0 26px, transparent 26px 52px);
24+
opacity:.05;
25+
-webkit-mask-image:radial-gradient(ellipse at 100% 100%, #000 0%, transparent 72%);
26+
mask-image:radial-gradient(ellipse at 100% 100%, #000 0%, transparent 72%);
27+
}
28+
.row { display:flex; align-items:center; gap:76px; position:relative; z-index:2; }
29+
.mark { width:340px; height:340px; flex:none; }
30+
h1 {
31+
font-size:86px; font-weight:700; letter-spacing:-2.5px; color:#f2ecdf; line-height:1;
32+
}
33+
.rule {
34+
width:520px; height:7px; margin:26px 0 24px; border-radius:3px;
35+
background:repeating-linear-gradient(45deg,#f2ecdf 0 9px,#241d15 9px 18px);
36+
opacity:.55;
37+
-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 45%,transparent 100%);
38+
mask-image:linear-gradient(90deg,#000 0%,#000 45%,transparent 100%);
39+
}
40+
p.tag {
41+
font-size:29px; color:#b9ab97; line-height:1.35; max-width:520px; font-weight:400;
42+
}
43+
.stats { margin-top:26px; font-size:22px; color:#e0704f; font-weight:600; letter-spacing:.2px; }
44+
.stats span { color:#6b5c4d; font-weight:400; margin:0 10px; }
45+
.url {
46+
position:absolute; bottom:44px; left:0; right:0; text-align:center;
47+
font-size:19px; color:#6b5c4d; letter-spacing:2.5px; text-transform:uppercase; z-index:2;
48+
}
49+
</style>
50+
</head>
51+
<body>
52+
<div class="glow"></div>
53+
<div class="motif"></div>
54+
55+
<div class="row">
56+
<svg class="mark" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
57+
<defs>
58+
<pattern id="mstr" width="22" height="22" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
59+
<rect width="11" height="22" fill="#241d15"/>
60+
</pattern>
61+
</defs>
62+
<g transform="translate(0,-4)">
63+
<rect x="74" y="156" width="16" height="26" rx="8" fill="#3a2f26" stroke="#f2ecdf" stroke-width="3"/>
64+
<rect x="112" y="156" width="16" height="26" rx="8" fill="#3a2f26" stroke="#f2ecdf" stroke-width="3"/>
65+
<g transform="rotate(-24 46 88)">
66+
<rect x="42" y="64" width="120" height="24" rx="10" fill="#f2ecdf"/>
67+
<rect x="42" y="64" width="120" height="24" rx="10" fill="url(#mstr)"/>
68+
</g>
69+
<rect x="42" y="88" width="120" height="76" rx="14" fill="#241d15" stroke="#f2ecdf" stroke-width="3.5"/>
70+
<rect x="42" y="88" width="120" height="20" rx="10" fill="#f2ecdf"/>
71+
<rect x="42" y="88" width="120" height="20" rx="10" fill="url(#mstr)"/>
72+
<rect x="24" y="116" width="24" height="14" rx="7" fill="#3a2f26" stroke="#f2ecdf" stroke-width="3" transform="rotate(24 36 123)"/>
73+
<rect x="156" y="116" width="24" height="14" rx="7" fill="#3a2f26" stroke="#f2ecdf" stroke-width="3" transform="rotate(-24 168 123)"/>
74+
<circle cx="79" cy="132" r="13" fill="#f2ecdf"/>
75+
<circle cx="123" cy="132" r="13" fill="#f2ecdf"/>
76+
<circle cx="81" cy="133" r="5.5" fill="#241d15"/>
77+
<circle cx="121" cy="133" r="5.5" fill="#241d15"/>
78+
<circle cx="61" cy="146" r="5" fill="#e0704f" opacity=".85"/>
79+
<circle cx="141" cy="146" r="5" fill="#e0704f" opacity=".85"/>
80+
<path d="M93 148 Q101 155 109 148" stroke="#f2ecdf" stroke-width="4" stroke-linecap="round" fill="none"/>
81+
</g>
82+
</svg>
83+
84+
<div>
85+
<h1>OpenMontage</h1>
86+
<div class="rule"></div>
87+
<p class="tag">The first open-source, agentic<br>video production system.</p>
88+
<div class="stats">12 pipelines<span>·</span>100+ tools<span>·</span>700+ agent skills</div>
89+
</div>
90+
</div>
91+
92+
<div class="url">openmontage.video</div>
93+
</body>
94+
</html>

0 commit comments

Comments
 (0)