Pixelated Image

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

Props

Initial Grid Size

Step Duration

0.200s

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

	type Props = Partial<ComponentProps<typeof PixelatedImage>>;

	let { initialGridSize = 2, stepDuration = 0.2 }: Props = $props();
</script>

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

Props

PixelatedImage

Prop	Type	Default
`src`	`string`	`—`
`initialGridSize`	`number`	`6.0`
`stepDuration`	`number`	`0.15`
`class`	`string`	`""`