Agency hero with motion-blur photo

# Agency hero with motion-blur crowd photo

A single full-bleed hero section for a creative studio. One photograph fills the whole section. It shows a crowd blurred by a long exposure, with one person in sharp focus at the centre, standing against a pale mint wall that darkens to near-black green at the bottom. A very large two-line grotesk headline sits on the light upper half, set in deep forest green. An oversized white marquee line runs across the dark lower half. Smaller elements overlap the headline and the photo: a rating badge, a dark circular CTA, an award mark, a thin orbit line and a sparkle. The page has no outer margin, no rounded page corners and no colour behind it. The section's top-left corner is the viewport's top-left corner.

## Structure

- **Viewport reference:** 1440 CSS px wide. The section is 1440 × 1110 (`height: max(100svh, 77vw)`), so the aspect is about 1.3 : 1.
- **Container:** full bleed. Content sits inside 80px side gutters, which leaves a 1280px content width. Use a 12-column grid with 24px gaps for placement. Most elements are absolutely positioned on top of the photo, at the coordinates below (measured from the section's top-left at 1440).
- **Sections, top to bottom:**
  1. **Hero.** This is the only section. Its layers, back to front:
     - **1a. Background photo:** fills the full 1440 × 1110.
     - **1b. Legibility overlays:** gradients over the photo.
     - **1c. Nav bar:** centred vertically at y = 48.
       - Logo at the left, x = 80: a small oval mark made of horizontal stripes, plus a wordmark of about 8 characters with a tiny superscript ™-style mark.
       - Three uppercase links centred on the page: the first starts at x ≈ 524, the last ends at x ≈ 902, with 80px between them.
       - A text CTA at the right ending at x = 1360: uppercase label (3 words) plus a ↗ arrow, underlined with a 1px rule.
     - **1d. Headline:** two words, set in two lines.
       - Line 1 starts at x = 80. Cap top is at y ≈ 150, baseline at y ≈ 277, and the line is about 740px wide.
       - Line 2 is indented to x ≈ 443, with its baseline at y ≈ 425. Its right edge lands near x ≈ 1020.
       - The stepped indent is essential.
     - **1e. Intro paragraph:** top-right. It starts at x ≈ 924, top at y ≈ 170, about 430px wide, 3 lines.
     - **1f. Rating badge:** a 237 × 97 rectangle at x 195–432, y 295–392. It sits in the empty space left of headline line 2 and just under line 1. It touches neither line.
     - **1g. Circular CTA:** a 164px disc centred at x ≈ 1152, y ≈ 403. It sits right of headline line 2 and below the paragraph.
     - **1h. Orbit line and sparkle:** a 1px elliptical line around the central figure, plus a four-point sparkle about 32px across at x ≈ 978, y ≈ 530, with a smaller twin offset down-right.
     - **1i. Award block:** a laurel-wreath award mark (about 124 × 82) at x ≈ 981, y ≈ 716. To its right, starting at x ≈ 1138, is a 3-line uppercase statement (about 6 words).
     - **1j. Marquee line:** a single huge uppercase line, cap top at y ≈ 859 and baseline at y ≈ 957. Content: two service names separated by a long em-dash, e.g. "SERVICE ONE — SERVICE TWO — …". It bleeds off both edges: the first letter is cut by the left edge and the last word is cut mid-word by the right edge.
     - **1k. Bottom-left tagline:** 3 centred uppercase lines (about 8 words total), centred on x ≈ 228, top at y ≈ 997, block about 250px wide.

## Scroll map

No motion report was supplied. Everything here is read from a single still (inferred).

1. **Hero:** 1110px tall, 1.23 viewports at 1440 × 900. It consumes 1110px of scroll. Kind: entrance on load, plus a continuous marquee loop (time-based, not scroll-linked).

Total page height: 1110px. This artifact is one section.

## Spacing

- **Side gutters:** 80px. Use the same value for the logo, headline line 1 and the right end of the nav CTA.
- **Nav:** 32px top padding. The nav row is 32px tall, so its centre is at y = 48. Links are spaced 80px apart. The text CTA's underline sits 6px below the baseline.
- **Nav to headline:** about 100px from the nav's centre line to the headline's cap top.
- **Headline:** the gap between line 1's baseline and line 2's cap top is about 20px, because line-height is 0.84. Line 2 is indented about 363px (roughly 3.5 columns).
- **Rating badge:** 18px internal padding. Two columns inside: a stacked label and wordmark on the left, stars over a rating line on the right, with 20px between the columns.
- **Paragraph:** its top aligns roughly with line 1's cap top plus 20px. The gap from the paragraph to the CTA disc is about 70px.
- **Award block:** laurel and text are 32px apart. The text's first line aligns with the laurel's top.
- **Marquee:** the gap between marquee items (word, dash, word) is about 0.45em on each side of the dash.
- **Bottom spacing:** marquee baseline to tagline top is about 40px, and tagline bottom to section bottom is about 30px. The tagline sits very low, nearly touching the bottom edge.
- **Rhythm:** there is no vertical rhythm between sections because there is one section. The composition is weighted dark-heavy at the bottom and light-heavy at the top.

## Type

All type is one grotesk family: a neo-grotesk with a straight-legged R and tight apertures (in the Neue Montreal / Aeonik family). Free stand-in: **Inter Tight** for display sizes and **Inter** for text sizes. Never use a serif.

Body anchor: **17px**.

| Level | Ratio | Size | Line-height | Letter-spacing | Weight | Case / notes |
|---|---|---|---|---|---|---|
| Headline (1d) | 10.5× | 178px | 0.84 | −0.045em | 600 | Uppercase, 2 lines, one word each |
| Marquee (1j) | 8× | 136px | 1.0 | −0.03em | 500 | Uppercase, single line, never wraps |
| Award statement (1i) | 1.35× | 23px | 1.3 | −0.005em | 600 | Uppercase, 3 lines, max about 14ch |
| Logo wordmark | 1.3× | 22px | 1 | −0.02em | 600 | Mixed case |
| Body / intro paragraph (1e) | 1× | 17px | 1.47 | 0 | 400 | Sentence case, max 48ch (about 430px) |
| Tagline (1k) | 1× | 17px | 1.55 | 0.01em | 500 | Uppercase, centred, max about 22ch |
| CTA disc label (1g) | 0.94× | 16px | 1.15 | 0.02em | 600 | Uppercase, 2 lines, centred |
| Nav links, text CTA | 0.88× | 15px | 1 | 0.08em | 500 | Uppercase |
| Badge rating line | 0.82× | 14px | 1.2 | 0 | 500 | Uppercase |
| Badge micro-label | 0.71× | 12px | 1.1 | 0.04em | 500 | Uppercase, "REVIEWED ON"-style, 2 words |
| Badge wordmark | 1.5× | 26px | 1 | −0.03em | 700 | A short review-platform wordmark |

The headline's two words should each be 5–6 letters, and line 2 must be the wider of the two. The marquee must be long enough to overflow 1440 at least twice over.

## Colour

| Hex | Role |
|---|---|
| `#D6E8E8` | Pale mint-grey. Dominant colour of the upper ~55%: the photo's wall plus the top overlay. This is the surface the headline, nav and paragraph sit on. Also the page background behind the photo while it loads. |
| `#1A261C` | Deep forest near-black. All dark text: headline, nav, paragraph, badge text. Fill of the CTA disc. The colour the photo fades to in the bottom ~40%. Never use `#000`. |
| `#384638` | Moss grey-green. Secondary dark: the badge's 1px border, the inner highlight of the CTA disc's radial gradient, mid-tones. |
| `#876846` | Warm bronze, the single accent. Allowed in only three places: the five rating stars, the keyboard focus ring, and the hover tint on the text CTA's arrow. Nowhere else. |
| `#F1F5F1` (derived) | Off-white for all type on the dark half: marquee, award text, tagline, CTA label, orbit line, sparkle. Never use `#FFF`. |

Overlays (1b):
- **Top:** a linear gradient from `#D6E8E8` at 70% opacity at y = 0 to transparent at y ≈ 45%. It keeps the headline crisp.
- **Bottom:** a linear gradient from transparent at y ≈ 50% to `rgba(26,38,28,0.88)` at y = 100%. It guarantees contrast for the off-white type.

## Surface

- **Borders:**
  - **Rating badge:** a 1px solid border in `#384638` at about 35% opacity. Its fill is `rgba(241,245,241,0.55)` with `backdrop-filter: blur(6px)`. It has square corners (radius 0).
  - **Text CTA:** a 1px underline in `#1A261C`.
  - Nothing else has a border.
- **Radii:**
  - **CTA disc:** a full circle.
  - **Everything else:** 0. No rounded cards, chips or buttons.
- **Shadows:**
  - **None** anywhere.
  - **CTA disc depth:** the disc gets its depth only from a radial gradient. `#384638` sits at the top-left (30% / 25%) and fades to `#1A261C` at the edge, at 94% opacity, so a hint of the photo shows through.
- **Orbit line:** a 1px stroke in `#F1F5F1` at 70% opacity. No fill.

## Imagery

**1a. Background photo.** Full bleed, 1440 × 1110 (about 1.3 : 1), `object-fit: cover`, focal point at 52% / 55%.

- **Subject:** a long-exposure interior shot of a crowd of people walking. Everyone except one person is smeared horizontally into ghostly motion trails.
- **Central figure:** one young adult stands still, dead centre-right of the frame and in sharp focus, looking straight at the camera.
  - Chin-length bob, oversized plain white or ecru crew-neck tee.
  - Face centred at about x = 710, head top at about y = 437. The figure spans about x 570–934 and is cropped at the bottom edge around the hips.
- **Background:** the wall behind is flat pale mint-grey. The blurred crowd is dressed in dark greens, charcoals and browns, which makes the lower half fall naturally towards `#1A261C`.
- **Grade:** cool, slightly desaturated, and a little hazy. The warm bronze in the hair and skin is where the accent comes from.
- **Composition:** the sharp figure overlaps the marquee line. The marquee is drawn in front of the figure, so the dash in the marquee crosses the white tee in low contrast. That is intended.

**Other graphics:**
- **Award mark (1i):** a small monochrome laurel-wreath award badge in off-white, made of two curved laurel branches around 3 tiny centred lines ("AWARD WINNING / BEST AGENCY / year"). Draw it as inline SVG.
- **Logo (1c):** a small horizontal-striped oval glyph, about 30 × 18, in `#1A261C`.
- **Orbit line (1h):** one ellipse, about 500 × 640, rotated about 22° clockwise, centred on about (720, 760). Its upper-right arc passes just left of the sparkle and its lower-left arc swings out under the tagline. Draw it as SVG, absolutely positioned. It sits in front of the photo and behind the marquee.
- **Sparkle (1h):** a four-point concave star with a smaller twin, filled `#F1F5F1`.

## Motion

No motion report was measured. Every value below is inferred from the still, and durations are given as ranges.

**1. Hero**
- **kind:** entrance, plus one continuous time-based loop (the marquee).
- **what moves:**
  - Background photo.
  - Headline lines 1 and 2.
  - Nav, paragraph and badge.
  - CTA disc.
  - Orbit line.
  - Award block and tagline.
  - Marquee.
- **from → to:**
  - **Photo:** scale 1.08 → 1.0, opacity 0 → 1.
  - **Headline lines:** each line is clipped by its own overflow-hidden mask. translateY 100% → 0 (inferred).
  - **Nav, paragraph, badge, award, tagline:** opacity 0 → 1, translateY 16px → 0.
  - **CTA disc:** scale 0.6 → 1, opacity 0 → 1, rotation −20° → 0.
  - **Orbit line:** stroke-dashoffset from full length → 0, so the line draws on.
  - **Marquee:** continuous translateX 0 → −50% over a duplicated track, looping linearly, moving right-to-left.
- **range:**
  - **Trigger:** once, on page load. This is not scroll-linked and does not reverse.
  - **Photo:** 1.2–1.6s, ease-out (cubic-bezier(0.16, 1, 0.3, 1)).
  - **Headline:** lines staggered 80–120ms, each 0.8–1.0s with the same ease, starting about 200ms after the photo.
  - **Secondary elements:** fade in after the headline, staggered 60–80ms, 0.5–0.7s each.
  - **CTA disc:** 0.6–0.8s with a slight overshoot.
  - **Orbit draw:** 1.2–1.8s, ease-in-out.
  - **Marquee:** one full loop takes 25–40s (not measured). Speed is constant.
- **reduced motion:**
  - Everything appears at its final state with no transforms.
  - The marquee stops in the position shown: the first word starting at the left edge, cut by the right edge mid-word.
  - The orbit is drawn fully.

**Interaction transitions** (separate from the entrance choreography):
- **Nav links:** on hover, a 1px underline in `#1A261C` grows from left to right, scaleX 0 → 1 over 250ms with an ease-out curve.
- **Text CTA:** on hover, the arrow moves 3px up and 3px right and tints to `#876846` over 200ms.
- **CTA disc:**
  - **Hover:** scales to 1.06, and the label and arrow rotate a further 8° over 300ms with an ease-out curve.
  - **Press:** scales to 0.97 over 100ms.
- **Marquee:** on hover, slows to 25% speed (optional). It never stops dead.
- **Rating badge:** on hover, the fill opacity rises from 0.55 to 0.75 over 200ms.
- **Focus:** all interactive elements get a 2px `#876846` outline at 3px offset.

## Responsive (below 640px)

- **Section:** height becomes `min(100svh, 760px)`. Gutters become 20px.
- **Nav:** the three centre links collapse into a "MENU" text button (15px, uppercase). Logo and text CTA stay, but the text CTA is dropped if it would collide with the logo.
- **Headline:** about 76px (`clamp(64px, 19vw, 178px)`), line-height 0.86. Line 2 keeps a smaller indent of about 18vw. The stepped offset must survive.
- **Intro paragraph:** moves below the headline. Full width minus gutters, 16px, max 34ch.
- **Rating badge:** shrinks to about 180 × 76 and moves below the paragraph, left-aligned.
- **CTA disc:** 112px, placed bottom-right above the marquee, overlapping the photo.
- **Award block:** dropped.
- **Marquee:** about 72px (`clamp(56px, 18vw, 136px)`). It still bleeds off both edges.
- **Tagline:** stays bottom-left, left-aligned instead of centred, 15px.
- **Orbit and sparkle:** the orbit scales down to stay around the figure. The smaller sparkle twin is dropped.
- **Photo focal point:** moves to 55% / 50% so the face stays clear of the headline.

## Don'ts

- **Edges and corners:** don't put the hero in a card, frame or rounded container, and don't add any margin or colour around it. The photo touches all four viewport edges.
- **Photo:** don't use a sharp crowd photo, a studio portrait on a plain backdrop, or a dark-all-over image. The idea is a still sharp figure among a horizontally smeared crowd, light at the top and dark at the bottom.
- **Headline layout:** don't centre the headline, put it on one line, or right-align line 2. It is left-set with line 2 stepped in about 363px, and its line-height stays below 0.9.
- **Headline weight:** don't use a light, thin or condensed headline, and don't use a geometric face like Futura or Poppins. It is a heavy, wide-ish neo-grotesk with tight negative tracking.
- **Marquee width:** don't fit the marquee to the viewport or let it wrap. It must be cut by both edges, including mid-word at the right.
- **Pure black and white:** don't use `#000` or `#FFF`. The darks are forest green `#1A261C` and the lights are mint `#D6E8E8` and off-white `#F1F5F1`.
- **Accent:** don't use the bronze accent on the headline, the CTA disc or any large area. It only appears on the stars, the focus ring and the arrow hover. Don't make the stars red or yellow.
- **CTA shape:** don't replace the circular CTA with a pill or rectangle button, and don't give it a shadow or glossy highlight beyond the subtle radial gradient. Its label is slightly rotated.
- **Rating badge:** don't round it or add a shadow. It is a square-cornered, hairline-bordered, frosted rectangle.
- **Extra content:** don't add a scroll-down indicator, a hero sub-CTA button row, social icons, a gradient blob or a grain overlay. None of these exist here.
- **Overlap:** don't keep elements in tidy, non-overlapping boxes. The badge sits between the headline lines, the disc sits beside line 2, the marquee crosses the figure, and the orbit wraps the figure. The layering is the design.
- **Motion:** don't make the entrance scroll-linked or replay it on scroll-back. Don't add parallax that wasn't measured.