An editorial gallery where classic paintings alternate with headline text that melts into ink as it leaves.
$ npx shadcn-vue@latest add "https://nxui.geoql.in/r/art-gallery.json"Keep in mind
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
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.
<script setup lang="ts">
import ArtGallery from '~/components/ui/art-gallery/ArtGallery.vue';
</script>
<template>
<ArtGallery class="h-150" />
</template>
<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.',
},
]"
/>
| Prop | Type | Default | Description |
|---|---|---|---|
panels | ArtGalleryPanel[] | curated defaults | image | lines | paragraph panels |
class | string | '' | Additional classes |
The melt uses feGaussianBlur + an alpha-contrast feColorMatrix — pure SVG, no canvas — so the text stays selectable markup underneath.