Basalio

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.

Examples and showcase

Browse the live WordPress examples to explore seven fictional sites across architecture, ceramics, photography, floristry, hospitality, music and UX/UI design. The collection includes 30 pages running on WordPress with native Basalio blocks.

These examples combine Basalio Free with a preview build of the separate Basalio Pro add-on. Some features shown are not included in this free plugin. The sites are demonstrations, not client endorsements. Enquiry forms validate through WordPress without sending email or retaining submissions.

The screenshots below were captured in WordPress with Basalio Free 0.6.7 and no Pro add-on. Each finished example is followed by the same page in Gutenberg. The demo theme supplies the page layout, typography and colors; Basalio supplies the interactive blocks. The fictional brands, layouts and images are demonstration content, not bundled templates or client endorsements. Photography includes AI-generated imagery.

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.

Open development

Basalio is developed in the open on GitHub, including the full WCAG 2.2 audit report and the automated accessibility checks that run on every change. Bug reports and pull requests are welcome there. For usage questions, use the support forum here on WordPress.org.