CONTENTS:Overlapping Text Hero

Overlapping Text Hero

A cinematic landing page hero section. Leverages scroll progress coordinates to contract viewport heights, de-blur overlapping subtitles, and dynamically animate twin radial mask cutouts across a technical grid pattern.

Dependencies:

framer-motion

Loading preview...

Examples

Select a preset to load into preview

Installation

pnpm add framer-motion

Props

Property	Type	Default	Description
`title`	`string`	`"SPIDER-MAN"`	Primary large headline text rendered across the central canvas.
`subTitle1`	`string`	`"FRIENDLY NEIGHBORHOOD"`	First prominent badge or qualification subtitle.
`subTitle1Color`	`string`	`"#2563eb"`	Color of the first qualification subtitle.
`subTitle2`	`string`	`"WEB-SLINGER"`	Secondary role or focus area subtitle.
`subTitle2Color`	`string`	`"#dc2626"`	Color of the secondary focus area subtitle.
`textColor`	`string`	`"#dc2626"`	Primary typography color.
`bgColor`	`string`	`"#e2e4e9"`	Background color of the hero banner canvas.
`imgPath`	`string`	`"/sipderman.png"`	Path to the transparent cutout profile asset.