Hero Sections

Generate a centered hero section in a dark theme.
- Headline: ~64px, weight 600, tracking -0.03em, color #fafafa
- Subhead: ~18px, max-width 60ch, color #a1a1aa, leading-relaxed
- A small pill eyebrow ("New", "v2.0", or a tagline) above the headline with subtle border and uppercase tracking-wide text
- Primary CTA: solid white pill button with black text and a chevron
- Secondary CTA: ghost link with arrow on hover
- Background: radial fade from top + a 48px subtle dot grid with a mask fading to bottom
- Typography: Inter for body, optional Instrument Serif for the headline if a more editorial feel is desired
- No images. The hero must work entirely on type, space, and texture.

Build a split hero, 12-column grid. Left 6 columns: a left-aligned headline (48–56px, weight 600), a 2-line subhead in muted gray, a primary CTA and a secondary "see live demo" link with arrow. Right 6 columns: a screenshot of a product UI rendered with 12px border radius, 1px inner stroke rgba(255,255,255,0.08), and a colored radial glow behind it (purple to transparent). Tilt the screenshot slightly with transform: perspective(1200px) rotateY(-6deg) rotateX(2deg). Add a 32px floating window chrome on top of the screenshot. Dark theme. Subtle grid background.

Create a video background hero. Use a full-bleed muted autoplaying looped <video> with playsinline and a poster image to prevent flash. Overlay a gradient from transparent at top to black at bottom for legibility. Type centered, large, 72px headline in white with 0.92 opacity, a one-line subhead at 60% white, and a single subtle CTA - a ghost button with a 1px border at rgba(255,255,255,0.2). Ensure the page remains accessible: provide a reduced-motion fallback that swaps in a still poster.

Generate a bento-grid hero. Above the grid place a compact headline (~40px) and a one-line subhead. Below, a 12-column responsive grid of 6 tiles in mixed spans (e.g. col-span-8, col-span-4, col-span-5, col-span-7, col-span-6, col-span-6). Each tile: rounded-2xl, border 1px rgba(255,255,255,0.06), background rgba(255,255,255,0.02), padding 28px, small lucide icon in the corner, a 14px uppercase tracking-widest label, a 22px short title, and a short blurb. One tile should have a live animated illustration (CSS only)

Build a hero with an animated gradient mesh background. Render 4 absolutely-positioned div blobs, each ~600px, with a single radial-gradient fill in a different muted hue (purple, teal, amber, rose at ~20% saturation). Apply blur(120px) and animate translate + scale over 50s linear infinite, staggered. Overlay a low-opacity SVG noise turbulence layer for film grain. Centered headline at 64px in light gray, 18px muted subhead, one solid pill CTA. Respect prefers-reduced-motion: freeze the blobs at their first keyframe.

Build an interactive demo hero. Compact 32px headline + 14px subhead. Below: a large rounded input (textarea or chat-style box) at max-width 720px with a primary submit button. Beneath the input, 3–4 sample-prompt chips that prefill the input on click. After submit, render the response inline below the input in a scrolling pane with a subtle border. Whole demo runs against a mocked API or a stubbed response so it never errors. Keyboard-focus the input on mount.

Build a split-screen hero. CSS grid with two equal columns spanning full viewport height. Left column: padding 80px, vertically centered headline (52px), 1-line subhead, primary + ghost CTA stack. Right column: full-bleed image or muted autoplay video (object-cover, no rounded corners). 1px vertical divider between the columns in the line color. On mobile (<768px): media collapses on top at 60vh, copy below.

Build a manifesto-style minimal hero. Single column, max-width 60ch, left-aligned within a centered container. Three short paragraphs of serif body text at 24px with leading-loose. The first sentence renders larger (32px, slight tracking-tight) as a magazine lede. No buttons. Embed a single underlined inline link in the last sentence as the CTA. Generous vertical padding (top 160px, bottom 120px). Background plain bg color; no decoration whatsoever.

Build a hero with a rotating word in the headline. Headline reads 'Build a faster way to [word]' at 56px. The bracketed word cycles through 4 strings (ship, design, launch, learn) every 2500ms with a clean crossfade + 4px slide-up. The slot is set to the width of the longest word at mount to avoid layout shift. Each word has a subtle underline accent in a color from a 4-color palette that cycles in sync. Pause cycling when the user hovers the word.

Build a 3D scene hero with react-three-fiber or a Spline embed. The scene fills the viewport behind the type. An abstract object (sphere, torus, low-poly mesh) with soft studio lighting and a subtle environment map. Auto-rotate slowly; on cursor drag, swap to user-controlled rotation with damping. Type renders above the canvas with mix-blend-mode: difference for guaranteed legibility. On mobile or prefers-reduced-motion, swap the canvas for a pre-rendered PNG of the scene at the same composition.