pollinations · mentatbot · Feb 3, 2025 · Feb 3, 2025 · Feb 4, 2025 · Feb 4, 2025
diff --git a/live-wallpaper-creator/.gitignore b/live-wallpaper-creator/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/live-wallpaper-creator/README.md b/live-wallpaper-creator/README.md
@@ -0,0 +1,91 @@
+# Live Wallpaper Creator
+
+A web-based tool for creating animated wallpapers with customizable overlays. Built with React and FFmpeg.
+
+## Features
+
+- 🖼️ Upload and manipulate background images
+- 🎞️ Export as GIF or MP4
+- ⌨️ Keyboard shortcuts for common actions
+- 📊 Progress tracking for exports
+- 🎨 Modern dark theme UI
+- ♿ Accessibility features
+
+## Keyboard Shortcuts
+
+- `Ctrl/⌘ + O`: Open file picker
+- `Ctrl/⌘ + S`: Save as GIF
+- `Ctrl/⌘ + Shift + S`: Save as MP4
+- `?`: Toggle help dialog
+
+## Browser Requirements
+
+- Modern browser (Chrome, Firefox, or Edge)
+- HTTPS connection (required for SharedArrayBuffer)
+- WebAssembly support
+
+## Development
+
+### Prerequisites
+
+- Node.js 16+
+- npm or yarn
+
+### Setup
+
+1. Clone the repository
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start development server:
+   ```bash
+   npm run dev
+   ```
+
+### Building
+
+```bash
+npm run build
+```
+
+The built files will be in the `dist` directory.
+
+## Technical Details
+
+- Built with:
+  - React
+  - Material-UI
+  - FFmpeg.wasm
+  - Vite
+
+- Features:
+  - Client-side video processing
+  - Drag and drop interface
+  - Progress tracking
+  - Accessibility support
+  - Keyboard shortcuts
+
+## Browser Support
+
+The app requires:
+- SharedArrayBuffer support
+- WebAssembly support
+- Secure context (HTTPS)
+
+For best results, use:
+- Chrome (latest)
+- Firefox (latest)
+- Edge (latest)
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch
+3. Commit your changes
+4. Push to the branch
+5. Create a Pull Request
+
+## License
+
+MIT License
diff --git a/live-wallpaper-creator/eslint.config.js b/live-wallpaper-creator/eslint.config.js
@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
diff --git a/live-wallpaper-creator/index.html b/live-wallpaper-creator/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin" />
+    <meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp" />
+    <title>Live Wallpaper Creator</title>
+    <script type="module" src="./src/main.jsx"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/live-wallpaper-creator/package.json b/live-wallpaper-creator/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "live-wallpaper-creator",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@ffmpeg/core": "^0.12.6",
+    "@ffmpeg/ffmpeg": "^0.12.7",
+    "@ffmpeg/util": "^0.12.1",
+    "@mui/icons-material": "^6.4.2",
+    "@mui/material": "^6.4.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-draggable": "^4.4.6"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "vite": "^6.0.5"
+  }
+}
diff --git a/live-wallpaper-creator/public/overlays/README.md b/live-wallpaper-creator/public/overlays/README.md
@@ -0,0 +1,36 @@
+# Overlay Assets
+
+This directory contains overlay assets for the Live Wallpaper Creator.
+
+## Structure
+
+```
+overlays/
+├── sparkles/     # Sparkle and glitter effects
+├── effects/      # General visual effects
+├── nature/       # Nature-themed animations
+└── animals/      # Animal animations
+```
+
+## Adding New Overlays
+
+1. Add your GIF/APNG file to the appropriate category directory
+2. Update overlays.json with the new overlay information:
+
+```json
+{
+  "category": [
+    {
+      "name": "Display Name",
+      "file": "filename.gif",
+      "description": "Brief description"
+    }
+  ]
+}
+```
+
+## Requirements
+
+- Files should be transparent GIF or APNG format
+- Keep file sizes reasonable (< 1MB recommended)
+- Use appropriate category or create new one if needed
diff --git a/live-wallpaper-creator/public/overlays/overlays.json b/live-wallpaper-creator/public/overlays/overlays.json
@@ -0,0 +1,34 @@
+{
+  "sparkles": [
+    {
+      "name": "Sparkle Effect",
+      "file": "sparkle.gif",
+      "preview": "previews/sparkle.svg",
+      "description": "Add sparkle effects to your wallpaper"
+    }
+  ],
+  "effects": [
+    {
+      "name": "Glow Effect",
+      "file": "glow.gif",
+      "preview": "previews/glow.svg",
+      "description": "Add a glowing effect"
+    }
+  ],
+  "nature": [
+    {
+      "name": "Falling Leaves",
+      "file": "leaves.gif",
+      "preview": "previews/leaf.svg",
+      "description": "Animated falling leaves effect"
+    }
+  ],
+  "animals": [
+    {
+      "name": "Butterfly",
+      "file": "butterfly.gif",
+      "preview": "previews/butterfly.svg",
+      "description": "Animated butterfly overlay"
+    }
+  ]
+}
diff --git a/live-wallpaper-creator/public/overlays/previews/butterfly.svg b/live-wallpaper-creator/public/overlays/previews/butterfly.svg
diff --git a/live-wallpaper-creator/public/overlays/previews/glow.svg b/live-wallpaper-creator/public/overlays/previews/glow.svg
diff --git a/live-wallpaper-creator/public/overlays/previews/leaf.svg b/live-wallpaper-creator/public/overlays/previews/leaf.svg
diff --git a/live-wallpaper-creator/public/overlays/previews/sparkle.svg b/live-wallpaper-creator/public/overlays/previews/sparkle.svg
diff --git a/live-wallpaper-creator/public/vite.svg b/live-wallpaper-creator/public/vite.svg
diff --git a/live-wallpaper-creator/src/App.css b/live-wallpaper-creator/src/App.css
@@ -0,0 +1,53 @@
+#root {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.canvas-container {
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  margin: 16px;
+}
+
+.overlay-element {
+  position: absolute;
+  cursor: move;
+  user-select: none;
+}
+
+.overlay-element img {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.drag-handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: #90caf9;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.drag-handle.top-left { top: -5px; left: -5px; }
+.drag-handle.top-right { top: -5px; right: -5px; }
+.drag-handle.bottom-left { bottom: -5px; left: -5px; }
+.drag-handle.bottom-right { bottom: -5px; right: -5px; }
+
+.overlay-controls {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  gap: 4px;
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 4px;
+  border-radius: 4px;
+}