Components
Loading preview...
This code implements a reusable component, `PixelatedCanvas`, that renders images in a pixelated style. It leverages a custom component (presumably defined elsewhere in the project) to achieve this effect. The component takes an image source URL as input and applies various parameters to control the pixelation, distortion, and visual style. The `PixelatedCanvasDemo` function serves as a simple example showcasing the component's usage. The component processes the image by dividing it into a grid of cells (defined by `cellSize`), each representing a pixel in the final output. It then applies several effects: a 'dropout' effect to randomly remove pixels (`dropoutStrength`), a distortion effect (`distortionStrength`, `distortionRadius`, `distortionMode`), and a jitter effect (`jitterStrength`, `jitterSpeed`). Additionally, a tint effect can be applied (`tintColor`, `tintStrength`). The `interactive` prop suggests the possibility of user interaction, potentially allowing for real-time adjustments or manipulation of the pixel art. The component uses properties to customize the pixel size (`cellSize`), image dimensions (`width`, `height`), shape of pixels (`shape`), background color (`backgroundColor`), and many other visual aspects. This component is suitable for adding a retro or stylized pixel art effect to images in web applications. It could be used in game development, image editing tools, or any application needing a pixel art filter. For example, you could use it to display profile pictures in a pixel art style, create a retro-themed gallery, or add a unique visual effect to website banners.
npx shadcn@latest add https://21st.dev/r/uniquesonu/pixel-art-image-componentimport { PixelatedCanvas } from "@/components/ui/pixel-art-image-component";
export default function DemoOne() {
return (
<div className="mx-auto mt-8">
<PixelatedCanvas
src="https://cloud.appwrite.io/v1/storage/buckets/zugl-media/files/68b827b1002232e16c67/preview?project=zugl"
width={400}
height={500}
cellSize={3}
dotScale={0.9}
shape="square"
backgroundColor="#000000"
dropoutStrength={0.4}
interactive
distortionStrength={3}
distortionRadius={80}
distortionMode="swirl"
followSpeed={0.2}
jitterStrength={4}
jitterSpeed={4}
sampleAverage
tintColor="#FFFFFF"
tintStrength={0.2}
className="rounded-xl border border-neutral-800 shadow-lg"
/>
</div>
);
}