Shader Pro v1

A professional styling studio for digital product assets.

Overview

Shader Pro is a client-side web application designed to streamline the creation of high-quality product marketing assets. It provides a real-time composition environment where users can upload screenshots or product images and apply sophisticated styling effects including glassmorphism, directional lighting, and multi-layered shadowing.

The application operates entirely within the browser, ensuring zero latency and complete privacy for uploaded assets. It features a batch processing engine capable of styling and exporting multiple images simultaneously.

Interface Showcase

Key Capabilities

Rendering Engine

• Dual-Layer Shadows: Configurable primary and secondary shadow layers for depth simulation (Drop Shadow or Box Shadow modes).
• Directional Lighting: Global light source control with interactive on-screen manipulation.
• Glassmorphism: Real-time backdrop blur and transparency processing.
• Smart Layouts: Automated aspect ratio resizing and scale fitting.

Batch Processing

• Multi-File Support: Upload and process dozens of images in a single session.
• State Persistence: Styling settings persist across the entire batch.
• ZIP Export: Automated archiving of processed assets into a single downloadable ZIP file.

Customization

• Cutout Mode: Specialized rendering for transparent PNGs (logos, isolated products).
• Card Mode: Standard containerized rendering for screenshots and UI mocks.
• Granular Control: Pixel-perfect control over border radius, stroke width, opacity, and color gradients.

Technical Architecture

The application is built on a modern React 19 stack, leveraging Vite for build tooling and TypeScript for type safety.

• Framework: React 19 (Hooks-based architecture)
• Styling: Tailwind CSS (Utility-first with dark mode support)
• Imaging: html-to-image for canvas rasterization
• Compression: jszip for client-side batch archiving
• Icons: Lucide React

Local Development

To run this project locally, follow these steps:

1. Clone the repository

   git clone https://github.com/dovvnloading/Shader-Pro-v1.git
   cd Shader-Pro-v1

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Build for production

   npm run build

License

This project is open source and available under the MIT License.