Transform your images with a classic duotone effect, powered by Three.js WebGL for smooth performance and stunning visuals.
Custom Duotone Colors
Map the shadows and highlights of your image to any two colors for complete creative control.
Smooth Animation
Add subtle movement to the effect with the Speed control for dynamic, living visuals.
Multiple Image Fit Modes
Choose from Cover, Contain, or Fill to control how your image displays within the component.
Interactive Triggers
Enable hover-based activation with optional invert logic for creative interaction patterns.
Brand Consistency — Tint images to match your brand's color palette across your entire site.
Artistic Direction — Create a cohesive look across a grid of disparate images.
Hero Sections — Add dramatic duotone effects to hero images for visual impact.
Portfolio Galleries — Apply consistent color grading to showcase work professionally.
Image Settings
- Image: Choose your image source
- Image Fit: Select Cover, Contain, or Fill display mode
Color Settings
- Color 1: Set the shadow/dark tones color
- Color 2: Set the highlight/light tones color
Animation & Trigger
- Trigger: Choose Always or On Hover activation
- Invert Hover: Flip the hover logic when trigger is set to Hover
- Speed: Control animation speed (0 for static, up to 5 for fast)
Best Colors — High contrast between Color 1 and Color 2 creates the most dramatic duotone effect. Try complementary colors for bold results.
Static vs Animated — Set Speed to 0 for a clean, static duotone. Increase speed for subtle color shifts that add life.
Hover Effects — Use Hover trigger with Invert to reveal the original image on hover while showing duotone by default.
Image Quality — Use high-resolution images for best results with the WebGL shader.
Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.
Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!
VFX Image Duotone gives you the power to apply professional-grade color grading with zero design software required. The WebGL-powered effect runs smoothly on all devices, and the intuitive controls make it easy to achieve stunning results in seconds.
FramerHub.io 
