Components
Pixelated Canvas
Interactive pixelated image rendering with distortion effects and customizable cell sizes.
Pixelated Canvas
The PixelatedCanvas component creates an interactive pixelated rendering of images with distortion effects that respond to mouse movement. It features customizable cell sizes, shapes, colors, and interactive behaviors.
Usage
Pixelated Canvas
<template>
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
<h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white">Pixelated Canvas</h3>
<MPixelatedCanvas
src="https://picsum.photos/400/300"
:width="400"
:height="300"
:cell-size="8"
class="rounded-lg"
/>
</div>
</template>
Props
src
string required
Source URL of the image to pixelate.
width
number
Width of the canvas in pixels.
height
number
Height of the canvas in pixels.
cellSize
number
Size of each pixelated cell in pixels.
dotScale
number
Scale factor for the dots within cells (0-1).
shape
string
Shape of the pixels: 'circle' or 'square'.
backgroundColor
string
Background color of the canvas.
grayscale
boolean
Whether to render the image in grayscale.
class
string
CSS classes to apply to the canvas element.
responsive
boolean
Whether the canvas should resize with its container.
dropoutStrength
number
Strength of edge dropout effect (0-1).
interactive
boolean
Whether the canvas should respond to mouse interactions.
distortionStrength
number
Strength of the distortion effect.
distortionRadius
number
Radius of the distortion effect in pixels.
distortionMode
string
Type of distortion: 'repel', 'attract', or 'swirl'.
followSpeed
number
Speed at which the effect follows the cursor (0-1).
sampleAverage
boolean
Whether to average neighboring pixels for smoother results.
tintColor
string
Color to tint the image with.
tintStrength
number
Strength of the tint effect (0-1).
maxFps
number
Maximum frames per second for animation.
objectFit
string
How the image should fit within the canvas: 'cover', 'contain', 'fill', or 'none'.
jitterStrength
number
Strength of the jitter effect.
jitterSpeed
number
Speed of the jitter effect.
fadeOnLeave
boolean
Whether the effect should fade out when the cursor leaves.
fadeSpeed
number
Speed of the fade effect (0-1).
Examples
Basic Pixelated Canvas
Pixelated Canvas
Retro-style pixelated images with customizable pixel sizes for nostalgic effects
<template>
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
<h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white">Basic Pixelated Canvas</h3>
<MPixelatedCanvas
src="https://picsum.photos/300/200"
:width="300"
:height="200"
:cell-size="4"
class="rounded-lg"
/>
</div>
</template>
Interactive Pixelated Canvas
Interactive Pixelated Canvas
<template>
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
<h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white">Interactive Pixelated Canvas</h3>
<MPixelatedCanvas
src="https://picsum.photos/400/300?random=1"
:width="400"
:height="300"
:cell-size="6"
:distortion-strength="5"
:distortion-radius="100"
distortion-mode="swirl"
:jitter-strength="3"
class="rounded-lg border border-gray-200 dark:border-gray-700"
/>
</div>
</template>