Nudot Studio

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

• Main build prompt+−

  Copy

  Create an original immersive portfolio landing page whose signature is a fixed, oversized split masthead over a constantly evolving full-viewport visual 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); all stage imagery, canvas render targets, video posters and fallback images should retain that wide ratio, for example 2560×1290 or 3840×1936.
  
  Build a full-bleed dark-to-light art-directed stage behind a persistent editorial HUD. The background should transition between at least three original visual worlds: a near-black glossy mineral/chrome object field; a pale floating geological garden with moss, translucent fungi, petals and slow drifting particles; and a high-contrast distressed still-life/editorial composition with paper, ink, leaves and a phone-shaped object. Make original assets or generate/licence fresh substitutes; do not use another studio’s logos, writing or project artwork. A practical recreation uses Three.js for the scene layer, with a DOM HUD above it. Use full-width poster images or short original video loops as a lower-capability fallback.
  
  Pin two enormous uppercase sans-serif words to the upper edge, one aligned left and one aligned right. At desktop, target roughly 94–106px type, weight 700, tight negative tracking around -0.06em, and a line height near .8. Leave a central gap of about 120–180px for a small abstract own-brand mark plus a micro-label. On dark scenes make the masthead chalk-white (#fbfbfb); on pale scenes let it become graphite (#3c3b3c). Preserve the exact same headline geometry as scenes change so the visuals appear to move beneath an institutional frame. Use an expansive grotesk such as Zalando Sans SemiExpanded for the display treatment and DM Sans for UI text. Use the grid-like mono face only for counters, markers or tiny technical labels.
  
  Lay a transparent technical grid over the scene: a fine horizontal rule around 27–29% viewport height, a second information zone in the lower third, and a near-invisible vertical center axis. Set rules to a scene-aware 15–28% opacity. At left around 25–28% viewport height, place a 4-item navigation in 9–11px uppercase with ~.12em tracking. Above or beside it put a short three-to-four-line service list in your own language. At right, place a similarly compact four-line capability list near the top third, a bracketed section cue near the central rule, a 128×72px-ish preview tile around the right-middle/lower area, and three small social labels beneath. Use original labels only.
  
  At center-lower, add a project index such as “02 / 05”, a tiny category label, and an active row of roughly 25–34 narrow vertical ticks. Beneath it, set a horizontal thumbnail rail about 360–470px wide and 32–44px tall, composed of six to eight small original scene thumbnails in a translucent dark strip. Add very small contact/legal text at the bottom-left. Keep all peripheral text deliberately quiet: around 8–10px, white or graphite at 60–80% opacity.
  
  The scene should be the movement, not the HUD. Start on a dark composition, then over approximately 2–4 seconds introduce reflective spheres and a central faceted mark/object. Transition over about 1–2 seconds into the pale botanical island through a controlled bloom, zoom and reframing; have flowers, motes and droplets cross in front of the masthead while the text stays sharp. Let the island slowly rotate or camera-drift for several seconds, then switch to a grainy, more graphic black-and-white editorial world with a brief RGB edge split and noisy texture. A small dotted cursor trail or animated right-angle path can intermittently arc around the center; keep it subtle and purposeful. Use GSAP for timeline coordination and the available smooth-scroll library for scroll feel, but use time-based scene changes only if no scroll narrative is needed.
  
  Render the stage beneath all text. Place the scene at z-index 0, a low-opacity contrast wash at z-index 1, grid lines at 2, HUD text at 3, and pointer path/interaction feedback at 4. Protect readability dynamically: use a gentle translucent wash behind small labels or calculate a light/dark HUD theme per scene. Do not add rounded SaaS cards, gradients as decoration, large CTA pills, feature grids, testimonials, cookie-style popups or soft drop shadows.
  
  For interaction, make thumbnails and side preview select original scenes; on hover, brighten the chosen thumbnail, update the index/title and crossfade or camera-transition the stage. On pointer move, apply only a slight parallax/camera bias, roughly 2–4% of the stage width. Support keyboard selection through focusable thumbnails, visible focus rings and left/right arrows. Give the canvas an accessible text alternative describing the currently selected original project. Respect prefers-reduced-motion by showing a stable poster scene, preserving manual project selection, and replacing sweeping camera motion with a 180–250ms opacity transition. Keep initial page content functional before the 3D assets finish loading, limit DPR on mobile, pause offscreen rendering, and serve compressed textures and responsive posters.

• 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 Nudot Studio belong to their authors.

Agent

Claude Code

Model

Claude Fable 5.1A layered Three.js scene system, dense art-directed HUD, shader transitions, and responsive fallbacks require sustained high-fidelity frontend reasoning.

The grid, typography and HUD are highly reproducible, but the visual identity depends on original, polished 3D worlds and nuanced scene-to-scene art direction. A close structural recreation is practical without reproducing proprietary imagery.