Factory for Good

Focus Bubbles

Animated SVG bubble cluster for the onboarding review step — three selected cause areas float and breathe using a spring-physics RAF loop.

Installation

pnpm dlx shadcn@latest add @ffg/focus-bubbles

Usage

"use client"
import { FocusBubbles } from "@/components/ui/focus-bubbles"

<FocusBubbles top3={["environment", "education", "community"]} />

top3 accepts up to three cause IDs: "nutrition", "education", "livelihoods", "protection", "environment", "community", "humanitarian", "culture", "animal", "health". Icons and accent colors are pulled from @ffg/impact-badge's CATEGORY_ICONS. Circle strokes use --foreground for dark-mode awareness. The physics loop runs on requestAnimationFrame and is cleaned up on unmount.

Filter Chip

FFG-native filter control — a controlled native select styled as a compact chip with a trailing caret.

Footer

FFG-native app footer with the inlined monogram wordmark and a version label.

On this page

InstallationUsage