Sites like noth.in (Paris creative studio) look expensive because of restraint and motion craft, not a complicated stack. Inspected directly: it’s a Webflow site (CMS-less, one-page marketing build) with a small custom JavaScript bundle layered on top, built with Vite and shipping GSAP (core + ScrollTrigger-style scroll animation).
What’s actually running under the hood
- Platform: Webflow. Confirmed via
data-wf-site/data-wf-pageattributes and the Webflow-hosted CDN scripts (jQuery 3.5.1 + webflow.js). No React, no Next.js, this is a Designer-built marketing site, not an app. - Custom animation layer: a separate ~750KB bundle hosted on Netlify, built with Vite, bundling GSAP directly into the page. It injects a small stylesheet at runtime that defines custom attributes:
[line],[letter],[opacity],[scale], all starting atopacity:0orscale(0)until GSAP animates them in on scroll. This attribute-driven pattern (mark elements with a plain HTML attribute, let one JS file scan the DOM and animate anything with that attribute) is exactly how agency sites bolt sophisticated motion onto a no-code builder without hand-wiring every animation. - Cursor + mask reveal: a custom cursor element and a
.mask-reveal-canvaslayer positioned absolutely over the hero video background, used for a wipe/reveal effect on load. - Typography: « Ppneuemontreal » (PP Neue Montreal, a premium grotesk from Pangram Pangram) for display type, paired with IBM Plex Mono for numbers and small labels. That grotesk-plus-mono pairing, loaded via Google Fonts’ webfont.js loader, is doing most of the « designed » work.
- Analytics: standard GA4 + Google Tag Manager, nothing exotic.
The structure (top to bottom)
Minimal nav (wordmark + « MENU » trigger) → full-viewport hero (one 3D/video visual, oversized overlapping wordmark, one tagline) → a short editorial statement (2-3 sentences, huge line-height, no imagery) → a numbered work/case-study grid (01 through 07, one line of client name + one line of description each) → a studio philosophy block paired with a plain bullet list of services → team names grouped by role, no photos → a full-bleed looping marquee ticker repeating the brand line → one closing CTA line, a single button, contact links, copyright.
Monochrome throughout, black and white, exactly one accent used once: the hero’s visual object itself, never a UI color. No gradients, no card shadows, no rounded corners.
The prompt to recreate this pattern
This is written to be handed directly to Claude, Cursor, or any AI coding assistant. It describes the structure and motion system, not noth.in’s actual copy or brand assets, swap in your own content at the end.
You are building a one-page studio/portfolio site in the style of high-end creative-agency sites (think noth.in): monochrome, oversized type, editorial restraint, one signature visual moment in the hero.
Stack: plain HTML/CSS + a small vanilla JS bundle (or React if the target project already uses it) + GSAP (core + ScrollTrigger) for animation. No heavy framework needed for a one-pager.
Structure, top to bottom:
1. Nav: logo/wordmark left, "MENU" trigger right, minimal, fixed or absolute over the hero.
2. Hero: full-viewport, one arresting visual (video loop, 3D render, or a single bold graphic) centered or offset, oversized wordmark type overlapping it, one small tagline line beneath. Background is a single flat color (black or white), never a photo collage.
3. Statement section: one short editorial paragraph (2-3 sentences, first-person plural "we"), huge line-height, generous margins, text-only, no imagery.
4. Work/case-study grid: numbered items (01, 02, 03...), each with a one-line client name + one-line description, revealed on scroll. Alternate text-left/image-right or stack vertically on mobile.
5. Studio/philosophy section: another short statement block, this time paired with a simple bullet list of services (3-6 items, no icons, just a clean list).
6. Team: names grouped by role (Founders, Creative Partners, etc.), plain text, no photos required.
7. Marquee ticker: one looping horizontal line of repeated text (the brand tagline or "we are [name]"), full-bleed, gives the page rhythm before the footer.
8. CTA/footer: one big closing line, a single button ("Book a call" / "Let's talk"), contact links (email, socials), copyright line.
Animation rules (this is what makes it feel expensive, not the layout):
- Text reveals: split headings into lines or words, animate opacity + a small Y-offset (8-20px) staggered on scroll into view via GSAP ScrollTrigger. Don't animate every paragraph, just headings and section intros.
- One custom cursor: a small circle that follows the pointer with slight lag (lerp/easing, not 1:1), and scales up over links/buttons.
- The hero visual can mask-reveal on load (a canvas or clip-path wipe), but keep it to one moment, not on every section.
- Respect prefers-reduced-motion: fall back to instant opacity/no stagger.
Typography: pick ONE display grotesk (e.g. a PP-foundry-style geometric sans) for headings, and ONE monospace for numbers/labels/eyebrow text (e.g. IBM Plex Mono, JetBrains Mono). That contrast (grotesk headline + mono label) is doing a lot of the "designed" feeling.
Color: black and white only, one accent used exactly once (the hero visual itself, not a UI color). No gradients, no drop shadows, no rounded cards.
Build it as: [describe your actual content here - your name/studio, your services, your case studies/work examples, your team]. Keep copy short: headline under 8 words, statement under 40 words, each work item under 15 words.
Why this pattern reads as « premium »
It’s not the layout, one-page studio sites are a commodity template at this point. It’s three things stacked: (1) real restraint, one accent, one visual moment, no clutter, (2) a grotesk+mono type pairing instead of a single generic sans, and (3) scroll-triggered text reveals plus one custom cursor, motion that responds to the user instead of just autoplaying. Any of the three alone looks fine. All three together is what reads as agency-made.
