canvas

Card 3D

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

@threlte/core @threlte/extras @mediapipe/tasks-vision three

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...

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

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

Props

Card3D

Prop	Type	Default
`image`	`string`	`—`
`width`	`number`	`3.2`
`height`	`number`	`2`
`depth`	`number`	`0.08`
`radius`	`number`	`0.15`
`showPreview`	`boolean`	`false`
`class`	`string`	`""`