Collage Desk

再現プロンプト

架空のカルチャー誌「TEARSHEET」を、実写切り抜き8枚・貼られる入場・ホバー浮遊・ランサム文字・ドラッグ並べ替えの4つの物理演出で1枚に構成したコラージュ机のランディングページ。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。

Build a single self-contained HTML file (inline CSS/JS, plain window-scroll page — no iframe/container needed) for "TEARSHEET", a fictional cut-and-paste culture zine. The page reads as ONE physical desk covered in magazine clippings: everything arrives by being pasted down, everything floats slightly under the cursor, headlines are built from ransom-note letter chips, and one section is a real corkboard the visitor can rearrange by dragging. Never use a generic fade-up (opacity+translateY only) as the entrance language — every reveal uses the paste physics below. Never use numbered 01/02/03 service lists, count-up number animations, an infinite marquee ticker, or cursor-magnetic buttons.

## Art direction
Palette: desk background #6B5744 (warm walnut), darker vignette #3E3226 behind hero/footer, corkboard tan #B98D5D, two paper tones — cream #F3ECDD and manila #E7D3A1 — for clippings, ink/text #241C15, and a hot-pink accent #FF6F91 for tags, tape, CTA borders, the stamp and one ransom-letter chip. Three type families: a bold condensed display face (Anton) for headings, a monospace typewriter face (Space Mono) for captions/meta/body, and a handwritten marker face (Permanent Marker) for sticky notes. Body text on the desk background is cream; text inside clippings is always dark ink. Every clipping — article card, manifesto note, subscribe card, drag note — is clipped to an irregular "torn paper" silhouette: a clip-path polygon built from a seeded RNG, 8 jittered points per edge, up to ±2.2% deviation from the straight edge, so no two cards are torn identically but the jaggedness never changes between reloads. Because clip-path drops the usual box-shadow, every "lifted paper" shadow must be filter: drop-shadow(x y blur rgba(36,28,21,alpha)), not box-shadow, so it follows the torn silhouette.

## Signature 1 — Paste-in entrance (used everywhere)
Every card-like element (hero tag/subhead/body/CTA, the six "On the Desk" clippings, the four manifesto notes, the five corkboard drag notes, the footer subscribe card) enters the same way: starts translateY(-34px), scale(1.14), rotated to its resting tilt plus an extra ±24deg (alternating sign by index), filter drop-shadow(0 0 0 rgba(36,28,21,0)); animates 0.7s ease back.out(1.7), staggered 0.09s per sibling, to translateY(0), scale(1), resting rotation, filter drop-shadow(0 10px 14px rgba(36,28,21,0.28)). Resting rotation for repeating cards is a small seeded value (article cards ±6deg, manifesto notes ±5deg) so the desk looks messily but deliberately arranged. In the hero this plays immediately on load (0.15s delay); elsewhere a scroll observer triggers it at 82% of viewport, reversing if the user scrolls back above it first.

## Signature 2 — Hover float
Any pasted element also lifts on hover/pointer-enter: translateY(-10px), scale(1.045), its rotation eases toward 60% of its resting angle (i.e. it partially straightens), and the drop-shadow grows to drop-shadow(0 24px 26px rgba(36,28,21,0.36)); duration 0.32s, ease power2.out, reversing with the same timing on pointer-leave. This must never fire while an element is mid-drag (see Signature 4).

## Signature 3 — Ransom-note headings
Three headlines are built letter-by-letter as a ransom note: hero H1 "TEARSHEET", manifesto H2 "CUT. PASTE. REPEAT.", footer H2 "NEXT ISSUE, PLEASE". For every alphanumeric character, deterministically (seeded, not Math.random at render time) pick: one of six fonts (display, mono, handwriting faces, "Georgia/Times New Roman serif", "Impact/Arial Narrow Bold sans-serif", "Courier New monospace"); one of six paper-chip colours (cream, manila, the hot-pink accent w/ cream text, mint #CFE8DA, sky #CFE1F2, ink-black w/ cream text); resting rotation ±10deg; resting vertical jitter ±5px. Spaces are a blank gap; punctuation is a small plain (non-chip) character. Each chip has a small permanent (unanimated) box-shadow. On reveal (immediate in the hero, scroll-triggered elsewhere), letters animate from opacity 0, scale 1.2, resting rotation ±28deg extra (alternating) and resting y -30px extra, to opacity 1, scale 1, resting rotation/y, over 0.5s ease back.out(1.8), staggered 0.045s per letter. The same mechanic, same numbers, reappears in all three headings — that repetition below the fold is the point.

## Signature 4 — Drag-to-rearrange corkboard corner
The "Pin Your Own Corner" section is a bounded, overflow-hidden corkboard rectangle (seeded canvas speckle texture: ~260 dark/light ellipses over a tan base, repainted on resize) holding five draggable notes — three handwritten sticky notes ("KEEP THIS??", "call back —", "IDEA:") and two real-photo clippings ("exhibit A", "don't lose") composited with the Imagery white-mat/multiply technique. Every note also plays the Signature-1 paste-in and Signature-2 hover float. Positioning uses left/top percentages (not transform) so it never fights the rotate/scale transform GSAP owns for entrance/hover/drop. On pointerdown a note lifts to scale 1.07 and rises to the top z-index; on pointermove left/top update directly from the pointer delta, clamped between 9% and 91% of the container; on pointerup it settles at a new random rotation (old resting rotation ±12deg) over 0.4s ease back.out(1.6), becoming its new resting rotation. Notes are focusable (tabIndex, role="button", descriptive aria-label), nudgeable 3% per arrow-key press, and use touch-action: none so touch drag doesn't scroll the page.

## Imagery
Six "On the Desk" clippings and two corkboard notes use real local WebP stills instead of a drawn silhouette (~800×800, under 300KB): each a die-cut sticker — one object, centered, studio-lit, plain white background, its own torn cream-paper edge baked in, no text/watermark/logo anywhere. Composite every one identically: wrap the <img> in a "mat" div (background #FBF7EC, aspect-ratio 1/1, padding 10px on desk cards / 5px on corkboard notes, box-shadow 0 0 0 1px rgba(36,28,21,0.07) + 0 3px 8px rgba(36,28,21,0.22)); give the <img> width/height 100%, object-fit: contain, mix-blend-mode: multiply — its white canvas multiplies away into the mat while the deckled edge and object stay crisp. That mat is the CSS reinforcement of the scissor-cut edge, layered atop the card's torn-paper clip-path. Every generation prompt shares the suffix "die-cut magazine cutout, torn cream-paper edge, plain white studio background, soft even lighting, no text, no watermark, no logo," with these per-asset subjects: (1) vintage black-and-chrome 35mm SLR camera, three-quarter angle — "The Last Video Store on Earth"; (2) cream canvas low-top sneaker, navy trim, side profile — "How to Disappear for a Weekend"; (3) 1980s cassette tape, straight-on, smoke-grey shell, orange reels — "Who Stole the Mixtape?"; (4) single orange gerbera bloom with two leaves — "Maps of Parking Lots We Loved"; (5) mid-century walnut lounge chair, burnt-orange upholstery — "Kids Who Build Fonts at 2AM"; (6) tortoiseshell cat-eye sunglasses, glossy acetate — "A Defense of Bad Photocopies"; (7) swallowtail butterfly from directly above, wings spread — corkboard note "exhibit A"; (8) vanilla soft-serve on a waffle cone, straight-on — corkboard note "don't lose."

## Section 1: Hero
Full-viewport-height section on the dark walnut vignette background. A soft hot-pink radial "desk lamp" glow div, ~640px wide, follows the pointer with a lerp of 0.07 inside a ±42px range (the page's cursor-reactive ambient signature). Content, left-aligned: a cream paper tag "ISSUE NO. 07 — THE SPLICE ISSUE" (paste-in, rest rotate -3deg); the ransom-note H1 "TEARSHEET"; a pink subhead "a zine assembled entirely from other people's magazines."; a body line "Cut with scissors, held together with tape, printed whenever the office scanner cooperates."; a pill CTA "Read the Issue ↓" scrolling to the next section; a mono footnote strip "PRINT RUN: SMALL BATCH · NO ADS · MOSTLY TRUE". Two washi-tape strips pin near the tag and bottom-right, each swaying ±1.4deg on its own random 5–9s loop (seeded per instance) — this idle sway lives on its own element, independent of any GSAP transform, so the two never fight.

## Section 2: On the Desk
Eyebrow "THIS ISSUE" + heading "On the Desk". A responsive grid (auto-fit, min 230px columns) of six torn-edge article clippings on manila paper, each with: the real die-cut photo described in Imagery, mounted in its white mat at the top of the card, a hot-pink tag pill (DISPATCH, INVESTIGATION, PROFILE, ESSAY, ARCHIVE, GUIDE), a bold title, a one-line blurb, a small "pg. NN" reference in the corner, and one swaying tape strip. Sample titles: "The Last Video Store on Earth", "Who Stole the Mixtape?", "Kids Who Build Fonts at 2AM", "A Defense of Bad Photocopies", "Maps of Parking Lots We Loved", "How to Disappear for a Weekend".

## Section 3: Manifesto
On a slightly different desk tone (#5C4B3B) with faint horizontal ruled lines (a repeating-linear-gradient every 28px) suggesting a legal pad. Eyebrow "THE MASTHEAD SPEAKS" + the ransom heading "CUT. PASTE. REPEAT." Four cream index cards, handwritten font, one short manifesto line each: "Nothing here is original. Everything here is ours now.", "A zine is just other people's magazines, cut into new sentences.", "If it isn't a little crooked, we didn't make it.", "Tape is a design decision."

## Section 4: Pin Your Own Corner
Eyebrow "YOUR TURN" + heading "Pin Your Own Corner", instruction line "Drag the clippings. Rearrange the desk. Nobody's watching but the cork board." Then the corkboard drag area described in Signature 4.

## Footer
Dark walnut vignette again (bookending the hero). A single torn subscribe card holding the ransom heading "NEXT ISSUE, PLEASE", copy "Issue 08 starts here. Choose your reading shelf and keep a little piece of the desk.", and a CTA "Preview Issue 08". Beside it, a circular ink stamp (SVG text-on-path) reading "APPROVED FOR PRINT · ISSUE NO. 07 · TEARSHEET" around a bold "07", and a colophon list ("Edited by M. Voss", "Design & paste-up: R. Iyer", "Photocopies: the office Xerox", "Proofreading: nobody, evidently"). Close with a small fine-print disclaimer that TEARSHEET is fictional.

## Scroll animations
A thin accent progress rule under the nav fills from 0 to 100% scaleX scrubbed against total page scroll. Every section below the hero uses the exact Signature-1/Signature-3 mechanics on scroll-enter (82% threshold), reversing on scroll back up. Respect prefers-reduced-motion: reduce globally: skip the paste/ransom entrance tweens and hover lift (set final opacity/rotation/shadow immediately instead), stop the tape sway and lamp parallax, and keep drag fully functional but without the lift/settle animation.

## Performance & accessibility
Clamp devicePixelRatio to 2 for the one remaining canvas paint (the corkboard texture) and repaint it on resize alongside ScrollTrigger.refresh(). Load every real photo with loading="lazy" and draggable={false} (native image drag would fight the custom pointer-drag). Give decorative elements aria-hidden, each photo a short descriptive alt (e.g. "Cut-out photo of a cassette tape"), ransom letters aria-hidden with one visually-hidden full-text span per heading, and keep drag notes keyboard-operable as above. Nothing should ever sit perfectly static: the lamp glow drifts with the cursor, every tape strip sways continuously, and hover/drag stay live at all times.

## Action flow and content

Implement the following local planning experience for the primary CTA, in the visual language of the page. Use a real button opening a labelled modal dialog. Choosing a pricing card must preselect that exact plan. A navigation link may move to another section; a planning CTA must lead to its review flow.

Use this content for the dialog, including the option details and notes:

{
  "slug": "collage-desk",
  "brand": "TEARSHEET",
  "accent": "#984862",
  "title": "A place in the next issue",
  "intro": "Choose the part of the desk you want to follow and keep a reading note for Issue 08.",
  "facts": [
    [
      "On the desk",
      "Cut-paper experiments, found type and working notes"
    ],
    [
      "Issue 08",
      "An editorial sample in progress"
    ],
    [
      "Format",
      "A guide you can save and return to"
    ]
  ],
  "groups": [
    {
      "label": "Reading shelf",
      "options": [
        {
          "title": "Type & composition",
          "detail": "Found lettering, torn edges and the rhythm of a page."
        },
        {
          "title": "Tools & process",
          "detail": "Paper, tape, drawing and the small decisions behind a composition."
        }
      ]
    }
  ],
  "notes": [
    "No subscription or delivery is created. Save this sample guide to keep the selection."
  ]
}

- Explain before input that this is a fictional brand sample: choices can be reviewed and saved, with no external submission, booking, payment or registration. Use each brand's language. Do not launch a mail client or present an installer for a fictional product.
- Give every option group a legend, inputs explicit labels and errors linked descriptions. Validate options against the allowed values, requested dates as actual dates from today onward, and free text as 10–2,000 trimmed characters. Blank spaces alone must fail. Tracking accepts the sample reference TG-2048 only.
- Focus the first invalid field and preserve every entered value. On success, show the selected option WITH its full detail, requested date or brief, relevant facts and notes. An edit action returns to the preserved form. Do not claim a real reservation, purchase or account has succeeded.
- Save the complete review as UTF-8 text. A browser download request is not proof of a file being written. On download failure, retain the full text in a labelled, selectable textarea and offer retry. Do not show a false success state.
- Constrain modal content to the viewport with internal scrolling. Support keyboard and touch, trap focus while open, close on Escape and restore focus to the exact initiating control. Keep these operations available with motion disabled.
- If a separate project-contact CTA is present, let it collect a project brief and review it locally; a product selection CTA must retain the product choice. Verify both flows independently.