Cybersoq Background Generator

A modular, maintainable background design tool built with Vite and ES modules.

designer/
├── package.json              # Project dependencies and scripts
├── vite.config.js           # Vite configuration
├── index.html               # Main HTML file
├── index.html.backup        # Original monolithic version
├── public/                  # Static assets
│   ├── logo.svg
│   └── logo-full.svg
└── src/                     # Source code
    ├── main.js              # Entry point
    ├── app.js               # Main app logic & BackgroundGenerator class
    ├── styles.css           # All CSS styles
    ├── utils/               # Shared utilities
    │   ├── colors.js        # Color conversion utilities
    │   ├── random.js        # Seeded random number generation
    │   └── canvas.js        # Canvas drawing helpers
    └── patterns/            # Pattern modules (16 total)
        ├── index.js         # Pattern registry
        ├── geometric.js
        ├── minimal.js
        ├── abstract.js
        ├── waves.js
        ├── dots.js
        ├── grid.js
        ├── orbs.js
        ├── stripes.js
        ├── hexagons.js
        ├── particles.js
        ├── circuit.js
        ├── splash.js
        ├── triangles.js
        ├── bokeh.js
        ├── mesh.js
        └── noise.js

• Node.js 20.19+ (use nvm use 20.19)
• npm 10.8+

# Install dependencies
npm install

# Start dev server (http://localhost:3000)
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

• 1,667 lines in a single HTML file
• 16 draw functions mixed with UI logic
• Repeated utility code
• Hard to test individual functions
• Difficult to debug

• Separated concerns: UI, logic, patterns, utilities
• Reusable utilities: Shared color, random, and canvas helpers
• Independent patterns: Each pattern in its own module
• Easy to maintain: Find and edit specific functionality quickly
• Testable: Each module can be unit tested
• Build optimized: Vite bundles and minifies for production
• Type safety ready: Easy to add TypeScript later

• Adjustable slider (0-100%) controls the number of elements in patterns
• Lower intensity = fewer shapes/lines/dots
• Higher intensity = more dense patterns

• Add decorative shape frames to your design
• Shape automatically matches the current pattern (geometric, blob, circle, hexagon, etc.)
• Full interaction support:
  • Drag to reposition
  • Resize using corner handles
  • Rotate using top handle
  • Delete using red button
• Shapes are empty frames (placeholders for your content)

1. Choose your template size (Instagram, Story, Facebook, Twitter)
2. Select background style and brand colors
3. Pick a design pattern
4. Adjust pattern intensity slider
5. Click "Add Shape Container" to add frames
6. Drag, resize, and rotate containers as needed
7. Download your design

1. Create a new file in src/patterns/ (e.g., gradient.js)
2. Export a function with signature:

   export function drawGradient(ctx, currentSize, designSeed, color1, color2, intensity = 1) {
     // Your drawing code
     // Use intensity to scale element counts: Math.floor(count * intensity)
   }

3. Import and register in src/patterns/index.js:

   import { drawGradient } from './gradient.js';
   
   export const patterns = {
     // ...existing patterns
     gradient: drawGradient
   };

4. Add option to the select in index.html:

   <option value="gradient">Gradient Pattern</option>

5. (Optional) Create matching shape in src/shapes/gradient.js and register in src/shapes/index.js

• seededRandom(seed) - Get consistent random number from seed
• createRandomGenerator(seed) - Create stateful random generator

• hexToRGBA(hex, alpha) - Convert hex color to RGBA string

• roundRect(ctx, x, y, width, height, radius) - Draw rounded rectangle
• getEdgeZones() - Get edge zone definitions for element positioning

The production build:

• Bundles all modules into optimized chunks
• Minifies JS and CSS
• Generates sourcemaps for debugging
• Outputs to dist/ directory

Deploy the dist/ directory to any static hosting service.