April 21, 2026 · 6 min read
Automation has a visual problem. When every article flows through the same pipeline — same model, same prompt structure, same build step — the output gravitates toward sameness. The words might vary, but the feel flattens. For a blog that publishes multiple times a week, that flatness becomes identity-erasing fast.
The AI Signal needed to look like it had an editorial designer on staff. It does not. It has a playbook, a canvas API, and a rule about never fading in an HTML title after a canvas animation.
THE MAGAZINE METAPHOR
Print magazines solved this problem decades ago. Open any well-designed publication and you will notice: the news section looks different from the opinion columns, which look different from the feature well. Same magazine, same brand, different visual registers. The section identity tells you what kind of reading you are about to do before you have processed a single word.
I borrowed that idea wholesale. Every article on The AI Signal belongs to a category — breaking news, opinion, tools review, tutorial, deep dive — and each category gets its own hero treatment. Not a different color on the same template. A fundamentally different visual experience.
This mapping is codified in an article playbook that the pipeline references as its source of truth:
¬ Breaking news — ASCII code rain, cascading characters that waterfall down the screen like a terminal dump.
¬ Opinion pieces — kinetic typography, title words that scatter across the canvas and animate into position.
¬ Technical articles (tools, tutorials, deep dives) — AI-generated abstract imagery from Black Forest Labs’ Flux model.
No per-article decisions needed. Category determines treatment automatically.
WORDS THAT MOVE
The kinetic typography hero is 222 lines of TypeScript. When you land on an opinion piece, the title words are scattered at random positions — 200 to 500 pixels from center, at random rotations and scales. Over about 900 milliseconds, they fly inward with a cubic ease-out and settle into their final positions, staggered 120ms per word so it feels like the sentence is assembling itself.
Behind the main title, twelve ghost echoes drift across the canvas: faint copies of the title words at barely-there opacity, scattered at random sizes and angles. They fade in and out during the animation, giving the hero depth without competing for attention. One word — usually the thematic anchor — renders in the category’s accent color. Purple for opinion, red for breaking, gold for tutorials.
Getting text to render crisply on canvas required two things I did not expect: the Pretext library for precise text measurement that matches how the browser actually shapes the font, and DPR-aware rendering — canvas dimensions multiplied by window.devicePixelRatio for sharp text on retina and high-density screens. Without both, the title looked subtly wrong in ways that were hard to articulate but impossible to ignore.
The font is Playfair Display at 900 weight, sized responsively across breakpoints. After 2.5 seconds, the animation stops entirely. The canvas holds its final frame. No ongoing requestAnimationFrame loop burning CPU while the reader scrolls.
THE BUG THAT BECAME A RULE
The original plan was elegant: canvas runs the animation, then fades out, and the HTML <h1> fades in to take its place. The DOM title is better for accessibility, for text selection, for everything except the animation itself.
Except the canvas renders the title at a position calculated in JavaScript — center of the container, laid out word by word with measured widths. The HTML <h1> is positioned by CSS — centered differently, with different line-breaking, different font metrics. When the canvas faded out and the HTML faded in, the title visibly jumped. A few pixels, but enough to make the whole animation feel broken.
The fix was to abandon the handoff entirely. The canvas stays visible, holding its final frame as a static image. The HTML title only appears as a fallback — when JavaScript is disabled, the CDN fails, or prefers-reduced-motion is enabled.
I encoded this as an explicit rule in the project documentation. Future sessions of Claude will read it and skip the mistake. Institutional knowledge that usually lives in a senior developer’s head, stored in a markdown file instead.
RAIN ON A DARK SCREEN
The breaking news treatment is simpler but no less deliberate. A grid of code characters — braces, brackets, operators, the punctuation of programming — cascades top to bottom with row-by-row delays, creating a waterfall effect over about 2.5 seconds. Ten percent of the cells get occasional character swaps after settling, a subtle flicker that keeps the hero feeling alive without demanding attention.
The whole layer sits at 0.25 opacity — a number arrived at through iteration. Lower and the rain disappears; higher and it competes with the headline. After ten seconds, all animation stops completely. Battery life matters more than atmosphere.
GENERATED IMAGES AS EDITORIAL ILLUSTRATION
For technical categories, the pipeline generates abstract images through Black Forest Labs’ Flux 2 Pro Preview model. The interesting part is not the generation — it is the semantic mapping that builds the prompt. Developer jargon does not translate to good visuals. “Database” as a prompt gives you clip art. So the prompt builder maps concepts to visual language: “database” becomes “structured data layers,” “API” becomes “interface connections.”
The category determines the mood:
¬ Tools and tutorials — architectural imagery: geometric lines, minimal shapes, dark backgrounds with a single accent color.
¬ Deep dives — topology: network graphs, connected nodes, luminous constellation patterns.
Each category also maps to a color palette — green for tools, blue for deep dives, gold for tutorials. A quality suffix prevents the model from adding text or logos, which Flux is otherwise eager to do.
The result is that every tools article shares a visual family without looking identical. The images feel like they belong to the same publication — which is exactly what section identity should achieve.
ACCESSIBILITY AS ARCHITECTURE
Every visual treatment has a fallback path. The prefers-reduced-motion media query skips all animations entirely — no code rain, no flying words, just the static title. Canvas elements carry aria-hidden="true" because the content already lives in the DOM as a proper heading. If the Pretext CDN fails, the kinetic animation degrades to static text instead of breaking.
The HTML title is not decoration. It is the load-bearing structure. The animations are paint.
This was not bolted on. The accessibility path was designed first, and the animations were layered on top. When you build it that way, the fallback is always the solid version, and the enhanced experience is the one that needs to prove itself.
WHAT DESIGN AUTOMATION ACTUALLY LOOKS LIKE
The playbook approach means I never make visual decisions per article. The category determines the treatment, the treatment determines the mood, and the mood determines the palette. A new opinion piece gets kinetic typography in purple. A new tools review gets an architectural image in green. No human in the loop for aesthetics — just for content.
That is the real answer to the sameness problem. You do not fight automation’s tendency toward uniformity by adding randomness. You fight it with structure — with a design system that maps meaning to visual language, the same way a magazine art director would. The automation just executes the system faster than any art director could.
You can see every one of those treatments in motion at vibe.cerridan.com.
This is Part 4 of a 5-part series on building The AI Signal. Previously: the newsroom, the pipeline, and the Night Council. Final entry: what an AI newsroom actually costs — and what I got wrong.