Saas
A full SaaS / product landing page for the fictional observability platform "Kelvin": sticky nav, a hero over one soft WebGL mesh with an Anneal word-reveal subhead, a logo-cloud strip, a tilting Facet feature grid, a bento "how it works" section with faux telemetry art, a Tally count-up metrics band, a Rostrum testimonial rotator, a three-tier pricing teaser, a closing CTA band, and a multi-column footer — every string a prop, one cool azure accent knob, fully reduced-motion-safe.
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/saasManual — install dependencies, then copy the source
npm install motion oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| product | string | "Kelvin" | Product name, shown in the nav wordmark and footer. |
| logo | React.ReactNode | a degree monogram | Inline logo mark (a 1em-scalable SVG using currentColor). |
| announcement | string | "New · Anomaly forecasting" | Small pill above the hero headline. |
| headline | string | Hero headline. Line breaks in the string are preserved. | |
| subhead | string | Hero sub-headline, revealed word by word. | |
| nav | SaasNavItem[] | Top navigation links. | |
| primaryCta | SaasAction | "Start free" | Primary hero CTA (accent-filled). |
| secondaryCta | SaasAction | "Book a demo" | Secondary hero CTA (brushed-metal Sheen). |
| navCta | SaasAction | "Start free" | Compact nav CTA shown in the header. |
| heroNote | string | Small reassurance line under the hero CTAs. | |
| logoCloudLabel | string | "Trusted by product teams at" | Label above the logo-cloud strip. |
| logos | string[] | Wordmarks shown in the social-proof strip (plain strings). | |
| featuresEyebrow | string | "Everything in one pane" | Eyebrow above the feature grid. |
| featuresHeading | string | Heading for the feature grid. | |
| features | SaasFeature[] | The feature cards. | |
| bentoEyebrow | string | "How it works" | Eyebrow above the bento detail section. |
| bentoHeading | string | Heading for the bento detail section. | |
| bento | SaasBentoTile[] | The bento detail tiles. | |
| metrics | SaasMetric[] | Headline metrics shown as a count-up band. | |
| testimonials | RostrumTestimonial[] | Testimonials rotated in the social-proof section. | |
| pricingEyebrow | string | "Simple pricing" | Eyebrow above the pricing teaser. |
| pricingHeading | string | Heading for the pricing teaser. | |
| pricing | SaasPricingTier[] | The pricing tiers (2–3). | |
| pricingFootnote | SaasAction | Link under the pricing tiers, e.g. to a full comparison. | |
| ctaHeading | string | Heading for the closing CTA band. | |
| ctaSubhead | string | Supporting copy in the closing CTA band. | |
| ctaPrimary | SaasAction | "Start free" | Primary button in the closing CTA band. |
| ctaSecondary | SaasAction | "Talk to sales" | Secondary button in the closing CTA band. |
| footerColumns | SaasFooterColumn[] | Footer link columns. | |
| footerNote | string | Closing footer line. | |
| accent | string | "#38bdf8" | The single cool signature hue (azure by default) used for the accent fill, rules, chips, glows, focus rings, and the hero mesh tint. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.