Logo Marquee Panel

Logos14: Logo Marquee Panel

Soft panel carrying a centered statement over an endlessly scrolling logo track. Gradient fades dissolve both edges into the panel, the animation pauses when the pointer is over it, and a ruled row of three figures closes the block.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/logos14?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/logos14?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/logos14.tsx plus the badge7 component it uses for the eyebrow.

Quick start

The installed file exports logos14Demo alongside the block: the exact props behind the preview above. Spread it to get a working logo marquee in one line.

import { Logos14, logos14Demo } from "@/components/beste/block/logos14";

export default function Page() {
  return <Logos14 {...logos14Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Logos14 } from "@/components/beste/block/logos14";

export default function Page() {
  return (
    <Logos14
      badge={{ label: "On the shelf" }}
      heading="Work sitting in nine countries and one very long airport corridor."
      items={[
        { src: "/logos/one.png", alt: "One" },
        { src: "/logos/two.png", alt: "Two" },
      ]}
      stats={[
        { title: "Commissions since 2014", value: "212" },
        { title: "Longest running client", value: "9 years" },
      ]}
    />
  );
}

Props

type Logo = {
  src: string;
  alt: string;
};

type MarqueeStat = {
  title: string;
  value: string;
};

Behavior notes

• The track renders [...items, ...items] inside a w-max flex row and translates from 0 to -50%, so the second copy is exactly under the first when the animation restarts and the loop has no visible seam.
• The keyframe is declared in a scoped <style jsx> block named logos14-marquee, so dropping this block next to another marquee section cannot collide on the animation name.
• Edge fades are from-muted to-transparent gradients, matched to the panel fill rather than the page background, which is what makes the logos dissolve instead of ending against a visible band.
• Hovering the track sets [animation-play-state:paused] through group-hover/logos14, giving anyone who wants to read a mark time to do so.
• Logos keep a constant opacity-50 grayscale with no hover brightening, per the set's rule that logo walls stay quiet.
• With six logos the loop takes 28 seconds; add more items rather than changing the duration if the pace feels fast, since speed scales with track width.