Overview

A retro-inspired pixelation effect using Three.js WebGL shaders. Creates nostalgic 8-bit style reveals with smooth, high-performance animations.

Features

Smooth Transitions A fluid transition from pixelated to clear (or vice versa) using spring physics.

Retro Aesthetic Adds a digital, 8-bit feel to your image reveals.

Performance Optimized Uses efficient shaders to ensure 60fps animations.

Fully Responsive Adapts seamlessly to any container or screen size.

Use Cases

Product Reveals — Start pixelated and reveal the sharp product image on hover.

Gallery Transitions — Add a unique texture to your grid layouts.

Retro Themes — Perfect for 8-bit or brutalist design aesthetics.

Feature Highlights — Draw attention to key visuals as the user interacts.

Properties

• Image: Responsive image source
• Image Fit: Fill, Cover, or Contain
• Strength: Effect intensity (0-2)
• Pixel Size: Size of pixels (1-100)
• Trigger: Always or On Hover
• Invert Hover: Flip hover logic (visible when Trigger is Hover)

Customization

Image Settings

• Image: Choose your image source
• Image Fit: Select Fill, Cover, or Contain

Effect Settings

• Strength: Effect intensity (0-2)
• Pixel Size: Size of pixels (1-100)

Trigger Options

• Trigger: Choose "Always" or "On Hover"
• Invert: Flip the hover logic

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!

Version

1.0.0