Ten Years Away

Six prompts, in build order. Each one describes the visual language, not the original site.

• Main build prompt+−

  Copy

  Build an original interactive comic-story experience whose signature is a vivid, tactile illustrated book cover suspended inside a dark title stage, then a click-driven passage into a bright, horizontally travelling field of comic panels. Use the following dimensions and timings as reconstruction targets inferred from the reference, not exact measurements of the original implementation. Design the primary desktop scene for 1920×968 (≈1.98:1), and preserve that stage ratio for any WebGL render surface or offscreen cover treatment.
  
  Begin with an almost black blue-grey ground (#212635) with low-contrast paper grain and cloudy tonal movement. At the top centre place a tiny pale utility message; put a small progress/instruction line at bottom centre. Set one enormous uppercase, condensed sans headline across the top edge, around 110–155px on this desktop target, pale blue-white (#dbdde3), bold, tightly tracked, and deliberately cropped by the viewport. Add a small three-line introductory note at upper left, a short italic serif aside at upper right, a thin vertical line near the right edge, and huge outlined years along the bottom left and right. The outlined numerals should be roughly 110–145px, transparent inside, with a 1–2px pale stroke. Keep this stage sparse and atmospheric.
  
  Center an original illustrated portrait-format comic cover approximately 310–360px wide and 450–535px tall. It needs dense, energetic hand-drawn linework, halftone fields, muted teal/pink/red/ochre accents, and an original angled title mark integrated into the artwork. Source it by commissioning an illustrator or producing your own artwork; do not use a real publication’s drawings, characters, logos, or copy. Give the cover roughly 15–30px of soft black shadow and a faint perspective tilt. Make it the only saturated object against the dark field.
  
  On entry, let the oversized surrounding typography and timeline annotations withdraw while the cover enlarges into a near full-height portal. Transition into a near-white #f5f6f9 story space with a subtly mottled paper texture and cool grey #c5c4ca atmospheric patches. A narrow top navigation remains fixed: tiny black uppercase links at far left, small language/audio controls at far right, a compact original illustrated diamond-like masthead in the centre, and hairline horizontal rules extending out from it. Keep a one-line project descriptor bottom centre and a tiny studio credit bottom right. Use your own labels and narrative copy, not source wording.
  
  The main reading surface is not a vertical card grid. Position separate, black-outlined comic frames in a large horizontal world, typically 280–570px wide and 180–300px tall, leaving huge white negative space around them. Populate them with original monochrome sequential drawings: collaborators at desks, a close view of a computer display, a local sports court, or similarly personal work-and-life scenes. Use off-black hand ink, pale grey washes, speech balloons, a small single-colour monitor glow, and a separate halftone-dot disc as a graphic counterweight. Panels should look physically placed, with very soft shadows; retain rectangular frames and modest irregularity in placement, not a neat masonry system.
  
  A practical recreation is a full-viewport DOM shell with a WebGL canvas behind or above it only for the cover’s perspective/depth transition and paper-like ambient treatment. Use CSS/SVG for navigation, rules, labels, outlines, panel borders, and halftone dots. Drive the story journey with a controllable horizontal world transform: wheel, trackpad, drag, arrow keys, and a visible start affordance should all advance it. Smoothly interpolate movement rather than forcing native horizontal scroll. Ensure normal keyboard focus remains possible and offer a clear ‘enter story’ button with an accessible name.
  
  At the desktop target, retain generous empty space; panel composition matters more than showing many panels at once. On touch screens, adapt the experience to vertical swiping while maintaining the same panel order and the fixed masthead. Use semantic buttons, links, labelled navigation, sufficient contrast for small labels, and descriptive alt text/transcripts for each narrative panel. Respect reduced motion by replacing the portal fly-through with a quick crossfade and using discrete panel-to-panel movement. Preload only the cover and first two story images; defer subsequent art, cap texture DPR on low-power devices, and use a static CSS paper field if WebGL is unavailable.
  
  Do not add a generic hero CTA cluster, feature cards, testimonials, rounded UI pills, bright gradient blobs, a conventional marketing footer, or dashboard-like chrome. The experience must remain an authored comic environment: quiet labels, large empty paper, inked frames, and one dramatic passage from cover to story.

• Build frontend
• Generate assets
• Add animations
• Responsive polish
• Final visual polish

These prompts describe a visual language: composition, rhythm, type scale and motion. Build with your own branding, copy, logos and imagery — the design and content of Ten Years Away belong to their authors.

Agent

Claude Code

Model

Claude Opus 5The reconstruction hinges on a carefully sequenced WebGL cover transition and a high-fidelity spatial comic reader rather than a conventional document layout.

The spatial visual system and observed transitions are practical with mature WebGL and timeline tooling; the main remaining challenge is commissioning an equally distinctive original comic illustration set.