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