Authentication is temporarily unavailable while we optimize our infrastructure.

Inline Testimonials

A flowing quote stream where each avatar reveals its author on hover, with Motion fading and blurring the rest. React component.

Made by Axyl

inline-testimonials.tsx

Loading code…

Hover any avatar to reveal the author while the rest of the quote stream blurs out.

Usage

import {
  InlineTestimonials,
  type Testimonial,
} from '@/components/sora-ui/disclosure/inline-testimonials';

const testimonials: Testimonial[] = [
  {
    id: '1',
    text: 'Undoubtedly one of the best resources in the world.',
    author: {
      name: 'Benji Taylor',
      role: 'Head of Design @Base',
      avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&fit=crop&crop=faces',
    },
  },
];

export default function Page() {
  return <InlineTestimonials testimonials={testimonials} />;
}

Props

Prop	Type	Default
`testimonials?`	`Testimonial[]`	-
`avatarSize?`	`number`	`32`
`blurAmount?`	`number`	`5`
`blurOpacity?`	`number`	`0.25`
`fontSize?`	`number`	`30`
`alternate?`	`InlineTestimonialsAlternateConfig`	`{ pattern: true, opacity: 0.7 }`
`interaction?`	`"hover" \| "focus" \| "both"`	`"hover"`
`hoveredId?`	`string \| null`	-
`defaultHoveredId?`	`string \| null`	-
`onHoveredIdChange?`	`(id: string \| null) => void`	-
`renderAvatar?`	`(testimonial: Testimonial, size: number) => ReactNode`	-
`label?`	`InlineTestimonialsLabelConfig`	-
`className?`	`string`	-
`classNames?`	`InlineTestimonialsClassNames`	-

`InlineTestimonialsLabelConfig`

Prop	Type	Default
`accentColor?`	`string`	`"#f97316"`
`nameFontSize?`	`number`	`12`
`roleFontSize?`	`number`	`9`
`roleColor?`	`string`	`"var(--muted-foreground, #6b7280)"`
`roleLetterSpacing?`	`string`	`"0.1em"`
`roleUppercase?`	`boolean`	`true`
`offsetX?`	`number`	`avatarSize / 2`
`offsetY?`	`string`	`"150%"`
`slideX?`	`number`	`-6`
`transitionDuration?`	`number`	`0.16`
`ease?`	`Easing`	`"easeOut"`

By default only mouse hover reveals the author label (interaction="hover"), matching a decorative quote stream. Set interaction="focus" or interaction="both" to also attach tabIndex and onFocus/onBlur to each item, making the label reachable by keyboard (Tab) and screen-reader focus.

When prefers-reduced-motion: reduce is set, useReducedMotion() disables the label's slide-in animation and the blur filter on dimmed items — only a plain opacity fade remains. No extra configuration needed.

The quote text is always in the DOM. The visible author label only mounts on hover/focus (via AnimatePresence), so each item also renders a sr-only "— Name, Role" string right after its quote — screen readers get the attribution unconditionally, without needing to trigger the hover/focus reveal.

Built by Axyl. A motion-first component registry for React.

Last updated: 9/14/2026

Inline Testimonials

A flowing quote stream where each avatar reveals its author on hover, with Motion fading and blurring the rest. React component.

Made by Axyl

inline-testimonials.tsx

Loading code…

Hover any avatar to reveal the author while the rest of the quote stream blurs out.

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/disclosure/inline-testimonials.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

inline-testimonials.tsx

Usage

import {
  InlineTestimonials,
  type Testimonial,
} from '@/components/sora-ui/disclosure/inline-testimonials';

const testimonials: Testimonial[] = [
  {
    id: '1',
    text: 'Undoubtedly one of the best resources in the world.',
    author: {
      name: 'Benji Taylor',
      role: 'Head of Design @Base',
      avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&fit=crop&crop=faces',
    },
  },
];

export default function Page() {
  return <InlineTestimonials testimonials={testimonials} />;
}

Props

Prop	Type	Default
`testimonials?`	`Testimonial[]`	-
`avatarSize?`	`number`	`32`
`blurAmount?`	`number`	`5`
`blurOpacity?`	`number`	`0.25`
`fontSize?`	`number`	`30`
`alternate?`	`InlineTestimonialsAlternateConfig`	`{ pattern: true, opacity: 0.7 }`
`interaction?`	`"hover" \| "focus" \| "both"`	`"hover"`
`hoveredId?`	`string \| null`	-
`defaultHoveredId?`	`string \| null`	-
`onHoveredIdChange?`	`(id: string \| null) => void`	-
`renderAvatar?`	`(testimonial: Testimonial, size: number) => ReactNode`	-
`label?`	`InlineTestimonialsLabelConfig`	-
`className?`	`string`	-
`classNames?`	`InlineTestimonialsClassNames`	-

`InlineTestimonialsLabelConfig`

Prop	Type	Default
`accentColor?`	`string`	`"#f97316"`
`nameFontSize?`	`number`	`12`
`roleFontSize?`	`number`	`9`
`roleColor?`	`string`	`"var(--muted-foreground, #6b7280)"`
`roleLetterSpacing?`	`string`	`"0.1em"`
`roleUppercase?`	`boolean`	`true`
`offsetX?`	`number`	`avatarSize / 2`
`offsetY?`	`string`	`"150%"`
`slideX?`	`number`	`-6`
`transitionDuration?`	`number`	`0.16`
`ease?`	`Easing`	`"easeOut"`

Accessibility

Built by Axyl. A motion-first component registry for React.

Last updated: 9/14/2026

Inline Testimonials

A flowing quote stream where each avatar reveals its author on hover, with Motion fading and blurring the rest. React component.

Made by Axyl

Finally a registry that treats animation as a first-class citizen.

Shipped our marketing site in a weekend — the motion primitives just work.

Copy-paste, tweak tokens, ship. No black-box npm package in the way.

Looks editorial, feels interactive — exactly what our landing needed.

inline-testimonials.tsx

Loading code…

Hover any avatar to reveal the author while the rest of the quote stream blurs out.

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/disclosure/inline-testimonials.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

inline-testimonials.tsx

Usage

import {
  InlineTestimonials,
  type Testimonial,
} from '@/components/sora-ui/disclosure/inline-testimonials';

const testimonials: Testimonial[] = [
  {
    id: '1',
    text: 'Undoubtedly one of the best resources in the world.',
    author: {
      name: 'Benji Taylor',
      role: 'Head of Design @Base',
      avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&fit=crop&crop=faces',
    },
  },
];

export default function Page() {
  return <InlineTestimonials testimonials={testimonials} />;
}

Props

Prop	Type	Default
`testimonials?`	`Testimonial[]`	-
`avatarSize?`	`number`	`32`
`blurAmount?`	`number`	`5`
`blurOpacity?`	`number`	`0.25`
`fontSize?`	`number`	`30`
`alternate?`	`InlineTestimonialsAlternateConfig`	`{ pattern: true, opacity: 0.7 }`
`interaction?`	`"hover" \| "focus" \| "both"`	`"hover"`
`hoveredId?`	`string \| null`	-
`defaultHoveredId?`	`string \| null`	-
`onHoveredIdChange?`	`(id: string \| null) => void`	-
`renderAvatar?`	`(testimonial: Testimonial, size: number) => ReactNode`	-
`label?`	`InlineTestimonialsLabelConfig`	-
`className?`	`string`	-
`classNames?`	`InlineTestimonialsClassNames`	-

`InlineTestimonialsLabelConfig`

Prop	Type	Default
`accentColor?`	`string`	`"#f97316"`
`nameFontSize?`	`number`	`12`
`roleFontSize?`	`number`	`9`
`roleColor?`	`string`	`"var(--muted-foreground, #6b7280)"`
`roleLetterSpacing?`	`string`	`"0.1em"`
`roleUppercase?`	`boolean`	`true`
`offsetX?`	`number`	`avatarSize / 2`
`offsetY?`	`string`	`"150%"`
`slideX?`	`number`	`-6`
`transitionDuration?`	`number`	`0.16`
`ease?`	`Easing`	`"easeOut"`

Accessibility

Built by Axyl. A motion-first component registry for React.

Last updated: 9/14/2026

Inline Testimonials

A flowing quote stream where each avatar reveals its author on hover, with Motion fading and blurring the rest. React component.

Made by Axyl

Finally a registry that treats animation as a first-class citizen.

Shipped our marketing site in a weekend — the motion primitives just work.

Copy-paste, tweak tokens, ship. No black-box npm package in the way.

Looks editorial, feels interactive — exactly what our landing needed.

inline-testimonials.tsx

Loading code…

Hover any avatar to reveal the author while the rest of the quote stream blurs out.

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/disclosure/inline-testimonials.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

inline-testimonials.tsx

Usage

import {
  InlineTestimonials,
  type Testimonial,
} from '@/components/sora-ui/disclosure/inline-testimonials';

const testimonials: Testimonial[] = [
  {
    id: '1',
    text: 'Undoubtedly one of the best resources in the world.',
    author: {
      name: 'Benji Taylor',
      role: 'Head of Design @Base',
      avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&fit=crop&crop=faces',
    },
  },
];

export default function Page() {
  return <InlineTestimonials testimonials={testimonials} />;
}

Props

Prop	Type	Default
`testimonials?`	`Testimonial[]`	-
`avatarSize?`	`number`	`32`
`blurAmount?`	`number`	`5`
`blurOpacity?`	`number`	`0.25`
`fontSize?`	`number`	`30`
`alternate?`	`InlineTestimonialsAlternateConfig`	`{ pattern: true, opacity: 0.7 }`
`interaction?`	`"hover" \| "focus" \| "both"`	`"hover"`
`hoveredId?`	`string \| null`	-
`defaultHoveredId?`	`string \| null`	-
`onHoveredIdChange?`	`(id: string \| null) => void`	-
`renderAvatar?`	`(testimonial: Testimonial, size: number) => ReactNode`	-
`label?`	`InlineTestimonialsLabelConfig`	-
`className?`	`string`	-
`classNames?`	`InlineTestimonialsClassNames`	-

`InlineTestimonialsLabelConfig`

Prop	Type	Default
`accentColor?`	`string`	`"#f97316"`
`nameFontSize?`	`number`	`12`
`roleFontSize?`	`number`	`9`
`roleColor?`	`string`	`"var(--muted-foreground, #6b7280)"`
`roleLetterSpacing?`	`string`	`"0.1em"`
`roleUppercase?`	`boolean`	`true`
`offsetX?`	`number`	`avatarSize / 2`
`offsetY?`	`string`	`"150%"`
`slideX?`	`number`	`-6`
`transitionDuration?`	`number`	`0.16`
`ease?`	`Easing`	`"easeOut"`

Accessibility

Built by Axyl. A motion-first component registry for React.

Last updated: 9/14/2026

Inline Testimonials

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

On this page

Inline Testimonials

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

On this page

Inline Testimonials

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

On this page

Inline Testimonials

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

On this page