---
id: "aw-el-56e8a88b-6415-4513-b741-852297f57aec"
source: https://www.awwwards.com/inspiration/intro-animation-from-our-icon-logo-lama-lama-1
author: "Lama Lama (lamalama)"
media: "video, 1600x1200, 4.9s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Pixel Logo Grid Intro to Agency Hero

## Summary
An agency site intro built from its own pixel-block logo: a tiny white mark made of squares grows a stroke, scatters into a sparse grid of gray squares, multiplies into a dense tiled pattern of the mark, morphs into an organic dotted blob texture, and settles as the background of a bold uppercase hero. Worth studying as a five-beat loader that turns a simple bitmap mark into the whole visual system in under five seconds.

## Style
- Theme: dark
- Mood: bold, graphic, digital, confident, minimal
- Tags: preloader, pixel-logo, grid-pattern, halftone-blobs, logo-animation, uppercase-type, agency-hero
- Category: Hero, Motion

## Palette
| Role | Hex |
|---|---|
| Presentation gray | #1A1A1A |
| Canvas black | #000000 |
| Charcoal | #202020 |
| Green-black | #181A19 |
| Pattern gray | #303030 |
| Stone gray | #A09F9C |
| Logo cream | #F4F1EC |

## Typography
- Hero headline: grotesk sans, bold (700), uppercase, tight leading (0.95), off-white with the last line in gray, about 5% of the window height per line, three lines left aligned. Closest free font: Inter Tight 700 or Archivo 700.
- Supporting paragraph at right: small regular sans, about 1.2% of height, gray. Inter 400.
- Small labels (eyebrow above the headline, footer row, nav pill): tiny uppercase sans tracked +0.1em. Inter 500.
- The logo itself is pixel blocks, not type (shown as a placeholder pixel monogram).

## Layout
- 4:3 frame (1600x1200) with the site shown as a 16:9 window with about 8px radius on a #1A1A1A presentation background.
- Logo: centred, about 5% of window width, built from 6 to 8 squares on a strict grid.
- Scatter grid: squares on a 45px lattice with random cells filled.
- Hero: headline bottom left with about 2% padding, paragraph bottom right, a 1px rule beneath both, footer links along the bottom; a dark nav pill top centre and a small portrait video card top right.

## Elements
- Pixel monogram: white squares arranged as two short columns and a step.
- Sparse square grid in #808080 at mid opacity.
- Dense tiled pattern: the monogram repeated edge to edge in dark gray, creating a woven texture.
- Organic blob texture: smooth rounded shapes made of tiny dots (halftone-like), dark gray on black, reading like reaction-diffusion.
- Nav pill: dark rounded bar with the mark, a short label and a menu glyph.
- Portrait card: a small black-and-white video of a person in a 3:4 frame with a label above.

## Motion
- 0.2 to 1.1s: the monogram is static, then its left column grows upward by one cell (about 200ms, steps easing, no tween).
- 1.1 to 1.9s: the mark dims to gray and squares pop in across the lattice in random order (about 15ms per square).
- 1.9 to 2.8s: the lattice fills with repeated monograms into a dense tiled pattern (about 400ms).
- 2.8 to 3.7s: the tiles dissolve into the dotted blob texture (cross-fade with a threshold, about 500ms).
- 3.7 to 4.6s: headline lines rise in from below with 80ms stagger (ease-out, about 600ms), nav and side card fade in. Plays once.

## Rebuild it
1. Represent the monogram as a small boolean matrix (for example 4x3) and render it as absolutely positioned `div`s or a `canvas` at a fixed cell size.
2. Stage 1 to 3: a `canvas` that draws a lattice; schedule cell reveals with a seeded random order and `requestAnimationFrame`, then stamp the monogram matrix across every lattice slot.
3. Stage 4: a fragment shader or precomputed image of noise thresholded into blobs, drawn as 2px dots on a 4px grid; cross-fade it in by animating a threshold uniform from 1 to 0.5.
4. Hero: `absolute inset-x-6 bottom-8 grid grid-cols-[1fr_320px]` with the headline `uppercase font-bold leading-[0.95] text-[clamp(40px,5vw,72px)]`.
5. Headline reveal: wrap each line in `overflow-hidden` and animate `y: "100%"` to 0 with Motion, 600ms, ease `[0.22, 1, 0.36, 1]`, 80ms stagger.
6. Run the whole sequence with Motion `animate` timelines and skip straight to the hero if the user prefers reduced motion.

## Generation prompt
A dark website intro animation: a tiny white pixel-block logo in the center of a black screen grows a stroke, scatters into a sparse grid of gray squares, multiplies into a dense tiled pattern, then morphs into a texture of soft organic blobs made of tiny dots, which becomes the background of a bold uppercase sans-serif agency headline in off-white and gray; graphic, digital, confident, no real brand names.