File: src/blocks/hero/Hero21.astro
Like Hero19 — inset rounded solid frame — with dual vertical image strips on the right in a 3D “laying down” plane (stripsPerspective, stripsRotateX/Y/Z). On small screens the strips dim and a solid overlay (mixed from backgroundColor) keeps copy readable.
Depends on ScrollerImageStripTrack.astro + ScrollerScript.astro (shared script; each strip uses withScript={false}).
Config (blocks.ts → hero21)
hero21: {
width: "full",
contentWidth: "wide",
backgroundColor: "oklch(22% 0.025 260)",
contentTone: "light",
height: "md",
textPlacement: "center",
textAlign: "left",
radius: "2xl",
stripAImages: [/* … */],
stripBImages: [/* … */],
stripADirection: "up",
stripBDirection: "down",
stripsPerspective: 1800,
stripsRotateX: 16,
stripsRotateY: -12,
stripsRotateZ: 5,
// …scroller motion / gap / radius props
},Add to a page
---
import Hero21 from "@/blocks/hero/Hero21.astro";
---
<Hero21 /><Hero21
contentTone="light"
stripsRotateY={-8}
stripsPerspective={2000}
/>Props
| Prop | Config key | Type / values | Default / notes |
|---|---|---|---|
width |
hero21.width |
narrow | standard | wide | full |
Frame max-width; full keeps gutter |
contentWidth |
hero21.contentWidth |
standard | narrow | wide |
Inner copy max-width |
backgroundColor |
hero21.backgroundColor |
CSS color | Also used for small-screen overlay |
contentTone |
hero21.contentTone |
light | dark |
light = light text on dark fill |
height |
hero21.height |
auto | sm | md | lg | full |
Frame min-height |
textPlacement |
hero21.textPlacement |
top | center | bottom |
— |
textAlign |
hero21.textAlign |
left | center | right |
— |
radius |
hero21.radius |
none | md | lg | xl | 2xl |
— |
stripAImages / stripBImages |
same | ScrollerImageItem[] |
Prefer photos.* |
stripADirection / stripBDirection |
same | up | down |
Opposite directions by default |
stripsMotion / stripsSpeed / stripsPauseOnHover / stripsGap |
same | Scroller controls | — |
stripsPerspective |
hero21.stripsPerspective |
number (px) |
3D perspective distance |
stripsRotateX / Y / Z |
same | number (deg) |
Tip / yaw / roll of the strip plane |
imageRadius |
hero21.imageRadius |
radius token | Strip image corners |
| Border props | — | same as Hero19 | — |