npx shadcn@latest add "https://fancycomponents.dev/r/pixelate-svg-filter.json"

Add the PixelateSvgFilter component to your project, pass an id prop to the component (optional), then use the same id prop in the filter CSS property of the container you want to apply the filter to. High-level example:

<PixelateSvgFilter id="pixelate-filter" />
<div style={{ filter: "url(#pixelate-filter)" }}>
 filter will be applied here
</div>

The pixelation effect is achieved using SVG filters. The process works in three steps:

1. The filter divides the input into a grid using feFlood and feComposite operations, where each cell represents a future "pixel"
2. The feTile operation repeats this grid pattern across the entire target area
3. Finally, feColorMatrix and feComposite are used to blend the original image with the grid, creating the pixelated effect

The component accepts two optional props to customize the pixelation effect:

• size (default: 16): Controls the size of each "pixel" in the resulting effect. A larger value creates a more blocky appearance, while a smaller value produces finer pixelation.

• crossLayers (default: false): When enabled, adds two additional filter layers that help prevent visual artifacts:

  • A second layer that ensures full-width coverage by using half-width pixels
  • A third layer that ensures full-height coverage by using half-height pixels

  This is particularly useful when applying dynamic filters where the target area's dimensions may not perfectly align with the pixel grid, preventing unwanted "jumpiness" in the effect.

Please have a look at the following thread for more details. Props to the folks who shared their insights and code!

Text

The filter can be applied to text as well. Hit the refresh button to see the effect.

DemoCode

Ari — Yu

hello@ariyu.co

Creative Director

& Writer

Selected Works

Dreamweaver #93 Dec 2023 Starlight #87 "digital dreams" The Quantum Mirror Press Holograph Vol.5 crystal edition 2020 Byte Flow Vol.12 Neural Canvas #9 Synthmagazin 11/2020 VOID 2020 zine Nebula #4 VOID 量子 + Wave zines Binary Pulse volume 7 Cyber Cascade (self-published)

Safari is unfortunately not supported. If you have any suggestions or ideas for how to make this component work with it, please let us know!

The effect is derived from multiple people's work from this thread.