Logo Wall
A client wall that comes up to colour — tiles land grey, then warm to their brand colours on a diagonal sweep.
SceneScenes
$ npx remotion-ui@latest add logo-wallTiles arrive quickly in reading order so the wall is whole within a second, and then the colour sweeps across it diagonally. Splitting the two is the whole trick: if the arrival is the slow part, the scene spends its first beats looking half-built, and the greyscale-to-colour idea never gets a stage to happen on.
The sweep is driven by row + column rather than by index, so it crosses the
wall as a wave at any grid width instead of running down it like a list.
Grey is produced by one saturate() on the tile, not by a second set of grey
colours. The wordmark and the mark both carry their brand colour the whole time
and the filter takes it away, so the monochrome stage is a true desaturation of
the finished tile — swap in your own colours and the grey stage follows for
free. Brightness moves with saturation, because a desaturated tile at full
brightness looks muddy rather than monochrome.
Wordmarks are text, so there are no image assets to bundle or fail to load in a
headless render. Pass glyph when a brand's mark is not simply its first
letter.
Arrival and colour are separate beats on purpose: tiles land fast so the wall is whole within a second, then the colour sweeps the diagonal across it. Grey is one saturate() on the tile rather than a second set of grey colours, so swapping in your own brand colours brings the monochrome stage with it. Wordmarks are text — no image assets to bundle or fail to load in a headless render.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/logo-wall- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: logos, eyebrow, title, columns, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { LogoWall } from "@/remotion/scenes/logo-wall";
<LogoWall
eyebrow="Trusted by"
title="Teams shipping with RemotionUI"
logos={[
{ name: "Northstar", color: "#E8B86D" },
{ name: "Halcyon", color: "#7DD3E8" },
{ name: "Fernweh", color: "#9BD4A0" },
{ name: "Orbital", color: "#C99BE8" },
]}
holdSeconds={3.4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| logos | WallLogo[] | 8 sample brands | Wordmark, brand colour, and the glyph in the mark beside it. |
| eyebrow | string | "Trusted by" | Small line above the heading. Omit to drop it. |
| title | string | "Teams shipping with RemotionUI" | Heading above the wall. Omit to drop it. |
| columns | number | 4 | Tiles per row. |
| startAtSeconds | number | 0.32 | Second the first tile arrives. |
| arriveStaggerSeconds | number | 0.06 | Seconds between tiles arriving, in reading order. Deliberately fast. |
| staggerSeconds | number | 0.24 | Seconds between diagonals of the colour sweep. |
| warmSeconds | number | 0.6 | How long one tile takes to go from grey to brand colour. |
| holdSeconds | number | - | Seconds the finished wall holds before it retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Eyebrow, and the fallback for logos with no colour. |
| backgroundColor | string | - | Page behind the wall. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |