Skip to main content
Back to Portfolio

Pulsar Analytics

B2B SaaS landing page on a custom WordPress FSE block theme — one server-rendered Gutenberg block with IntersectionObserver count-up, Lighthouse 99 perf, no page builder.

WordPressPHP 8.3ReactGutenbergFull-Site Editingtheme.jsonIntersectionObserverApacheAWS EC2
Pulsar Analytics preview

Overview

A B2B SaaS marketing landing page built end-to-end in roughly six hours — custom Full-Site-Editing block theme on a shared parent chassis, one server-rendered Gutenberg block, and real EC2 infrastructure. The demo exists to push back on the reflex that WordPress can't do modern product marketing — no page builder, no framework wrapping the CMS, just stock blocks composed deliberately plus one custom block where the design actually demanded it.

Theme — per-demo override pattern:

  • Custom FSE block theme (pulsar) — a thin child of a shared _chassis parent that ships templates, parts, patterns, and gotcha-busting CSS
  • Volt-aligned ink + coral theme.json design system
  • Per-demo front-page.html rendering core/post-content — the override pattern that became standard across every subsequent demo
  • Inherits chassis-side WooCommerce asset hygiene (~10 perf points on non-WC demos by default)

The custom block — sfp-blocks/trust-stack:

  • Lives in the shared sfp-blocks plugin alongside other reusable blocks
  • Stores 2–4 { value, label, suffix } objects in attributes; editor uses __experimentalNumberControl + TextControl
  • Server-rendered HTML includes final numbers — non-JS users and prefers-reduced-motion users see correct values immediately
  • ~1.5 KB view.js uses IntersectionObserver to detect viewport entry, then animates from 0 to target via requestAnimationFrame with cubic ease-out
  • Intl.NumberFormat for comma-formatted integers; decimals preserve one digit

Stock blocks for everything else:

  • Hero, three-column feature grid, three-tier pricing with "Most popular" badge, testimonial, CTA strip — all stock blocks composed deliberately
  • FAQ uses native HTML <details> — zero JavaScript, full keyboard support, accessible by default
  • Page composition lives in a static page rendered via <!-- wp:post-content /--> in the per-demo front-page.html

The Challenge

Agencies pick Webflow, Framer, or bespoke Next.js for SaaS marketing on reflex and skip WordPress — the assumption being page-builder soup or a heavy theme that fights every layout decision. That model was right ten years ago and hasn't been for the last five.

The Solution

Built a real SaaS landing layout (hero, social proof, feature grid, pricing, testimonial, FAQ, CTA) with stock WordPress block primitives plus one custom server-rendered Gutenberg block for the animated trust-stack. No page builder, no framework wrapper, no shadow DOM — and Lighthouse 99 perf without manual tuning.

Results

  • Lighthouse 99 / 95 / 100 / 92 (perf / a11y / best-practices / SEO) without manual perf tuning

  • Sub-1s LCP on a t3.small (2 vCPU, 2 GB RAM)

  • Total page weight under 200 KB compressed

  • ~1.5 KB inline JS for the trust-stack count-up; zero JS for the rest of the landing page

  • Standard provisioning: DNS validation, secret generation, MariaDB, Apache vhost with security headers, Let's Encrypt HTTP-01, platform symlinks

  • Established the per-demo theme override pattern reused by every subsequent demo on the platform

Gallery

Pulsar Analytics screenshot 2
Pulsar Analytics screenshot 3
Pulsar Analytics screenshot 4

Interested in working together?

Let's discuss how I can help with your project

Get in Touch