Skip to main content

Monotone Image Gallery

Professional retro-styled images with vibrant monotone colors

Customize Effects

Recommended: 15% for subtle, 30% for medium, 45% for strong

Live Preview

Live preview

Image Variations

Purple Hero

Purple hero

Cyan Feature

Cyan feature

Orange Accent

Orange accent

Grayscale Classic

Grayscale classic

Component Presets

Hero Image

Hero preset
<HeroImage
  src="/hero.jpg"
  alt="Hero"
/>

Feature Icon

Feature preset
<FeatureIcon
  src="/icon.svg"
  alt="Feature"
  size={200}
/>

Avatar Image

Avatar preset
<AvatarImage
  src="/avatar.jpg"
  alt="User"
/>

CSS-Only Effects

.monotone-purple
.monotone-cyan
.monotone-orange
.monotone-grayscale

Implementation Guide

Quick Start

  1. Import the MonotoneImage component
  2. Choose your color scheme (purple, cyan, orange, grayscale)
  3. Select retro effects (grain, scanlines, halftone, vignette)
  4. Adjust intensity (0-0.5 recommended)

Image Requirements

  • High resolution source images (1920x1080 minimum for heroes)
  • Good contrast in original image for best monotone effect
  • WebP format preferred with JPG fallback
  • SVG for icons and patterns

Performance Tips

  • Use priority prop for above-the-fold images
  • Implement responsive sizes with srcset
  • Lazy load images below the fold
  • Cache processed images on CDN
ServoSpeak - AI Speaking Practice Coach | Presentation & Public Speaking Training