clawd-react/social-preview.html at main · stevysmith/clawd-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280">
<title>clawd-react social preview</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=JetBrains+Mono:wght@500;700&display=swap');
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    width: 1280px;
    height: 640px;
    overflow: hidden;
    background: #0d0d0d;
    font-family: 'Inter', -apple-system, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card {
    display: flex;
    align-items: center;
    gap: 80px;
  }
  .mascot {
    position: relative;
    flex-shrink: 0;
  }
  .sparkle {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: #fde047;
    pointer-events: none;
  }
  .text-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .pkg-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 64px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -2px;
    line-height: 1;
  }
  .tagline {
    font-size: 22px;
    color: #666;
    font-weight: 400;
    line-height: 1.4;
    max-width: 420px;
  }
  .badges {
    display: flex;
    gap: 10px;
    margin-top: 8px;
  }
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: #888;
  }
  .badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C27C5C;
  }
  .badge .dot.blue { background: #60A5FA; }
  .badge .dot.green { background: #22C55E; }
  .install-line {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    color: #555;
    margin-top: 4px;
  }
  .install-line span { color: #C27C5C; }
  .dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #151515 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
  }
</style>
</head>
<body>
  <div class="dot-grid"></div>
  <div class="card">
    <div class="mascot">
      <!-- Clawd at scale=4, u=32, armExtend=48, w=544, h=384. Display at 60% -->
      <svg width="326" height="230" viewBox="-48 0 544 384">
        <!-- Shadow -->
        <ellipse cx="272" cy="368" rx="128" ry="16" fill="rgba(0,0,0,0.15)"/>
        <!-- Body: x=1*32=32, w=12*32=384, h=7*32=224 -->
        <rect x="32" y="0" width="384" height="224" fill="#C27C5C"/>
        <!-- Arm nubs: left x=-0.5*32=-16, right x=13*32=416 -->
        <rect x="-16" y="102" width="48" height="58" fill="#C27C5C"/>
        <rect x="416" y="102" width="48" height="58" fill="#C27C5C"/>
        <!-- Left eye: x=3.5*32=112 -->
        <rect x="112" y="48" width="32" height="64" fill="#1a1a1a"/>
        <!-- Right eye: x=9.5*32=304 -->
        <rect x="304" y="48" width="32" height="64" fill="#1a1a1a"/>
        <!-- Legs: x=2*32=64, 3.8*32=122, 9*32=288, 10.8*32=346 -->
        <rect x="64" y="224" width="38" height="80" fill="#8B5A42"/>
        <rect x="122" y="224" width="38" height="80" fill="#8B5A42"/>
        <rect x="288" y="224" width="38" height="80" fill="#8B5A42"/>
        <rect x="346" y="224" width="38" height="80" fill="#8B5A42"/>
      </svg>
      <div class="sparkle" style="left: -20px; top: 30px;">✦</div>
      <div class="sparkle" style="right: -25px; top: 10px; font-size: 18px; color: #fde04799;">✦</div>
      <div class="sparkle" style="left: 60px; top: -15px; font-size: 14px; color: #fde04766;">✦</div>
    </div>
    <div class="text-side">
      <div class="pkg-name">clawd-react</div>
      <div class="tagline">The Clawd mascot as a drop-in React component</div>
      <div class="install-line">$ npm install <span>clawd-react</span></div>
      <div class="badges">
        <div class="badge"><div class="dot"></div>React</div>
        <div class="badge"><div class="dot blue"></div>TypeScript</div>
        <div class="badge"><div class="dot green"></div>Framer Motion</div>
      </div>
    </div>
  </div>
</body>
</html>