# Art Gallery

An editorial scroll: full-bleed classic paintings alternate with big rounded display type that *melts* — each line deeper in a block dissolves harder, letterforms collapsing into ink blobs through a gooey SVG filter, like wet paint refusing to hold a word.

## Usage

```vue
<script setup lang="ts">
  import ArtGallery from '~/components/ui/art-gallery/ArtGallery.vue';
</script>

<template>
  <ArtGallery class="h-150" />
</template>
```

## Custom panels

```vue
<ArtGallery
  :panels="[
    {
      type: 'image',
      src: '/paintings/prometheus.jpg',
      alt: 'Prometheus Bound',
    },
    {
      type: 'lines',
      lines: ['Ground Pigment', 'Falling Shadow', 'Held Silence'],
    },
    {
      type: 'paragraph',
      text: 'We collect the paintings that hold their breath.',
    },
  ]"
/>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        panels
      </code>
    </td>
    
    <td>
      <code>
        ArtGalleryPanel[]
      </code>
    </td>
    
    <td>
      curated defaults
    </td>
    
    <td>
      <code>
        image
      </code>
      
       | <code>
        lines
      </code>
      
       | <code>
        paragraph
      </code>
      
       panels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional classes
    </td>
  </tr>
</tbody>
</table>

The melt uses `feGaussianBlur` + an alpha-contrast `feColorMatrix` — pure SVG, no canvas — so the text stays selectable markup underneath.