Page Three

1. Simple Image Reveal

Basic usage - create an instance and render an image with halftone effect.

// Create instance with config
$halftone = new HalftoneReveal([
    'direction' => 'bottom',
    'spacing' => 20,
    'duration' => 1.7,
    'width' => '600px',
    'height' => '600px'
]);

// Render image
echo $halftone->renderImage(
    '/media/hero-image.jpg',
    'Hero Image'
);

2. Before/After Image Comparison

Perfect for showcasing transformations, edits, or product improvements.

$comparison = new HalftoneReveal([
    'direction' => 'center',
    'spacing' => 15,
    'width' => '700px',
    'height' => '500px'
]);

echo $comparison->renderComparison(
    '/media/before.jpg',
    '/media/after.jpg',
    'Before Edit',
    'After Edit'
);

3. Animated Image Gallery

Multiple images with staggered reveals - perfect for portfolios and product showcases.

$gallery = new HalftoneReveal([
    'direction' => 'bottom',
    'spacing' => 15,
    'mode' => 'loop'
]);

$images = [
    ['src' => '/media/image1.jpg', 'alt' => 'Image 1'],
    ['src' => '/media/image2.jpg', 'alt' => 'Image 2'],
    ['src' => '/media/image3.jpg', 'alt' => 'Image 3'],
    ['src' => '/media/image4.jpg', 'alt' => 'Image 4']
];

echo $gallery->renderGallery($images, [
    'columns' => 'auto-fit',
    'minWidth' => '300px',
    'gap' => '30px',
    'staggerDelay' => 0.3
]);

4. Hover-Triggered Reveal

One-shot animation triggered on hover - great for interactive cards and portfolios.

$hover = new HalftoneReveal([
    'direction' => 'center',
    'spacing' => 12,
    'duration' => 1.2,
    'mode' => 'oneshot',
    'trigger' => 'hover',
    'width' => '400px',
    'height' => '500px',
    'cssClass' => 'halftone-hover-card'
]);

echo $hover->renderImage(
    '/media/hover-image.jpg',
    'Hover to reveal'
);

Hover to Reveal

5. Integration with Plutonium CMS Media

Use with your CMS media objects for dynamic content.

// In your theme template
$halftone = new HalftoneReveal([
    'direction' => 'bottom',
    'spacing' => 20,
    'width' => '100%',
    'height' => '600px'
]);

// Get media from CMS
$mediaManager = new MediaManager();
$heroImage = $mediaManager->getMediaById(123);

// Render with CMS data
echo $halftone->renderImage(
    $heroImage->getUrl(),
    $heroImage->getTitle()
);

// Or with gallery from category
$categoryImages = $mediaManager->getMediaByCategory('portfolio');
$galleryData = array_map(function($media) {
    return [
        'src' => $media->getUrl(),
        'alt' => $media->getTitle()
    ];
}, $categoryImages);

$gallery = new HalftoneReveal(['direction' => 'bottom']);
echo $gallery->renderGallery($galleryData);

📖 Configuration Reference

Animation Options

direction: top, bottom, left, right, center
spacing: Distance between dots (px)
duration: Animation duration (seconds)
stagger: Delay multiplier between dots
mode: loop or oneshot

Display Options

width: Container width (CSS value)
height: Container height (CSS value)
objectFit: cover, contain, fill
borderRadius: Border radius (CSS value)
cssClass: Additional CSS classes

Trigger Options

auto: Start on page load
hover: Start on mouse hover
scroll: Start when scrolled into view
manual: Start via JavaScript event
lazyLoad: Enable image lazy loading

Methods

renderImage(): Single image
renderComparison(): Before/after
renderGallery(): Multiple images
includeAssets(): Add CSS/JS to page

🚀 Installation

// 1. Include the class in your theme
require_once PLUTONIUM_ROOT . '/classes/HalftoneReveal.php';

// 2. Add assets to your theme header (in header.php or template)
<?= HalftoneReveal::includeAssets() ?>

// 3. Use in your templates
$halftone = new HalftoneReveal([
    'direction' => 'bottom',
    'spacing' => 20
]);

echo $halftone->renderImage('/media/hero.jpg', 'Hero Image');

🎨 HalftoneReveal Component