@clawlabz/clawskin 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/public/_redirects +0 -1
  3. package/public/app.html +1 -1
  4. package/public/index.html +41 -53
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clawlabz/clawskin",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "type": "module",
5
5
  "description": "Pixel Agent Skin Engine \u2014 Procedural 32\u00d732 character generator with scenes, animations & customization",
6
6
  "keywords": [
package/public/_redirects CHANGED
@@ -1 +0,0 @@
1
- / /app.html 302
package/public/app.html CHANGED
@@ -298,7 +298,7 @@
298
298
 
299
299
  <!-- ══ HUD: Top-Left ══ -->
300
300
  <div class="hud hud-top-left">
301
- <div class="hud-logo">CLAWSKIN</div>
301
+ <a href="https://github.com/clawlabz/clawskin" target="_blank" class="hud-logo" style="text-decoration:none;color:inherit;">CLAWSKIN</a>
302
302
  <div class="hud-mode demo" id="hud-mode">DEMO</div>
303
303
  </div>
304
304
 
package/public/index.html CHANGED
@@ -29,48 +29,6 @@
29
29
  </div>
30
30
  </section>
31
31
 
32
- <!-- ═══ Features ═══ -->
33
- <section class="section">
34
- <h2 class="section-title">✨ Features</h2>
35
- <p class="section-desc">Everything you need to bring your AI agent to life.</p>
36
- <div class="feature-grid">
37
- <div class="feature-card">
38
- <div class="feature-icon">🎨</div>
39
- <div class="feature-title">Character Creator</div>
40
- <div class="feature-desc">5 skin tones, 5 hairstyles, 5 outfits, accessories, and pets. Mix and match to create your unique pixel agent.</div>
41
- </div>
42
- <div class="feature-card">
43
- <div class="feature-icon">🏠</div>
44
- <div class="feature-title">Multiple Scenes</div>
45
- <div class="feature-desc">Cozy office, hacker den, or warm café — each with ambient animations, particles, and mood lighting.</div>
46
- </div>
47
- <div class="feature-card">
48
- <div class="feature-icon">🔄</div>
49
- <div class="feature-title">Live State Sync</div>
50
- <div class="feature-desc">Connect to OpenClaw Gateway via WebSocket. Your pixel agent reflects real AI status — typing, thinking, sleeping.</div>
51
- </div>
52
- <div class="feature-card">
53
- <div class="feature-icon">💬</div>
54
- <div class="feature-title">Speech Bubbles</div>
55
- <div class="feature-desc">Typewriter-effect dialogue bubbles show what your agent is working on. Thought bubbles for thinking mode.</div>
56
- </div>
57
- <div class="feature-card">
58
- <div class="feature-icon">🐱</div>
59
- <div class="feature-title">Pixel Pets</div>
60
- <div class="feature-desc">Add a cat, dog, or robot companion that hangs out with your agent. Because everyone needs a sidekick.</div>
61
- </div>
62
- </div>
63
- </section>
64
-
65
- <!-- ═══ Customizer ═══ -->
66
- <section class="section">
67
- <div>
68
- <h2 class="section-title">🎨 Customize Your Agent</h2>
69
- <p class="section-desc">Click options below to customize in real-time. Changes are reflected instantly in the demo above.</p>
70
- <div id="character-editor"></div>
71
- </div>
72
- </section>
73
-
74
32
  <!-- ═══ Get Started ═══ -->
75
33
  <section class="section">
76
34
  <h2 class="section-title">🚀 Get Started</h2>
@@ -103,23 +61,53 @@
103
61
  </div>
104
62
  </section>
105
63
 
106
- <!-- ═══ Requirements ═══ -->
107
- <section class="section" style="padding-top:0;">
108
- <h2 class="section-title">📋 What You Need</h2>
109
- <div class="feature-grid" style="grid-template-columns:repeat(auto-fit,minmax(220px,1fr));">
64
+ <!-- ═══ Features ═══ -->
65
+ <section class="section">
66
+ <h2 class="section-title">✨ Features</h2>
67
+ <p class="section-desc">Everything you need to bring your AI agent to life.</p>
68
+ <div class="feature-grid">
69
+ <div class="feature-card">
70
+ <div class="feature-icon">🎨</div>
71
+ <div class="feature-title">Character Creator</div>
72
+ <div class="feature-desc">5 skin tones, 5 hairstyles, 5 outfits, accessories, and pets. Mix and match to create your unique pixel agent.</div>
73
+ </div>
74
+ <div class="feature-card">
75
+ <div class="feature-icon">🏠</div>
76
+ <div class="feature-title">Multiple Scenes</div>
77
+ <div class="feature-desc">Cozy office, hacker den, or warm café — each with ambient animations, particles, and mood lighting.</div>
78
+ </div>
79
+ <div class="feature-card">
80
+ <div class="feature-icon">🔄</div>
81
+ <div class="feature-title">Live State Sync</div>
82
+ <div class="feature-desc">Connect to OpenClaw Gateway via WebSocket. Your pixel agent reflects real AI status — typing, thinking, sleeping.</div>
83
+ </div>
110
84
  <div class="feature-card">
111
- <div class="feature-icon">🧩</div>
112
- <div class="feature-title">OpenClaw Gateway</div>
113
- <div class="feature-desc">Any running OpenClaw instance (v1.0+). <a href="https://docs.openclaw.ai" target="_blank" style="color:var(--accent-cyan);">Install OpenClaw →</a></div>
85
+ <div class="feature-icon">💬</div>
86
+ <div class="feature-title">Agent Chat</div>
87
+ <div class="feature-desc">Click any agent to open a chat panel. Talk to your AI directly with real-time streaming responses — per-agent sessions, right from the pixel world.</div>
88
+ </div>
89
+ <div class="feature-card">
90
+ <div class="feature-icon">🐱</div>
91
+ <div class="feature-title">Pixel Pets</div>
92
+ <div class="feature-desc">5 pet types — cat, dog, robot, bird, hamster — each with autonomous AI behavior. Click to interact, drop treats, and watch them roam freely.</div>
114
93
  </div>
115
94
  <div class="feature-card">
116
- <div class="feature-icon">🔐</div>
117
- <div class="feature-title">Auth Token</div>
118
- <div class="feature-desc">If your Gateway has auth enabled, grab the token from <code style="font-size:0.7rem;">~/.openclaw/openclaw.json</code> or run <code style="font-size:0.7rem;">openclaw dashboard</code></div>
95
+ <div class="feature-icon">🎯</div>
96
+ <div class="feature-title">Easter Eggs</div>
97
+ <div class="feature-desc">Click around to discover hidden interactions — cycle weather on windows, check the clock, read the whiteboard, or try the arcade cabinet.</div>
119
98
  </div>
120
99
  </div>
121
100
  </section>
122
101
 
102
+ <!-- ═══ Customizer ═══ -->
103
+ <section class="section">
104
+ <div>
105
+ <h2 class="section-title">🎨 Customize Your Agent</h2>
106
+ <p class="section-desc">Click options below to customize in real-time. Changes are reflected instantly in the demo above.</p>
107
+ <div id="character-editor"></div>
108
+ </div>
109
+ </section>
110
+
123
111
  <!-- ═══ Footer ═══ -->
124
112
  <footer class="footer">
125
113
  <p>
@@ -127,7 +115,7 @@
127
115
  — Part of the <a href="https://github.com/clawlabz/openclaw" target="_blank">OpenClaw</a> ecosystem
128
116
  </p>
129
117
  <p style="margin-top:0.5rem;">
130
- Built with Canvas 2D · Zero Dependencies · <a href="https://github.com/clawlabz/clawskin" target="_blank">⭐ Star on GitHub</a>
118
+ Built by <a href="https://clawlabz.xyz" target="_blank">ClawLabz</a> · <a href="https://github.com/clawlabz/clawskin" target="_blank">⭐ Star on GitHub</a>
131
119
  </p>
132
120
  </footer>
133
121