CategoriesAllHeroNavigationFooterCall-to-ActionsFeature SectionsTestimonialsPricingContactGalleryStatsFAQServicesNewsletterAuthMiscellaneousButtons
All Components3D Cube InteractionBorder Logo GridCountdownFlip ButtonExpandable FAQsFlow ButtonGlow ButtonGrayscale CarouselInertia Zoom ParallaxLogo Cloud GridMobile Drawer NavigationPixel PreloaderProject GalleryRing ButtonShowcase CarouselSlide PreloaderSliding Stairs PreloaderStormtrooper FAQText Gradient OpacityThreads ButtonTilt HeadlineUltra Preloader
Code
app/page.tsx
1import LogoCloud from "@/sections/logo-cloud";
2
3const Home = () => {
4 return (
5 <div className=" w-full h-screen container mx-auto flex items-center justify-center">
6 <LogoCloud />
7 </div>
8 );
9}
10
11export default Home;Installation
Initialized a project and installed the necessary dependencies to use this component.
1. Initialize a new Next.js project:
npx create-next-app@latest my-app2. Install Framer Motion
npm install framer-motion --saveAdd Logo Cloud Grid Section
src/sections/logo-cloud.tsx
1"use client"
2
3import { Marquee } from "@/components/marquee";
4import { logoClouds, logoCloudsMobile } from "@/constants";
5import { ChevronRight } from "lucide-react";
6import Image from "next/image";
7import Link from "next/link";
8import { motion } from "framer-motion";
9
10interface LogoCloudProps {
11 isTransparent?: boolean;
12}
13
14const LogoCloud = ({ isTransparent = false }: LogoCloudProps) => {
15 return (
16 <section className=" w-full py-12 z-20 relative">
17 <div className=" container hidden md:block mx-auto w-full">
18 <div className="max-w-4xl mx-auto grid md:grid-cols-4 w-full gap-y-7 px-12 py-6 relative group">
19 <div className={`absolute inset-0 ${isTransparent ? 'bg-transparent backdrop-blur-sm' : 'bg-black/60 backdrop-blur-xs'} z-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 ease-in-out`}>
20 <Link href="/showcase">
21 <span className="flex text-white hover:text-white/70 items-center gap-1 text-[15px] transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 ease-in-out">
22 <p>Companies using Astrae</p>
23 <ChevronRight className=" size-5" />
24 </span>
25 </Link>
26 </div>
27 {logoClouds.map((logo, index) => (
28 <motion.div
29 key={index}
30 className="relative h-12 w-[180px]"
31 initial={{ opacity: 0, y: 20 }}
32 whileInView={{ opacity: 1, y: 0 }}
33 transition={{
34 duration: 0.5,
35 delay: index * 0.1,
36 ease: "easeOut"
37 }}
38 viewport={{ once: true, amount: 0.3 }}
39 >
40 <Image fill src={logo.image} alt={logo.name} className="object-contain" />
41 </motion.div>
42 ))}
43 </div>
44 </div>
45 <div className=" w-full relative md:hidden">
46 <div className="absolute top-0 bottom-0 left-0 w-[20%] z-[1] bg-gradient-to-r from-black to-transparent" />
47 <div className="absolute top-0 bottom-0 right-0 w-[20%] z-[1] bg-gradient-to-l from-black to-transparent" />
48 <Marquee className="[--gap:-0rem]">
49 <div className="flex items-center">
50 {logoCloudsMobile.map((logo, index) => (
51 <div key={index} className="relative h-9 w-[148px]">
52 <Image fill src={logo.image} alt={logo.name} className="object-contain" />
53 </div>
54 ))}
55 </div>
56 </Marquee>
57 </div>
58 </section>
59 );
60}
61
62export default LogoCloud;Add Marquee Component
src/components/marquee.tsx
1import { cn } from "@/lib/utils";
2import { ComponentPropsWithoutRef } from "react";
3
4interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
5 /**
6 * Optional CSS class name to apply custom styles
7 */
8 className?: string;
9 /**
10 * Whether to reverse the animation direction
11 * @default false
12 */
13 reverse?: boolean;
14 /**
15 * Whether to pause the animation on hover
16 * @default false
17 */
18 pauseOnHover?: boolean;
19 /**
20 * Content to be displayed in the marquee
21 */
22 children: React.ReactNode;
23 /**
24 * Whether to animate vertically instead of horizontally
25 * @default false
26 */
27 vertical?: boolean;
28 /**
29 * Number of times to repeat the content
30 * @default 4
31 */
32 repeat?: number;
33}
34
35export function Marquee({
36 className,
37 reverse = false,
38 pauseOnHover = false,
39 children,
40 vertical = false,
41 repeat = 4,
42 ...props
43}: MarqueeProps) {
44 return (
45 <div
46 {...props}
47 className={cn(
48 "group flex overflow-hidden z-20 p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
49 {
50 "flex-row": !vertical,
51 "flex-col": vertical,
52 },
53 className,
54 )}
55 >
56 {Array(repeat)
57 .fill(0)
58 .map((_, i) => (
59 <div
60 key={i}
61 className={cn("flex [gap:var(--gap)]", {
62 "animate-marquee flex-row": !vertical,
63 "animate-marquee-vertical flex-col": vertical,
64 "group-hover:[animation-play-state:paused]": pauseOnHover,
65 "[animation-direction:reverse]": reverse,
66 })}
67 >
68 {children}
69 </div>
70 ))}
71 </div>
72 );
73}Add Constants
src/constants/index.ts
1export const logoClouds = [
2 {
3 name: "Linear",
4 image: "/assets/company-logo-1.png",
5 },
6 {
7 name: "Splunk",
8 image: "/assets/company-logo-2.png",
9 },
10 {
11 name: "Dropbox",
12 image: "/assets/company-logo-3.png",
13 },
14 {
15 name: "Hopin",
16 image: "/assets/company-logo-4.png",
17 },
18 {
19 name: "Zapier",
20 image: "/assets/company-logo-5.png",
21 },
22 {
23 name: "Attentive",
24 image: "/assets/company-logo-6.png",
25 },
26 {
27 name: "Rippling",
28 image: "/assets/company-logo-7.png",
29 },
30 {
31 name: "Descript",
32 image: "/assets/company-logo-8.png",
33 },
34];
35
36export const logoCloudsMobile = [
37 {
38 name: "Linear",
39 image: "/assets/c-logo-1.png",
40 },
41 {
42 name: "Splunk",
43 image: "/assets/c-logo-2.png",
44 },
45 {
46 name: "Dropbox",
47 image: "/assets/c-logo-3.png",
48 },
49 {
50 name: "Hopin",
51 image: "/assets/c-logo-4.png",
52 },
53 {
54 name: "Zapier",
55 image: "/assets/c-logo-5.png",
56 },
57 {
58 name: "Attentive",
59 image: "/assets/c-logo-6.png",
60 },
61 {
62 name: "Rippling",
63 image: "/assets/c-logo-7.png",
64 },
65 {
66 name: "Descript",
67 image: "/assets/c-logo-8.png",
68 },
69];