Sheaf UI

#Introduction

The image-diff component provides an interactive before/after image comparison slider. Drag the handle to reveal differences between two images - perfect for showcasing edits, transformations, or any visual changes.

#Installation

php artisan sheaf:install image-diff

#Basic Usage

we're using css filters to differ images, you can use diffrent image also

<x-ui.image-diff :aspectRatio="16/9">
    <x-ui.image-diff.before class="blur-sm" src="/before.jpg" alt="Before" />
    <x-ui.image-diff.after src="/after.jpg" alt="After" />
</x-ui.image-diff>

#Aspect Ratios

Control the aspect ratio to match your images.

<x-ui.image-diff :aspectRatio="16/9">...</x-ui.image-diff>
<x-ui.image-diff :aspectRatio="1">...</x-ui.image-diff>
...

#Vertical Orientation

Switch to vertical comparison for top-to-bottom reveals.

<x-ui.image-diff vertical>
    <x-ui.image-diff.before class="grayscale" src="/before.jpg" alt="Before" />
    <x-ui.image-diff.after src="/after.jpg" alt="After" />
</x-ui.image-diff>

#Creative Effects

Use Tailwind filters on the before image for different comparisons.

<x-ui.image-diff.before class="grayscale" src="/photo.jpg" />
<x-ui.image-diff.before class="blur-sm" src="/photo.jpg" />
<x-ui.image-diff.before class="brightness-50" src="/photo.jpg" />
<x-ui.image-diff.before class="sepia" src="/photo.jpg" />

#Component Props

#ui.image-diff

#ui.image-diff.before

#ui.image-diff.after