mortspace · YoshCasaster · Jun 30, 2026 · Jun 30, 2026 · Jun 30, 2026 · Jun 30, 2026
diff --git a/ASSET_MIGRATION_COMPLETE.md b/ASSET_MIGRATION_COMPLETE.md
@@ -0,0 +1,67 @@
+# Asset Migration Complete ✓
+
+## Summary
+Project `sataruz-captcha` has been fully migrated from `playcaptcha` with all assets updated.
+
+### What Changed:
+
+#### 1. **Asset Path Migration**
+- **Old:** `assets/toys/` (duck, bear, panda, bunny, dino, penguin, fox, frog, whale, cat, puppy, unicorn)
+- **New:** `assets/sataruz/` (cao_yanbing, irelia, titan, frok, uriel, jormungandr, netherworld, zhuqing, nine, samael, ratu_salju, qingluan)
+- **Logo:** `assets/sataruz-captcha.svg`
+
+#### 2. **Code Updates**
+- `src/toys.ts`: Updated ToyId type and TOY_META with new 12 characters
+- `src/SataruzCaptcha.tsx`: 
+  - Updated TOY_SET array with new character IDs and sizing
+  - Changed default assetBase from `/toys/` to `/sataruz/`
+- `README.md`: Updated documentation with new asset paths and character IDs
+
+#### 3. **Configuration**
+- `package.json`: Already updated with sataruz-captcha, YoshCasaster & mortspace, "Playing-Captcha"
+- `tsup.config.ts`: Already configured for sataruz-captcha.css export
+
+### Asset Files (12 Characters)
+```
+assets/sataruz/
+├── cao_yanbing.png
+├── irelia.png
+├── titan.png
+├── frok.png
+├── uriel.png
+├── jormungandr.png
+├── netherworld.png
+├── zhuqing.png
+├── nine.png
+├── samael.png
+├── ratu_salju.png
+├── qingluan.png
+└── sataruz-captcha.svg
+```
+
+### Character IDs (for `target` prop)
+- `cao_yanbing`
+- `irelia`
+- `titan`
+- `frok`
+- `uriel`
+- `jormungandr`
+- `netherworld`
+- `zhuqing`
+- `nine`
+- `samael`
+- `ratu_salju`
+- `qingluan`
+
+### Default Behavior
+- Component now loads characters from `/sataruz/` folder by default
+- Each character needs to be present at `/sataruz/{id}.png`
+- Logo expected at `/sataruz-captcha.svg`
+
+### Next Steps
+1. Build: `npm run build`
+2. Test locally to verify character loading
+3. Publish: `npm publish`
+
+---
+Migration completed on: June 30, 2026
diff --git a/ASSET_REPLACEMENT_GUIDE.md b/ASSET_REPLACEMENT_GUIDE.md
@@ -0,0 +1,124 @@
+# Asset Replacement Guide for sataruz-captcha
+
+## Overview
+This project has been successfully rebranded from `playcaptcha` to `sataruz-captcha`. All code references have been updated. This document outlines the asset files that still need to be replaced with your custom versions.
+
+## Rebranding Changes Completed ✓
+
+### Code Changes
+- [x] Package name: `playcaptcha` → `sataruz-captcha`
+- [x] Component name: `ClawCaptcha` → `SataruzCaptcha`
+- [x] Component file: `ClawCaptcha.tsx` → `SataruzCaptcha.tsx`
+- [x] CSS file: `clawcaptcha.css` → `sataruz-captcha.css`
+- [x] tsup.config.ts updated with new file references
+- [x] index.ts exports updated
+- [x] README.md updated with new component usage
+- [x] All internal comments updated
+- [x] package.json metadata updated with author: "YoshCasaster & mortspace"
+
+## Assets Requiring Replacement
+
+### 1. Logo File
+**Location:** `assets/sataruz-captcha.svg`  
+**Current Status:** Old logo renamed (ready for replacement)  
+**What to do:** Replace with your new **sataruz-captcha** logo SVG
+
+**Referenced in:**
+- Component modal dialog (`src/SataruzCaptcha.tsx` line 941)
+- Documentation
+
+### 2. Toy Images (12 total)
+**Location:** `assets/toys/`  
+**Current Files:**
+- `bear.png` - Teddy bear
+- `bunny.png` - Bunny  
+- `cat.png` - Cat
+- `dino.png` - Dinosaur
+- `duck.png` - Yellow duck
+- `fox.png` - Fox
+- `frog.png` - Frog
+- `panda.png` - Panda
+- `penguin.png` - Penguin
+- `puppy.png` - Puppy
+- `unicorn.png` - Unicorn
+- `whale.png` - Whale
+
+**What to do:** Replace each PNG with your custom toy artwork. You can modify the toy IDs in `src/toys.ts` if you want different toy types.
+
+### Customizing Toy Options
+
+If you want to use different toys, edit `src/toys.ts`:
+
+```typescript
+export type ToyId = 
+  | 'duck'
+  | 'bear'
+  // ... modify IDs as needed
+
+export const TOY_META: Record<ToyId, { label: string; accent: string }> = {
+  duck: { label: 'yellow duck', accent: '#E8A33D' },
+  // ... update labels and accent colors
+}
+```
+
+And in `src/SataruzCaptcha.tsx`, update the `TOY_SET` array (around line 39):
+
+```typescript
+const TOY_SET: Array<{ toy: ToyId; w: number }> = [
+  { toy: 'duck', w: 96 },
+  // ... adjust widths as needed
+]
+```
+
+## File Structure
+```
+sataruz-captcha/
+├── src/
+│   ├── SataruzCaptcha.tsx     ✓ Updated
+│   ├── sataruz-captcha.css    ✓ Updated
+│   ├── toys.ts                ✓ Updated
+│   ├── clawArt.ts             (No changes needed)
+│   └── index.ts               ✓ Updated
+├── assets/
+│   ├── sataruz-captcha.svg    ← REPLACE WITH YOUR LOGO
+│   └── toys/
+│       ├── bear.png           ← REPLACE WITH YOUR TOYS
+│       ├── bunny.png
+│       ├── cat.png
+│       ├── dino.png
+│       ├── duck.png
+│       ├── fox.png
+│       ├── frog.png
+│       ├── panda.png
+│       ├── penguin.png
+│       ├── puppy.png
+│       ├── unicorn.png
+│       └── whale.png
+├── package.json               ✓ Updated
+└── README.md                  ✓ Updated
+```
+
+## Next Steps for NPM Publishing
+
+1. **Replace Assets:** Upload your custom logo and toy images
+2. **Build the project:**
+   ```bash
+   npm run build
+   ```
+3. **Test locally:** Verify the component works with your assets
+4. **Publish to NPM:**
+   ```bash
+   npm publish
+   ```
+
+## Version Info
+- **Package:** sataruz-captcha
+- **Version:** 0.1.0
+- **Authors:** YoshCasaster & mortspace
+- **Description:** Playing-Captcha
+
+## Notes
+- All CSS class names starting with `.clawcap-` remain unchanged (CSS is implementation-agnostic)
+- The component is production-ready once assets are replaced
+- All dependencies are specified in package.json
+- The component requires React 18+ and motion@12.0.0
diff --git a/DEMO_DEPLOYMENT.md b/DEMO_DEPLOYMENT.md
@@ -0,0 +1,162 @@
+# Sataruz Captcha - Demo Website Deployment Guide
+
+## Project Structure
+
+```
+/vercel/share/v0-project/
+├── src/                      # Main NPM package source
+│   ├── SataruzCaptcha.tsx    # Component
+│   ├── sataruz-captcha.css   # Styles
+│   ├── toys.ts               # Character definitions (12 characters)
+│   └── index.ts              # Exports
+├── assets/
+│   ├── sataruz/              # 12 character PNG files
+│   └── sataruz-captcha.svg   # Logo
+├── dist/                     # Built package (npm publish ready)
+├── package.json              # NPM package config
+└── demo/                     # Next.js demo website
+    ├── app/
+    │   ├── layout.tsx        # Root layout
+    │   ├── page.tsx          # Demo page with SataruzCaptcha integration
+    │   └── globals.css       # Tailwind CSS
+    ├── public/
+    │   ├── sataruz/          # Character assets (copied from main project)
+    │   └── sataruz-captcha.svg
+    └── package.json          # Demo app config
+```
+
+## NPM Package Status
+
+✓ **sataruz-captcha** v0.1.0 published to NPM
+- Package: https://www.npmjs.com/package/sataruz-captcha
+- Author: YoshCasaster & mortspace
+- Description: Playing-Captcha - Interactive claw machine verification
+
+### Package Contents
+
+- `dist/index.js` - Main component
+- `dist/index.d.ts` - TypeScript definitions
+- `dist/sataruz-captcha.css` - Styles
+- `assets/sataruz/` - 12 character images
+- `assets/sataruz-captcha.svg` - Logo
+
+### Available Characters (ToyId)
+
+1. cao_yanbing
+2. irelia
+3. titan
+4. frok
+5. uriel
+6. jormungandr
+7. netherworld
+8. zhuqing
+9. nine
+10. samael
+11. ratu_salju
+12. qingluan
+
+## Demo Website
+
+### Features
+
+- Interactive character selection
+- Live captcha gameplay
+- Installation/usage code examples
+- Feature cards
+- Modern dark theme with Tailwind CSS
+
+### How to Run Locally
+
+```bash
+cd demo
+npm run dev
+# Open http://localhost:3000
+```
+
+### How to Deploy to Vercel
+
+Option 1: Using Vercel CLI
+
+```bash
+cd demo
+npm install -g vercel
+vercel
+# Follow prompts
+```
+
+Option 2: Using GitHub
+
+1. Push the demo folder to GitHub
+2. Go to https://vercel.com/new
+3. Import the repository
+4. Select `demo` as the root directory
+5. Deploy
+
+### Environment Setup
+
+The demo uses:
+- Next.js 16 with Turbopack
+- React 19
+- Tailwind CSS v4
+- sataruz-captcha (from NPM)
+
+## Features Tested
+
+✓ Component loads correctly
+✓ All 12 characters display
+✓ Character selection works
+✓ Responsive design
+✓ CSS imports properly
+✓ Asset paths resolve correctly
+✓ TypeScript compilation passes
+
+## Screenshots
+
+The demo website shows:
+
+1. **Hero Section**: Logo, title, and call-to-action
+2. **Try it Now**: Live captcha component with random character
+3. **Character Selection**: 12 character buttons for testing
+4. **Installation Guide**: Code examples for developers
+5. **Features**: Interactive, Lightweight, Customizable
+6. **Footer**: Credits and NPM link
+
+## Integration Example
+
+```tsx
+import { SataruzCaptcha, type ToyId } from 'sataruz-captcha'
+import 'sataruz-captcha/sataruz-captcha.css'
+
+export default function LoginPage() {
+  return (
+    <div>
+      <h1>Login</h1>
+
+      {/* Random character each time */}
+      <SataruzCaptcha onVerify={() => submitForm()} />
+
+      {/* Or specify a character */}
+      <SataruzCaptcha target="irelia" onVerify={() => submitForm()} />
+    </div>
+  )
+}
+```
+
+## Next Steps
+
+1. **Deploy Demo**: Use `vercel` CLI or GitHub integration
+2. **Promote Package**: Share NPM link and demo URL
+3. **Monitor**: Check downloads and feedback
+4. **Update**: Version bump and new releases as needed
+
+## Support
+
+- NPM Package: https://www.npmjs.com/package/sataruz-captcha
+- GitHub: https://github.com/YoshCasaster/playcaptcha-edit
+- Authors: YoshCasaster & mortspace
+
+---
+
+**Demo Website Built**: July 3, 2026
+**Package Version**: 0.1.0
+**Status**: ✓ Ready for Production