Giant Wordmark Hero

Hero117: Giant Wordmark Hero

Editorial studio hero built around an oversized centered wordmark: a vertical parenthetical badge pinned to the left edge, monospace nav links in the top-right corner, the giant wordmark and tagline in the middle, and a full-bleed horizontal marquee of rounded portrait tiles below.

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

Base UI flavor

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

This installs the block to components/beste/block/hero117.tsx, the badge7 component it uses for the vertical side label, and its dependencies.

Quick start

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

import { Hero117, hero117Demo } from "@/components/beste/block/hero117";

export default function Page() {
  return <Hero117 {...hero117Demo} />;
}

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

import { Hero117 } from "@/components/beste/block/hero117";

export default function Page() {
  return (
    <Hero117
      badge={{ label: "Est. 2014" }}
      wordmark="Northwind"
      subheading="An independent design studio for brands with something to say."
      links={[
        { label: "Work", href: "https://beste.co" },
        { label: "Studio", href: "https://beste.co" },
        { label: "Contact", href: "https://beste.co" },
      ]}
      images={[
        {
          src: "https://images.unsplash.com/photo-1514214089800-6f1f3ae37854?w=800&h=1000&fit=crop",
          alt: "Close-up of orange flowers",
        },
        {
          src: "https://images.unsplash.com/photo-1603155923045-684bf9d6d3b9?w=800&h=1000&fit=crop",
          alt: "Portrait in warm light",
        },
        {
          src: "https://images.unsplash.com/photo-1550597186-61e0fc2a77bc?w=800&h=1000&fit=crop",
          alt: "Studio portrait",
        },
      ]}
    />
  );
}

Props

type NavLink = {
  label: string;
  href: string;
};

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

Behavior notes

• The side badge only renders on lg screens and up (hidden lg:block); it is absolutely centered on the vertical axis at the left edge and rendered through Badge7's vertical mode.
• Nav links are joined inline with a / separator placed before every item except the first, rather than each link getting its own bordered pill or spacing wrapper.
• The wordmark scales across five breakpoints, from text-6xl on mobile up to text-9xl at lg, and always carries text-balance for even line wrapping if it spans multiple words.
• The marquee duplicates the full images array once ([...images, ...images]) and scrolls it horizontally with a scoped styled-jsx keyframe (hero117-marquee, 40s linear infinite) via an arbitrary Tailwind animate-[...] value; hovering the strip (group/hero117) pauses it through animation-play-state.
• Each tile also has its own independent hover scale (hover:scale-105, 500ms), so hovering a single tile zooms it even while the marquee keeps scrolling (or is paused). Left and right edge gradients fade the strip into the section background so tiles appear to scroll in and out rather than clip abruptly.