Interaction & motion
Animated Headline
One part of a heading keeps changing while the rest stays put — typed out character by character with a blinking caret, or flipped, faded and slid through a word list you write. In Highlight mode it draws a marker, an underline, a circle or a strikethrough over one phrase as the headline scrolls into view.
Typing · word rotation · drawn SVG stroke · width lock · reduced-motion aware
We build websites
Flip Box
A two-sided card that turns in 3D on hover or tap. Each face is a real InnerBlocks canvas — drop a heading, an icon, a button, anything. Pick the flip axis, the card shape and per-face colours or gradients.
3D flip · hover or tap · per-face gradients · reduced-motion aware
Hover to flip
The front face holds any blocks you like — a heading, an icon, a short teaser.
The other side
Reveal the detail here and invite the visitor to act.
Image Hotspot
Pin interactive markers onto an image — a diagram, a product shot, a floor plan. Each marker pulses to draw the eye and opens a tooltip with its own title, description and optional link on hover or tap.
Drag-to-place editing · percentage coordinates · numbered markers · keyboard reachable
Circle Info
Lay a process, a service model or a set of values out as points around a circle, with the open one shown in the middle. A highlight arc travels to whichever point you pick, autoplay can walk through them on its own, and the circle shrinks to fit its column instead of spilling out of it.
Highlight arc · autoplay with countdown · click or hover · mobile accordion · keyboard tabs
Plan the page
Build it from blocks
Style it once
Check every screen
Publish and measure
Improve on the numbers
Data & conversion
Chart
One Chart.js engine, eight chart types — bar, horizontal bar, line, area, pie, donut, radar and gauge. Type the numbers in by hand or import a CSV; add a target line, a second axis, number formatting and a legend without touching code.
8 chart types · CSV import · target line · dual axis · animates on view
Multi-Step Form
Break a long form into short steps with a progress bar, per-step validation, a review screen before submit and a thank-you state. It reuses the free field blocks, stores every submission in your own database before the mail goes out, and can save a visitor’s progress so they can come back later.
Step validation · review & edit · saved drafts · stored submissions · captcha
Social proof & business info
Client Logo Carousel
Run partner or customer logos across the page in a seamless marquee. Logos sit in grayscale and take their colour back on hover, the strip pauses when a visitor points at it, and the whole track fades in the first time it enters the viewport.
Seamless loop · pause on hover · grayscale to colour · edge fade · reduced-motion aware
Business Hours
Publish your weekly opening hours with a live “Open now” / “Closed” badge. The block reads the current day and time in your business timezone, highlights today, pulses while you are open and tells the visitor when you open or close next — with holiday overrides and Call / Directions buttons.
Live open / closed · business timezone · split shifts · holiday overrides · works without JS
- Monday09:00 – 17:30
- Tuesday09:00 – 17:30
- Wednesday09:00 – 17:30
- Thursday09:00 – 17:30
- Friday09:00 – 20:00
- Saturday10:00 – 14:00
- SundayClosed
Site-wide widgets
These two are pinned to the viewport rather than the page flow, so they belong once per page — both are running on this one right now.
Sticky Announcement Bar
The bar pinned to the top of this page is the block itself — scroll up to see it. Announce a launch or a sale, add a call-to-action and an optional countdown, schedule a start and end date, and let visitors dismiss it for the session or for a set number of days. It measures its own height in JavaScript and pushes the page and a fixed header out of the way, so it never covers your menu.
Top or bottom · countdown · scheduling · dismiss & remember · fixed-header aware
Floating Action Button
The round button in the corner of this page is the block — tap it. It fans its actions out vertically, horizontally or along an arc: a phone call, SMS, Zalo, Messenger, WhatsApp, email, a map, any link, back-to-top, or opening a Modal block. It can reveal itself only after a scroll, collapse on its own, pulse for attention, and show a live open / closed badge on the same schedule engine as Business Hours.
Four corners · vertical, horizontal or arc · reveal on scroll · live status · back to top
Ten blocks. One licence.
Animated Headline, Flip Box, Image Hotspot, Circle Info, Chart, Multi-Step Form, Client Logo Carousel, Business Hours, Sticky Announcement Bar and the Floating Action Button — all of them install next to the free Flexa Block library and use the same controls you already know.