Four closing calls to action — a frosted card over a tilting product window, cards drifting around the headline with pointer parallax, counter-rotating rings of logos and metrics, and a liquid goo button.
Product window
product-window.tsxA tilting app window with a frosted glass card on top; the email form shakes on errors and morphs into a confirmation.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | — | Chip above the headline. |
headline | string | — | Section h2. |
subcopy | string | — | Supporting paragraph. |
actionLabel | string | "Start my trial" | Submit button label. |
finePrint | string | — | Small line under the form. |
onSubmit | (email: string) => Promise<void> | void | — | Resolve to show success, reject to show the error state. |
className | string | — | Classes for the section. |
Floating gallery
floating-gallery.tsxSmall UI cards drift around the headline on their own loops and shift with the pointer at different depths.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | — | Label above the headline. |
headline | string | — | Section h2. |
subcopy | string | — | Supporting paragraph. |
primaryAction | { label: string; href?: string; onClick?: () => void } | — | Volt button. |
secondaryAction | { label: string; href?: string; onClick?: () => void } | null | — | Secondary button. null hides it. |
parallax | number | 28 | Pointer parallax strength in px; 0 turns it off. |
className | string | — | Classes for the section. |
Proof orbit
proof-orbit.tsxThe CTA sits at the centre of two counter-rotating rings of customer wordmarks and proof metrics that stay upright and pause on hover.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | — | Label above the headline. |
headline | string | — | Section h2. |
subcopy | string | — | Supporting paragraph. |
primaryAction | { label: string; href?: string; onClick?: () => void } | — | Volt button. |
secondaryAction | { label: string; href?: string; onClick?: () => void } | null | — | Ghost button. null hides it. |
logos | string[] | — | Wordmarks on the outer ring. |
metrics | { value: string; caption: string }[] | — | Proof points on the inner ring. |
duration | number | 70 | Seconds per turn of the outer ring. |
className | string | — | Classes for the section. |
Liquid
liquid.tsxBold CTA panel whose button is built with an SVG goo filter: droplets and a cursor-following blob melt out of the pill on hover.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | — | Chip above the headline. |
headline | string | — | Section h2. |
subcopy | string | — | Supporting paragraph. |
primaryAction | { label: string; href?: string; onClick?: () => void } | — | The liquid button. |
secondaryAction | { label: string; href?: string; onClick?: () => void } | null | — | Underlined text link. null hides it. |
meta | string[] | — | Reassurance items under the buttons. |
tone | "volt" | "ember" | "volt" | Fill colour of the liquid. |
className | string | — | Classes for the section. |
Install the whole set
Installs every cta sections variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Also installs: Button
Accessibility
- Every action is a real link or button; the email form has a label, aria-invalid and a live message for errors and success.
- Floating cards, orbit rings and goo blobs are aria-hidden; the orbit's logos and metrics are also listed as text for screen readers.
- Parallax, tilt, orbits and liquid motion stop under reduced motion, and the orbit has a visible Pause control.