Above-the-fold openers: split layouts, centered editorials, stat strips, wordmark trust rows.
10 blocks, live at full size, install from here
01 / 10|Beam shader · glass nav · stat footer
Full-bleed hero card over an animated light-beam shader, with a glass pill nav, a trust badge, a serif headline, dual CTA and a three-stat footer.
npx shadcn@latest add https://hirael.com/r/hero-01.json02 / 10|Stripe shader · live pill · wordmark strip
Centered hero over animated grayscale gradient bars, with a live pill, a serif headline with an underlined accent, dual CTA and a wordmark strip.
npx shadcn@latest add https://hirael.com/r/hero-02.json03 / 10|Editorial · grid backdrop · logo cloud
Editorial centered hero on a faded grid, with a serif headline, sub-copy, dual CTA and a logo cloud of customer wordmarks.
npx shadcn@latest add https://hirael.com/r/hero-03.json04 / 10|Image banner · scrim · bottom-aligned
Full-bleed image-banner hero with a dark scrim, a slim nav, a serif headline and dual CTA aligned to the bottom.
npx shadcn@latest add https://hirael.com/r/hero-04.json05 / 10|Aurora shader · glass panel · social proof
Full-bleed hero card over an animated aurora shader, with a glass pill nav, a glass content panel, a serif headline, dual CTA and an avatar social-proof row.
npx shadcn@latest add https://hirael.com/r/hero-05.json06 / 10|Centered · stat row · geometric accents
Centered personal hero: a live "available for work" badge, a serif headline with a primary-tinted emphasis span, a sub-line, a three-stat row with hairline dividers, dual rounded CTAs, and a tooltip-backed core-stack icon row framed by gradient rules. Rotated geometric border accents fade in behind it (and stay still under reduced motion).
npx shadcn@latest add https://hirael.com/r/hero-06.json07 / 10|Beam line-art · word-by-word reveal · dual CTA
Centered hero with a word-by-word blur-in serif headline, a glass beta badge with a live dot, dual rounded CTAs, and animated beam line-art SVGs that trace the top, bottom, and both sides of the section. Respects reduced-motion.
npx shadcn@latest add https://hirael.com/r/hero-07.json08 / 10|Centered · framed panel · window preview
Centered hero on a framed, token-lit panel: a pill badge eyebrow, a serif headline with an italic emphasis span, sub-copy, dual CTA buttons, and a faux app-window preview below. Headline, sub-copy, and CTAs fade and rise in with staggered motion that respects reduced-motion.
npx shadcn@latest add https://hirael.com/r/hero-08.json09 / 10|Zoom-out card · fluid gradient · carved stats
Full-viewport product hero on a rounded card that zooms out as the page scrolls: an inline nav with brand and actions, a serif headline, sub-copy, dual CTAs, a step-type strip, a drifting WebGL gradient mixed from the theme tokens, a bouncing scroll cue and a carved stat corner. Reduced-motion aware.
npx shadcn@latest add https://hirael.com/r/hero-09.json10 / 10|Blurred image card · centered stack · rise-in
Bordered hero card over a blurred full-bleed image: a rocket badge, a large centered headline, sub-copy and dual CTAs that rise into place on load. Reduced-motion aware.
npx shadcn@latest add https://hirael.com/r/hero-10.json