Fake 3D Image — Motion Blocks

Preview

Depth-map parallax effect. Move the cursor to shift the image against a grayscale depth map.

Attributes

Installation

pnpm dlx motion-blocks add fake-3d-image

npx motion-blocks add fake-3d-image

bunx --bun motion-blocks add fake-3d-image

yarn dlx motion-blocks add fake-3d-image

Usage

---import "@/components/motion-blocks/fake-3d-image-element.ts";--- <motion-fake-3d-image  color-src="/path/to/image.jpg"  depth-src="/path/to/depth-map.jpg"  x-threshold="8"  y-threshold="8"  sensitivity="0.25"  class="w-full h-[400px]"/>

import "@/components/motion-blocks/fake-3d-image-element.ts"; export default function Page() {  return (    <motion-fake-3d-image      colorSrc="/path/to/image.jpg"      depthSrc="/path/to/depth-map.jpg"      xThreshold={8}      yThreshold={8}      sensitivity={0.25}      className="w-full h-[400px]"    />  );}

<script setup>import "@/components/motion-blocks/fake-3d-image-element.ts";</script> <template>  <motion-fake-3d-image    color-src="/path/to/image.jpg"    depth-src="/path/to/depth-map.jpg"    :x-threshold="8"    :y-threshold="8"    :sensitivity="0.25"    class="w-full h-[400px]"  /></template>

<script>  import "@/components/motion-blocks/fake-3d-image-element.ts";</script> <motion-fake-3d-image  colorSrc="/path/to/image.jpg"  depthSrc="/path/to/depth-map.jpg"  xThreshold={8}  yThreshold={8}  sensitivity={0.25}  class="w-full h-[400px]"/>

<script type="module" src="/components/motion-blocks/fake-3d-image-element.js"></script> <motion-fake-3d-image  color-src="/path/to/image.jpg"  depth-src="/path/to/depth-map.jpg"  x-threshold="8"  y-threshold="8"  sensitivity="0.25"  class="w-full h-[400px]"/>

API Reference

Attribute	Type	Default
`color-src`	`string`	`""`
`depth-src`	`string`	`""`
`x-threshold`	`number`	`8`
`y-threshold`	`number`	`8`
`sensitivity`	`number`	`0.25`