---
id: "aw-el-d4ddf42b-df0b-4069-9ca4-8ba8856c97c7"
source: https://www.awwwards.com/inspiration/we-ve-put-it-all-in-one-deck-no-sales-pitch-lama-lama-1
author: "Lama Lama (lamalama)"
media: "video, 1600x1200, 14.2s"
model: claude-opus-5-5
generated: 2026-10-31
---
# In-Browser Agency Pitch Deck Viewer

## Summary
An agency pitch deck presented inside the website as a slide viewer on a dark stage: a 16:9 slide window with a collapsible thumbnail rail, cream slides with heavy all-caps statements, and a few black-and-white or colour photos. Slides advance with vertical wipes and the deck ends on a contact slide with two outline buttons. Worth studying for how bold uppercase copy and generous empty space turn a sales deck into an editorial experience.

## Style
- Theme: mixed (dark stage with cream slides)
- Mood: bold, punchy, confident, editorial
- Tags: pitch-deck, slide-viewer, uppercase-type, thumbnail-rail, black-and-white-photo, agency, presentation
- Category: Components, Typography

## Palette
| Role | Hex |
|---|---|
| Stage background | #1A1A1A |
| Slide cream | #F8F2E5 |
| Headline black | #100F0F |
| Deep black | #050303 |
| Photo brown | #4E423E |
| Warm grey | #827874 |
| Taupe | #B4A497 |
| Off-white | #F7F4F1 |

## Typography
- Slide headlines ("SMALL TEAM. BIG ENERGY. NO FLUFF."): neo-grotesk sans, extra bold, uppercase, very tight leading (about 0.85) and tracking (about -0.04em), three lines, about 6 percent of the slide height per line. Inter Tight (800).
- On the photo slide the headline is white over the image.
- Small labels in brackets ("[ ... ]"): tiny monospace-like uppercase, used as section tags. Space Mono (400).
- Body copy: tiny regular sans, three or four lines, black. Inter (400).
- Thumbnail rail labels and button text: tiny sans.

## Layout
- 4:3 frame (1600x1200) of a dark #1A1A1A stage; the viewer window is about 26 percent of the frame width per frame tile here, a 16:9 slide with 4px radius and a hairline border.
- Thumbnail rail: about 13 percent of the slide width on the left, black, with a vertical list of tiny thumbnails and labels; the active one sits in a white pill.
- Close "x" at the top-right corner of the window, a tiny menu icon at the top-left.
- Slide grid: headline top-left at about 7 percent padding, a bracket tag and body text in the lower-left third, images anchored right (a portrait photo, a square photo, or a small image near the bottom-right corner).
- Huge empty cream areas between headline and footer copy.

## Elements
- Opening slide: full-bleed black-and-white close-up portrait with white headline and a short paragraph lower right.
- Statement slides: cream background, black uppercase headline, bracket tag, short body text.
- Image slide: a square colourful photo of an interior with geometric art on the right half.
- Contact slide: headline, a small chip with a tiny avatar and a name, a paragraph and two small outline buttons with arrows.
- Thumbnail rail: ten or so thumbnails with labels, collapsible.
- Window chrome: thin border, close button, top bar dots.

## Motion
- 0.6s: the viewer opens with the rail visible on the photo slide.
- About 2 to 3s: the rail slides out to the left (about 400ms, ease-in-out) and the next slide wipes up from the bottom over the previous one (about 700ms, `ease: [0.76, 0, 0.24, 1]`).
- Each following slide holds 2 to 2.5 seconds, then the same vertical wipe repeats.
- About 10.8s: on the final slide the rail slides back in; at 13.3s a small portrait image fades and scales into the lower right (about 500ms).
- Headlines appear with a short line-by-line rise (60ms stagger) after each wipe.

## Rebuild it
1. Stage: `fixed inset-0 bg-[#1A1A1A] grid place-items-center`; viewer `w-[min(90vw,160vh)] aspect-video rounded border border-white/10 overflow-hidden relative flex`.
2. Rail: a `motion.aside` with `animate={{ width: open ? "13%" : 0 }}` (400ms), black, listing thumbnails as buttons, the active one `bg-white rounded-full`.
3. Slides: stack all slides absolutely; on change, animate the incoming slide `clipPath` from `inset(100% 0 0 0)` to `inset(0)` (700ms, `[0.76, 0, 0.24, 1]`) while the outgoing one moves `y: "-10%"`.
4. Headline style: `font-[Inter_Tight] font-extrabold uppercase leading-[0.85] tracking-[-0.04em] text-[6cqh]` using a container query on the slide.
5. Wrap each headline line in `overflow-hidden` and animate `y` from 100 percent with a 60ms stagger after the wipe completes.
6. Support arrow keys, wheel and the rail for navigation; close button returns to the page.

## Generation prompt
A dark presentation viewer on a charcoal background showing a bold agency pitch deck: cream slides with huge black extra-bold uppercase sans-serif statements and tiny bracketed labels, a black-and-white close-up portrait opening slide with white text, a colourful interior photo slide, and a final contact slide with outline buttons; a slim black thumbnail sidebar slides in and out and slides change with crisp vertical wipes, editorial and confident, no logos.