Marquee Accent About

About44: Marquee Accent About

A two-column about section with a text block on the left and an offset, overlapping pair of images on the right, laid over a faint infinite marquee of a single studio word scrolling behind everything at low opacity. A compact stats row sits under the CTA button.

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/about44?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/about44.tsx, the badge6 and button1 components it uses for the eyebrow label and CTA button, and its dependencies.

Quick start

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

import { About44, about44Demo } from "@/components/beste/block/about44";

export default function AboutPage() {
  return <About44 {...about44Demo} />;
}

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

import { About44 } from "@/components/beste/block/about44";

export default function AboutPage() {
  return (
    <About44
      label="Inside the studio"
      heading="We are a small team of <strong>obsessive makers</strong>."
      description="We strip a product back to its sharpest idea, then design every surface around it."
      button={{ label: "Meet the team", href: "https://beste.co" }}
      marqueeWord="Northwind"
      images={[
        {
          src: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=900&h=1125&fit=crop",
          alt: "Team reviewing layouts",
        },
        {
          src: "https://images.unsplash.com/photo-1497032205916-ac775f0649ae?w=800&h=800&fit=crop",
          alt: "Designer sketching at a desk",
        },
      ]}
      stats={[
        { value: "8", label: "Years in business." },
        { value: "150+", label: "Projects shipped." },
      ]}
    />
  );
}

Props

type ImageItem = { src: string; alt: string };
type ActionLink = { label: string; href: string };
type StatItem = { value: string; label: string };

Behavior notes

• The component takes images.slice(0, 2): passing more than two images silently drops the rest, and passing one image renders only the larger top image with no offset second photo.
• The marquee duplicates marqueeWord exactly twice and animates the track by translateX(-50%) over 42 seconds, linear and infinite, so the second copy lands exactly where the first started, creating a seamless loop. It is aria-hidden and sits at text-foreground/[0.04] opacity, so it reads as texture rather than content.
• The keyframes for the marquee are injected via an inline <style> tag scoped to the component rather than a Tailwind config animation, so no tailwind.config changes are needed after install.
• The two images are offset rather than aligned: the first is aspect-[3/4] at 80% width anchored right (ml-auto), and the second is a smaller aspect-square card at 60% width pulled up -mt-16 with a background-colored border, layering it over the first image's bottom-left corner.
• On screens below lg, the grid collapses to a single column and the image cluster stacks below the text column in source order.