Special Production Agency

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

• Main build prompt+−

  Copy

  Use the following dimensions and timings as reconstruction targets inferred from the reference, not exact measurements of the original implementation. Build an image-led agency portfolio at the observed 1920×968 (≈1.98:1) desktop stage. Its signature is a vast near-white field interrupted by oversized, laterally moving editorial photographs: the user should feel as though they are looking through a living contact sheet rather than a conventional project grid.
  
  Set the base to #fcfcfc with charcoal #1c1c1a typography. Place a thin, fixed top bar at roughly 14–18px from the top and 10–18px from each side, above all imagery. At left place two compact all-caps text links; center a three-word placeholder wordmark in a heavy, extra-condensed display face; at right place two more short utility links. Render this chrome at around 10–15px on a 1920px screen, tight line-height, black, with no pills, borders, icons, or filled buttons. Use your own wordmark and labels.
  
  Below the header, create a wide project rail beginning around 78px from the top. The overview sequence is deliberately asymmetric: show 3–4 image panels across at once, with a dominant central landscape panel roughly 640px wide by 360px high, flanked by narrower portrait and medium landscape panels. On later states, rearrange this into a tall portrait, a near-square editorial photograph, and a broad monochrome landscape. Use gaps around 50–65px, but let the first and last panels crop off the viewport edges. Do not constrain work inside a centered max-width grid. Add a compact two-line project label directly over or immediately beside the active image: heavy condensed title on top, a lower-contrast supporting line beneath. A small vertical run of numbered markers may sit beside the active panel.
  
  Use substitute imagery only: generate or commission original high-fashion editorial photographs featuring diverse adult models, beauty product stills, studio jewelry portraits, backstage scenes, and moody city portraits. Prepare each image with intentional crops rather than generic stock-image framing. The overview should mix desaturated cool street imagery with warm studio fashion and black-and-white portraits. Do not use original names, campaign art, logos, or copy from the reference.
  
  A selected project should enter a detail mode that replaces the overview with a large, horizontally advancing poster rail. Each poster is approximately 360–450px wide and 450–560px high at desktop, with 24–40px gutters and neighboring posters visibly cut by both viewport edges. Design a coherent original luxury editorial series: use large elegant serif campaign lettering across the top of every poster, an outlined octagonal or faceted frame around a centered model, and varying pastel/pale backgrounds such as soft pink, buttery yellow, and saturated green. Put a tiny centered thumbnail strip near the bottom, with roughly 6–8 miniatures and a clear active state. Keep this as an authored campaign treatment made from original styling, not an imitation of a known brand.
  
  For reconstruction, use semantic DOM images or background layers plus CSS transforms; canvas and WebGL are unnecessary. Use object-fit: cover and per-image object-position values so the crop remains art directed. Keep the header at a higher stacking level than the overview but allow the detail gallery to use the whole visible field when its composition demands it. Preload only the active image and immediate neighbors; defer distant panels and reserve their dimensions to eliminate layout shifts.
  
  Animate the overview as a continuous or stateful lateral composition: panels should translate sideways, with the active project label changing as panels reach prominence. Make movements smooth and editorial rather than bouncy, roughly 700–1200ms for a project transition and around 4–7 seconds of held reading time if auto-advancing. Detail posters slide horizontally at a steadier pace and may be navigated by hover, drag, arrow buttons, keyboard arrows, and thumbnail selection. Preserve click/tap access to each project; do not make essential content depend on hover or autoplay.
  
  On smaller screens, preserve the oversized-image idea as a single-column or one-and-a-bit horizontal rail with large swipe targets, a compact header, and readable labels. Respect prefers-reduced-motion by showing a stable active project with manual next/previous controls. Provide useful image alt text describing the substitute subject and treat all links and carousel controls as keyboard-accessible. Do not add a hero slogan, service-feature grid, floating decorative shapes, rounded cards, drop shadows, testimonial carousel, gradient backdrop, or generic agency boilerplate; the restraint and the kinetic crop system are the design.

• 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 Special Production Agency belong to their authors.

Agent

Claude Code

Model

Claude Opus 5The defining challenge is a carefully tuned DOM-based horizontal gallery with art-directed cropping, route transitions, and responsive composition rather than 3D rendering.

The composition, typography, and observed lateral motion reproduce reliably with current frontend tools; the main remaining challenge is sourcing a coherent, high-end editorial image set with comparable art direction.