Dithered Image — Motion Blocks

Preview

WebGL dithered image with Bayer, halftone, and void-and-cluster threshold maps.

Attributes

Installation

pnpm dlx motion-blocks add dithered-image

npx motion-blocks add dithered-image

bunx --bun motion-blocks add dithered-image

yarn dlx motion-blocks add dithered-image

Usage

---import "@/components/motion-blocks/dithered-image-element.ts";--- <motion-dithered-image  image="/path/to/image.jpg"  dither-map="bayer4x4"  pixel-size="1"  color="#6c87bc"  background-color="#17181A"  threshold="0.0"  class="w-full h-[400px]"/>

import "@/components/motion-blocks/dithered-image-element.ts"; export default function Page() {  return (    <motion-dithered-image      image="/path/to/image.jpg"      ditherMap="bayer4x4"      pixelSize={1}      color="#6c87bc"      backgroundColor="#17181A"      threshold={0.0}      className="w-full h-[400px]"    />  );}

<script setup>import "@/components/motion-blocks/dithered-image-element.ts";</script> <template>  <motion-dithered-image    image="/path/to/image.jpg"    dither-map="bayer4x4"    :pixel-size="1"    color="#6c87bc"    background-color="#17181A"    :threshold="0.0"    class="w-full h-[400px]"  /></template>

<script>  import "@/components/motion-blocks/dithered-image-element.ts";</script> <motion-dithered-image  image="/path/to/image.jpg"  ditherMap="bayer4x4"  pixelSize={1}  color="#6c87bc"  backgroundColor="#17181A"  threshold={0.0}  class="w-full h-[400px]"/>

<script type="module" src="/components/motion-blocks/dithered-image-element.js"></script> <motion-dithered-image  image="/path/to/image.jpg"  dither-map="bayer4x4"  pixel-size="1"  color="#6c87bc"  background-color="#17181A"  threshold="0.0"  class="w-full h-[400px]"/>

API Reference

Attribute	Type	Default
`image`	`string`	`""`
`dither-map`	`bayer4x4 \| bayer8x8 \| halftone \| voidAndCluster`	`"bayer4x4"`
`pixel-size`	`number`	`1`
`color`	`string`	`"#6c87bc"`
`background-color`	`string`	`"#17181A"`
`threshold`	`number`	`0.0`