iPartyLabs HeroNew

When to use

• A launch or landing page for a venue, events or experiences product, where the photos sell the mood
• A single-screen hero that has to read as a place, not a feature list

When not to use

• Pages that scroll straight into dense content — the field is built to own the first screen
• A product with no photography of its own; stock party shots will read as generic

Installation

Add iPartyLabs Hero with the shadcn CLI — it writes the files into components/blocx/ and installs what they import — or copy it in by hand.

Requires React 19 · Next.js (it loads its fonts with next/font) · motion.

pnpm dlx shadcn@latest add "https://www.pinui.xyz/r/blocx/partylabs-hero.json"

Usage

import PartylabsHero from "@/components/blocx/PartylabsHero";

export default function Page() {
  return <PartylabsHero />;
}

API reference

PartylabsHero

Takes no props — drop it in as it is.

The copy, nav links and search suggestions are written in the component; the photo layouts are the LAYOUTS table at the top of PartylabsHero.tsx — [x%, y%, depth, rotation, portrait] per card — and the photos are the PHOTOS list beneath it.

Accessibility

• The photo field is aria-hidden; the headline keeps its full sentence as an aria-label while its words animate
• The search has a real label, "/" focuses it, and the cycling suggestion is hidden from screen readers
• On a phone the menu button reports aria-expanded, and Escape or a press outside closes the sheet

Motion

• The photos fly outward from the headline into place, nearest first, then drift on their own slow loops
• Pointer parallax moves each photo by its depth — near ones travel furthest — on one shared rAF loop
• Reduced motion keeps the field still: no fly-in, no drift, no parallax, no cycling suggestions

Responsive behavior

• Three hand-placed layouts — desktop, tablet (or any portrait window) and phone — rather than one scaled down
• Card size follows the window's width and height, so the field always fills one viewport
• Below 768px the nav folds into a sheet with the search inside it