דילוג לתוכן

טיפוגרפיה בתנועה · פנזין ריזוגרף

כותרת ריזוגרף בהדפסת יתר

כותרת בשני צבעי דיו של ריזוגרף, שהשכבות שלה זזות מהרישום לפי הסמן ונפגשות בסגול.

Riso Overprint Headline

  • ריזוגרף
  • פנזין
  • מיזוג צבעים

הפרומפט המלא

הצגת הפרומפט שמגדיר את הפריסה, התנועה ושפת העיצוב
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.

איך משתמשים בפרומפט

  1. 1. מעתיקיםלחיצה על „העתקת הפרומפט” מעתיקה את כל ההנחיות: פריסה, תנועה וכללי עיצוב.
  2. 2. מדביקים ב-Claudeכדאי להוסיף בתחילת הפרומפט את שם העסק, הטקסטים והצבעים שלך.
  3. 3. משלבים באתרמתקבל קובץ React אחד. צריך להתקין את framer-motion ואת lucide-react.