Motion Core

Canvas

Card 3D

A 3D card with rounded corners that displays an image and responds to head tracking for a parallax effect.

@mediapipe/tasks-visionogl

Warning: This component needs camera permission to work properly.

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add card-3d

Import the component

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

Usage

Initializing camera...

Props

3.200
2.000
0.080
0.250
<script lang="ts">
	import { Card3D } from "motion-core";
	import type { ComponentProps } from "svelte";

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

	let {
		width = 3.2,
		height = 2,
		depth = 0.08,
		radius = 0.25,
		showPreview = true,
	}: Props = $props();
</script>

<Card3D
	class="h-full min-h-96 w-full"
	image="/images/demos/sample-2.jpg"
	{width}
	{height}
	{depth}
	{radius}
	{showPreview}
/>

Props

Card3D

PropTypeDefault
image
string —
width
number 3.2
height
number 2
depth
number 0.08
radius
number 0.15
showPreview
boolean false
class
string ""