Motion Core

Pixelated Image

PixelatedImage reveals an image with a retro digital pixelation effect. It starts with large pixel blocks that step down in size (powers of 2) until the full resolution image is revealed.

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add pixelated-image

Import the component

Import the component into your Svelte file: 
import { PixelatedImage } from "$lib/motion-core";
import { PixelatedImage } from "$lib/motion-core";

Usage

<script lang="ts">
	import { PixelatedImage } from "motion-core";
</script>

<PixelatedImage
	src="/images/demos/sample-13.jpg"
	class="h-full min-h-96 w-full"
	initialGridSize={2}
	stepDuration={0.2}
/>

Props

PixelatedImage

PropTypeDefault
src
string —
initialGridSize
number 6.0
stepDuration
number 0.15
class
string ""