Hero Long Exposure

Heroes 14

About

A hero section canvas that behaves like a long-exposure photograph, burning cursor movement into light streaks that slowly decay instead of clearing every frame.

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

Code

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

Usage.tsx

"use client";

import { SolargraphHero } from "@/components/ui/hero-long-exposure";

export default function HeroLongExposureDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6 sm:p-10">
      <SolargraphHero className="w-full max-w-4xl rounded-2xl border border-border bg-card/60">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6 px-6 py-16 text-center sm:py-24">
          <span className="font-mono text-xs uppercase tracking-widest text-muted-foreground">
            Long-exposure interfaces
          </span>
          <h1 className="text-4xl font-semibold tracking-tight text-foreground sm:text-6xl">
            Infrastructure that develops over time
          </h1>
          <p className="mx-auto max-w-xl text-balance text-muted-foreground">
            Solargraph records every deploy, rollback, and incident as a single
            accumulating exposure — your system&apos;s history burned into one
            picture instead of scattered across dashboards.
          </p>
          <div className="mt-2 flex items-center justify-center gap-3">
            <button className="rounded-full bg-[var(--ns-accent)] px-5 py-2 text-sm font-medium text-white transition hover:opacity-90">
              Start exposure
            </button>
            <button className="rounded-full border border-foreground/20 px-5 py-2 text-sm font-medium text-foreground transition hover:bg-foreground/5 focus-visible:ring-2 focus-visible:ring-[var(--ns-accent)]">
              Read the docs
            </button>
          </div>
          <div className="mt-10 flex items-center justify-center gap-8 text-xs font-medium uppercase tracking-widest text-muted-foreground/60">
            <span>Meridian</span>
            <span>Octant</span>
            <span>Parallel</span>
            <span>Hollow</span>
          </div>
        </div>
      </SolargraphHero>
    </div>
  );
}