BUNQ LABS

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

• Main build prompt+−

  Copy

  Build an original studio portfolio experience centered on one recognisable idea: a full-viewport, cinematic real-time 3D world that continuously carries the visitor through radically different environments while an extremely spare editorial UI stays fixed above it. Use the following dimensions and timings as reconstruction targets inferred from the reference, not exact measurements of the original implementation. Compose every scene for a 1920×968 (≈1.98:1) stage; preserve that ratio for posters, render targets, background plates, and fallback video.
  
  Create a black opening state with only a small abstract white monogram at center. Over roughly 1.5–2.5 seconds, reveal a misty, near-monochrome mountain or crag occupying the lower 40–55% of the frame, a freestanding black rectangular portal behind it, and faint airborne dust. The environment should feel like a high-grain art film: near-black foregrounds (#020202), graphite surfaces (#242324 and #3b3b3b), fog-grey atmosphere (#9c9b9c), and cool off-white type (#dbdbdb). Reserve vivid colour for rare scene-local accents only: for example, a small scarlet geometric marker or a self-contained emerald-green project world. Do not use purple gradients, generic feature cards, glossy SaaS panels, testimonial sections, floating glassmorphism, or drop-shadow-heavy UI.
  
  Render the scene with Three.js on a full-bleed WebGL canvas at z-index 0. Use a fixed DOM overlay at z-index 10: around 20–30px horizontal inset, place a tiny rule or utility mark at far left, a work link left of center, an abstract own-brand symbol at center, an about link right of center, and a contact link at far right. Set these labels in uppercase Inter Tight around 10–12px, firm weight, close line height and modest tracking. Use Larken for expressive display lines: around 72–96px on desktop, ~0.92–1.0 line-height, normal weight, with the typography spanning almost the full lower width when it enters. Use JetBrains Mono around 9–11px for metadata, labels, and CTA text.
  
  Build four to five scene states: a foggy rock-and-portal opening; a dark portal with a framed project surface; a saturated green chamber where particles stream between two circular mechanical emitters; a dark architectural lounge with three tall illuminated panels and sculptural furniture; and a misty water scene viewed over the bow of a small boat. Let the camera and scene content move, rather than treating these as ordinary page sections. Keep the persistent navigation readable by dynamically switching between pale and dark text based on the scene luminance.
  
  In the opening scene, introduce one giant original headline in Larken across the lower edge, broken into two visual phrases with a small saturated-red abstract separator. Do not reuse any wording from the reference. Add a compact black pill CTA centered near the lower edge, around 200–250px wide and 32–40px tall. In later scenes, use isolated project labels, a pair of thin circular previous/next arrow controls, and sparse mono metadata. In the water state, center a large two-line serif invitation in the upper-middle, a short mono supporting line below, and a small black pill CTA.
  
  A practical recreation is a Three.js scene graph with separate environment groups and one camera route; use asset-light low-poly or scan-like geometry, baked texture detail, fog, volumetric-looking translucent planes, particles, and restrained post-processing. Do not make visual plausibility depend on expensive true fluid or volumetric simulations. Offer an accessible semantic HTML outline beneath/alongside the canvas: navigation landmarks, real buttons/links, text content, keyboard-operable scene controls, descriptive labels, and a reduced-motion alternate view made of still scene images with normal content flow. Lazy-load noninitial 3D assets, cap device-pixel-ratio around 1.5–2, pause rendering offscreen, and provide a poster-image fallback when WebGL is unavailable.

• 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 BUNQ LABS belong to their authors.

Agent

Claude Code

Model

Claude Fable 5.1This reconstruction needs sustained work across a real-time Three.js scene, cinematic transitions, responsive UI overlays, and close lighting and composition tuning.

The visual system and observed camera-led motion reproduce reliably with current WebGL tooling; the main remaining challenge is art-directing believable bespoke environments, materials, and transitions to the same atmospheric standard.