Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/groovy/llms.txt

Use this file to discover all available pages before exploring further.

GroovyBubble renders a single testimonial or quote as a speech bubble paired with a circular avatar. The bubble floats perpetually in a gentle sinusoidal motion, evoking a thought drifting through the air in a 1970s daydream sequence. Each instance can be positioned independently on the page using yOffset and given a staggered entrance via delay, making it easy to arrange a cluster of testimonials that feel alive without being distracting.

​
Props

​
quote
string
required
The testimonial text or quote to display inside the speech bubble.
​
author
string
required
The full name of the person being quoted. The first letter of this value is rendered large inside the avatar circle as a visual initial.
​
role
string
required
The author’s job title or relationship to the portfolio owner (e.g. "Senior Designer at Funkadelic Studio"). Displayed in small text below the author name.
​
color
string (hex)
required
The background colour of the avatar circle and the bubble’s accent border (e.g. "#f59e0b"). Should be vivid enough to distinguish each bubble in a multi-bubble layout.
​
direction
'left' | 'right'
required
Controls which side the bubble enters from on mount. 'left' slides the bubble in from the left; 'right' slides it in from the right. Also determines whether the CSS bubble tail points left or right toward the avatar.
​
yOffset
number
required
The base vertical position (in pixels) for the floating animation. The bubble oscillates between yOffset and yOffset - 15 continuously. Use this to stagger multiple bubbles vertically.
​
delay
number
required
Entrance animation delay in seconds. Stagger this value across multiple GroovyBubble instances (e.g. 0, 0.2, 0.4) so they don’t all appear simultaneously.

​
Animation Model

GroovyBubble runs two Framer Motion animations simultaneously:

​
Entrance (fires once on mount)

// direction maps to variable `r`; delay maps to variable `t`
initial:    { opacity: 0, x: r === 'left' ? -someOffset : someOffset }
animate:    { opacity: 1, x: 0 }
transition: { type: 'spring', delay: t }
The direction prop (r) determines which side the bubble slides in from; delay (t) staggers the entrance across multiple instances.

​
Continuous Float (runs forever after mount)

// yOffset maps to variable `a`
animate: { y: [a, a - 15, a] }
transition: { duration: 4, repeat: Infinity }
The float keyframe array creates a smooth up-pause-down cycle every 4 seconds.
The bubble’s CSS tail is a pure CSS ::before pseudo-element triangle. Its left or right positioning is toggled by a Tailwind class derived from the direction prop. If you apply custom border-radius to the bubble, verify the tail still visually connects to the avatar circle — a mismatch can appear at very large border-radius values.

​
Usage

import GroovyBubble from './components/GroovyBubble';

function TestimonialsSection() {
  return (
    <section className="relative py-32 overflow-hidden">
      <GroovyBubble
        quote="Working with this team was a total trip — the best kind."
        author="Deborah Farnsworth"
        role="Art Director, Solar Winds Agency"
        color="#f59e0b"
        direction="left"
        yOffset={0}
        delay={0}
      />
      <GroovyBubble
        quote="The animations are so smooth, I thought I was dreaming, man."
        author="Raymond Okafor"
        role="Lead Developer, Moonbeam Labs"
        color="#7c3aed"
        direction="right"
        yOffset={80}
        delay={0.2}
      />
      <GroovyBubble
        quote="Pure grooviness, from the first pixel to the last."
        author="Ines Cavalcanti"
        role="UX Researcher, Free Petal Studio"
        color="#10b981"
        direction="left"
        yOffset={160}
        delay={0.4}
      />
    </section>
  );
}
For a harmonious multi-bubble layout, increment yOffset by 70–100 px between each bubble and stagger delay by 0.15–0.25 s. Varying direction so that left and right bubbles alternate gives the testimonials section the feel of a dialogue, reinforcing the conversational tone of the quotes.

Build docs developers (and LLMs) love

Get started for freeTalk to us