Social Proof

SlippyWords

Buzzwords that physically move when you scroll. Motion design, allegedly.

Two or more rows of word badges that slide horizontally in alternating directions, driven by scroll position. Give each row more badges than fit so the edges never run dry. Pair it with an edge fade for the obligatory kinetic-typography strip. Honors prefers-reduced-motion (badges wrap and sit still).

Install

Copy this owned-code component into your app from the registry.

pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/slippy-words.json

Examples

Scroll the page to see them slide

agenticmultimodalRAG-nativezero-shotfine-tunedfrontier-gradecontext-aware

SOC 2HIPAAon-premGDPR-readysub-100msinfinitely scalableenterprise

10x fasterhuman-in-the-loopself-healingobservablevector-firstreal-time

<SlippyWords
  rows={[
    ["agentic", "multimodal", "RAG-native", "zero-shot", "fine-tuned"],
    ["SOC 2", "HIPAA", "on-prem", "GDPR-ready", "enterprise"],
    ["10x faster", "human-in-the-loop", "self-healing", "real-time"],
  ]}
/>

Gradient fill + stronger travel

shipscalesynergizedisruptiteratepivot10x

velocityalignmentnorth starmoatflywheeltailwinds

<SlippyWords
  gradient
  intensity={360}
  startDirection="right"
  rows={[
    ["ship", "scale", "synergize", "disrupt", "iterate", "pivot"],
    ["velocity", "alignment", "north star", "moat", "flywheel"],
  ]}
/>

Per-badge gradient highlight

GPT-classnow with reasoningopen weightsMoE128k context

BYO modeledge inference$0 to startusage-basedno lock-in

<SlippyWords
  rows={[
    ["GPT-class", { label: "now with reasoning", gradient: true }, "open weights"],
    ["BYO model", "edge inference", { label: "$0 to start", gradient: true }],
  ]}
/>

Props

Prop	Type	Default	Description
rows*	SlippyWord[][]	-	Rows of badges. A SlippyWord is a string or { label, key?, gradient? }.
intensity	number	240	Max horizontal travel in px across the full scroll range.
startDirection	"left" \| "right"	"left"	Direction the first row drifts on scroll down; rows alternate.
gap	number	12	Gap between badges (and between rows) in px.
fade	boolean	true	Apply an edge-fade mask so badges dissolve at the sides.
gradient	boolean	false	Render every badge with the gradient fill.
static	boolean	false	Disable scroll coupling. Also forced under prefers-reduced-motion.

Next StatCounter ] →