100 Lost Species

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

• Main build prompt+−

  Copy

  Build an original immersive conservation/editorial archive, led by this signature: a dark extinction-themed threshold transforms into a white, freeform field of softly rendered wildlife studies. Use the following dimensions and timings as reconstruction targets inferred from the reference, not exact measurements of the original implementation. Compose the desktop experience for a 1920×968 stage (approximately 1.98:1); keep any full-screen raster or transition layer at this ratio, such as 2560×1290 or 3840×1936.
  
  Begin with a fixed, pure-black full viewport. Center a tiny outlined square emblem about 120–150px above a three-line, elegant high-contrast serif headline; write an original headline, not a borrowed one. Target roughly 40–46px desktop type, ~1.02 line-height, normal weight, and restrained tracking. Beneath, place an original two-line mission paragraph in a very small neutral sans, roughly 9–11px and ~1.45 line-height, followed by a sharp white 46×24px entry button. Keep the central stack optically quiet and narrow, around 430–520px wide. Add a small attribution-style line at the bottom center using original credit copy.
  
  Surround the central message with roughly 18–30 dim charcoal paper-strip rectangles. They should form a loose, broken circular orbit approximately 620–880px wide, with varied lengths, slight rotations, and low opacity. They are background punctuation, never a decorative particle effect. Slowly drift/rotate them to create an uneasy archival void.
  
  On entry, use a screen-filling wash from black through smoky grey into #fcfcfc, then reveal the archive. The gallery ground is warm paper white (#fcfcfc), lightly mottled with sparse grey dust, faint grain, and extremely subtle pale beige watercolor blooms (#f2ead5). Keep texture nearly imperceptible: it should read as a scanned paper atmosphere rather than a patterned background. Ink is #000000 and supporting labels are #7f7f7f.
  
  The gallery is a deliberately irregular desktop field of about 15–20 visible square and near-square art prints at once, with additional pieces beyond the viewport. Aim for five loose columns, but do not use uniform cards or equally aligned gutters. Let some prints crop at left/right/top edges. Most tiles are around 145–205px square, while a few vary by roughly 10–25%; vertical offsets should prevent obvious rows. Use original generated or commissioned-style wildlife portraits: small mammals, birds, a dog-like species, an elephant-like animal, and one cool blue aquatic subject are useful diversity cues. Every image needs an aged natural-history watercolor treatment: subdued cream, moss, umber, and foggy blue; quiet paper grain; diffuse painted boundaries; no hard product-photo crop, no captions embedded in the art.
  
  Use a sparse fixed utility layer above the art: an upper-left small square mark plus two-line original archive title, a centered 9–10px “scroll to explore” instruction, and one upper-right utility action. At upper left below the identity, provide three compact 70–105px black rectangular filter tabs, with one active muted-green state. Put a small circular outlined progress/control at the lower-right edge. Add a compact bottom-left explanatory note and an unobtrusive central-bottom index/readout. Labels must use original content.
  
  On pointer hover, slightly brighten or sharpen one image and reveal a tiny black exploration tag near its upper portion; reveal a centered muted-grey two-line specimen caption below it. On activation, transition into a detail mode: retain the off-white field and utility layer, replace filters with a close action, and isolate one approximately 280–360px square illustration near the horizontal center and upper-middle of the viewport. Put the original common-name-style title beneath in elegant serif around 14–18px, then a smaller Latin-style secondary line. Leave the rest deliberately empty.
  
  Use DOM images, CSS texture layers, and transform-based animation; a practical implementation can use GSAP for the crossfade, compositional rearrangement, and hover timing. Load a low-resolution placeholder first, then decode and fade full images in. Respect reduced motion with a direct, short opacity transition into a stable gallery and no drifting fragments. Ensure tab buttons and tiles are keyboard accessible, have visible focus rings, meaningful alt text, and a non-hover path to each detail view.
  
  Do not add generic feature sections, large navigation bars, rounded cards, drop shadows, testimonials, marketing gradients, oversized statistics, or a standard masonry feed. The restraint, paper-like emptiness, and cinematic black-to-white transformation are the identity.

• 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 100 Lost Species belong to their authors.

Agent

Claude Code

Model

Claude Sonnet 5This needs careful full-viewport sequencing, an irregular responsive editorial gallery, and polished hover/detail states, but no observed 3D or rendering engine.

The visual system and observed screen-scale motion reproduce reliably with current frontend tools; the main remaining challenge is art-directing a large, stylistically consistent illustration collection.