Skip to content

Kinetic Typography Banners · Risograph Zine

Riso Overprint Headline

A zine headline printed in two riso inks; the pink and blue layers drift out of registration following the cursor, overlapping in multiply.

  • Framer Motion
  • Risograph
  • Zine
  • Mix Blend

The full prompt

Show the prompt that defines the layout, motion and design language
Build a "Riso Overprint Headline" React component.

CONCEPT: A headline that looks run through a Risograph: the same word printed twice in pink and blue, multiplied together, with misregistration that follows the cursor.

LAYOUT & CONTENT:
- Headline 'ZINE FEST' stacked on two lines, Archivo Black ~5rem.
- Halftone dot circle in blue behind; tag line 'Issue 7 · Print is not dead'.
- Newsprint background with a faint noise texture.

INTERACTIONS & MOTION:
- Pink layer offset = pointer * 8px, blue layer = pointer * -6px, both via springs (stiffness 150 damping 15).
- mix-blend-mode multiply on both layers so the overlap turns deep purple.
- Click re-randomizes the halftone dot size.

DESIGN SYSTEM — Risograph Zine:
- Fluorescent pink #FF48B0 and riso blue #0078BF overprinting on newsprint #F2EFE4.
- mix-blend-mode: multiply for overlaps, deliberate 2–4px misregistration, halftone dots.
- Type: Archivo Black condensed feel, rough and loud.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring"). Animate transform and opacity only. Respect prefers-reduced-motion via useReducedMotion().
- Icons: lucide-react where icons are needed.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.

How to use this prompt

  1. 1. CopyUse “Copy Claude Prompt” above. It includes the layout, the spring values and the design rules.
  2. 2. Paste into ClaudeAdd your own brand name, copy and colors at the top of the prompt if you like.
  3. 3. Drop it inYou get one file with React, Tailwind and Framer Motion. Install framer-motion and lucide-react.