SparkCta

DealDash's signature CTA effect — a comet of light orbiting the button edge. Pure CSS, GPU-cheap, one per view, reduced-motion safe.

stable motion #cta#spark#dealdash#emerald#ambient#hero

Loading preview…

Usage

- Reserved for the single most important CTA: hero "Start Free", the featured pricing plan, the final CTA section. - Works on any element with a border-radius — Button, asChild anchors — just add the `btn-spark` class when the CSS is global. - The spark is brand garnish, not a component default: if two things spark, nothing is special.

Do / Don't

- **Do** keep the one-per-view rule absolute — audit the whole route, including modals. - **Do** ship the reduced-motion fallback with the effect — they are one unit, never separate. - **Don't** animate anything except the registered --spark-angle; no rotate/transform variants. - **Don't** put the spark on secondary, outline, ghost, or destructive buttons — primary fill only.

Tokens

EmeraldButton

A11y

Prefers-reduced-motion renders a static soft ring (28% mint) and removes the bloom layer entirely — nothing still moves. The effect is decorative overlay only (pointer-events none, no content) so screen readers see a plain button. Underlying button keeps the standard 3px focus-visible ring. Ambient animation limited to ONE instance per view by rule.

Source

src/components/SparkCta.tsx

Live playground