--- /** * HeroParallax — a very tall hero section (300vh) whose product grid starts * tilted back, lifted and translucent, then settles flat and opaque as the * reader scrolls past. Three rows of cards drift horizontally at the same * time: the outer rows travel one way, the middle row the other. * * A custom element tracks scroll progress against the viewport via the * shared `scroll-progress` util (anchors `[0, 0] -> [1, 0]`, matching the * original's `-rect.top / rect.height`), smooths it with the shared * `lerp-loop` util (the spring feel of the original) and writes the result * as CSS custom properties consumed by the stylesheet below. No animation * library, no npm dependencies. * * The section needs the full 300vh of scroll room to play through, so give * it a page of its own or place it at the top of one. */ interface Product { /** Card label, revealed over the overlay on hover, and the image alt text. */ title: string; /** Destination the card links to. */ link: string; /** Image URL rendered as the card artwork. */ thumbnail: string; } interface Props { /** Cards to lay out; the first 15 fill three rows of five. */ products: Product[]; /** Plain-text headline (ignored when the `title` slot is filled). */ title?: string; /** Plain-text paragraph under the headline (ignored when the `description` slot is filled). */ description?: string; /** Additional classes for the outer section. */ class?: string; } const { products, title = 'The ultimate\nproduct studio', description = 'We build considered products with the tools of the moment. A small team of designers and engineers who care about the last ten percent.', class: className, } = Astro.props; const firstRow = products.slice(0, 5); const secondRow = products.slice(5, 10); const thirdRow = products.slice(10, 15); const rows = [ { products: firstRow, direction: 'forward', spaced: true }, { products: secondRow, direction: 'reverse', spaced: true }, { products: thirdRow, direction: 'forward', spaced: false }, ]; ---

{ rows.map((row) => (

{row.products.map((product) => (

))}

)) }

{title}

{product.title}

Installation

Install dependencies

Add these files

Configuration

Use it