Minecraft Rank Prefix Generator

A comprehensive tool for creating custom Minecraft rank prefix images with full control over design elements.

Features

🎨 Font Customization

• System Fonts: Choose from available system fonts
• Google Fonts: Pre-selected game/pixel fonts from Google Fonts
• Custom Upload: Upload your own .ttf, .otf, .woff, or .woff2 font files
• Font Settings: Customize size, weight, style, letter spacing, and text transform

🌈 Background & Gradients

• Gradient Types: Solid, Linear, Radial, and Conic gradients
• Multiple Color Stops: Add unlimited color stops for complex gradients
• Rotation Control: Adjust gradient angle/rotation
• Position Control: Control gradient center for radial/conic gradients

🔷 Shape Options

• Square: Basic rectangular shape
• Rounded: Customizable corner radius
• Pill: Fully rounded ends
• Flag (Left/Right): Triangular flag point on one side
• Hexagon: Six-sided shape
• Chevron: Arrow-like shape with points on both sides
• Custom Padding: Individual or uniform padding control

🖼️ Icon Support

• Pre-Tag Icon: Add a custom icon before the rank text
• Icon Background/Container: Optional background image for the icon
• Size Control: Customize icon and background dimensions
• Spacing: Adjust margin between icon and text

✨ Text Effects

• Text Color: Full color customization
• Stroke/Outline: Optional text stroke with color and width control
• Text Shadow: Customizable shadow with blur, offset, and color

🎯 Border & Shadow

• Border: Optional border with color, width, and style (solid/dashed/dotted)
• Container Shadow: Drop shadow for the entire rank prefix container

📤 Export Options

• Formats: PNG (recommended), JPEG, or WebP
• Quality Scale: 1x to 4x for higher resolution output
• Background: Transparent or custom color
• Download: Save directly to your device
• Copy to Clipboard: Quick copy for immediate use

💾 Preset System

• Save Presets: Store your favorite configurations
• Load Presets: Quickly switch between saved designs
• Local Storage: All presets saved in your browser

Usage

1. Navigate to /rank-prefix-generator
2. Enter your rank name in the Text tab
3. Customize font, background, shape, and other settings using the tabs
4. Preview updates in real-time
5. Export your design when satisfied

Technical Details

Rendering Pipeline

1. Settings are collected from all components
2. Text is measured using canvas API
3. Icons are loaded (if enabled)
4. Dimensions are calculated
5. Canvas is rendered with all layers:
   • Background/gradient
   • Border
   • Icons and icon backgrounds
   • Text with stroke and shadow
6. Output is generated at specified scale
7. Result can be downloaded or copied to clipboard

Browser Compatibility

• Modern browsers with Canvas API support
• FontFace API for custom font loading
• Clipboard API for copy functionality (may require HTTPS)

Performance Considerations

• Real-time preview rendering
• Debounced updates for smooth UX
• High-resolution output generation on demand
• Efficient canvas rendering with proper layer management

Tips for Best Results

1. Fonts: Use bold, clear fonts for better readability at small sizes
2. Gradients: Use contrasting colors for better visibility
3. Text Stroke: Add a dark stroke to light text on light backgrounds
4. Icons: Use square/transparent PNG images for best results
5. Export Scale: Use 2x or higher for crisp images on high-DPI displays
6. Presets: Save multiple designs for different rank tiers

Future Enhancements

• Batch generation for multiple ranks
• Templates/examples gallery
• Animation support (GIF export)
• Texture overlays (Minecraft-style)
• Advanced text effects (glow, inner shadow)
• Pattern fills