Agency or Studio Website

Act as a creative director at a top design agency. Design a complete website for a [STUDIO TYPE — e.g. branding and web design studio] called [STUDIO NAME] that wants to attract [TARGET CLIENT — e.g. funded startups and scale-ups].

This site must feel like a portfolio piece in itself — the design should communicate the studio's craft without saying a word. Design every section in full detail.

1. ANIMATED HERO — FULL SCREEN
• Animation concept: choose one and develop it fully
  — Text scramble: how the headline decrypts character by character, timing, font
  — Scroll-driven parallax: what layers move at what speeds
  — Cursor-reactive: how the canvas responds to cursor position
  — Reel/showreel background loop: describe the video content and overlay treatment
• Positioning line: write the actual copy (bold, memorable, max 8 words)
• Navigation: minimal top bar — what's in it, how it disappears on scroll and reappears
• Entry animation sequence: what loads in what order and with what timing

2. MARQUEE / TICKER STRIP
• Content: client logos or services list — choose and describe spacing
• Speed, direction, pause-on-hover behaviour
• Visual style: uppercase mono, mixed case serif — choose

3. SELECTED WORK GRID (6 projects)
• Asymmetric masonry layout: describe which tiles are large, which are small, the rhythm
• Each tile: background (project color), hover state (describe exactly — project name fade in, cursor change, image zoom, overlay)
• On mobile: how this collapses gracefully
• Project page transition: what happens when you click a tile

4. SERVICES SECTION (4 services)
• Expand-on-click or hover reveal — choose and describe
• What each service card shows collapsed vs. expanded
• Typography treatment for service names

5. ABOUT / STUDIO SECTION
• Team photo treatment: grid, stacked, or unexpected crop
• Founding story: tone and length
• Ethos statement: write the actual sentence structure (e.g. "We believe good design is...")
• Numbers that matter: 3–4 stats displayed visually (projects, clients, years, countries)

6. CONTACT PAGE
• Conversation-style form: describe how it mimics dialogue (e.g. "Hi, I'm [name] and I'm interested in [service]...")
• Availability indicator: open for projects / fully booked / limited availability
• Map or location aesthetic: how to show location without a boring embedded map

TECHNICAL SPECIFICATION:
• CSS animation approach: GSAP ScrollTrigger / CSS scroll-driven / Framer Motion — recommend with reasoning
• Cursor customisation: describe default cursor, cursor on project hover, cursor on CTA
• Performance note: how to keep animations smooth on mobile
• Recommended tech stack with reasoning