Floating Quotes

Draggable glassmorphic quote cards with physics-based momentum. Users can grab and fling them around the page. Optional Pac-Man mode wraps cards to the opposite edge when dragged off-screen.

When to Use

• Testimonials or social proof on landing pages
• Pull quotes alongside long-form content
• Client quotes in proposals or case studies
• Any context where you want interactive, playful quote display

Dependencies

• framer-motion (v10+)
• lucide-react (for chevron icons)
• Tailwind CSS

Reference Component

See references/floating-quotes.tsx for the full implementation.

Props

Usage

<FloatingQuotes
  quotes={[
    { text: "This changed everything for us.", context: "Sarah, CEO at Acme" },
    { text: "10x improvement in conversion.", context: "Internal analytics" },
  ]}
  side="right"
  wrapAround={true}
  accentColor="#5CE5D5"
/>

Physics Behavior

Standard Mode (wrapAround={false})

Uses Framer Motion's built-in dragMomentum with dragElastic={0.1}. Card springs back with a rubber-band feel. Good for contained layouts.

Pac-Man Mode (wrapAround={true})

Custom physics engine:

• Tracks velocity during drag via useMotionValue change events
• On release, applies momentum with friction={0.95} decay per frame
• Monitors card bounding rect against viewport edges
• When card exits one edge (with 20px buffer), teleports to opposite edge via jump()
• Momentum continues seamlessly after wrap

This creates the satisfying effect of flinging a card off the right side and watching it slide in from the left, still carrying its momentum.

Visual Design

The glassmorphic card style works best on dark backgrounds:

• background: rgba(14, 14, 14, 0.65) with backdrop-filter: blur(24px) saturate(1.5)
• Subtle border-white/[0.08] border for depth
• shadow-2xl for floating effect
• Scale to 1.05 while dragging for tactile feedback

Adapting to Light Themes

Swap the background to rgba(255, 255, 255, 0.65), change text colors to dark variants, and adjust border to border-black/[0.08].

Multi-card Layout

For multiple floating quote cards on one page, stagger their positions:

<FloatingQuotes quotes={ceoQuotes} side="right" />
<FloatingQuotes quotes={dataQuotes} side="left" />

The side prop offsets vertical position (right = top third, left = bottom third) to prevent overlap.

Anti-patterns

• Don't use on mobile (cards are hidden lg:block by default). Touch drag conflicts with scroll.
• Don't put more than 2 floating cards per viewport. They become distracting.
• Don't use on light backgrounds without adapting the glassmorphism colors.
• Don't disable select-none on the card. Text selection during drag feels broken.