uiception
blockbrands-section-v2source: ok · hit
Brands Section v2
Infinite marquee of brand logos rendered as a seamless row of borderless-radius cards—full border container, no gaps, shared dividers between slots.
npx shadcn add "https://uiception.com/r/brands-section-v2.json"free
Where it goes
logo-cloud
Interaction
marquee
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Files16 · source cached 10/9/2026, 2:31:32 PM
registry/new-york/blocks/brands-section-v2/page.tsx
import BrandsSectionV2 from "./components/brands-section-v2"
export default function Page() {
return <BrandsSectionV2 />
}
registry/new-york/blocks/brands-section-v2/components/brands-section-v2.tsx
import Marquee from "./marquee"
import { brands } from "../lib/brands"
import "../styles/brands-section-v2.css"
export default function BrandsSectionV2() {
return (
<section className="py-4 md:py-6 lg:py-8">
<div className="mx-auto max-w-6xl px-4">
<Marquee brands={brands} />
</div>
</section>
)
}
registry/new-york/blocks/brands-section-v2/components/brand-logo.tsx
import type { Brand } from "../lib/brands"
export default function BrandLogo({ brand }: { brand: Brand }) {
const Light = brand.light
const Dark = brand.dark
if (Dark) {
return (
<span className="inline-flex h-12 w-12 items-center justify-center">
<Light
className="bs2-logo block h-full w-full dark:hidden"
aria-label={brand.name}
/>
<Dark
className="bs2-logo hidden h-full w-full dark:block"
aria-label={brand.name}
/>
</span>
)
}
return (
<span className="inline-flex h-12 w-12 items-center justify-center">
<Light className="bs2-logo h-full w-full" aria-label={brand.name} />
</span>
)
}
registry/new-york/blocks/brands-section-v2/components/marquee.tsx
import type { Brand } from "../lib/brands"
import BrandLogo from "./brand-logo"
export default function Marquee({ brands }: { brands: Brand[] }) {
return (
<div className="relative overflow-hidden border border-border">
<div
className="pointer-events-none absolute top-0 left-0 z-1 h-full w-35 bg-linear-to-r from-background to-transparent motion-reduce:hidden"
aria-hidden
/>
<div
className="pointer-events-none absolute top-0 right-0 z-1 h-full w-35 bg-linear-to-l from-background to-transparent motion-reduce:hidden"
aria-hidden
/>
<div className="bs2-track flex min-h-full w-max flex-nowrap items-stretch will-change-transform backface-hidden">
<div
className="flex shrink-0 items-stretch"
role="list"
aria-label="Database brand logos"
>
{brands.map((brand) => (
<div
key={brand.name}
role="listitem"
className="flex w-32 items-center justify-center border-r border-border py-3 md:w-40 md:py-4"
>
<BrandLogo brand={brand} />
</div>
))}
</div>
<div className="flex shrink-0 items-stretch" aria-hidden>
{brands.map((brand) => (
<div
key={`dup-${brand.name}`}
className="flex w-32 items-center justify-center border-r border-border py-3 md:w-40 md:py-4"
>
<BrandLogo brand={brand} />
</div>
))}
</div>
</div>
</div>
)
}
registry/new-york/blocks/brands-section-v2/lib/brands.ts
import type { ComponentType, SVGProps } from "react"
import { Convex } from "@/components/ui/svgs/convex"
import { Supabase } from "@/components/ui/svgs/supabase"
import { TursoLight } from "@/components/ui/svgs/tursoLight"
import { TursoDark } from "@/components/ui/svgs/tursoDark"
import { Upstash } from "@/components/ui/svgs/upstash"
import { Neon } from "@/components/ui/svgs/neon"
import { Planetscale } from "@/components/ui/svgs/planetscale"
import { PlanetscaleDark } from "@/components/ui/svgs/planetscaleDark"
import { MongodbIconLight } from "@/components/ui/svgs/mongodbIconLight"
import { MongodbIconDark } from "@/components/ui/svgs/mongodbIconDark"
export type SvgComponent = ComponentType<SVGProps<SVGSVGElement>>
export type Brand = {
name: string
light: SvgComponent
dark?: SvgComponent
}
export const brands: Brand[] = [
{ name: "Convex", light: Convex },
{ name: "Supabase", light: Supabase },
{ name: "Turso", light: TursoLight, dark: TursoDark },
{ name: "Upstash", light: Upstash },
{ name: "Neon", light: Neon },
{ name: "PlanetScale", light: Planetscale, dark: PlanetscaleDark },
{ name: "MongoDB", light: MongodbIconLight, dark: MongodbIconDark },
]
registry/new-york/blocks/brands-section-v2/styles/brands-section-v2.css
.bs2-track {
animation: bs2-marquee 40s linear infinite;
}
@keyframes bs2-marquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.bs2-track {
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
components/ui/svgs/convex.tsx
import type { SVGProps } from "react";
const Convex = (props: SVGProps<SVGSVGElement>) => (
<svg {...props} viewBox="28 28 128 132" fill="none">
<path
fill="#F3B01C"
d="M108.092 130.021c18.166-2.018 35.293-11.698 44.723-27.854-4.466 39.961-48.162 65.218-83.83 49.711-3.286-1.425-6.115-3.796-8.056-6.844-8.016-12.586-10.65-28.601-6.865-43.135 10.817 18.668 32.81 30.111 54.028 28.122Z"
/>
<path
fill="#8D2676"
d="M53.401 90.174c-7.364 17.017-7.682 36.94 1.345 53.336-31.77-23.902-31.423-75.052-.388-98.715 2.87-2.187 6.282-3.485 9.86-3.683 14.713-.776 29.662 4.91 40.146 15.507-21.3.212-42.046 13.857-50.963 33.555Z"
/>
<path
fill="#EE342F"
d="M114.637 61.855C103.89 46.87 87.069 36.668 68.639 36.358c35.625-16.17 79.446 10.047 84.217 48.807.444 3.598-.139 7.267-1.734 10.512-6.656 13.518-18.998 24.002-33.42 27.882 10.567-19.599 9.263-43.544-3.065-61.704Z"
/>
</svg>
);
export { Convex };
components/ui/svgs/supabase.tsx
import type { SVGProps } from "react";
const Supabase = (props: SVGProps<SVGSVGElement>) => (
<svg {...props} viewBox="0 0 109 113" fill="none">
<path
d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
fill="url(#paint0_linear)"
/>
<path
d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
fill="url(#paint1_linear)"
fillOpacity="0.2"
/>
<path
d="M45.317 2.07103C48.1765 -1.53037 53.9745 0.442937 54.0434 5.041L54.4849 72.2922H9.83113C1.64038 72.2922 -2.92775 62.8321 2.1655 56.4175L45.317 2.07103Z"
fill="#3ECF8E"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="53.9738"
y1="54.974"
x2="94.1635"
y2="71.8295"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#249361" />
<stop offset="1" stopColor="#3ECF8E" />
</linearGradient>
<linearGradient
id="paint1_linear"
x1="36.1558"
y1="30.578"
x2="54.4844"
y2="65.0806"
gradientUnits="userSpaceOnUse"
>
<stop />
<stop offset="1" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
);
export { Supabase };
components/ui/svgs/tursoLight.tsx
import type { SVGProps } from "react";
const TursoLight = (props: SVGProps<SVGSVGElement>) => (
<svg {...props} fill="none" viewBox="0 0 201 170">
<path
d="m200.035 48.61c-4.67-27.94-29.16-48.61-29.16-48.61v30.78l-14.54 3.75-9.11-10.97-4.81 9.46c-9.92-2.7-23.58-4.44-42.37-4.44-18.7901 0-32.4501 1.75-42.3701 4.44l-4.81-9.46-9.11 10.97-14.54-3.75v-30.78s-24.48997 20.67-29.1599684 48.61l32.1399684 11.12c1.05 19.43 9.79 71.88 12.29 76.64 2.66 5.07 16.78 19.56 27.83 25.13 0 0 4-4.23 6.44-7.96 3.1 3.65 19.11 16.45 21.3001 16.45 2.19 0 18.2-12.79 21.3-16.45 2.44 3.73 6.44 7.96 6.44 7.96 11.05-5.57 25.17-20.06 27.83-25.13 2.5-4.76 11.24-57.21 12.29-76.64l32.14-11.12zm-46.19 44.74-21.75 1.94 1.91 26.67s-13.23 10.95-33.96 10.95c-20.7301 0-33.9601-10.95-33.9601-10.95l1.91-26.67-21.75-1.94-3.72-30.04 36.05 12.48-2.8 37.39c6.7 1.7 13.75 3.39 24.2801 3.39 10.53 0 17.57-1.69 24.27-3.39l-2.8-37.39 36.05-12.48-3.72 30.04z"
fill="#183134"
/>
</svg>
);
export { TursoLight };
components/ui/svgs/tursoDark.tsx
import type { SVGProps } from "react";
const TursoDark = (props: SVGProps<SVGSVGElement>) => (
<svg {...props} fill="none" viewBox="0 0 201 170">
<path
d="m100.055 170c-2.1901 0-18.2001-12.8-21.3001-16.45-2.44 3.73-6.44 7.96-6.44 7.96-11.05-5.57-25.17-20.06-27.83-25.13-2.62-5-12.13-62.58-12.39-79.3-.34-9.41 5.85-28.49 67.9601-28.49 62.11 0 68.29 19.08 67.96 28.49-.25 16.72-9.76 74.3-12.39 79.3-2.66 5.07-16.78 19.56-27.83 25.13 0 0-4-4.23-6.44-7.96-3.1 3.65-19.11 16.45-21.3 16.45z"
fill="#1ebca1"
/>
<path
d="m100.055 132.92c-20.7301 0-33.9601-10.95-33.9601-10.95l1.91-26.67-21.75-1.94-3.91-31.55h115.4301l-3.91 31.55-21.75 1.94 1.91 26.67s-13.23 10.95-33.96 10.95z"
fill="#183134"
/>
<path
d="m121.535 75.79 78.52-27.18c-4.67-27.94-29.16-48.61-29.16-48.61v30.78l-14.54 3.75-9.11-10.97-7.8 15.34-39.38 10.16-39.3801-10.16-7.8-15.34-9.11 10.97-14.54-3.75v-30.78s-24.50997 20.67-29.1799684 48.61l78.5199684 27.18-2.8 37.39c6.7 1.7 13.75 3.39 24.2801 3.39 10.53 0 17.57-1.69 24.27-3.39l-2.8-37.39z"
fill="#4ff8d2"
/>
</svg>
);
export { TursoDark };
components/ui/svgs/upstash.tsx
import type { SVGProps } from "react";
const Upstash = (props: SVGProps<SVGSVGElement>) => (
<svg {...props} viewBox="0 0 256 341" preserveAspectRatio="xMidYMid">
<path
fill="#00C98D"
d="M0 298.417c56.554 56.553 148.247 56.553 204.801 0 56.554-56.554 56.554-148.247 0-204.801l-25.6 25.6c42.415 42.416 42.415 111.185 0 153.6-42.416 42.416-111.185 42.416-153.601 0L0 298.416Z"
/>
<path
fill="#00C98D"
d="M51.2 247.216c28.277 28.277 74.123 28.277 102.4 0 28.277-28.276 28.277-74.123 0-102.4l-25.6 25.6c14.14 14.138 14.14 37.061 0 51.2-14.138 14.139-37.061 14.139-51.2 0l-25.6 25.6ZM256 42.415c-56.554-56.553-148.247-56.553-204.8 0-56.555 56.555-56.555 148.247 0 204.801l25.599-25.6c-42.415-42.415-42.415-111.185 0-153.6 42.416-42.416 111.185-42.416 153.6 0L256 42.416Z"
/>
<path
fill="#00C98D"
d="M204.8 93.616c-28.276-28.277-74.124-28.277-102.4 0-28.278 28.277-28.278 74.123 0 102.4l25.6-25.6c-14.14-14.138-14.14-37.061 0-51.2 14.138-14.139 37.06-14.139 51.2 0l25.6-25.6Z"
/>
<path
fill="#FFF"
fillOpacity=".4"
d="M256 42.415c-56.554-56.553-148.247-56.553-204.8 0-56.555 56.555-56.555 148.247 0 204.801l25.599-25.6c-42.415-42.415-42.415-111.185 0-153.6 42.416-42.416 111.185-42.416 153.6 0L256 42.416Z"
/>
<path
fill="#FFF"
fillOpacity=".4"
d="M204.8 93.616c-28.276-28.277-74.124-28.277-102.4 0-28.278 28.277-28.278 74.123 0 102.4l25.6-25.6c-14.14-14.138-14.14-37.061 0-51.2 14.138-14.139 37.06-14.139 51.2 0l25.6-25.6Z"
/>
</svg>
);
export { Upstash };
components/ui/svgs/neon.tsx
import type { SVGProps } from "react";
const Neon = (props: SVGProps<SVGSVGElement>) => (
<svg {...props} viewBox="0 0 64 64" fill="none">
<title>Neon</title>
<path
d="M63 0.0177909V63.5526L38.4178 42.2501V63.5526H0V0L63 0.0177909ZM7.72251 55.8389H30.6953V25.3238L55.2779 47.0476V7.72922L7.72251 7.71559V55.8389Z"
fill="#37C38F"
/>
</svg>
);
export { Neon };
components/ui/svgs/planetscale.tsx
import type { SVGProps } from "react";
const Planetscale = (props: SVGProps<SVGSVGElement>) => (
<svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 256">
<path d="M256 128a128 128 0 01-128 128zM128 0c52 0 96.7 31 116.8 75.5L75.5 244.8c-7.3-3.3-14.2-7.2-20.7-11.7L160 128h-32l-90.5 90.5A128 128 0 01128 0z" />
</svg>
);
export { Planetscale };
components/ui/svgs/planetscaleDark.tsx
import type { SVGProps } from "react";
const PlanetscaleDark = (props: SVGProps<SVGSVGElement>) => (
<svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 256">
<path
fill="#fff"
d="M256 128a128 128 0 01-128 128zM128 0c52 0 96.7 31 116.8 75.5L75.5 244.8c-7.3-3.3-14.2-7.2-20.7-11.7L160 128h-32l-90.5 90.5A128 128 0 01128 0z"
/>
</svg>
);
export { PlanetscaleDark };
components/ui/svgs/mongodbIconLight.tsx
import type { SVGProps } from "react";
const MongodbIconLight = (props: SVGProps<SVGSVGElement>) => (
<svg {...props} fill="none" viewBox="0 0 120 258">
<path
fill="#001E2B"
d="M83.009 28.756C72.133 15.909 62.767 2.86 60.854.15a.488.488 0 0 0-.705 0c-1.913 2.71-11.28 15.758-22.155 28.605-93.353 118.536 14.703 198.531 14.703 198.531l.906.602c.806 12.346 2.82 30.111 2.82 30.111h8.056s2.014-17.665 2.82-30.111l.906-.702c.101 0 108.157-79.895 14.804-198.431ZM60.45 225.48s-4.834-4.115-6.143-6.223v-.2l5.84-129.076c0-.401.605-.401.605 0l5.841 129.076v.2c-1.31 2.108-6.143 6.223-6.143 6.223Z"
/>
</svg>
);
export { MongodbIconLight };
components/ui/svgs/mongodbIconDark.tsx
import type { SVGProps } from "react";
const MongodbIconDark = (props: SVGProps<SVGSVGElement>) => (
<svg {...props} fill="none" viewBox="0 0 120 257">
<path
fill="#00ED64"
d="M82.323 28.55C71.537 15.795 62.249 2.84 60.35.15c-.2-.2-.5-.2-.7 0-1.897 2.69-11.185 15.645-21.971 28.4C-54.902 146.238 52.26 225.661 52.26 225.661l.9.597c.798 12.258 2.795 29.896 2.795 29.896h7.99s1.998-17.539 2.797-29.896l.899-.697c.1 0 107.263-79.323 14.68-197.01ZM59.95 223.867s-4.793-4.086-6.092-6.179v-.199l5.793-128.151c0-.4.6-.4.6 0l5.792 128.151v.199c-1.299 2.093-6.093 6.179-6.093 6.179Z"
/>
</svg>
);
export { MongodbIconDark };