Lintel
Brand-agnostic landing hero in three layouts behind one shared header (logo, nav, sign-in + CTA, focus-trapped menu sheet under 640px): frame — a product window tilted back in perspective that flattens as the hero scrolls over a pooling accent glow; split — copy beside a CSS phone whose screen push-cycles three app screens; centered — a word-by-word blur-reveal headline, announcement pill and trust row over a drifting dot grid. Staggered intro, idle loops that pause on hover, focus and offscreen.
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/lintelManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| layout | LintelLayout | "frame" | Composition: frame (copy over a product window that flattens on scroll), split (copy left, cycling phone right) or centered (big blur-reveal headline over a drifting dot grid with a trust row). |
| eyebrow | LintelEyebrow | string | false | { tag: "New", label: "Scheduled workflows are here", href: "#" } | Announcement pill above the headline. A string renders a plain pill; false hides it. |
| title | string | "The calm control room for fast-moving teams" | Headline. |
| subtitle | React.ReactNode | Supporting paragraph under the headline. | |
| primaryCta | LintelAction | false | { label: "Start free trial", href: "#" } | Solid accent call to action. false hides it. |
| secondaryCta | LintelAction | false | { label: "Book a demo", href: "#" } | Quiet secondary call to action. false hides it. |
| nav | LintelNavLink[] | Product / Solutions / Pricing / Docs | Header links (best with 4). Pass [] to hide. |
| logo | React.ReactNode | a neutral glyph + "Outpost" wordmark | Header logo slot. |
| logoHref | string | "#" | Where the logo links. |
| signIn | LintelAction | false | { label: "Sign in", href: "#" } | Ghost sign-in action in the header. false hides it. |
| headerCta | LintelAction | false | primaryCta's target with the label "Get started"; false hides it | Solid header CTA. |
| frame | React.ReactNode | Custom visual. In frame it becomes the product window's interior (wrap regions in ChassisPanel for the boot treatment); in split it replaces the phone's cycling screens; in centered it renders under the trust row. | |
| trust | string[] | Company names for the trust row (centered). Each gets a neutral logo mark. [] hides the row. | |
| trustLabel | string | "Trusted by teams at" | Caption above the trust row. |
| accentColor | string | "#7dd3fc" | Signature accent: CTA fill, focus rings, glow, bloom. Ink on accent fills auto-picks black/white. |
| scroller | React.RefObject<HTMLElement | null> | Scroll container that drives the frame tilt. Omit to follow the window. The container needs a non-static position. | |
| tilt | number | 18 | Start angle of the frame tilt, in degrees. |
| cycleSeconds | number | 3.5 | Seconds each phone screen holds in split before pushing to the next. |
| paused | boolean | false | Freeze ambient loops (phone cycling, grid drift, glow breathing, window idle life). |
| seed | number | 11 | Seed for the sample data in the phone screens. |
| ref | React.Ref<LintelHandle> | Imperative handle (replay()). React 19 ref-as-prop. | |
| className | string | Extra classes for the <section> root. | |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"section">, "title" | "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.