Kinetic Black Slab Portfolio Intro

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

• Main build prompt+−

  Copy

  Build an original art-director portfolio experience whose signature is a tall procession of overlapping portfolio-image planes moving through a pale-grey fullscreen stage. Use the following dimensions and timings as reconstruction targets inferred from the reference, not exact measurements of the original implementation. Frame the desktop composition at 1920×968 (approximately 1.98:1), and preserve that wide ratio for any WebGL render target or fallback poster.
  
  Use #e7e7e7 as the nearly full-page ground and #000000 for active text, image edges, and the strongest labels. Reserve #cccccc for inactive entries that should appear faint but readable; #1b1b1b may appear only in dark loading/media states. Make the page feel nearly borderless, shadowless, and square-cornered. Do not add rounded feature cards, a hero slogan, a client-logo strip, a testimonial carousel, decorative gradients, or a conventional masonry grid.
  
  Lay out a fixed five-zone shell. At the far upper-left, place a narrow vertical identity rail around 30–44px wide with an original vertical wordmark and a small changing monochrome stamp/illustration beneath it. Around 135–165px from the left, place a tiny “Menu” label near the top and a compact four-item stacked navigation list around 42–54px below it; make each active item set in a condensed, emphatic grotesk at roughly 17–23px with tight leading. Center a small audio-status control near the upper fifth of the page. Place an availability/location micro-label around the x=48–52vw region. At top right, place a small enquiry cue and underlined generic email link about 38–55px from the right edge.
  
  The center is not a static hero image. It is a depth scene containing roughly 10–18 flat rectangular artwork planes travelling along a mostly vertical path. At any instant, one strongest plane occupies roughly 210–290px wide by 145–220px high around x=40–55vw and y=35–65vh. Additional planes overlap above and below it, with some cropped by the viewport. They should have subtly different sizes, z-depth, and rotations, generally within about -10 to +10 degrees, so the ribbon reads as a physical stream of loose printed sheets. Keep their raw rectangular edges; do not put them inside UI cards. Use high-quality original or generated substitute work imagery: a moody face crop, people in a studio, an architectural/interior scene, an editorial product image, a dark abstract 3D form, and print/interface compositions. Vary crop and art direction while keeping all images cohesive enough to imply a single portfolio.
  
  At right, build a vertically stacked project index approximately 270–340px wide, positioned at x=72–91vw. It should show about 5–7 items at once. Each item has an ultra-small category line, a larger all-caps or narrow project title around 16–22px, then a 1–3 line blurb around 9–12px. The selected item is black and the rest fade toward #cccccc. Align two or three 8–11px coloured square swatches to the selected item’s far right as a quiet project palette cue. Treat all words as original placeholder content; do not reuse a real person’s name, project names, contact information, or descriptions.
  
  In the lower-left area, place a small “selected work” style label, a huge blurred two-digit index around 92–130px, and a tiny total-count suffix. The large number should be visibly soft/defocused and partly obscured by passing image planes, which makes the scene feel dimensional. Add a tiny scroll indicator closer to the lower-left edge and a compact underlined showreel-like action at lower right.
  
  For reconstruction, use a WebGL canvas for the central artwork ribbon because texture planes, overlap, and deep clipping are central to the visual identity. Maintain a DOM data model for projects, then synchronize selected index, visible right-side item, swatches, media texture, and counter with a continuous scene position. A practical implementation can use a shallow perspective camera and texture-mapped planes; keep it restrained, with no glossy 3D objects, particles, lens flares, or dramatic camera orbit. Use DOM/CSS for all typography and controls so they remain sharp and accessible above the canvas. Layer order: background, canvas stream, blurred counter behind selected planes where needed, then fixed navigation and right index above the scene.
  
  Start the experience with a brief stark loader: an almost black fullscreen field may slide or wipe away to reveal a white/pale panel and a large red, custom typographic greeting substitute plus a simple black line-drawn character. This initial illustration is optional after the first visit; it must be wholly original and should not include any original wording or branding. The main work browser then settles into the persistent pale interface.
  
  On pointer hover, let the active image plane gain only a gentle scale increase around 1.01–1.03 and sharpen its project metadata; keep the cursor ordinary or use a minimal text cue. Keyboard users must be able to focus previous/next controls and project entries, get an aria-live selected-project announcement, and navigate the project sequence without depending on the canvas. Provide an HTML image-and-list fallback if WebGL cannot initialize. Respect reduced motion by replacing continuous depth travel with a static centered image and explicit next/previous transitions. Lazy-load nonadjacent artwork textures, keep compressed responsive image sources, pause rendering when offscreen or backgrounded, and constrain the render loop to a stable frame budget.

• 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 Kinetic Black Slab Portfolio Intro belong to their authors.

Agent

Claude Code

Model

Claude Opus 5The core challenge is a finely tuned, continuously moving depth stack whose media, counter, and adjacent project metadata must remain precisely synchronized.

The sparse visual system and observed image-stream motion reproduce reliably with current frontend tools; the main remaining challenge is sourcing a varied, art-directed set of substitute portfolio imagery with comparable quality.