Logo Cloud 2

1"use client";
2 
3import { motion, useReducedMotion } from "motion/react";
4import type React from "react";
5import {
6  Canpoy,
7  Canva,
8  Casetext,
9  Clearbit,
10  Descript,
11  Duolingo,
12  Faire,
13  Strava,
14} from "@/components/smoothui/shared";
15 
16const ANIMATION_DURATION = 25;
17const STAGGER_DELAY = 0.1;
18const HOVER_SCALE = 1.2;
19const HOVER_ROTATE = 5;
20const SPRING_STIFFNESS = 300;
21const SCROLL_DISTANCE_FACTOR = 33.333;
22 
23interface LogoCloudAnimatedProps {
24  description?: string;
25  logos?: Array<{
26    name: string;
27    logo: React.ComponentType;
28    url?: string;
29  }>;
30  title?: string;
31}
32 
33export function LogoCloudAnimated({
34  title = "Trusted by the world's most innovative teams",
35  description = "Join thousands of developers and designers who are already building with Smoothui",
36  logos = [
37    { logo: Canpoy, name: "Canpoy", url: "https://canpoy.com" },
38    { logo: Canva, name: "Canva", url: "https://canva.com" },
39    { logo: Casetext, name: "Casetext", url: "https://casetext.com" },
40    { logo: Strava, name: "Strava", url: "https://strava.com" },
41    { logo: Descript, name: "Descript", url: "https://descript.com" },
42    { logo: Duolingo, name: "Duolingo", url: "https://duolingo.com" },
43    { logo: Faire, name: "Faire", url: "https://faire.com" },
44    { logo: Clearbit, name: "Clearbit", url: "https://clearbit.com" },
45  ],
46}: LogoCloudAnimatedProps) {
47  const shouldReduceMotion = useReducedMotion();
48  return (
49    <section className="overflow-hidden py-20">
50      <div className="mx-auto max-w-7xl px-6">
51        <motion.div
52          animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
53          className="mb-16 text-center"
54          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
55          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
56        >
57          <h2 className="mb-4 font-bold text-2xl text-foreground lg:text-3xl">
58            {title}
59          </h2>
60          <p className="text-foreground/70 text-lg">{description}</p>
61        </motion.div>
62        {/* Infinite scrolling logos */}
63        <div
64          className="relative overflow-hidden"
65          style={{
66            maskImage:
67              "linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0))",
68            WebkitMaskImage:
69              "linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0))",
70          }}
71        >
72          <motion.div
73// … truncated