- Client
- webmotion — own product
- Industry
- WordPress development studio
- Timeline
- January 2026 — ongoing
- Services
- Design, Development, Maintenance, Performance, Security
- Team
- One — design, development and maintenance
- Live at
- www.webmotion.io
What the project had to solve
The problem as it stood, and the decision that answered it.
A studio site that had to prove the work, not describe it
Everything we sell — custom blocks, a themed editor, multilingual content, a maintained build pipeline — is invisible in a screenshot. The site had to be the demonstration, and it had to stay editable by the person running it without reopening the codebase for every change.
- Nothing on a page should need a developer to change
- Two languages, down to the global options
- The same stack we hand to clients, no shortcuts
Every page assembled from blocks the editor owns
Rather than page templates, the theme ships a block library: each block is a definition, a service that normalises its fields, and a Blade view with an editor preview. Pages are composed from the same pieces a client would get.
- Blade views and typed services instead of template tags
- One card system shared by every listing
- An editor preview for every block we ship
The stack we built it on
Grouped by layer rather than listed flat, so a reader can tell what is foundation and what is a choice we made here.
- WordPress CMS and block editor
- ACF Pro Custom blocks and field groups
- Polylang PL / EN across posts and options
- PHP 8.2+ Typed services, strict mode
- Sage 11 Roots theme scaffolding
- Acorn 6 Laravel container inside WordPress
- Blade Views, composers, services
- Livewire 3 Filtered archives without a reload
- Tailwind CSS v4 Utilities plus theme tokens
- Swiper 11 Hero and testimonial sliders
- PhotoSwipe 5 Screenshot lightbox
- Locomotive Scroll 5 Scroll-driven reveals
- Vite 6 Asset build and HMR
- ddev / Docker Identical local environments
- LiteSpeed + LSCache Production server and page cache
- WebP Converter Automatic next-gen images
What we connected it to
Each card names the system, what it does on this site, and which way the data moves.
-
SMTP
WP Mail SMTP
Form and system mail leaves through an authenticated relay instead of the server mailer, so nothing lands in spam.
Site → relay → inbox -
Schema
Yoast SEO
Structured data, sitemaps and per-language meta wired into the custom post types we registered.
Site → search engines -
i18n
Polylang + ACF Options
Two full language trees, including translated option pages, so global blocks are editable per locale.
PL ⇄ EN -
Forms
Contact Form 7
Templated in Blade rather than the plugin UI, so the brief and contact forms match the rest of the design.
Visitor → form → inbox -
Backups
UpdraftPlus
Scheduled database and uploads backups pushed off-server, with restores rehearsed on staging.
Site → off-site storage -
Endpoint
Health check
A must-use plugin reports core, PHP and plugin state to our monitoring, so drift is caught before a client sees it.
Monitor → site → JSON
Colours and type it ships with
The palette and typeface are project data, not decoration — every swatch is a token the theme exports.
- Ink #121212 Headings, dark panels
- Graphite #3D3D3D List copy, chips
- Slate #5F5F5F Body paragraphs
- Sand #F3F1EB Primary · buttons, section grounds, cards
- Base #FFFFFF Page, glass cards
- Cobalt #016DC6 Links, eyebrows, focus rings
- ExtraLight 200
- Light 300
- Regular 400
- Medium 500
- SemiBold 600
- Bold 700
- Display
- 96 / 0.94 / −0.035em
- Section heading
- 46 / 1.1 / −0.025em
- Card title
- 26 / 1.25 / 500
- Body copy sets at sixteen over 1.65
- 16 / 1.65 / 400
- Eyebrow label
- 12 / 0.12em / upper
- 12px Buttons, controls
- 16px Inner cards
- 24px Listing cards
- 30px Glass panels, media
- 50% Circular controls
Glassmorphism, as the primary surface
Every raised surface on the site is the same translucent panel over a blur: the testimonial cards, the header controls, the navigation dots and every button. One fill, one blur, one border — so depth is a property of the system rather than a decision taken per component.
- Fill
- rgb(0 0 0 / 9%)
- Blur
- blur(20px) saturate(1.2)
- Radius
- 30px
- Border
- 1px transparent, padding-box
- Buttons
- rgb(0 0 0 / 60%), blur(12px) at 12px
The product itself
Captured from the live site. Every tile opens in a lightbox at full size.
What we actually built
The six pieces the site stands on — each of them also goes into the sites we build for clients.
-
01
A block library, not a page build
Thirty-three custom blocks, each a block definition, a service and a Blade view — editors assemble pages we never have to touch again.
-
02
Archives that never reload
Portfolio, blog and guides list through Livewire components, so filtering and load-more stay on the page.
-
03
Bilingual to the last option
PL and EN trees with translated ACF option pages, and theme strings extracted through the standard i18n tooling.
-
04
Glass as the primary surface
One translucent panel — 8% fill, a 12px blur, a hairline border — defines every card, control and button, shared by the blog, the guides archive and every list block.
-
05
A performance pipeline, not a plugin
Vite-built assets, automatic WebP conversion and LiteSpeed page caching, configured together rather than bolted on.
-
06
Monitoring shipped with it
A must-use plugin reports core, PHP and plugin state, so we see drift on a client site before the client does.
What it changed
Measured on the live site rather than estimated — the note under each figure says where it came from.
The qualitative half of the result — what can now be done without opening the codebase.
- Custom block library with editor previews
- Two-language content model
- Portfolio and guides as first-class post types
- Caching, WebP and asset build configured together
- SEO schema across every post type
- Backups and health monitoring in place
Hi, I'm Clawby.
Mascot · since 2026
Meet Clawby
Clawby is the crab who keeps an eye on every build we ship. A crab because good code, like a good shell, exists to protect what lives inside it — and because when the straight road is blocked, Clawby simply walks around the problem sideways.
- Job title
- Chief Morale Officer
- Spotted in
- Right here for now — more of the site soon
- Fun fact
- Two claws, zero merge conflicts
Have a project that should work like this one?
Send the brief, or book a call and talk it through. We answer with scope and a range, not a template.
