Logos Cloud

Displays a collection of logos with optional scroll effect.

Usage

import {  LogosCloud,  LogosCloudImage,  LogosCloudItem,} from "@/app/_components/ui/logos-cloud";

<LogosCloud scroll speed={2} gap={24} grayscale={false}>  <LogosCloudItem>    <LogosCloudImage src={logo1} alt="Logo 1" width={120} height={40} />  </LogosCloudItem>  <LogosCloudItem>    <LogosCloudImage src={logo2} alt="Logo 2" width={120} height={40} />  </LogosCloudItem>  <LogosCloudItem>    <LogosCloudImage src={logo3} alt="Logo 3" width={120} height={40} />  </LogosCloudItem></LogosCloud>

Props

LogosCloud

Name	Type	Default	Description
`children`	`ReactNode`	`-`	The content to display.
`className`	`string`	`-`	Adds a custom class to the component.
`gap`	`number`	`32`	Gap in pixels.
`grayscale`	`boolean`	`true`	Enable grayscale effect.
`scroll`	`boolean`	`false`	Enable scroll effect.
`speed`	`number`	`0.5`	Speed in pixels per second.

LogosCloudItem

Name	Type	Default	Description
`children`	`ReactNode`	`-`	The content to display.
`className`	`string`	`-`	Adds a custom class to the component.

LogosCloudImage

Name	Type	Default	Description
`children`	`ReactNode`	`-`	The content to display.
`className`	`string`	`-`	Adds a custom class to the component.
`hover`	`boolean`	`true`	Enable hover effect.

Headings Newsletter Form