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.
Screenshots
ALMA photography portfolio: Free Grid Reveal displays the selected image's title and category over the photograph.
The same ALMA page in Gutenberg: edit the Grid Reveal image, caption, category and tile shape using the native block controls.
FOIL design portfolio: Free Filterable Grid shows three of six projects after the visitor selects Identity.
The same FOIL page in Gutenberg: each Grid Item has an image, title and category. Those categories become the portfolio's filter buttons.
MIRA / PARK UX/UI case study: Free Before / After compares a wireframe with its finished interface design using a draggable, keyboard-operable divider.
The same MIRA / PARK page in Gutenberg: choose the two images, enter comparison labels and provide alt text for each image.
The nine insertable Basalio Free blocks in Gutenberg, shown alongside the populated comparison page. Filterable Grid also includes a Grid Item child block.