/showcases

Build logs that show the working.

How we built it, why we built it that way, what we’d redo. End-to-end pipelines from prompt to production asset, engineering deep dives on the parts that actually shipped.

01 3 build logs

Brand Jun 4, 2026 · 8 min

Brand imagery pipeline — seven cinematic images, one design system

Generated 7 cinematic brand images (hero + 6 cluster-specific), optimised them from 5–9 MB PNGs into 50–400 KB WebP variants via Astro’s build pipeline, then integrated them across cluster cards, hero sections, and atmospheric brand beats.

Higgsfield Astro Image sharp WebP OKLCH

Outcome

53 optimised image variants across 7 source images. Average file size dropped 95 %. Zero perceived quality loss. Brand identity went from "generic developer site" to "premium technical brand".

Read the build log

Brand Jun 4, 2026 · 10 min

Hero motion loop — from text prompt to 460 KB production asset

Built a 5-second subtle motion loop for the homepage hero using Higgsfield seedance 2.0 → ffmpeg → 252 KB WebM + 209 KB H.264 MP4 with image fallback, no audio track, autoplay-friendly, and reduced-motion-respecting.

Higgsfield seedance 2.0 ffmpeg libvpx-vp9 libx264 Astro Image

Outcome

460 KB total delivered (WebM + MP4). 5 seconds of subtle motion. Static image fallback for slow networks. Removed entirely for users with prefers-reduced-motion.

Read the build log

Platform Jun 4, 2026 · 14 min

Six interactive demos, one platform — the architecture

Six live in-browser demos sharing a unified Web Worker analysis pipeline, runtime audio synthesis for samples, and a per-cluster React island pattern that keeps the static-first Astro shell fast.

Astro React 19 Web Workers WebAudio API OfflineAudioContext TypeScript

Outcome

Six fully working interactive demos. Heavy analysis runs off the main thread. UI stays at 60 fps even on long files. Zero audio crosses the network.

Read the build log