Sites like hirotos.com (Hiroto Sato, « Creative Developer, » Tokyo) look impressive because there’s a real interactive 3D/generative piece doing the work, not because of a complicated page layout. Inspected directly: it’s Next.js (Turbopack build chunks), with Three.js + react-three-fiber, GSAP, and p5.js all bundled into the client JS.
What’s actually running under the hood
- Framework: Next.js (App Router, Turbopack). A real React app, not a page builder, confirmed via the
_next/static/chunks/turbopack-*.jsbundle naming. - 3D/WebGL: Three.js plus react-three-fiber (the React renderer for Three.js) are bundled directly, found inside one of the larger chunk files (~1.5MB, the heaviest asset on the page). This is what powers the real-time 3D centerpiece, « Signal Pole, » visible in the hero.
- Generative visuals: p5.js is bundled alongside Three.js in the same chunk, likely driving a secondary 2D generative/particle effect rather than the whole scene.
- Motion: GSAP handles scroll-triggered UI reveals and likely camera/object motion tied to scroll position.
- Typography: Helvetica Neue LT Pro, plain black-on-white, no accent color beyond the 3D piece itself.
The structure
Minimal nav (Home / Projects / About / Contact, plain text links, no logo) → hero with the name « HIROTO SATO » in large type over a full-viewport 3D canvas, paired with a plain key-value metadata block (Base: Tokyo, Japan / Focus: Creative development, Motion, 3D modeling / Index: Portfolio 2026) → a plain project index rather than a card grid → simple text-only About/Contact.
The restraint here is doing as much work as the noth.in build’s restraint did, but the « wow » moment is a real interactive WebGL object instead of a locked visual anchor across static slides. That’s the key structural difference between this pattern and the Webflow/GSAP one-pager pattern from the last guide: here the technical centerpiece IS the content, not a decoration around text.
The prompt to recreate this pattern
Written to be handed directly to Claude, Cursor, or any AI coding assistant. Describes the structure and technical approach, not hirotos.com’s actual name/project copy, swap in your own details.
You are building a portfolio site in the style of a "creative developer" showcase (think hirotos.com): a real interactive 3D/WebGL centerpiece, not a static hero image, wrapped in a minimal editorial layout. Stack: Next.js (App Router), react-three-fiber + three.js for the 3D scene, GSAP for scroll-triggered UI motion, optionally p5.js for a generative 2D visual if you want a canvas-based sketch instead of/alongside the 3D piece. Structure: 1. Nav: 4 plain text links (Home, Projects, About, Contact), no logo needed, top-left or top-center. 2. Hero: one real interactive 3D object or scene rendered via react-three-fiber (not a video, not an image — an actual WebGL canvas the user can orbit/react to via mouse move or scroll). Name on top in large type, a short role/location/focus block as plain key-value pairs (Base: [city], Focus: [your specialties], Index: [year/version]). 3. Projects: a simple index/list, not a grid of cards — plain text list of project names, each linking to its own page. Restraint over decoration. 4. About/Contact: plain text, no imagery needed. Technical approach for the 3D piece: - Use react-three-fiber's <Canvas> as a full-viewport background layer behind the hero text (position: fixed or absolute, z-index below the text). - Keep the 3D object simple and iconic (one shape, one material, real-time lighting or a shader material) rather than a complex imported model — the "wow" comes from it responding to interaction (mouse position, scroll), not from geometric complexity. - Use GSAP ScrollTrigger to drive camera position or object rotation tied to scroll progress, so scrolling feels like moving through the piece. - If you don't want real-time 3D, p5.js on a <canvas> element can produce a generative 2D visual (particle system, flow field, noise-based pattern) as a lighter-weight alternative that still feels "alive." - Respect prefers-reduced-motion: pause continuous animation loops, keep the object static. Typography: one clean grotesk (Helvetica Neue or similar) at a restrained scale, plain key-value metadata blocks instead of decorative subheadings. Black text on white or white on black, no gradients, no card shadows. Build it as: [describe your own name/role/location/focus, your actual project list]. Keep the metadata block to 3-4 lines max, let the 3D/generative piece carry the visual weight instead of copy or imagery.
Why this pattern reads as « premium »
Three things stacked: (1) a real interactive centerpiece instead of a static image or looping video, genuinely responds to the user, (2) restraint everywhere else, plain text metadata instead of decorative UI, so the 3D piece has nothing competing with it, and (3) the technical stack (react-three-fiber, GSAP-driven camera motion) is visible in the experience itself, it doesn’t just look complex, it behaves complex. That combination is what separates a « creative developer » portfolio from a template.
