Skip to content

component

DitheredImageReveal

By archiv.studio

Details

Summary

Dithered image reveals original on hover

Description

About this Component The Dithered Image Reveal applies a vintage-style digital dither to your images by default, giving them a textured, nostalgic look. On hover, the original image is revealed, creating a smooth, interactive effect. Inspired by classic print dithering and early computer graphics, it blends retro charm with modern interactivity for a uniquely tactile visual experience. Users can optionally invert the hover effect, starting with the original image and revealing the dither instead. Features Hover Interaction Choose between a static reveal or an interactive 3D tilt animation effect Invert Hover Switch: Reverse the effect to start with the original image or reveal the dither on hover. Color Mode Choose between Monochrome or Full Color dithering styles Preview Mode Instantly preview image changes while adjusting controls ( Don’t forget to switch Preview Mode off when finished to return to normal hover interaction ) Dither Controls Pattern Type: Floyd–Steinberg , Atkinson , Ordered , and Random Pixelation: Control the dither size — from fine halftones to large, retro-style pixels Brightness: Adjust brightness balance to create lighter or darker tonal results Quantization: Control color amount — lower makes the image more stylized, higher keeps it realistic Intensity: Mix between the original and dithered image — from subtle texture to full effect Optional Tilt Motion 3D tilt responds naturally to cursor movement Physics-based easing for smooth, realistic motion GPU-accelerated for fluid, high-performance animation Made For Creative image galleries Portfolio showcases Art and design landing pages Retro-inspired websites Interactive experimental layouts Updated default behavior: image now starts dithered, hover reveals original. Added invert hover switch.

Introduction

Dithered image reveal on hover

Rank history

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

120014001600169508/148/218/299/69/14
  • All · #4852