---
id: seed:copy-patterns/ultra-modern-agency-portfolio
title: Agency / portfolio landing page copy patterns
source_type: seed_copy
priority: hot
---

Agency and portfolio sites sell on taste. Copy is sparse, design carries the load, and the work itself does most of the persuasion. For an ultra-modern aesthetic, this pattern combines minimalist copy with dynamic, animation-heavy interactions.

**Hero patterns:**

- *Bold positioning statement*: "We design brands that don't apologize."
- *Specific niche claim*: "Branding for fintech. Since 2018."
- *Outcome-led*: "Brands that ship. Sites that convert."

*Animation Pattern (The Entrance):*
- **Pre-loader Collapse:** A full-screen overlay displaying a running percentage counter (0 to 100) using a monospaced font. Upon hitting 100%, the overlay clips upward using a CSS `clip-path` transition with a custom cubic-bezier curve.
- **Kinetic Text Reveal:** The main copy uses GSAP SplitText to split words into individual characters. Characters animate upward from `translateY(100%)` with a slight rotation ($3^\circ$ to $5^\circ$) and a staggered delay of 0.02 seconds per character, creating a wave-like fluid reveal.
- **Interactive 3D Canvas:** A subtle, low-contrast Three.js particle field or fluid simulation floats in the background, reacting to the user's mouse coordinates with smooth spring inertia.

Avoid: "We are a creative agency." Generic agency language has zero signal — every agency says this.

**Work section:**

The case study tile is the single most-clicked element on an agency site. Each tile should carry:
- Client name
- One-line outcome ("Rebrand grew revenue 3x in 18 months")
- 1–2 category tags ("Branding", "Web design")
- Hover-state preview of the work itself

*Animation Pattern (The Scroll-Jack Grid):*
- **Horizontal Scroll-Jack:** The page locks vertically, and normal scrolling translates into a horizontal track. A row of large, high-contrast case study cards slides across the viewport.
- **WebGL Image Displacement:** On hovering over a card, a WebGL custom shader applies a liquid-like wave distortion or RGB shift effect to the thumbnail image, reacting to the speed of the mouse hover.
- **Magnetic Cursor Overlay:** The system cursor is replaced by a custom SVG circle. When hovering over a card, the cursor expands, snaps to the image center with spring physics, and displays a dynamic "VIEW PROJECT" text string rotating along a circular path.

The portfolio grid should NOT have more than 9 tiles on the landing page. Pick the best 6; link to a /work index page for the long tail.

**About copy:**

Short. Two paragraphs max. Lead with what the agency does, not who founded it. Founders go in the team section.

- Bad: "Founded in 2015 by two friends from art school, we've grown..."
- Good: "We're a 12-person studio working with consumer brands at growth stage. Past clients include Acme, Brand X, and..."

**Process section:**

Three to five steps, each one verb-led. "Listen", "Audit", "Design", "Ship", "Support". Use a numbered visual (large numeral, short label, 1–2 line description).

*Animation Pattern (The Connected Path):*
- **SVG Path Draw:** An SVG dash-array line snakes down the page, connecting each step. As the user scrolls, the line dynamically "draws" itself forward (using GSAP ScrollTrigger linked to scroll velocity).
- **Active Step Focus:** As each step enters the middle 30% of the viewport, the inactive steps scale down to 90% and dim to 30% opacity, while the active step scales up to 100%, gains full opacity, and triggers a micro-animation in its corresponding visual.

**Testimonials:**

Client testimonials work harder on agency sites than anywhere else. Always include the speaker's full name + role + recognizable company. Quote should name a concrete outcome the agency delivered, not generic praise.

*Animation Pattern (The Kinetic Slider):*
- **Liquid Swipe Transition:** Navigating between testimonials triggers a WebGL liquid distortion wipe across the text block, making the old text melt away as the new text shifts into place.
- **Dynamic Quote Scale:** The background features massive, semi-transparent quotation marks that scale up and down dynamically depending on the length of the currently active quote.

**Contact CTA:**

Agency CTAs are bottom-of-funnel by default. "Start a project", "Get in touch", "Book a call." Never "Sign up" — that doesn't match the conversion.

*Animation Pattern (The Gravity Pull):*
- **Magnetic Button Physics:** The primary CTA button has a wide hit area. Once the cursor gets within a 100px radius of the button, the button dynamically deforms and "snaps" to the cursor, sliding along with it using high-friction easing.
- **Text Loop Marquee:** Behind the CTA, a dual-direction text marquee loops endlessly at high speed. The top row scrolls left, the bottom row scrolls right. On hover, the marquee speed doubles and reverses direction.

**What to omit:** pricing (agencies don't list prices on the homepage), feature lists (agencies aren't products), star ratings (wrong format for this industry).

---

### Technical Performance Guardrails

Maximum animation output is useless if the site drops frames. To maintain an ultra-modern feel, the development stack must adhere to these performance limits:

| Metric / Rule | Target Limit | Tech Solution |
| :--- | :--- | :--- |
| **Frame Rate** | Constant 60 FPS (even on mobile) | Use hardware-accelerated properties (`transform`, `opacity` only). Avoid animating `width`, `height`, or `top/left`. |
| **Page Weight** | < 2.5 MB total | Serve highly compressed WebP/AVIF formats. Lazy-load WebGL assets and heavy Lottie JSON files. |
| **Library Overhead** | Minimal DOM thrashing | Use GSAP or Framer Motion for complex sequences. Do not mix multiple heavy animation libraries. |
| **Accessibility (a11y)** | Match user preferences | Wrap all intensive transitions in a `prefers-reduced-motion: reduce` CSS/JS media query to gracefully degrade to static layouts for sensitive users. |

### What to Omit (Animation perspective)
* **Generic CSS Fades:** Fading elements on scroll without spatial translation feels cheap. Use physical translation offsets (e.g., sliding up and scaling simultaneously).
* **Heavy Video Backgrounds:** Do not use unoptimized MP4 files that stall the main thread during page load. Use lightweight Lottie vector assets or WebGL shaders instead.
* **Unresponsive Scroll-Jacking:** Never completely hijack native scroll behavior without offering a fluid inertial wrapper (like Lenis or ASScroll) that preserves natural trackpad physics.