Hero 14

File: src/blocks/hero/Hero14.astro

Centered hero like Hero 03 with a full-bleed text marquee under the copy. Marquee controls mirror Scroller Text 01 (scroller* props).

Config (`blocks.ts` → `hero14`)

hero14: {
    width: "standard",
    eyebrow: "Available for freelance & contract",
    heading: "I build websites that work as hard as you do!",
    subheading:
      "Full-stack web development for brands that need speed, clarity, and craft. Astro, React, headless CMS, and everything in between.",
    primaryCta: "View my work",
    primaryCtaUrl: "/work/",
    secondaryCta: "Get in touch",
    secondaryCtaUrl: "/contact/",
    padding: "lg",
    borderBottom: false,
    borderThickness: "sm",
    borderColor: "soft",
    scrollerItems: [
      "Astro",
      "React",
      "Tailwind",
      "Sanity",
      "Performance",
      "Accessibility",
      "Design systems",
    ],
    scrollerMotion: "auto",
    scrollerDirection: "ltr",
    scrollerSpeed: "normal",
    scrollerPauseOnHover: true,
    scrollerGap: "md",
    scrollerTextSize: "md",
    scrollerSeparator: "·",
    scrollerFadeEdges: true,
  },

Add to a page

---
import Hero14 from "@/blocks/hero/Hero14.astro";
---

<Hero14 />

Props override matching keys from config:

<Hero14
  width="wide"
  heading="Custom headline"
  padding="md"
/>

Props

Prop	Config key	Type / values	Default / notes
`width`	`hero14.width`	`standard` \| `narrow` \| `wide`	Wrapper max-width
`eyebrow`	`hero14.eyebrow`	`string`	—
`heading`	`hero14.heading`	`string`	—
`subheading`	`hero14.subheading`	`string`	—
`primaryCta`	`hero14.primaryCta`	`string`	—
`primaryCtaUrl`	`hero14.primaryCtaUrl`	`string`	—
`secondaryCta`	`hero14.secondaryCta`	`string`	—
`secondaryCtaUrl`	`hero14.secondaryCtaUrl`	`string`	—
`padding`	`hero14.padding`	`none` \| `sm` \| `md` \| `lg` \| `xl`	Vertical section padding
`borderBottom`	`hero14.borderBottom`	`boolean`	Show a bottom border under the section
`borderThickness`	`hero14.borderThickness`	`sm` (1px) \| `md` (2px) \| `lg` (4px)	—
`borderColor`	`hero14.borderColor`	`soft` \| `medium` \| `hard`	—
`scrollerItems`	`hero14.scrollerItems`	`string[]`	Text marquee phrases
`scrollerMotion`	`hero14.scrollerMotion`	`auto` (continuous) \| `scroll` (tied to page scroll)	—
`scrollerDirection`	`hero14.scrollerDirection`	`ltr` \| `rtl`	—
`scrollerSpeed`	`hero14.scrollerSpeed`	`slow` \| `normal` \| `fast`	—
`scrollerPauseOnHover`	`hero14.scrollerPauseOnHover`	`boolean`	Pause text marquee on hover
`scrollerGap`	`hero14.scrollerGap`	`sm` \| `md` \| `lg`	—
`scrollerTextSize`	`hero14.scrollerTextSize`	`sm` \| `md` \| `lg`	—
`scrollerSeparator`	`hero14.scrollerSeparator`	`string`	Character between marquee phrases
`scrollerFadeEdges`	`hero14.scrollerFadeEdges`	`boolean`	Fade text marquee edges

Marquee uses the same scroller internals as Scroller Text 01.

← Hero versions · Blocks overview

I build websites that work as hard as you do!

Config (blocks.ts → hero14)

Add to a page

Props

Config (`blocks.ts` → `hero14`)