⚠️ Mobile is not supported yet.

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.

Provided by motiq

Open in

Installation

Install directly from the provider.

pnpm dlx shadcn@latest add "https://motiq.dev/r/sticky-zoom-hero.json"

Files

Styles

Light Mode

--color-accent:

#315fea

--color-accent-fg:

#ffffff

--color-accent-hover:

#244fd1

--color-accent-text:

#244fd1

--color-bg:

#f7f9fc

--color-bg-elevated:

#f0f4f9

--color-bg-secondary:

#f0f4f9

--color-border:

#dce4ef

--color-border-strong:

#c5d1e1

--color-code-bg:

--color-code-fg:

#2a3444

--color-error:

#d92d4a

--color-error-foreground:

#ffffff

--color-fg-secondary:

#344054

--color-focus:

#315fea

--color-info:

#087dbd

--color-info-foreground:

#ffffff

--color-muted:

#667085

--color-neutral:

#475467

--color-neutral-foreground:

#ffffff

--color-secondary-accent:

#009fb3

--color-signature:

#e9564a

--color-success:

#128a55

--color-success-foreground:

#ffffff

--color-surface:

#ffffff

--color-surface-2:

#f8fafd

--color-warning:

#b86e00

--color-warning-foreground:

#ffffff

Dark Mode

--color-accent:

#4f7cff

--color-accent-fg:

#080c14

--color-accent-hover:

#6f91ff

--color-accent-text:

#7f9fff

--color-bg:

#080c14

--color-bg-elevated:

#0d1420

--color-bg-secondary:

#0d1420

--color-border:

#263449

--color-border-strong:

#354863

--color-code-bg:

#0d1420

--color-code-fg:

#cbd5e1

--color-error:

#ff5c70

--color-error-foreground:

#2a0308

--color-fg:

#f8fafc

--color-fg-secondary:

#cbd5e1

--color-focus:

#4f7cff

--color-info:

#38bdf8

--color-info-foreground:

#04121f

--color-muted:

#9caabd

--color-neutral:

#b2bccd

--color-neutral-foreground:

#111827

--color-secondary-accent:

#22c7d9

--color-signature:

#ff6b5e

--color-success:

#32d583

--color-success-foreground:

#04150c

--color-surface:

#111827

--color-surface-2:

#192337

--color-warning:

#f6b94a

--color-warning-foreground:

#2a1a00

Theme

No variables found.

Sticky Zoom Hero

Installation

Files

components

Styles