Horizon glow

CTA card on a glowing horizon shader.

Usage

import { CtaHorizonGlow } from '@/components/blocks/cta-02'


<CtaHorizonGlow />


// Swap in your own copy and the violet preset
<CtaHorizonGlow
  title="Your weekly report, written before Monday"
  description="Numbers pulled, charts drawn and the summary drafted while you sleep."
  ctaLabel="Start free"
  ctaHref="/signup"
  palette="twilight"
  speed={0.6}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/cta-02

npx shadcn@latest add @pastaui-pro/cta-02

yarn dlx shadcn@latest add @pastaui-pro/cta-02

bunx --bun shadcn@latest add @pastaui-pro/cta-02

Source

Props

Horizon glow props
Prop	Type	Default	Description
title	string	= 'Wake up to a sorted inbox, filed receipts and replies ready to send'	Headline.
description	string	= 'Ovantri works through everything that lands overnight, drafts the answers in your voice and leaves you only the three decisions that need a person.'	Supporting line under the headline.
ctaLabel	string	= 'Try it for a week'	Button text.
ctaHref	string	= '#trial'	Where the button links to.
palette	'blue' \| 'twilight'	= 'blue'	Preset colour scheme for the Horizon glow shader.
colors	Partial<HorizonGlowColors>	= —	Hex colours for the shader (base, accent, highlight, core). Overrides single tones of the palette.
speed	number	= 1	Multiplier for how fast the glow breathes and drifts. 0 freezes it; reduced motion also holds it still.
intensity	number	= 0.9	Brightness of the glow.
horizon	number	= 0.9	Vertical position of the glowing horizon, from 0 (top) to 1 (bottom). Keep it low so the copy sits on the dark part.
curvature	number	= 0.45	How strongly the glow bends up toward the card edges. 0 gives a flat line.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* theme variables.