Motion Core

Canvas

Pixelated Image

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

ogl

Installation

Install the component

Run the following command to install the component and its dependencies: 
npx @motion-core/cli add pixelated-image
npx @motion-core/cli add pixelated-image
pnpm dlx @motion-core/cli add pixelated-image
pnpm dlx @motion-core/cli add pixelated-image
bunx @motion-core/cli add pixelated-image
bunx @motion-core/cli add pixelated-image
yarn dlx @motion-core/cli add pixelated-image
yarn dlx @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

2
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/photos/sample-image-14.webp"
	class="h-full min-h-96 w-full"
	{initialGridSize}
	{stepDuration}
/>

<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/photos/sample-image-14.webp"
	class="h-full min-h-96 w-full"
	{initialGridSize}
	{stepDuration}
/>

Props

PixelatedImage

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