BlocksStable

Studio Hero

Sourcecomponents/blocks/StudioHero.astro

The opener

The inner-page opener used on Studio — a centered eyebrow and headline over a dark stage, then a framed image that grows to full-bleed as you scroll, dimming and fading a statement in over it. Serif accents use <em class="t-serif">.

Scroll inside the preview — the frame scales up, its corners square off, and the statement appears.

Studio hero — scroll to grow

Behaviour

Sticky scroll-grow — a tall track pins the frame while a scroll-progress value scales it from its natural size up to full-bleed, easing the border-radius to 0.
Statement reveal — the dark dim ramps with progress and the overlay text fades in over the last ~third.
Reduced motion — the track collapses and the frame renders opened, with the statement shown statically.
Uses the shared smooth-scroll instance when present, otherwise a plain scroll listener — so it works on its own.

Props

Prop	Type	Default	Notes
`titleHtml`	string	`—`	Headline above the frame (inline HTML; wrap accents in <em class="t-serif">). Required.
`image`	string	`—`	The framed image that grows to full-bleed. Required.
`eyebrow`	string	`—`	Small label above the headline.
`imageFit`	'cover' \| 'contain'	`'cover'`	How the image fills the frame.
`overlayHtml`	string	`—`	The statement that dims in over the expanded image (inline HTML).

Usage

Drop it as the first block of an inner page (Studio, Services, Solutions). Give it a headline, an image, and the statement that resolves over the expanded frame.

<StudioHero
  eyebrow="Studio"
  titleHtml='Setting a <em class="t-serif">new standard</em> for how <em class="t-serif">brands</em> are built'
  image="/img/studio.jpg"
  overlayHtml='A small, senior studio that pairs <em class="t-serif">strategy</em> with craft — under one roof.'
/>

Rules

Keep the statement short — it reads big over the full-bleed image.

Use one or two serif accents in the headline, not more.

Don't

Add a CTA in the frame — this opener is a statement, not an action.

Use a busy image — the statement has to stay legible over it.