Components•Aperture dive
Components•Aperture dive
Aperture dive
A hero that starts straight above a ring of screens, an eclipse, and dives into it on native scroll. It lands square on one screen, then hands that screen to a real element in the next section.
Dependencies
threenext-themes
Copy below cli
npx shadcn add https://ui.isaiahbjork.com/aperture-dive.jsonHow to use
import { ApertureDive, ApertureDiveTarget } from "@/components/bjork-ui/heroes/aperture-dive";const panels = [ { id: "glass", title: "Glass", media: { type: "video", src: "/glass.mp4", poster: "/glass.jpg", fit: "contain" } }, { id: "orb", title: "Voice orb", media: { type: "image", src: "/orb.png" } }, // ...6 to 12 screens];export function Hero() { return ( <ApertureDive panels={panels} headline="Interfaces, in orbit." eyebrowLeft="Studio" eyebrowRight="Selected work"> <section className="mx-auto max-w-[680px] py-24"> <ApertureDiveTarget className="rounded-[22px]" /> </section> </ApertureDive> );}