On my Opus Growth hosting server
[server name], build a fast multi-page site for
[studio name] with the feel of the creative studio sites featured on Awwwards. Studio:
[what it designs, for whom], city and district:
[city, district], team:
[headcount, names and roles]. Services:
[3 services]. Work: [for each, client name, type of work, year, one sentence on the question, one on the solution, the parts delivered, image link]. Contact:
[email],
[phone],
[WhatsApp number],
[address]. Domain:
[domain]. Colour preference:
[colour or "you choose"].
Pages: home (/: hero with an oversized heading, scrolling services marquee, selected work, what we do, process, FAQ, closing call to action), work (/isler/: the question, what we did and what we delivered for each project), studio (/studyo/: team and working rules), contact (/iletisim/), privacy and KVKK (/gizlilik/) and 404.html. No form on the contact page; give email, phone and a WhatsApp link with a prefilled message, plus a list of what to include in the first message. Without figures approved by the client, describe results qualitatively and write no percentages or growth numbers.
Style: Awwwards-style creative studio. Off-white background, black text and a single signal colour used only as a background (with black text on it, at least 4.5:1 contrast). A Fontshare display face that holds up at very large sizes (for example Clash Display 600) and a calm body face (for example Ranade). The hero heading fills the screen with clamp between 3.2rem and 12.5rem and tight letter spacing, without overflowing at 360 px. The work list is a set of rows with large images and large titles in an asymmetric grid that alternates 7/5 and 5/7 columns.
Motion rules (the hardest part, follow them to the letter):
1. Libraries: GSAP 3.13 core, ScrollTrigger, SplitText and Lenis, only on the home and work pages. No scripts at all on the studio, contact and privacy pages. Do not load Swiper, WebGL or video.
2. SplitText: the h1 above the fold is the LCP element, so never start it hidden or sliding up. The h1 starts visible in a faint colour that still passes AA contrast and SplitText brings its lines to full colour one by one (type "lines", mask "lines", aria "auto"). Keep the masked slide-up line entrance for h2 headings below the fold and play it with ScrollTrigger once:true. Split after document.fonts.ready so the line breaks are correct.
3. Infinite marquee: write the service names once in the HTML. Without JS and with reduced motion the list shows as a static, wrapping group; shrink that static state on phones, because in the demo it filled the screen as a six-line wall. JS duplicates the group once, marks the copy aria-hidden and moves x in an endless loop; it speeds up briefly with scroll velocity and stops while the marquee is off screen. Motion lasting more than five seconds needs a visible "Pause" button under WCAG 2.2.2 (type="button", aria-pressed), shown only while the marquee really moves. Focus inside the marquee also pauses it.
4. Magnetic buttons: only on devices matching `(hover: hover) and (pointer: fine)`, use gsap.quickTo to move the x and y transform by 30 to 40 percent of the pointer's distance from the button centre, with an elastic return when the pointer leaves. The clickable area of the button must not change.
5. Cursor image trail: desktop only, under the same fine-pointer condition, in the hero area. JS adds a layer to the hero that is aria-hidden, has pointer-events:none and sits BELOW the heading (z-index). The trail images must not download on page load; the 280 px WebP thumbnails load on the first pointer move. Every 90 px of pointer travel the next image from the pool appears at the pointer, grows from small, then slides down and fades; move it with transform, not left/top.
6. Enable Lenis only on `(pointer: fine)` devices and drive it from gsap.ticker; touch devices keep native scrolling. For in-page links, move focus to the target after scrolling.
Setup and known traps (each one cost points or broke something in the demo measurement, do not skip any):
1. If a live site is already on the server, tell me first, because setup overwrites index.html and the assets folder. Preview scaffold_site with confirm=false and call confirm=true after my approval. Then read site_design_guide and site_seo_guide. Before writing code, put the design direction (typography, colour, grid, signature element, motion language and the libraries that will NOT be loaded) in a short ART.md outside assets and show it to me.
2. Compile Tailwind, do not load it from the CDN. Install `npm i -D tailwindcss@3` with site_run_command and background=true, and watch it with site_command_status. The content paths in `tailwind.config.js` must cover every HTML file, every template and every JS file that writes classes. `_src/tw.css` holds an `@import "../assets/app.css";` line and the three `@tailwind` lines; compile it into one file with `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify`. Remove the cdn.tailwindcss.com script and the inline tailwind.config from the pages and link only `/assets/site.css`. Recompile after every HTML change.
3. Self-host the fonts. First check that the Fontshare family you pick has the Turkish letters (ş, ğ, ı, İ, ç, ö, ü): in the demo Tanker had no dotless ı and Outfit had no ş, ğ or İ, so those letters would fall back to another font in headings. Download each weight's woff2 separately with site_fetch into `assets/fonts/`, write the @font-face rules with `font-display: swap` into `assets/app.css` (design-check looks for the custom font there) and check the font-family name in the CSS you downloaded. Preload the heading and body fonts used above the fold on every page with `<link rel="preload" as="font" type="font/woff2" crossorigin>`, before the stylesheet; do not preload more than two files, because preloading a third weight in the demo made mobile LCP 0.2 seconds longer. Most Fontshare fonts lack the ₺ sign, so write "TL" for prices.
4. Make the menu and footer static HTML. Do not load chrome.js or site.config.js on the pages. Write a small `chrome-stamp.mjs` that reads the nav list from site.config.js and stamps `_src/header.tpl` and `_src/footer.tpl` between the `<!-- nav:start --><!-- nav:end -->` and `<!-- footer:start --><!-- footer:end -->` markers on every page, adding aria-current="page" to the active link. Templates must not end in .html and must use placeholders like `
[[NAV]]` instead of `{{...}}`. Build the mobile menu without JS using `<details>`. Keep the organisation name, address and phone as plain text in the footer, and make every touch target at least 44x44 px, footer and breadcrumb links included.
5. Convert images while downloading them with site_fetch: write the same photo with resize="480x", "800x" and "1200x", image_format="webp", quality=65 to separate files. site_fetch never crops; when an Unsplash photo needs another ratio, download the cropped version by adding parameters such as `?w=1600&h=1200&fit=crop` to its URL. Give every `<img>` srcset, sizes and a width and height that match the real ratio. The main above-the-fold image gets fetchpriority="high" and is not lazy; the others get loading="lazy" decoding="async". If the main image fills the screen on mobile, serve a smaller crop with `<picture>`.
6. Write the SVG version of the logo as favicon.svg with site_write_file and add `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` to every page. Without a favicon the browser logs a 404 and Best Practices drops to 96.
7. HTML validator rules: start with an upper-case `<!DOCTYPE html>`, use ` ` for the spaces in the visible text of tel: links, never use a style="" attribute, give every button type="button", and do not put a `<details>` inside a `<figure>` after its figcaption.
8. Download the motion libraries (GSAP, ScrollTrigger, SplitText, Lenis) from jsdelivr into `assets/vendor/` with site_fetch, pin the version and load them only on on the home and work pages. Do not use `<script defer>`; put a small loader at the end of the page that waits for the load event, two requestAnimationFrame calls and then requestIdleCallback, and appends the scripts in order with async=false. A one-line script in `<head>` adds the `js` class to `<html>` and the `anim` class unless prefers-reduced-motion is "reduce"; without `anim` the loader downloads nothing. Define hidden start states only under `.anim`, and add a CSS animation as a safety net that reveals every hidden element after 2.5 seconds in case the library never arrives. In earlier demos deferred libraries pushed mobile LCP to 3.2 seconds; with this loader the pages measured 99 to 100. Name the attribute for scroll-revealed elements data-reveal; design-check only recognises motion by that name.
SEO, AEO and GEO:
1. Use directory-style URLs with a trailing slash (/isler/, /studyo/, /iletisim/, /gizlilik/). Fill in the seo block of site.config.js and run `node seo-stamp.mjs`. Write the page-specific schema (home WebPage and FAQPage; work CollectionPage with a CreativeWork per project in hasPart; studio AboutPage with Person entries for the team; contact ContactPage; BreadcrumbList on inner pages. For a studio with an office, businessType ProfessionalService in site.config.js) in separate `<script type="application/ld+json">` blocks and link them to the base graph by @id. Do not nest BreadcrumbList inside @graph; keep it in its own block, because that is the only way seo-check sees it.
2. Keep titles at 60 characters or fewer (seo-check flags anything over 65 as an error), descriptions between 120 and 158 characters, one h1 per page and no skipped heading levels (an h3 straight after the h1 dropped accessibility to 98). Every page needs at least 150 words of main content; contact and privacy pages tend to fall short.
3. The first paragraph of every page answers the page's question directly. Write page-specific FAQs with `<details>` and mark them up as FAQPage. Show the publishing organisation and a "Last updated" date in `<time>`.
4. In robots.txt, write down and justify your decision for GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot and CCBot, and point to the sitemap. Give sitemap.xml real lastmod dates. llms.txt holds an accurate two-sentence summary of the site, the key facts and a list of the important pages.
5. No invention: do not write reviews, ratings, awards, customer counts, certificates, opening hours, coordinates or prices without asking me. Leave any field you do not know out of the schema entirely.
Gates (in order; do not say "done" until all pass):
1. With site_run_command run `node chrome-stamp.mjs`, the Tailwind build, `node seo-stamp.mjs`, `node seo-check.mjs` (0 errors, 0 warnings), `node design-check.mjs` (0 errors; justify any remaining warning) and `npx html-validate "**/*.html"` (0 errors).
2. View every page with site_preview using view="mobile" and view="desktop". site_preview captures the page with motion turned off (reduced-motion); if content is missing in that capture, the motionless state is broken. Lazy images further down may be blank in the full-page capture; do not count that as an error, but check their paths.
3. Run core_web_vitals with strategy="mobile" and strategy="desktop" for every page. Acceptance: on mobile Performance at least 95 and Accessibility, Best Practices and SEO 100; on desktop all four at least 95. For a page that misses, find the slow file with resources=true, fix it and measure again. Then run seo_audit on the home page with strategy="mobile" and runs=2. No address outside your own domain may remain in the network request list.
4. No horizontal scrolling at 360, 390, 768 and 1440 px, touch targets of at least 44 px and no console errors. The site must also look flawless inside a 390x790 and a 1440x898 frame, as on the prompt pages.
Motion check: site_preview cannot show motion, so tell me what to look for in my own browser. On desktop the hero heading's lines should darken one after another, the marquee should move, speed up with scrolling and stop with the Pause button, buttons should lean slightly towards the pointer, moving the pointer over the hero should leave images that appear and fade behind it, and the text must always stay above the images. On a phone there should be no trail and no magnetic effect, and scrolling stays native. With reduce motion on in the operating system nothing should move and the marquee shows as a static list. The focus ring must be visible everywhere when tabbing.
After publishing: preview the `/assets/* Cache-Control: public, max-age=31536000, immutable` rule with site_headers and apply it after my approval; from then on, version the file name whenever CSS or JS changes (site-v2.css and so on). Submit sitemap.xml with gsc_submit_sitemap and check the home page with gsc_url_inspect. Finally give me: a per-page score table (page, four mobile scores, four desktop scores, LCP, CLS), the gate results, the result of the interactions you tried in a browser and the list of fixes you applied.
