Text Studio Pro

A professional-grade web application for creating stunning image-textured typography with Apple-inspired design and advanced customization tools.

• Dynamic text input with real-time preview
• 25+ premium font families including system fonts
• Font size range: 20-500px with fine control
• Font weight options (100-900) with intermediate values
• Letter spacing and line height adjustments
• Text alignment options (left, center, right, justify)
• Multi-line text support with line breaks
• Text case transformations (uppercase, lowercase, capitalize)
• Text decoration options (underline, strikethrough)
• Advanced text metrics and baseline controls

• Drag & drop image upload with visual feedback
• Support for PNG, JPG, JPEG, GIF, WebP, SVG, AVIF
• Image positioning controls (fit, fill, stretch, tile, custom)
• Brightness, contrast, saturation, and hue adjustments
• Image rotation (0-360°) and flip options
• Blur, sharpen, and noise filters
• Color overlay effects with blend modes
• Image cropping and aspect ratio controls
• Batch image processing capabilities
• Image optimization and compression

• Multi-layer shadow system with unlimited shadows
• Stroke/outline effects with gradient support
• Glow and inner shadow effects
• Bevel and emboss with lighting controls
• Pattern overlays and texture mapping
• Distortion effects (perspective, warp, bulge)
• Animation keyframe system
• Particle effects and dynamic backgrounds
• 3D text rendering with depth and lighting
• Custom filter chains and presets

• Apple-inspired gradient presets (50+ options)
• Custom gradient builder with unlimited stops
• Color picker with HSL, RGB, HEX, and LAB support
• Eyedropper tool for sampling colors from images
• Color harmony generator (complementary, triadic, etc.)
• Accessibility contrast checking (WCAG AA/AAA)
• Color blindness simulation
• Palette management and saving
• Color temperature adjustments
• Advanced color mixing and blending

• Multiple export formats (PNG, JPG, SVG, PDF, WebP)
• Custom resolution settings (1x to 10x for ultra-high DPI)
• Transparent background options
• Batch export with different settings
• Project save/load functionality (JSON format)
• Social media optimized presets
• Print-ready export options
• Vector format preservation
• Lossless compression options
• Cloud storage integration

• Real-time canvas manipulation with zoom and pan
• Undo/Redo system (unlimited history)
• Keyboard shortcuts for power users
• Touch gestures for mobile devices
• Grid and ruler overlays with snapping
• Layer management system
• Non-destructive editing workflow
• Live collaboration features
• Version control and branching
• Plugin system for custom effects

├── backend/
│   └── index.ts             # Main Hono server
├── frontend/
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # React frontend entry point
│   ├── components/
│   │   └── App.tsx          # Main application component
│   └── style.css            # Custom styles
└── README.md

• Backend: Hono (TypeScript)
• Frontend: React 18.2.0 with TypeScript
• Styling: TailwindCSS
• Canvas: HTML5 Canvas for image processing

1. Upload an image using the file input
2. Enter your desired text
3. Adjust text size and font as needed
4. See the real-time preview of your image-textured text
5. Download the result as a PNG image

The application uses HTML5 Canvas to:

1. Render the text with the selected font and size
2. Apply the uploaded image as a texture using globalCompositeOperation
3. Create a clipping mask effect where the image only shows through the text
4. Generate a downloadable result