# LogoCloud

> Logo display with animated marquee, static grid, and icon variants.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Data Display
- Tags: logos, marquee, brands, animation, scrolling
- Docs: https://fancy-ui.rama.app/docs/components/logo-cloud
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/logo-cloud

## Import

```svelte
<script lang="ts">
  import { AnimatedLogoCloud, IconLogoCloud, StaticLogoCloud } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { AnimatedLogoCloud, StaticLogoCloud, IconLogoCloud } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | — | Optional title displayed above the logos |
| `logos` | `Logo[]` | `[]` | Array of logos with name and image path |
| `wordmarks` | `Wordmark[]` | — | StaticLogoCloud only: when provided, renders a static typographic row of wordmarks instead of image logos |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { AnimatedLogoCloud } from "fancy-ui-svelte";

	const logos = [
		{ name: "Vercel", path: "https://svgl.app/library/vercel_wordmark.svg" },
		{ name: "Svelte", path: "https://svgl.app/library/svelte.svg" },
		{ name: "Tailwind CSS", path: "https://svgl.app/library/tailwindcss.svg" },
		{ name: "TypeScript", path: "https://svgl.app/library/typescript.svg" },
		{ name: "Prisma", path: "https://svgl.app/library/prisma.svg" },
		{ name: "Stripe", path: "https://svgl.app/library/stripe_wordmark.svg" },
	];
</script>

<div class="overflow-hidden rounded-lg border">
	<AnimatedLogoCloud title="Trusted by the best" {logos} />
</div>
```

### Icon Grid

```svelte
<script lang="ts">
	import { IconLogoCloud } from "fancy-ui-svelte";

	const logos = [
		{ name: "Vercel", path: "https://svgl.app/library/vercel_wordmark.svg" },
		{ name: "Svelte", path: "https://svgl.app/library/svelte.svg" },
		{ name: "Tailwind CSS", path: "https://svgl.app/library/tailwindcss.svg" },
		{ name: "TypeScript", path: "https://svgl.app/library/typescript.svg" },
		{ name: "Prisma", path: "https://svgl.app/library/prisma.svg" },
		{ name: "Stripe", path: "https://svgl.app/library/stripe_wordmark.svg" },
	];
</script>

<div class="overflow-hidden rounded-lg border">
	<IconLogoCloud title="Built with" {logos} />
</div>
```

### Static Grid

```svelte
<script lang="ts">
	import { StaticLogoCloud } from "fancy-ui-svelte";

	const logos = [
		{ name: "Vercel", path: "https://svgl.app/library/vercel_wordmark.svg" },
		{ name: "Svelte", path: "https://svgl.app/library/svelte.svg" },
		{ name: "Tailwind CSS", path: "https://svgl.app/library/tailwindcss.svg" },
		{ name: "TypeScript", path: "https://svgl.app/library/typescript.svg" },
		{ name: "Prisma", path: "https://svgl.app/library/prisma.svg" },
		{ name: "Stripe", path: "https://svgl.app/library/stripe_wordmark.svg" },
	];
</script>

<div class="overflow-hidden rounded-lg border">
	<StaticLogoCloud title="Our partners" {logos} />
</div>
```

### Wordmarks

Static typographic row instead of image logos — no logo assets needed.

```svelte
<script lang="ts">
	import { StaticLogoCloud } from "fancy-ui-svelte";
	import type { Wordmark } from "fancy-ui-svelte";

	const wordmarks: Wordmark[] = [
		{ name: "Acme Corp", size: 22, weight: 700 },
		{ name: "Nimbus Labs", size: 20, weight: 400, italic: true },
		{ name: "FOUNDRY", size: 18, weight: 900, tracking: 2, transform: "uppercase" },
		{ name: "Cartwright & Sons", size: 20, weight: 400, serif: true },
		{ name: "Vertex", size: 22, weight: 700, tracking: 1 },
	];
</script>

<div class="overflow-hidden rounded-lg border">
	<StaticLogoCloud title="Trusted by" {wordmarks} />
</div>
```