Social-Proof Toast

A small, credible social-proof toast that rotates short lines on an interval — marketing psychology done with restraint, the opposite of spammy fake “someone just bought!!” urgency.

src/components/growth/SocialProofToast.tsx · live demo: /components/social-proof-toast

Usage

---
import SocialProofToast from '../components/growth/SocialProofToast.tsx';
---
<SocialProofToast
  client:idle
  messages={[
    'Built one-on-one by Aiden Wood — 15 years full-stack.',
    'Trusted by trades, clinics, realty and hospitality.',
  ]}
/>

Props

Prop	Type	Default	Description
`enabled`	`boolean`	`true`	Master switch.
`messages`	`string[]`	—	Lines to rotate through.
`startDelayMs`	`number`	`6000`	Delay before the first toast.
`intervalMs`	`number`	`8000`	Window each message shows for.
`maxShows`	`number`	`4`	Stop after this many rotations.
`excludePaths`	`string[]`	checkout/contact/…	Path prefixes to suppress on.
`forceVisible`	`boolean`	`false`	Showcase/demo only — skip delay + gating.

Behaviour

Slides in bottom-left after startDelayMs, rotates through messages, stops after maxShows. Pauses while hovered/focused or the tab is hidden so a message never vanishes mid-read. Dismissible (session-remembered, velocity.socialproof.dismissed). Skips excludePaths.

Events

Fires social_proof_shown with { message, index, show_number } on each reveal.

Accessibility & copy rule

role="status" + aria-live="polite" (no focus trap), visible dismiss, dark-mode + safe-area aware. Copy rule: keep lines short, true, and on the premium voice — never invent fake purchases or real-time names.