BlocksStable

Sparklin Hero

Sourcecomponents/blocks/SparklinHeroBlock.astro

The opener

The Sparklin opener as one continuous scroll: a single fixed portrait that blurs as you scroll, with the hero copy first, then a big centered quote statement floating over the same blurring image — no hard seam between them. Built from our Button and the tokens.

Scroll inside the preview — the portrait blurs and the quote rises over it.

Sparklin hero + scroll quote

Behaviour

One fixed portrait — position: fixed; both the hero and the quote are transparent and scroll over it, so the blur is one continuous depth effect.
Scroll blur — sharp through the first 40% of a viewport, then eases to soft and drifts up. Uses the shared smooth-scroll when present, else a plain listener.
Left-aligned hero over the clean portrait — no dark overlay; text-shadows carry legibility. Mobile swaps to a portrait crop.

Props

Prop	Type	Default	Notes
`titleHtml`	string	`—`	Hero headline (inline HTML; <em> = serif accent). Required.
`image`	string	`—`	The fixed portrait background. Required.
`eyebrow`	string	`'Sparklin — by Alchemy Zürich'`	Label above the title.
`body`	string	`—`	Lead paragraph under the title.
`ctaLabel / ctaHref`	string	`'Start building'`	The Button CTA (arrow appended) and its destination.
`ctaSubtext`	string	`—`	Small note beside the CTA.
`imageMobile`	string	`image`	A portrait-cropped image for ≤780px.
`objectPosition`	string	`'right center'`	How the background image is framed.
`statementEyebrow`	string	`—`	Eyebrow for the scroll quote section.
`statementHtml`	string	`—`	The big quote/statement that floats over the same blurring image (inline HTML). Omit to hide.

Usage

The first block of the Sparklin page. It carries its own fixed background and the following quote — don't wrap either in a section with a background of its own, or the blur won't flow through.

<SparklinHeroBlock
  eyebrow="Sparklin — by Alchemy Zürich"
  titleHtml="Your partner in <em>building a business.</em>"
  body="Sparklin guides you through building your business …"
  ctaLabel="Start building" ctaHref="#start"
  image="/images/sparklin/hero-desktop.webp"
  imageMobile="/images/sparklin/hero-mobile.jpg"
  statementEyebrow="Studio thinking, distilled"
  statementHtml='The thinking behind our <em class="t-serif">CHF 30,000 brands</em> — made accessible.'
/>

Rules

Use a clean portrait with room for left-aligned copy.

Keep the quote to one short line with a single serif accent.

Don't

Give the quote its own background — it floats over the hero's.

Add a dark overlay to the portrait — the shadows already carry the text.