Hero - oversized marquee

The prompt that produced this. Re-run it to generate more in the same taste.

Aesthetic

oversized marquee - display type at the edge of the viewport, tight tracking, one line of color, everything else structural

Reference

https://jakubpelak.com/

Intent

a portfolio hero that reads as a statement rather than a pitch - the name is the graphic, the copy is a footnote

Guardrails

always type larger than feels comfortable, one accent line, left-aligned baseline grid

never centered layouts, gradient text, hero illustrations

pnpm dlx shadcn@latest add http://localhost:3040/r/hero-marquee.json

Meta block and library type import stripped - this is what pastes cleanly elsewhere.

import { ArrowUpRight } from 'lucide-react'
import { Button } from '@/components/ui/button'

export default function HeroMarquee() {
  return (
    <section className="flex min-h-[100dvh] flex-col justify-between bg-background px-6 py-10 sm:px-12">
      <div className="flex items-start justify-between font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
        <span>Available for work</span>
        <span className="text-right">
          Paris
          <br />
          UTC+1
        </span>
      </div>

      <div>
        <h1 className="font-semibold text-[clamp(3rem,13vw,11rem)] leading-[0.82] tracking-[-0.04em]">
          Design
          <br />
          <span className="text-muted-foreground">that ships.</span>
        </h1>

        <div className="mt-10 flex flex-col gap-8 border-t pt-6 md:flex-row md:items-end md:justify-between">
          <p className="max-w-md text-balance text-muted-foreground text-sm leading-relaxed">
            Interface work for teams who would rather show something than describe it. Ten years of
            shipping, mostly in public.
          </p>
          <Button size="lg" className="w-fit gap-2">
            See the work
            <ArrowUpRight className="size-4" />
          </Button>
        </div>
      </div>
    </section>
  )
}