Gallery & Images

A WebGL composition built in Unicorn Studio that renders a dreamy refracted glass distortion effect around a portrait. Loaded from an exported JSON source file via the UnicornStudio.js runtime.

A canvas-based effect that overlays a pixelated version of an image and progressively sharpens it in steps until the full image is revealed. Trigger modes include load, inview (IntersectionObserver), hover, and click. All parameters are overridable per-element via data attributes.

A full-viewport image slider with a horizontal parallax transition — slides move at full speed while inner images move at 50% in the opposite direction. Navigable by thumbnail click, drag, and horizontal mouse wheel. Powered by GSAP Observer and a custom ease.

A draggable before/after image comparison slider powered by GSAP Draggable. The "after" layer uses an animated clip-path mask so any content — images, video, or any element — can sit inside either panel. Initial split position is controlled via a data attribute.

A GSAP Flip-powered lightbox gallery. Clicking a grid image triggers a seamless FLIP animation that moves the image from the grid into a full-screen overlay, with background fade, nav controls, counter, keyboard navigation, and click-outside-to-close. Supports multiple independent gallery groups per page and optional lifecycle callbacks.

A pure-CSS-transition slideshow that automatically cycles through images at a configurable interval. The script manages three states — active, previous, and not-active — as data attributes, enabling a smooth cross-fade. Uses IntersectionObserver to pause cycling when the component is off-screen.