1 slot open this monthBy the makers of shadcnregistryWe built shadcnregistry. Now we build your product.Book a callCheck availability
1 slot open this monthAI features?We build AI features into your product.Book a callCheck availability
1 slot open this month๐Ÿšจ Slop police๐Ÿšจ Slop police: we clean up vibe-coded apps.Report itReport your app
shadcnregistry
shadcnregistry
RegistryHealthInspect
Terms of ServicePrivacy Policy
  1. Registries
  2. motiq
  3. Sticky Zoom Hero

Sticky Zoom Hero

component

The opening move of a product page: a framed hero card held at arm's length scales to full bleed as you scroll, the corner radius closes to 0, the vignette lifts, and captions crossfade through the beats. One rAF loop, getBoundingClientRect progress smoothed through an exponential lerp, transform + opacity only; page or container scroll mode, SSR-settled markup, reduced-motion static layout.

pnpm dlx shadcn@latest add "https://motiq.dev/r/sticky-zoom-hero.json"
Premium blocks for shadcn/uiShadcnblocks.com ยท AffiliateExplore
  • utils
  • primitives
components/motiq/sticky-zoom-hero.tsx