Dark particle-tree product hero

A near-black hero with a glowing particle tree rising out of luminous water, a pixel-style headline, and a bright blue call-to-action system. Below is the prompt Recast wrote from this one screenshot, word for word.

The input. Fictional concept design.

Colors Recast named

#02030A
#070A1A
#FFFFFF
#D9DEEA
#2A8BF5
#4A9EFF
#1C72D6
#3552C8

What the prompt covers

Layout · Visual style · Content · Components · Images and graphics · Interactions and states · Build notes

Prompt v1 · Precise · 1,474 words

Anchor AI insurance operations hero

A full-viewport dark hero section for "Anchor AI," an insurance operations platform. The background is near-black with a glowing blue-violet particle tree rising out of rippling, luminous water, framed by a starfield. A crisp pixel-style display headline sits bottom left and a bright blue CTA system sits bottom right. Rebuild it faithfully as a working, responsive interface.

Layout

Section: full width, min-height: 100vh, reference frame about 1600×1196. The background image covers the whole section. Content sits in a padded frame: 44–56px side padding on desktop, 36px top padding.
Header row (top, about 60px tall, vertically centered at y≈64):
- Left: the logo (anchor icon plus wordmark) at x≈44.
- Center: a pill-shaped nav, absolutely centered horizontally. It is about 586×62px, runs from x≈505 to 1090, and holds 4 links with about 43px gaps.
- Right: the "Request Demo" pill button, about 198×60px, right-aligned at x≈1550.
App download block: top right, about 120px below the header (top ≈182px), right-aligned with the header button. It is a row of a 96×96px QR code, an 18px gap, then a text column holding a 2-line label with 2 store icons below it.
Central area: empty so the tree artwork shows through. The tree trunk is centered at about 50% x, and the canopy spans roughly x 280–1320 and y 150–650.
Bottom left:
- A badge pill at about y≈717, 330×56px, left at x≈50.
- 24px below it, a 3-line headline stacked at x≈52. Each line is about 97px tall and the block ends near y≈1090.
Bottom right:
- A paragraph block starting at x≈1106, max-width about 440px, top ≈925.
- 28px below it, a row of 2 buttons with a 12px gap: "Get Started" (≈168×70) and "View Technical Specs" (≈270×70).
- The bottom of the button row aligns about 64px above the section bottom, level with the headline's last line.
Tablet (≤1024px):
- Hide the center nav and replace it with a hamburger button that opens a dark panel listing the 4 links. Keep "Request Demo."
- Headline scales to about 72px.
- Bottom-right content stacks below the headline, left-aligned, max-width 520px.
- The QR block stays top right but shrinks to 80px.
Mobile (≤640px):
- Header shows the logo and the hamburger only. "Request Demo" moves into the menu panel.
- Hide the QR block and show only the 2 store icon buttons under the CTAs.
- Headline is about 48px. Buttons go full width, stacked with 12px gaps.
- Background image is centered on the tree trunk.

Visual style

Colors:
- --bg #02030A: page background.
- --bg-2 #070A1A: deep navy used in the vignette.
- --text #FFFFFF: all primary text.
- --text-muted #D9DEEA: paragraph text, used at about 95% opacity.
- --accent #2A8BF5: primary buttons and the badge dot.
- --accent-hover #4A9EFF
- --accent-press #1C72D6
- --nav-bg rgba(10,12,20,0.72): nav pill fill.
- --nav-border rgba(255,255,255,0.28): nav pill border.
- --badge-border #3552C8: dark blue badge outline.
- --badge-bg rgba(6,10,30,0.55)
- Particle and glow tones: #3E6BFF (royal blue), #37A6FF (cyan core), #6A4BF0 (violet), #9B6BFF (lilac sparks).
Typography:
- Headline: closest Google Font is "Pixelify Sans" (fallback "Departure Mono", "Silkscreen", monospace), weight 400. Aim for a crisp bitmap-grotesk look with stair-stepped curves, set in mixed case. Size is about 96px desktop (clamp(48px, 7.5vw, 104px)), line-height 1.0, letter-spacing -0.02em, color #FFFFFF.
- Logo wordmark: "Anchor AI" in "Pixelify Sans" or "Space Mono" (fallback monospace), 26px, weight 400, letter-spacing 0.02em.
- UI and body: "Inter" (fallback system-ui, sans-serif).
  - Nav links: 21px, weight 500, letter-spacing -0.01em.
  - Buttons: 21px, weight 500.
  - Badge: 17px, weight 600, uppercase, letter-spacing 0.01em.
  - Paragraph: 20px, weight 500, line-height 1.35, letter-spacing -0.01em.
  - App label: 20px, weight 500, line-height 1.2.
Radii and borders:
- All pills (nav, buttons, badge) use a 9999px radius.
- Nav border is 1.5px --nav-border. Badge border is 1.5px --badge-border. Buttons have no border.
Effects:
- Nav pill uses backdrop-filter: blur(12px).
- A soft radial vignette darkens the edges: radial-gradient(ellipse at 50% 55%, transparent 40%, rgba(2,3,10,0.85) 100%).
- Add a bottom-left gradient linear-gradient(to top right, rgba(2,3,10,0.6), transparent 50%) to keep the headline legible.
- Primary buttons get a faint glow: box-shadow: 0 8px 30px rgba(42,139,245,0.35) (static, not animated).

Content

Logo: "Anchor AI"
Nav: "Platform", "Solutions", "Analytics", "Integrations"
Header button: "Request Demo"
App block: "Easy to Start" / "with our App"
Badge: "OPERATIONAL INTELLIGENCE"
Headline: "Streamlined" / "Insurance" / "Operations"
Paragraph: "Optimize underwriting workflows, automate claims routing, and deliver real-time operational transparency with our enterprise-grade orchestration engine."
Buttons: "Get Started", "View Technical Specs"

Components

Logo: a white line anchor icon, about 46px tall with a 2px stroke. It has a ring at the top, a crossbar, a vertical shank, and curved flukes ending in arrow tips. Place the wordmark 14px to the right. The logo links to "/".
Nav pill: 4 text links in white, with 32px horizontal padding inside the pill. There is no active indicator visible.
Request Demo: --accent background, white text, padding 0 28px, height 60px.
App block:
- A 96px QR code in white modules on the transparent dark background. Use a real generated QR (for example qrcode.react, fgColor #FFFFFF, bgColor transparent) that encodes the app URL.
- Label in white.
- Below the label, 12px down, 2 icons at 28px in white with a 20px gap: an Apple logo and a Google Play triangle. Each is a link with an aria-label ("Download on the App Store" and "Get it on Google Play").
Badge: inline-flex, padding 0 22px, height 56px, with a 12px gap between a 12px round --accent dot and the uppercase label.
Headline: an h1 with each word on its own line.
Paragraph: a white p, max-width 440px.
Get Started: --accent fill, white text, height 70px, padding 0 28px.
View Technical Specs: white #FFFFFF fill, #0A0A0F text, height 70px, padding 0 28px.

Images and graphics

Hero background: use an image slot (/hero-tree.jpg, object-fit: cover, object-position: 50% 40%). Generate it with this prompt: "A majestic tree made entirely of millions of tiny glowing particles, electric blue and cyan at the trunk core fading to royal blue and violet at the canopy edges. It has a broad umbrella-shaped canopy and rises from a dark reflective water surface with concentric glowing blue ripple rings spreading outward. Particles cascade down the trunk like a waterfall into the water. Deep black space background with a sparse starfield of tiny pink and violet specks. Cinematic, high contrast, digital data-visualization aesthetic, centered composition, 16:10."
Particle overlay: add a lightweight <canvas> over the image with about 120 tiny drifting star particles (1–2px, colors #9B6BFF, #6A4BF0, #3E6BFF, opacity 0.3–0.8).
Icons:
- Anchor: a custom SVG, or Lucide Anchor at stroke 1.75.
- Apple and Google Play: Simple Icons (siApple, siGoogleplay), in white.
- Hamburger: Lucide Menu / X.

Interactions and states

Nav links: on hover, text turns #7FB8FF over 150ms and a subtle pill highlight rgba(255,255,255,0.08) fades in via opacity. Links scroll to anchors (#platform, #solutions, #analytics, #integrations).
Primary buttons: hover changes the background to --accent-hover and applies transform: translateY(-1px). Active uses --accent-press and scale(0.98). Transitions are 180ms ease-out.
- "Request Demo" and "Get Started" open a modal demo form (name, work email, company, and a submit button). It validates locally and shows a success state reading "Thanks — we'll be in touch."
View Technical Specs: hover changes the background to #E6ECF5 and scrolls to #specs.
Focus: a visible 2px #7FB8FF outline with 3px offset on all interactive elements.
Disabled: 50% opacity with cursor: not-allowed, used for the form submit while it is sending.
Mobile menu: slides down with opacity plus translateY(-8px→0) over 220ms using cubic-bezier(.2,.8,.2,1). Close it with Esc or a click outside. Trap focus while it is open.
Motion:
- On load, the badge, headline lines, paragraph and buttons fade up (opacity 0→1, translateY 16px→0) over 600ms ease-out, staggered 80ms apart.
- The background slowly scales from 1.0 to 1.04 over 20s, alternating infinitely.
- Canvas stars drift and twinkle.
Reduced motion: under prefers-reduced-motion, disable the zoom, canvas drift and stagger, and show content immediately.

Build notes

Use the builder's default stack (React with Tailwind CSS if it has no preference).
Split the build into reusable components: Header, NavPill, PillButton (primary and light variants), Badge, AppDownload, HeroBackground, DemoModal.
Use semantic markup: header, nav, main > section, h1.
Ensure keyboard access throughout, visible focus, and at least AA contrast; the overlays guarantee text legibility.
Animate only transform and opacity. Never animate width, height, top, left, or box-shadow.
Keep the canvas at 60fps with requestAnimationFrame and devicePixelRatio scaling, and pause it when the tab is hidden.

The design spec, for your coding agent

Recast also turns this prompt into files you keep in your codebase: a DESIGN.md that Claude Code and Cursor build to, and a Tailwind v4 theme with the exact tokens. Both below are the real export for this design. CSS variables and W3C tokens.json export the same way.

DESIGN.md

# Design spec: Anchor AI Hero

A full-viewport dark hero section for the Anchor AI insurance operations platform featuring a glowing particle tree over water, a pixel-style headline, and a bright blue CTA system.

## Rules for the coding agent

- Build to this spec exactly. Use only the colors, fonts, sizes, radii, spacing and shadows listed here; don't invent new values.
- Put the tokens in one place (CSS variables or the Tailwind theme) and reference them; never hard-code a value that has a token.
- When something isn't specified, choose the closest existing token and say so.

## Colors

| Token | Value | Use |
|---|---|---|
| `--color-bg` | #02030A | page background |
| `--color-bg-2` | #070A1A | deep navy vignette |
| `--color-text` | #FFFFFF | primary text |
| `--color-text-muted` | #D9DEEA | paragraph text at ~95% opacity |
| `--color-accent` | #2A8BF5 | primary buttons and badge dot |
| `--color-accent-hover` | #4A9EFF | primary button hover |
| `--color-accent-press` | #1C72D6 | primary button active |
| `--color-nav-bg` | #0A0C14 | nav pill fill (rgba 0.72) |
| `--color-nav-border` | #FFFFFF | nav pill border (rgba 0.28) |
| `--color-badge-border` | #3552C8 | badge outline |
| `--color-badge-bg` | #060A1E | badge fill (rgba 0.55) |
| `--color-royal-blue` | #3E6BFF | particle tone |
| `--color-cyan-core` | #37A6FF | particle tone |
| `--color-violet` | #6A4BF0 | particle tone |
| `--color-lilac` | #9B6BFF | particle/spark tone |
| `--color-specs-text` | #0A0A0F | View Technical Specs text color |
| `--color-specs-hover` | #E6ECF5 | View Technical Specs hover background |
| `--color-focus-ring` | #7FB8FF | focus outline and nav link hover color |

## Fonts

| Role | Family | Weights |
|---|---|---|
| heading | Pixelify Sans (Departure Mono, Silkscreen, monospace) | 400 |
| accent | Pixelify Sans (Space Mono, monospace) | 400 |
| body | Inter (system-ui, sans-serif) | 500, 600 |

## Type scale

| Style | Size | Line height | Weight | Letter spacing |
|---|---|---|---|---|
| display-headline | 96px | 1 | 400 | -0.02em |
| logo-wordmark | 26px | 1.2 | 400 | 0.02em |
| nav-link | 21px | 1.2 | 500 | -0.01em |
| button | 21px | 1.2 | 500 | 0 |
| badge | 17px | 1.2 | 600 | 0.01em |
| paragraph | 20px | 1.35 | 500 | -0.01em |
| app-label | 20px | 1.2 | 500 | 0 |
| headline-tablet | 72px | 1 | 400 | -0.02em |
| headline-mobile | 48px | 1 | 400 | -0.02em |

## Shape and space

- Radii: pill 9999px
- Spacing scale: 12px, 14px, 18px, 20px, 24px, 28px, 32px, 36px, 44px, 56px, 60px, 64px, 120px (base 4px)
- Shadow button-glow: `0 8px 30px rgba(42,139,245,0.35)`

## Layout

- Max content width: 1600px
- Reference frame ~1600×1196
- Content padded 44–56px sides desktop, 36px top
- Header row ~60px tall centered at y≈64, logo left x≈44, nav pill centered 586×62px x505-1090, Request Demo button right x≈1550 198×60px
- App download block top right ~182px below header: 96px QR, 18px gap, text column with label and 2 store icons
- Central area empty for tree artwork, trunk centered 50% x, canopy spans x280-1320 y150-650
- Bottom left: badge pill y≈717 330×56px x=50, 24px below 3-line headline each ~97px tall ending near y=1090
- Bottom right: paragraph block x≈1106 max-width 440px top≈925, 28px below button row with 12px gap Get Started 168×70 and View Technical Specs 270×70, bottom aligned 64px above section bottom
- Tablet ≤1024px: hide center nav, hamburger menu, headline 72px, bottom-right content stacks left-aligned max-width 520px, QR shrinks to 80px
- Mobile ≤640px: header shows logo+hamburger only, hide QR show only store icons, headline 48px, buttons full width stacked 12px gaps, background centered on tree trunk

## Components

- **Header:** Top row with logo left, centered nav pill, Request Demo button right; collapses to logo+hamburger on tablet/mobile
- **Logo:** White line anchor icon ~46px tall 2px stroke with ring, crossbar, shank, curved flukes with arrow tips; wordmark 'Anchor AI' 14px to the right; links to /
- **NavPill:** Pill-shaped nav ~586×62px, background rgba(10,12,20,0.72), border 1.5px rgba(255,255,255,0.28), backdrop-filter blur(12px), 4 links with 32px horizontal padding, no active indicator; hover text turns #7FB8FF over 150ms with rgba(255,255,255,0.08) pill highlight fade-in
- **PillButton (primary):** Request Demo / Get Started: accent background, white text, pill radius, glow shadow 0 8px 30px rgba(42,139,245,0.35); hover bg accent-hover + translateY(-1px); active accent-press + scale(0.98); transitions 180ms ease-out
- **PillButton (light):** View Technical Specs: white #FFFFFF fill, #0A0A0F text, height 70px, padding 0 28px; hover background #E6ECF5, scrolls to #specs
- **Badge:** Inline-flex pill, padding 0 22px, height 56px, 12px gap between 12px round accent dot and uppercase label 'OPERATIONAL INTELLIGENCE'; border 1.5px badge-border, background badge-bg
- **AppDownload:** 96px QR code (white modules, transparent bg) + 18px gap + text column with 2-line label 'Easy to Start / with our App' and below it 2 icons (Apple, Google Play) at 28px white with 20px gap, each a link with aria-label
- **Headline:** h1 with each word ('Streamlined','Insurance','Operations') on its own line, Pixelify Sans, 96px desktop/72px tablet/48px mobile, line-height 1.0, letter-spacing -0.02em, white
- **Paragraph:** White p, max-width 440px, describing underwriting workflows and claims routing
- **HeroBackground:** Full-bleed background image /hero-tree.jpg, object-fit cover, object-position 50% 40%, radial vignette gradient and bottom-left linear gradient overlay for legibility
- **ParticleCanvas:** Canvas overlay with ~120 tiny drifting star particles 1-2px, colors #9B6BFF #6A4BF0 #3E6BFF #37A6FF, opacity 0.3-0.8, 60fps rAF with devicePixelRatio scaling, paused when tab hidden
- **DemoModal:** Modal form with name, work email, company fields and submit button; local validation; success state reads 'Thanks — we'll be in touch.'; disabled submit shows 50% opacity cursor not-allowed while sending
- **MobileMenu:** Dark panel listing 4 nav links plus Request Demo on mobile; slides down opacity+translateY(-8px→0) over 220ms cubic-bezier(.2,.8,.2,1); closes on Esc or outside click; traps focus

## Motion

- **content-fade-up:** On load, badge, headline lines, paragraph and buttons fade up (opacity 0→1, translateY 16px→0) over 600ms ease-out, staggered 80ms apart
- **background-zoom:** Background slowly scales from 1.0 to 1.04 over 20s, alternating infinitely
- **canvas-drift:** Canvas stars drift and twinkle continuously
- **menu-slide:** Mobile menu slides down with opacity and translateY(-8px→0) over 220ms cubic-bezier(.2,.8,.2,1)
- **button-hover:** Primary buttons transition background and transform over 180ms ease-out on hover/active
- **nav-link-hover:** Nav link text color and pill highlight opacity transition over 150ms
- **reduced-motion:** Under prefers-reduced-motion, disable background zoom, canvas drift and stagger; show content immediately

---
Generated by Recast from the design's build prompt.

Tailwind v4 theme

/* Anchor AI Hero: Tailwind v4 theme from Recast. Paste after @import "tailwindcss"; */
@theme {
  --color-bg: #02030A;
  --color-bg-2: #070A1A;
  --color-text: #FFFFFF;
  --color-text-muted: #D9DEEA;
  --color-accent: #2A8BF5;
  --color-accent-hover: #4A9EFF;
  --color-accent-press: #1C72D6;
  --color-nav-bg: #0A0C14;
  --color-nav-border: #FFFFFF;
  --color-badge-border: #3552C8;
  --color-badge-bg: #060A1E;
  --color-royal-blue: #3E6BFF;
  --color-cyan-core: #37A6FF;
  --color-violet: #6A4BF0;
  --color-lilac: #9B6BFF;
  --color-specs-text: #0A0A0F;
  --color-specs-hover: #E6ECF5;
  --color-focus-ring: #7FB8FF;
  --font-heading: "Pixelify Sans", Departure Mono, Silkscreen, monospace;
  --font-accent: "Pixelify Sans", Space Mono, monospace;
  --font-body: "Inter", system-ui, sans-serif;
  --text-display-headline: 6rem;
  --text-display-headline--line-height: 1;
  --text-display-headline--letter-spacing: -0.02em;
  --text-display-headline--font-weight: 400;
  --text-logo-wordmark: 1.625rem;
  --text-logo-wordmark--line-height: 1.2;
  --text-logo-wordmark--letter-spacing: 0.02em;
  --text-logo-wordmark--font-weight: 400;
  --text-nav-link: 1.313rem;
  --text-nav-link--line-height: 1.2;
  --text-nav-link--letter-spacing: -0.01em;
  --text-nav-link--font-weight: 500;
  --text-button: 1.313rem;
  --text-button--line-height: 1.2;
  --text-button--letter-spacing: 0;
  --text-button--font-weight: 500;
  --text-badge: 1.063rem;
  --text-badge--line-height: 1.2;
  --text-badge--letter-spacing: 0.01em;
  --text-badge--font-weight: 600;
  --text-paragraph: 1.25rem;
  --text-paragraph--line-height: 1.35;
  --text-paragraph--letter-spacing: -0.01em;
  --text-paragraph--font-weight: 500;
  --text-app-label: 1.25rem;
  --text-app-label--line-height: 1.2;
  --text-app-label--letter-spacing: 0;
  --text-app-label--font-weight: 500;
  --text-headline-tablet: 4.5rem;
  --text-headline-tablet--line-height: 1;
  --text-headline-tablet--letter-spacing: -0.02em;
  --text-headline-tablet--font-weight: 400;
  --text-headline-mobile: 3rem;
  --text-headline-mobile--line-height: 1;
  --text-headline-mobile--letter-spacing: -0.02em;
  --text-headline-mobile--font-weight: 400;
  --radius-pill: 624.938rem;
  --spacing: 0.25rem;
  --shadow-button-glow: 0 8px 30px rgba(42,139,245,0.35);
  --container-page: 100rem;
}

More examples

Try it on your own design.

Drop in a screenshot, hero video, or screen recording, and Recast writes the exact prompt to rebuild it in v0, Lovable, Bolt, Claude Code, or Cursor.