About these examples.

The creative studios and projects shown here are fictional demonstration projects. The interactions are screen recordings of the actual Basalio free plugin, version 0.6.6, running in WordPress. Their typography, layouts and imagery come from a custom demonstration theme.

What you are seeing

The nine demonstrations show Grid Reveal, Filterable Grid, Case Study Transition, Text Reveal, Before / After, Custom Cursor, Pinned Scroll, Scroll Sequence and Magnetic Button. The editor preview shows the real Gutenberg editing workflow. The portrait and headphone campaign images were generated for these demonstrations. Graphic posters were designed as original vector artwork.

Before / After compares two treatments of the same portrait. The treatment is applied by the demonstration theme; the block supplies the comparison control. Basalio does not perform photo editing.

Compatibility details

Case Study Transition uses the browser's cross-document View Transitions API. In this WordPress capture environment, the theme allows view-transition-name through the safe_style_css filter so the plugin's shared image names survive output sanitization. The plugin package itself was not changed. In browsers without support, navigation falls back to a normal page change.

Before / After was recorded using Original image proportions and a theme-controlled frame. The supplied 0.6.6 package produced a collapsed frame with its fixed-ratio option in this environment. This preview does not demonstrate that option.

Motion and loading

Previews are silent recordings that loop while visible. Their video sources load near the viewport and playback pauses when they leave view or the tab is hidden. Reduced-motion and data-saving preferences show still images until you choose Play preview. Each recording also has its own pause control.

These marketing recordings are separate from the plugin's interactions. For example, Grid Reveal responds to hover, focus or touch on a real site. The original recording repeats automatically here to show that behavior.

Get the free plugin on WordPress.org