Fake 3D Image

Warning: Final quality depends heavily on the input image and especially on the generated depth map. Artifacts or wrong depth separation in the map will directly degrade the effect. Different models (for example Apple Depth Pro vs Depth Anything) also produce different depth interpretations, which changes perceived effect intensity.

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add fake-3d-image

Import the component

Import the component into your Svelte file:

import { Fake3DImage } from "$lib/motion-core";

import { Fake3DImage } from "$lib/motion-core";

Generate Depth Map

Choose a source image

Prepare a regular image that has clear depth separation.

Open DepthPro Grayscale

Go to DepthPro Transformers Grayscale.

Compute and download

Upload your image, generate the depth map, then download the grayscale result.

Use both files in component props

Set your image path in `colorSrc` and the generated depth map path in `depthSrc`.

Usage

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

<Fake3DImage
	colorSrc="/images/demos/sample-16.jpg"
	depthSrc="/images/demos/sample-16-depth-map.webp"
	class="h-full min-h-96 w-full"
	sensitivity={0.25}
/>

Props

Fake3DImage

Prop	Type	Default
`colorSrc`	`string`	`—`
`depthSrc`	`string`	`—`
`xThreshold`	`number`	`8`
`yThreshold`	`number`	`8`
`sensitivity`	`number`	`0.25`
`class`	`string`	`""`