Local Sky Hero

Heroes

About

A studio landing hero where the sky's colour and sun or moon position follow the visitor's own local time, with a horizon status line showing the studio's local time, the time difference, and whether anyone is currently in the office.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Local Sky Hero to your project and fits it to your theme.

Code

How Local Sky Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { LocalSkyHero } from "@/components/ui/local-sky-hero";

export default function LocalSkyHeroDemo() {
  return (
    <div className="h-screen w-full">
      <LocalSkyHero
        eyebrow="Rahbi Studio · Brand and product design"
        headline={
          <>
            A small studio on the <em>Gulf of Oman</em>, working with teams in
            every time zone.
          </>
        }
        sub="Hamza and two designers, no account managers. You talk to the people doing the work, usually the same day."
        place="Muscat"
        timeZone="Asia/Muscat"
        actions={
          <>
            <a className="lsh-btn" href="#book">
              Book a 20-minute call
            </a>
            <a className="lsh-btn lsh-btn--ghost" href="#work">
              See the work
            </a>
          </>
        }
      />
    </div>
  );
}