Fade Cycle Logo Cloud
A free logo and stats section grid that crossfades through a larger logo set.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 1 runtime package
Fade Cycle Logo Cloud is a free logo and stats section component for Next.js and React that shows a fixed grid of logos and rotates a larger set through it. Built with Motion and styled with Tailwind, this logo cloud animation for React swaps exactly one cell at a time: the outgoing mark fades and blurs out while the incoming one fades in with a slight rise, so the wall always feels alive without ever moving.
The swap order is deterministic but scattered, derived from the cell indices with no randomness, and the incoming logo is always the one that has been offscreen longest. A single timer drives the grid and only runs while it is in view, the tab is visible and motion is allowed; with prefers-reduced-motion enabled, or when the set fits the grid, the first logos render as a static grid with no timer at all. Swaps are silent to screen readers and every logo keeps a visible text label.
Trusted by teams at
- Northwind
- Arcadia
- Vantage
- Lumina
- Halcyon
- Vertex
Six cells rotate through ten logos. Every three seconds exactly one cell crossfades to the logo that has been offscreen longest, in a scattered order that never swaps the same cell twice in a row.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/logo-fade-cycleUsage
import { LogoFadeCycle } from "@/components/logo-fade-cycle";
const logos = [
{ label: "Northwind", mark: <NorthwindGlyph aria-hidden="true" /> },
{ label: "Arcadia", mark: <ArcadiaGlyph aria-hidden="true" /> },
// ...eight more
];
export function Example() {
return (
<LogoFadeCycle
logos={logos}
slots={6}
interval={3}
className="text-muted"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logos | { label: string; mark: ReactNode }[] | required | Full logo set; when it is larger than slots the extras rotate through the grid. |
| slots | number | 6 | Visible grid cells, laid out as 2 columns on small screens and 3 from the sm breakpoint. |
| interval | number | 3 | Seconds between swaps; each swap replaces exactly one cell. |
| className | string | undefined | Additional classes merged onto the root grid. |
Customisation
Fade Cycle Logo Cloud declares no tokens of its own; the swap timing mirrors the --dur-2 and --ease-out-quart motion tokens through the shared lib/motion.ts presets, and the cells inherit the surrounding text colour. Retune the pace with the interval prop and restyle the grid from the className prop, including the column count and spacing, with the same semantic tokens the rest of the library uses:
<LogoFadeCycle
logos={logos}
slots={8}
interval={4}
className="gap-x-12 text-muted sm:grid-cols-4"
/>Frequently asked questions
- Is Fade Cycle Logo Cloud free for commercial use?
- Yes. Fade Cycle Logo Cloud is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Fade Cycle Logo Cloud accessible and light on performance?
- Yes. Every cell keeps a visible text label as its accessible name, decorative marks stay hidden from assistive technology, and there is no live region anywhere, so swaps never interrupt a screen reader. One timer drives the whole grid, it only runs while the grid is on screen in a visible tab with motion allowed, and each swap is a single state update animating opacity, transform and filter only. With prefers-reduced-motion enabled the first logos render as a static grid with no timer.
- How do I control which logos show and how fast they rotate?
- Pass the full set in the logos prop and choose how many cells are visible with slots; the first slots logos render immediately and the rest queue behind them. The interval prop sets the seconds between swaps, and each swap always brings in the logo that has been offscreen longest, so every logo gets equal time. If the set is not larger than slots the grid simply stays static.