A snap carousel of studio postcards, each with a drawn skyline whose sky, sun and lit windows follow the city's local time. Cards carry a stamp, address, open status and quick contact links, with arrows, dots and arrow keys.
Drop by any of our studios or write to the one closest to you. The sky on each card follows the local time.
Portugal
Rua do Alecrim 72
1200-018 Lisbon
Open until 18:00Canada
5455 Avenue de Gaspé, 1010
Montreal, QC H2T 3B3
Open until 17:00South Korea
17 Seongsuil-ro 8-gil
Seongdong-gu, Seoul
Opens at 10:00South Africa
The Old Biscuit Mill, Unit 9
Woodstock, Cape Town
Open until 17:00Mexico
Colima 124, Roma Norte
06700 Mexico City
Opens at 09:00
npx shadcn@latest add https://hyperblur.dev/r/contact-office-postcards.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/contact-office-postcards.tsx.
import { ContactOfficePostcards } from "@/components/hyperblur/contact-office-postcards"
<ContactOfficePostcards onOfficeChange={(office) => console.log(office.city)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Studios" | Small label above the title. |
| title | string | "Five rooms, one team, always someone awake" | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| offices | { city: string; code: string; country: string; timeZone: string; fallbackHour: number; address: string[]; phone: string; email: string; opens: number; closes: number; hue: number }[] | 5 offices | Postcards. timeZone is an IANA zone; fallbackHour is used for the first render. |
| defaultIndex | number | 0 | Card highlighted first. |
| onOfficeChange | (office) => void | Called when another card becomes active by scrolling. | |
| accent | string | "#f5a524" | Dots, focus and active outline color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |