BlocksStable

Scale Reveal

Sourcecomponents/blocks/ScaleRevealBlock.astro

Headline + CTA

An image that grows to full-bleed as you scroll, with an ad fading in over it — a headline top-left and a Button bottom-right, over a left-side scrim. This is the startpage Sparklin ad: headline + CTA, no supporting line.

Scroll inside the preview — the frame scales up and the ad resolves.

Grows on scroll — headline + CTA

Headline + sub-line + CTA

The same block with a subHtml supporting line under the headline — the à-la-carte ad at the end of the Sparklin page. Same motion, more copy.

Grows on scroll — with sub-line

Headline + sub-line + rotating badge

Set variant="badge" to replace the bottom-right Button with a brand badge that rotates slowly and endlessly — for an ad that announces rather than links (e.g. a coming soon teaser). Same scroll-grow and reveal; the badge honours reduced motion (it stops spinning).

Grows on scroll — rotating badge

Behaviour

Sticky scroll-grow — a tall track pins the frame while scroll-progress scales it from the content width up to full-bleed, easing the border-radius to 0.
Ad reveal — the left scrim ramps with progress; the overlay (headline, sub-line, CTA) fades in over the last third. The overlay sits outside the scaling frame, so text and button keep normal size and align to the content width.
Reduced motion — the track collapses and the ad renders opened. Uses the shared smooth-scroll when present, else a plain listener; multiple instances are independent.

Props

Prop	Type	Default	Notes
`image`	string	`'/img/hero.jpg'`	The image that grows to full-bleed.
`overlayHtml`	string	`—`	Ad headline, top-left (inline HTML; <em> = serif accent).
`subHtml`	string	`—`	Optional supporting line under the headline.
`variant`	'cta' \| 'badge'	`'cta'`	'cta' = Button bottom-right; 'badge' = a slowly rotating brand badge instead of the Button.
`ctaLabel / ctaHref`	string	`—`	The Button (bottom-right) and its destination — variant "cta".
`badge / badgeAlt`	string	`'/badges/coming-soon.svg'`	Badge SVG + its label — variant "badge".
`imageFit`	'cover' \| 'contain'	`'cover'`	How the image fills the frame.

Usage

Add subHtml for the two-line ad, omit it for the compact one. Both use the same component.

<!-- Startpage variation — headline + CTA -->
<ScaleRevealBlock
  image="/img/hero.jpg"
  overlayHtml='<em>Sparklin</em> lets you <em>build your brand</em> yourself. Then go <em>live</em> in minutes.'
  ctaLabel="Start your business" ctaHref="/sparklin"
/>

<!-- Sparklin-end variation — headline + sub-line + CTA -->
<ScaleRevealBlock
  image="/images/sparklin/hero-desktop.webp"
  overlayHtml='Bring in the <em>studio</em> whenever you’re ready.'
  subHtml='Want a strategy session, a custom logo or a proper brand polish? Add real Alchemy work à la carte …'
  ctaLabel="Book a strategy session" ctaHref="/work-with-us"
/>

<!-- Badge variation — headline + sub-line + a slowly rotating brand badge -->
<ScaleRevealBlock
  image="/images/sparklin/hero-desktop.webp"
  overlayHtml='Sounds <em>too expensive?</em>'
  subHtml='Sparklin helps you build your own brand and website. …'
  variant="badge"
  badge="/badges/coming-soon.svg" badgeAlt="Sparklin — coming soon"
/>

Rules

Keep the headline to a few words with one or two serif accents.

Use a landscape image with room on the left for the copy.

Don't

Stack two of these — the sticky tracks fight for the viewport.

Add a second CTA — one Button, bottom-right.