Skip to content

Releases: Pepps233/OverlayStudio

v0.2.0

05 Jan 19:04
@Pepps233 Pepps233
v0.2.0
bb1a224

Choose a tag to compare

View all tags
v0.2.0 Latest
Latest

Release Notes

[v0.2.0] - 2026-01-05

Features

Image Blending System

  • Fit Button: Intelligent image blending for linked layers
    • Blends two linked images seamlessly at their connection points
    • Creates a single unified entity that can be moved and rotated as one component
    • Maintains exact positioning of original images
  • Canvas-Based Blending

Zoom Mode for Precision Editing

  • Toggle Zoom Mode: New button above "Upload Custom Image" for precision
    • Visual feedback: Button is highlighted when active
    • Smart activation: Only works when dragging overlays/cosmetics
  • Preview Zoom: LinkedIn Banner Preview zooms 2x and follows cursor during drag operations
    • Main canvas view remains unchanged
    • Auto zoom-out when drag operation completes or mode is disabled
  • Enhanced Workflow: Perfect for precise placement of hats, accessories, and decorative elements

Image Rotation System

  • Rotation Handle: Interactive rotation control for all layer elements
    • Small circular handle appears above selected images
    • Drag-to-rotate interaction with visual feedback
    • Rotation sensitivity lowered for precise adjustments
    • Handle automatically hides when clicking away from the layer

Asset Library Expansion

New Overlays

  • Expanded overlays collection

Asset Organization

  • Comprehensive categorization system:
    • Backgrounds: 5 city landscapes (Golden Gate Bridge, NYC, Seattle, Chicago, Austin)
    • Overlays: 10 animal images (4 cats, 4 dogs, 1 sea lion, 1 seal)
    • Cosmetics: 8 hat variations for character customization

Technical Improvements

Architecture

  • src/utils/opencvBlending.ts for modular image blending utilities
  • Implemented bounding box calculation for optimal canvas sizing
  • Added layer type tracking for context-aware zoom activation
  • Enhanced state management for zoom viewport and blending operations

Removed

  • ONNX runtime dependencies (LaMa-ONNX was too large for inpainting)

Bug Fixes

  • Fixed blending creating oversized white background overlays
  • Fixed zoom mode affecting main canvas instead of preview only
  • Fixed layer positioning after blend operations
  • Fixed images disappearing during zoom mode activation
  • Fixed rotation handle positioning for scaled layers

Documentation

  • Updated README.md
  • Added CONTRIBUTING.md
  • Added LICENSE
Assets 2
Loading

v0.1.0

05 Jan 18:50
@Pepps233 Pepps233
v0.1.0
bd8f62f
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
v0.1.0

Release Notes

[v0.1.0] - 2026-01-02

Core Features

  • Drag-and-Drop Canvas Editor: Intuitive interface for positioning and resizing elements
  • Asset Library: Pre-loaded backgrounds, animal overlays, and cosmetic accessories
  • Custom Image Upload: Support for user-provided images (recommended: 1584 × 396 px)
  • Layer Management: Reorder, lock, and manage multiple layers with ease
  • Smart Snapping: Auto-fit backgrounds to banner dimensions
  • Aspect Ratio Lock: Maintain proportions while resizing
  • Export Options: Download as PNG (lossless) or JPEG (smaller file size)
  • Real-time Preview: See changes instantly in banner and profile mockups

Tech Stack

  • Framework: Next.js 16.1 with App Router
  • UI Library: React 19.2
  • Language: TypeScript 5
  • Styling: Tailwind CSS 4
  • Build Tool: Turbopack

Components

  • CanvasEditor: Main editing interface with layer manipulation
  • AssetLibrary: Categorized asset selection panel
  • PreviewPanel: Real-time banner and profile preview
  • Toolbar: Upload and export functionalities

Assets Included

  • 5 city background images
  • 8 animal overlay images (cats, dogs, seals)
  • 8 cosmetic hat variations

Bugs

Might not work properly on touch screen devices

Acknowledgments

Inspired by ogis.dev by twangodev

Installation

# Clone the repository
git clone https://github.com/Pepps233/OverlayStudio.git
cd OverlayStudio

# Install dependencies
npm install

# Run development server
npm run dev

Contributing

Please see CONTRIBUTING.md for guidelines.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Links

Made with ❤️

⭐ Star Overlay Studio on GitHub!!!

Loading