Skip to content

🎨 A powerful and intuitive gradient generator built with React and Canvas API. Create beautiful gradients with various shapes, directions, and export them as high-quality PNG images.

License

Notifications You must be signed in to change notification settings

macaokim98/react-gradient-generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

2 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🎨 React Gradient Generator | λ¦¬μ•‘νŠΈ κ·ΈλΌλ°μ΄μ…˜ 생성기

A powerful and intuitive gradient generator built with React and Canvas API. Create beautiful gradients with various shapes, directions, and export them as high-quality PNG images.

React와 Canvas API둜 κ΅¬μΆ•λœ κ°•λ ₯ν•˜κ³  직관적인 κ·ΈλΌλ°μ΄μ…˜ μƒμ„±κΈ°μž…λ‹ˆλ‹€. λ‹€μ–‘ν•œ λ„ν˜•κ³Ό λ°©ν–₯으둜 μ•„λ¦„λ‹€μš΄ κ·ΈλΌλ°μ΄μ…˜μ„ λ§Œλ“€κ³  κ³ ν’ˆμ§ˆ PNG μ΄λ―Έμ§€λ‘œ 내보낼 수 μžˆμŠ΅λ‹ˆλ‹€.

React Gradient Generator Demo

✨ Features | μ£Όμš” κΈ°λŠ₯

🎨 Color Controls | 색상 μ œμ–΄

  • Color Picker: Advanced color selection with HSL and RGB support
  • Start & End Colors: Define gradient color points with precision
  • Real-time Preview: See changes instantly as you adjust colors

πŸ“ Shape Options | λ„ν˜• μ˜΅μ…˜

  • Rectangle (μ§μ‚¬κ°ν˜•): Standard rectangular gradients
  • Square (μ •μ‚¬κ°ν˜•): Perfect square gradients
  • Circle (μ›ν˜•): Circular gradient shapes

πŸ”„ Gradient Directions | κ·ΈλΌλ°μ΄μ…˜ λ°©ν–₯

  • Horizontal (μˆ˜ν‰): Left to right gradients
  • Vertical (수직): Top to bottom gradients
  • Diagonal Down (λŒ€κ°μ„  β†˜): Top-left to bottom-right
  • Diagonal Up (λŒ€κ°μ„  β†—): Bottom-left to top-right
  • Radial (μ›ν˜•): Center-outward radial gradients

πŸ“ Size Controls | 크기 μ œμ–΄

  • Width: 100px - 800px range with slider control
  • Height: 100px - 600px range with slider control
  • Real-time Adjustment: Dynamic resizing with live preview

πŸ’Ύ Export Features | 내보내기 κΈ°λŠ₯

  • High-quality PNG: 2x resolution for crisp exports
  • Instant Download: One-click file saving
  • Optimized Canvas: Hardware-accelerated rendering

πŸš€ Quick Start | λΉ λ₯Έ μ‹œμž‘

Prerequisites | ν•„μˆ˜ 쑰건

  • Node.js 18+ installed
  • npm or yarn package manager

Installation | μ„€μΉ˜

# Clone the repository | μ €μž₯μ†Œ 클둠
git clone https://github.com/[username]/react-gradient-generator.git
cd react-gradient-generator

# Install dependencies | μ˜μ‘΄μ„± μ„€μΉ˜  
npm install

# Start development server | 개발 μ„œλ²„ μ‹œμž‘
npm run dev

One-Click Launchers | 원클릭 μ‹€ν–‰κΈ°

For convenience, we provide multiple launcher scripts that automatically handle server startup:

편의λ₯Ό μœ„ν•΄ μ„œλ²„ μ‹œμž‘μ„ μžλ™μœΌλ‘œ μ²˜λ¦¬ν•˜λŠ” μ—¬λŸ¬ 런처 슀크립트λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€:

Windows

# Batch file | 배치 파일
./launchers/gradient-generator-start.bat

# PowerShell script | PowerShell 슀크립트  
./launchers/gradient-generator-start.ps1

# VBS script | VBS 슀크립트
./launchers/gradient-generator-start.vbs

Linux/Mac

# Shell script | μ…Έ 슀크립트
./launchers/gradient-generator-start.sh

# Desktop shortcut | λ°μŠ€ν¬νƒ‘ λ°”λ‘œκ°€κΈ°
./launchers/gradient-generator.desktop

Cross-Platform | 크둜슀 ν”Œλž«νΌ

# Node.js launcher | Node.js 런처
node ./launchers/gradient-launcher.js

Manual Commands | μˆ˜λ™ λͺ…λ Ήμ–΄

# Development server | 개발 μ„œλ²„
npm run dev

# Production build | ν”„λ‘œλ•μ…˜ λΉŒλ“œ  
npm run build

# Preview production build | ν”„λ‘œλ•μ…˜ λΉŒλ“œ 미리보기
npm run preview

# Lint code | μ½”λ“œ 검사
npm run lint

πŸ› οΈ Technology Stack | 기술 μŠ€νƒ

  • Frontend: React 19+ with Hooks
  • Build Tool: Vite 7+ for fast development
  • Styling: Pure CSS with CSS Grid and Flexbox
  • Canvas: HTML5 Canvas API for rendering
  • Color Picker: react-color for advanced color selection
  • File Export: file-saver for PNG downloads
  • Development: ESLint for code quality

πŸ“± Browser Support | λΈŒλΌμš°μ € 지원

  • βœ… Chrome 80+
  • βœ… Firefox 75+
  • βœ… Safari 13+
  • βœ… Edge 80+

πŸ—οΈ Project Structure | ν”„λ‘œμ νŠΈ ꡬ쑰

react-gradient-generator/
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/          # React components | React μ»΄ν¬λ„ŒνŠΈ
β”‚   β”‚   β”œβ”€β”€ ColorPicker.jsx     # Color selection component
β”‚   β”‚   β”œβ”€β”€ DirectionSelector.jsx # Gradient direction controls  
β”‚   β”‚   β”œβ”€β”€ GradientPreview.jsx   # Canvas preview component
β”‚   β”‚   β”œβ”€β”€ ShapeSelector.jsx     # Shape selection controls
β”‚   β”‚   β”œβ”€β”€ SizeController.jsx    # Size adjustment controls
β”‚   β”‚   └── DownloadButton.jsx    # PNG export functionality
β”‚   β”œβ”€β”€ hooks/               # Custom React hooks | μ»€μŠ€ν…€ React ν›…
β”‚   β”‚   └── useGradient.js      # Gradient state management
β”‚   β”œβ”€β”€ utils/               # Utility functions | μœ ν‹Έλ¦¬ν‹° ν•¨μˆ˜
β”‚   β”‚   └── gradientGenerator.js # Canvas gradient creation
β”‚   β”œβ”€β”€ App.jsx              # Main application component
β”‚   └── main.jsx             # Application entry point
β”œβ”€β”€ launchers/               # Platform-specific launchers | ν”Œλž«νΌλ³„ μ‹€ν–‰κΈ°
β”œβ”€β”€ public/                  # Static assets | 정적 μžμ‚°
└── screenshots/             # Demo images | 데λͺ¨ 이미지

🎯 Usage Guide | μ‚¬μš© κ°€μ΄λ“œ

Basic Workflow | κΈ°λ³Έ μ›Œν¬ν”Œλ‘œμš°

  1. Select Colors | 색상 선택

    • Choose start color using the color picker
    • Select end color for gradient transition
    • Colors support HSL, RGB, and HEX formats
  2. Choose Shape | λ„ν˜• 선택

    • Rectangle: Standard gradient canvas
    • Square: Constrained to equal dimensions
    • Circle: Circular gradient shape
  3. Set Direction | λ°©ν–₯ μ„€μ •

    • Linear gradients: Horizontal, Vertical, Diagonal
    • Radial gradients: Center-outward pattern
  4. Adjust Size | 크기 μ‘°μ •

    • Use sliders to set width (100-800px)
    • Adjust height (100-600px)
    • Preview updates in real-time
  5. Export | 내보내기

    • Click "PNG λ‹€μš΄λ‘œλ“œ" to save
    • Files exported at 2x resolution for quality
    • Automatic filename with timestamp

Advanced Features | κ³ κΈ‰ κΈ°λŠ₯

Custom Launcher Scripts | μ»€μŠ€ν…€ 런처 슀크립트

All launcher scripts include intelligent features:

  • Server Detection: Checks if development server is running
  • Auto-start: Launches server if not detected
  • Error Handling: Provides helpful error messages
  • Browser Opening: Automatically opens default browser

λͺ¨λ“  런처 μŠ€ν¬λ¦½νŠΈλŠ” μ§€λŠ₯ν˜• κΈ°λŠ₯을 ν¬ν•¨ν•©λ‹ˆλ‹€:

  • μ„œλ²„ 감지: 개발 μ„œλ²„ μ‹€ν–‰ μ—¬λΆ€ 확인
  • μžλ™ μ‹œμž‘: κ°μ§€λ˜μ§€ μ•ŠμœΌλ©΄ μ„œλ²„ μ‹€ν–‰
  • μ—λŸ¬ 처리: 도움이 λ˜λŠ” μ—λŸ¬ λ©”μ‹œμ§€ 제곡
  • λΈŒλΌμš°μ € μ—΄κΈ°: κΈ°λ³Έ λΈŒλΌμš°μ € μžλ™ μ‹€ν–‰

πŸ”§ Development | 개발

Component Architecture | μ»΄ν¬λ„ŒνŠΈ μ•„ν‚€ν…μ²˜

The application follows a modular component structure:

μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ€ λͺ¨λ“ˆμ‹ μ»΄ν¬λ„ŒνŠΈ ꡬ쑰λ₯Ό λ”°λ¦…λ‹ˆλ‹€:

  • App.jsx: Main container and state orchestration
  • useGradient.js: Centralized state management hook
  • Component isolation: Each UI element as separate component
  • Prop drilling avoided: Direct hook consumption in components

Canvas Rendering | Canvas λ Œλ”λ§

High-performance gradient rendering with:

  • Device Pixel Ratio: Automatic high-DPI display support
  • Hardware Acceleration: Optimized Canvas API usage
  • Memory Management: Efficient canvas cleanup
  • Real-time Updates: Debounced rendering for smooth interaction

State Management | μƒνƒœ 관리

// useGradient hook structure
{
  startColor: '#ff6b6b',    // Start gradient color
  endColor: '#4ecdc4',      // End gradient color  
  direction: 'horizontal',   // Gradient direction
  shape: 'rectangle',       // Canvas shape
  size: { width: 400, height: 300 } // Canvas dimensions
}

πŸ“ Contributing | κΈ°μ—¬ν•˜κΈ°

  1. Fork the repository | μ €μž₯μ†Œ 포크
  2. Create feature branch | κΈ°λŠ₯ 브랜치 생성
  3. Commit changes | 변경사항 컀밋
  4. Push to branch | λΈŒλžœμΉ˜μ— ν‘Έμ‹œ
  5. Create Pull Request | Pull Request 생성

πŸ“„ License | λΌμ΄μ„ μŠ€

MIT License - see LICENSE file for details

πŸ™ Acknowledgments | κ°μ‚¬μ˜ 말

  • React Color: For excellent color picker component
  • Vite: For lightning-fast development experience
  • File Saver: For seamless file download functionality

πŸ“ž Support | 지원


Made with ❀️ by [Your Name] | [Your Name]이 ❀️둜 λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€

About

🎨 A powerful and intuitive gradient generator built with React and Canvas API. Create beautiful gradients with various shapes, directions, and export them as high-quality PNG images.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published