Description

Basalio is a focused set of interaction blocks for people who build portfolio and case-study sites in the WordPress block editor. It is not a page builder or a general animation engine. It adds the motion that makes creative work feel considered, and nothing else.

Every block is a native Gutenberg block. There is no separate canvas, no shortcode, and no page-builder lock-in. Add a Basalio block the same way you add a paragraph, set its options in the block sidebar, and the effect renders on the front end.

What is in the box

Grid Reveal, a portfolio tile that reveals its caption on hover, focus, or tap.
Case Study Transition, a cross-page shared-element transition from a grid tile to its case-study page.
Text Reveal, a choreographed entrance for a headline, subhead, and optional button.
Magnetic Button, a call-to-action that gently pulls toward the visitor’s cursor.
Before / After, a draggable, keyboard-operable image comparison slider.
Filterable Grid, a portfolio grid visitors can filter by discipline, with a Grid Item child block.
Custom Cursor, a soft cursor accent for a bounded region of the page.
Scroll Sequence, a frame-by-frame image sequence driven by scroll position.
Pinned Scroll, an image that stays pinned while its story scrolls beside it.

Built for restraint and access

Motion respects the visitor’s “reduce motion” system setting.
Pointer effects are disabled on touch, where they would only get in the way.
The shared front-end script loads only on pages that actually contain a Basalio block, never site-wide.

Screenshots

The Basalio block collection in the WordPress editor.

Blocks

This plugin provides 10 blocks.

Basalio: Pinned Scroll Pin an image beside a story that scrolls. As the reader moves through the text, the image stays in view. Under reduced motion it becomes a normal, stacked layout.
Basalio: Custom Cursor Adds a branded cursor accent that follows the pointer inside this area. Pointer only, off on touch and under reduced motion. It never covers what you click.
Basalio: Scroll Sequence Play a sequence of frames tied to scroll position, like a flipbook. Always includes Previous and Next buttons, so it works without scrolling too.
Basalio: Case Study Transition Shared-element view transition from a portfolio grid tile to its case-study hero. Uses the cross-document View Transitions API with a silent fallback to plain navigation.
Basalio: Filterable Grid A portfolio grid visitors can filter by discipline. Filter buttons are generated from each item's category. Real, keyboard-operable buttons, with results announced to screen readers.
Basalio: Text Reveal Staged entrance for a headline, subhead, and optional CTA, with optional word-by-word reveal. CSS-only, so the real text is in the DOM and screen-reader-readable immediately.
Basalio: Magnetic Button A call-to-action button that subtly pulls toward the pointer. Pointer-only and off on touch; fully keyboard-operable with a clear focus state; static under reduced motion.
Basalio: Before / After An interactive before/after comparison slider. Drag the divider or use the arrow keys. A real ARIA slider, keyboard-operable and touch-friendly.
Basalio: Grid Reveal Hover- and focus-triggered caption reveal for portfolio grid items. Keyboard-accessible, reduced-motion aware, and tap-to-reveal on touch.
Basalio: Grid Item A single portfolio item inside a Basalio Filterable Grid. Its Category feeds the grid's filter buttons.

Installation

Upload the basalio folder to /wp-content/plugins/, or install the plugin zip through Plugins, Add New, Upload Plugin.
Activate Basalio through the Plugins screen in WordPress.
In the block editor, add any block whose name starts with “Basalio” and fill in its fields.

There is nothing to configure globally. Each block carries its own settings.

FAQ

Is this a page builder?: No. Basalio is a focused set of interaction blocks. It works inside the standard WordPress block editor and leaves the rest of your layout to your theme.
Will the effects slow down my site?: The shared script is small and loads only on pages that contain a Basalio block. Pages without one load nothing extra.
Are the blocks accessible?: Yes. Every interactive element is keyboard operable and screen-reader labeled. Pointer effects like Custom Cursor have no keyboard equivalent by design — they are decorative and never carry information or function.
Does it work with my theme?: Basalio targets standard block themes and classic themes that support the block editor. The blocks inherit your theme’s spacing and alignment controls where it makes sense.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Basalio” is open source software. The following people have contributed to this plugin.

basalio

Translate “Basalio” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

0.6.6

Validate filtered CSS token names, values, and the final stylesheet before inline output.
Apply the same CSS validation to motion parameters and token fallbacks.
Escape composed block HTML at output while preserving supported interactive controls.

0.6.5

Image blocks that render outside a named link or button now fall back to the attachment’s media-library alt text when the author leaves the alt field empty.
Pinned Scroll link path no longer produces an unnamed anchor: it adds an aria-label only when the linked image has no alt text.

0.6.4

Move per-instance transition CSS to the stylesheet instead of an inline element.
Harden output escaping and validate the view-transition name as a CSS custom-ident.
Remove an unimplemented Character split option from Text Reveal.

0.6.0

Accessibility audit debt release. Resolves the findings from the 0.5.1 audit.
Scroll Sequence: Previous/Next buttons now advance frames authoritatively by scrolling to the matching position; they work under reduced motion even when controls are hidden.
Lightbox: rebuilt as a native <dialog> element opened with .showModal(), giving the browser-native focus trap, Escape-to-close, and inert background.
Pinned Scroll: fixed reading/focus order when the media is positioned on the right.
Image alt handling is now robust across every image block via a shared helper; author-entered alt always wins, including an intentional empty value.
Filterable Grid: uncategorised items now get their own “Uncategorized” filter button.
Before / After: improved mobile touch handling and more informative screen-reader value text.
Magnetic Button, Custom Cursor, and Scroll Sequence now respond live to a mid-session prefers-reduced-motion change.
Custom Cursor default color unified to the Basalio brand chartreuse (#DFFF00).
Editor asset versions and release tags aligned to 0.6.0.

0.5.1

Accessibility fixes found in a full audit of every block. Details below.
Pinned Scroll: the “expand image” lightbox button did nothing when a Pinned Scroll block was the only Basalio block on a page, because the shared script was never loaded. Fixed, and fixed at the root so no future block can repeat it.
Scroll Sequence: alt text typed in the editor is no longer discarded in favour of the media library’s own alt.
Scroll Sequence: scrolling no longer interrupts screen readers on every frame. The frame count is now announced only when the Previous or Next buttons are used.
Scroll Sequence: frames that are not on screen are properly hidden from screen readers, so a six-frame sequence is announced as one image, not six.
Filterable Grid: a portfolio item that is linked but has no alt text now takes its accessible name from the visible title, instead of being an unlabelled link.
Filterable Grid and Scroll Sequence: the result count, the “All” filter label, and the frame counter are now translatable. Previously they reverted to English on non-English sites.
Lightbox: the dialog’s own labels are now translatable.
Case Study Transition: the morph now defaults to 300ms and is limited to 150-600ms, with a warning in the editor above 400ms. It previously defaulted to 500ms and allowed up to 3 seconds, which is uncomfortably long for a large moving image. If you set a custom speed above 600ms it will now render at 600ms. Blocks left at the default get a faster morph than before.
Added an automated accessibility test suite (33 checks) that runs against real rendered output.

0.5.0

Big configurability pass across every block:
Image blocks (Grid Reveal, Case Study Transition, Filterable Grid items, Pinned Scroll) gain a corner-radius field, an optional Link URL, and an optional built-in lightbox (accessible, Escape to close).
Grid Reveal: choose a tile aspect ratio.
Before / After: choose an aspect ratio (16:9, 1:1, portrait, and more).
Text Reveal and Case Study Transition: adjustable animation speed.
Magnetic Button: now sits exactly where placed, with a left/center/right alignment option.
Filterable Grid: arrow-key navigation across the filter buttons, plus a button-radius control.
Custom Cursor: upload your own cursor image or SVG.
Scroll Sequence: no more letterbox padding, an optional counter, and custom counter text.
Pinned Scroll: adjustable image width.

0.4.4

Extended theme hardening to text color: on some light themes the Filterable Grid filter labels and Magnetic Button text picked up the theme’s button text color and became unreadable. Their colors are now locked to the block palette.

0.4.3

Theme compatibility: hardened every block control (the Grid Reveal overlay, Filterable Grid pills, Before / After handle, Scroll Sequence steps) so a theme’s generic button styling can no longer repaint them. Fixes Grid Reveal tiles showing as solid blocks in some classic themes, for example Twenty Twenty-One.

0.4.2

Removed the last stray accent colors (a couple of focus outlines and the Custom Cursor default), so every block now uses the black, white, and chartreuse palette consistently.

0.4.1

Fixed the Before / After slider not taking keyboard focus when grabbed by mouse or touch, so the arrow keys now move the divider after a click, as they already did after tabbing to it.

0.4.0

Beta hardening pass ahead of launch.
Wired plugin translation loading and per-block editor-script translations, and added a translation template.
Verified every block renders cleanly in WordPress with both full and empty content, with no PHP notices or warnings.
Confirmed output escaping and input sanitization across all blocks.

0.3.0

Completed the full block set, nine insertable blocks plus one child block.
Redesigned the block editor chrome to match native Gutenberg styling.