canvas

Pixelated Image

A media revealer that animates blocky pixel grids which progressively sharpen to full resolution.

@threlte/core @threlte/extras three

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

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