ASCII Renderer

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/ascii-renderer.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/ascii-renderer.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/ascii-renderer.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/ascii-renderer.json

---
import "@/components/motion-kit/ascii-renderer-element.ts";
---

<motion-ascii-renderer
  image="/images/your-image.jpg"
  density={25.0}
  strength={3.0}
  color="#00ff00"
  background-color="#17181A"
  class="w-full h-[400px]"
/>

import "@/components/motion-kit/ascii-renderer-element.ts";

export default function Page() {
  return (
    <motion-ascii-renderer
      image="/images/your-image.jpg"
      density={25.0}
      strength={3.0}
      color="#00ff00"
      background-color="#17181A"
      class="w-full h-[400px]"
    />
  );
}

<script setup>
import "@/components/motion-kit/ascii-renderer-element.ts";
</script>

<template>
  <motion-ascii-renderer
    image="/images/your-image.jpg"
    :density="25.0"
    :strength="3.0"
    color="#00ff00"
    background-color="#17181A"
    class="w-full h-[400px]"
  />
</template>

<script>
  import "@/components/motion-kit/ascii-renderer-element.ts";
</script>

<motion-ascii-renderer
  image="/images/your-image.jpg"
  density={25.0}
  strength={3.0}
  color="#00ff00"
  background-color="#17181A"
  class="w-full h-[400px]"
/>

<script type="module" src="/components/motion-kit/ascii-renderer-element.js"></script>

<motion-ascii-renderer
  image="/images/your-image.jpg"
  density="25.0"
  strength="3.0"
  color="#00ff00"
  background-color="#17181A"
  class="w-full h-[400px]"
/>