WebberUI
繁體中文

Spotlight Home

A dark page lit by a cursor spotlight: sections develop only where the light falls, while the CTA stays lit.

ProInteractive homeinteractive-home8 sections
See it liveSee the plans

Install

npx webberui@latest add "https://webberui.com/r/spotlight-follow-home.en.json?t=<install token>"

The whole page lands in app/templates/spotlight-follow-home/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Spotlight Hero and Nav Bar

    Brand nav bar, lights-on/off toggle, headline with two CTAs, a dashboard product shot and a customer logo row — the cursor drags a warm spotlight across the section.

    hero
  2. 2

    Six Features of the Full Observability Stack

    A three-column card grid covering distributed tracing, smart alerting, log aggregation, AI anomaly detection, SLO tracking and cost insights.

    features
  3. 3

    Key Platform Metrics

    Four platform figures count up on entry: uptime, event volume, latency and customer scale.

    stats
  4. 4

    Five-Minute Setup

    Native OpenTelemetry ingest and security certifications on the left; a terminal window on the right demoing the one-line install command and its output.

    product
  5. 5

    Customer Testimonials

    Three named quotes from an SRE, a platform engineer and a CTO, with gradient avatars and job titles.

    testimonial
  6. 6

    Transparent Pricing

    Starter, Team and Enterprise side by side, with a glowing border and a Most Popular badge on the middle plan.

    pricing
  7. 7

    Closing Call to Action

    Sign-off headline over a warm bottom glow, paired with start-monitoring-free and book-a-demo buttons.

    cta
  8. 8

    Footer

    Brand blurb and social links alongside four link columns — Product, Resources, Company and Legal — plus a copyright and status bar.

    footer

Spotlight Home is a React cursor spotlight homepage template: a dark page lit only around the cursor, with the light widening as you scroll faster while the call-to-action stays visible. It is built with Next.js App Router, Tailwind CSS and Motion.

When to use it

  • Website for a developer tool or an observability product
  • Tech product landing pages that should feel exploratory
  • Product launch or event teaser pages
  • Dark SaaS marketing homepages

What to change after installing

  1. Product content lives in the `FEATURES`, `STATS`, `TESTIMONIALS`, `PLANS`, `CLIENT_LOGOS` and `FOOTER_COLS` arrays at the top of page.tsx; the sample brand is an observability platform, so replace it with your own copy.
  2. The product screen in the hero is `DashboardMock`, with chart data in `CHART_POINTS`; swap in your own UI or screenshot.
  3. The light's size is set by two constants: `R_BASE` (at rest) and `R_MAX` (the cap while scrolling or clicking).
  4. Touch devices and visitors with reduced motion enabled do not get the spotlight; pressing L toggles the whole page lit, and you can remove the `keydown` listener if you do not want that.

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →