Case covers

A cover is one SVG built from the project's data. The project plate prints the timeline as 16 tiles, weeks per phase, in the colourway's lead and support with the line's own ink for the phases that mean the line. The title, the facts and the edition sit on paper plates; the art window carries no words. Inline on a page the cover re-inks with CSS and needs no JavaScript; for cards and PDFs it is rasterised or placed as vector.

When to use#

• Work cards and the head of a case study (<CaseCover> in a server component).
• The case card and the art window of posters and one-pagers.
• The comic layout for a launch story: a splash panel, facts as hit keys, one balloon and one SFX.

Gallery#

The same inputs in different looks: each frame sets only its look, and the covers re-ink.

• Poster, art plate · Process, Press, Bone

• Comic, art plate · Process, Press, Bone

• Poster, art blocks · Process, Studio, Bone

• Poster, art plate · Acid pop, Press, Bone

• Comic, art plate · Process, Rave, Night

• Poster, art plate · Jewel, Studio, Night

Inputs#

How makrlabs.dev calls it#

import { CaseCover } from "@maxgrits/overprint-generators/react";
import "@maxgrits/overprint-generators/css";

export function WorkCard({ project }: { project: Project }) {
  return <CaseCover input={toCoverInput(project)} />;
}

The site maps its own data in an adapter (buildLog to timeline, metrics to facts). Block covers also load @maxgrits/overprint-three/css.

Rules#

• The cover is never the only copy: the page repeats the title and the facts in HTML.
• alt names the title, the line, the duration and the first fact.
• The comic SFX is aria-hidden; the balloon is a quote the studio holds in writing, or the studio's own line.