Blokino – Block Effects & Custom Blocks

Description

Blokino adds motion and interaction to WordPress blocks without ever hardcoding a style: every effect is opt-in per block, and every value (color, easing, duration) is read from the active theme’s design tokens (--tnt-*). Switching themes never breaks your content.

What it provides

• Effects on native blocks (tf* attributes). A “Blokino Effects” panel is added to Group, Columns, Cover, Image, Heading, Paragraph and Buttons. Choose an entrance animation (fade-up, clip-reveal, mask-up, blur-in, scale-in, slide, text-stagger), a hover effect (lift, glow, tilt, magnetic, image-zoom, underline-grow), a scroll effect (parallax, sticky-pin, reveal, progress), blend modes and animated borders. A block with no effect attribute stays completely clean.
• Custom blocks where the core falls short. Section (advanced backgrounds: video, gradient, mesh, overlay, shape dividers), Marquee (infinite band), Counter (animated number on scroll), Before/After (image comparator), Slider and Testimonials (Swiper-powered), Brand, Icon and Badge.
• A lightweight effects runtime. Effects are detected per page and their assets are enqueued only when a block on the page uses them. Reveal uses the native IntersectionObserver and scroll effects run on requestAnimationFrame — no third-party animation library. Swiper (MIT) is the only bundled library, loaded solely on pages with a slider. prefers-reduced-motion is always respected.
• An options panel + demo importer. Global settings, JSON import/export, sidebar layout controls, and a per-theme demo importer with a progress bar and one-click rollback.
• A free theme to start with. Blokmark, our free block theme, is built for this engine: a designed home the moment you activate it, three looks, blog and page templates. The Themes screen links to it, then lists the premium themes.
• A Get started screen. Site status, the three steps to a finished site (theme → demo → effects) and the doors to the documentation.

Design principles

• Nothing hardcoded — no effect is applied unless a block attribute activates it.
• Motor/design separation — functionality lives here, presentation lives in each theme.
• Degrades with dignity — the engine ships sensible token defaults, so effects and blocks look good under any theme, not only the ones built for it.

Who makes it

Developed and maintained by TUNET Digital Agency (https://tunetdesign.com). Source and issue tracker: https://github.com/aitunet. Support: [email protected]

External services

Blokino works fully offline. It connects to a third-party service only in the two cases below, never in the background and never with personal data.

tunetdesign.com theme catalog — When you open Blokino → Themes in wp-admin, the plugin sends one GET request to https://tunetdesign.com/wp-json/tunet/v1/themes to list the themes designed for this engine (name, tagline, price, preview image, demo link). The request carries no site URL, no user data and a neutral user agent; the response is cached for 12 hours. The screen is optional — if you never open it, the request is never made. Service by TUNET Digital Agency: terms https://tunetdesign.com/terms/ · privacy https://tunetdesign.com/privacy/

Google Fonts — Only if you choose a Google font family in Blokino → Settings → Typography, the front end and the editor load that family’s stylesheet from https://fonts.googleapis.com (and the font files from fonts.gstatic.com), like most themes and page builders do. Visitors’ browsers request the files directly from Google; the plugin sends nothing itself. Leave the typography setting on your theme’s fonts and no request to Google is made. Google Fonts terms https://developers.google.com/fonts/terms · privacy https://policies.google.com/privacy

Bundled library — Swiper 11 (MIT, https://github.com/nolimits4web/swiper) is included as a minified file and enqueued only on pages that contain a slider; its readable source lives in that repository. The plugin’s own JavaScript is shipped unminified. Full source: https://github.com/aitunet/blokino

Technical details