Skip to content

component

Image Duotone VFX

By FramerHub.io

Details

Summary

VFX Duotone WebGL Three.js Color Grading

Description

VFX Image Duotone Transform your images with a classic duotone effect, powered by Three.js WebGL for smooth performance and stunning visuals. Features 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. Use Cases 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. Customization 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) Quick Tips 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. License Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. Refund Policy 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! Why Designers Love This 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.

Introduction

VFX Duotone WebGL Three.js Color Grading

Rank history

Daily rank per list, from the first snapshot — lower is better.

125015001750188648/148/228/309/79/15
  • All · #8864