pixelpeeps 1.0.6 → 2.0.0
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.
- package/README.md +82 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# 🎨 PixelPeeps
|
|
2
|
+
|
|
3
|
+
> Generate unique, deterministic pixel-style avatars from any name
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/pixelpeeps)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
[](https://reactjs.org)
|
|
8
|
+
[](https://www.typescriptlang.org)
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install pixelpeeps
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Quick Start
|
|
17
|
+
|
|
18
|
+
```jsx
|
|
19
|
+
import Avatar from 'pixelpeeps';
|
|
20
|
+
|
|
21
|
+
function UserProfile() {
|
|
22
|
+
return <Avatar name="user@example.com" size={128} />;
|
|
23
|
+
}
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Features
|
|
27
|
+
|
|
28
|
+
- 🎯 **Deterministic** - Same input always generates the same avatar
|
|
29
|
+
- 🎨 **13 Style Variants** - Band, Crescent, Half, Wave, Split, and more
|
|
30
|
+
- 🌈 **Beautiful Palettes** - 100+ built-in color combinations
|
|
31
|
+
- ⚡ **Zero Dependencies** - Lightweight and fast
|
|
32
|
+
- 📱 **Perfect Scaling** - Crisp SVG output at any size
|
|
33
|
+
|
|
34
|
+
## Basic Usage
|
|
35
|
+
|
|
36
|
+
```jsx
|
|
37
|
+
// Simple usage
|
|
38
|
+
<Avatar name="user@example.com" />
|
|
39
|
+
|
|
40
|
+
// Custom styling
|
|
41
|
+
<Avatar
|
|
42
|
+
name="Ada Lovelace"
|
|
43
|
+
size={180}
|
|
44
|
+
colors={["#06b6a4", "#73a9ff"]}
|
|
45
|
+
variant="crescent"
|
|
46
|
+
headShape="circle"
|
|
47
|
+
pixelSize={8}
|
|
48
|
+
/>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Props
|
|
52
|
+
|
|
53
|
+
| Prop | Type | Default | Description |
|
|
54
|
+
|------|------|---------|-------------|
|
|
55
|
+
| `name` | `string` | **required** | Seed for avatar generation |
|
|
56
|
+
| `size` | `number` | `128` | Avatar size in pixels |
|
|
57
|
+
| `colors` | `string \| string[]` | `"random"` | Character colors |
|
|
58
|
+
| `bg` | `string \| string[]` | `"random"` | Background colors |
|
|
59
|
+
| `variant` | `string` | `"auto"` | Style variant |
|
|
60
|
+
| `headShape` | `"circle" \| "square"` | `"circle"` | Head shape |
|
|
61
|
+
| `pixelSize` | `number` | `12` | Background pixel size |
|
|
62
|
+
| `mirrored` | `boolean` | `true` | Mirror background pattern |
|
|
63
|
+
|
|
64
|
+
## Variants
|
|
65
|
+
|
|
66
|
+
- `plain`, `band`, `crescent`, `half`, `split`
|
|
67
|
+
- `swoop`, `diagonal`, `cap`, `ring`, `corner`
|
|
68
|
+
- `arc`, `wave`, `auto` (random)
|
|
69
|
+
|
|
70
|
+
## Live Demo
|
|
71
|
+
|
|
72
|
+
**[pixelpeeps.thecharith.com](http://pixelpeeps.thecharith.com)**
|
|
73
|
+
|
|
74
|
+
Try the interactive playground to experiment with all options!
|
|
75
|
+
|
|
76
|
+
## Why PixelPeeps?
|
|
77
|
+
|
|
78
|
+
Perfect for user profiles, comment systems, team avatars, and anywhere you need consistent, friendly avatars. Same input = same output, every time.
|
|
79
|
+
|
|
80
|
+
## License
|
|
81
|
+
|
|
82
|
+
MIT © [Charith Pramodya](https://thecharith.com)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pixelpeeps",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Deterministic, cute pixel avatars for React. Zero deps. SVG output.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"nice-color-palettes": "^4.0.0",
|
|
36
|
-
"pixelpeeps": "^1.0.
|
|
36
|
+
"pixelpeeps": "^1.0.6"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@types/react": "^19.2.2",
|