Tween UITween UI
7

Blocks

Strip Wipe

A testimonial slider whose photo wipes in as tiled strips beside the quote.

A ready-made testimonial block. A split slider shows a photo that wipes in as tiled strips, with the quote fading in beside it and the index ticking with Number Flow. Prev wipes right to left, next wipes left to right. Hover pauses the loop. Driven by GSAP.

New tab
Team collaborating around a laptop

“Before using this platform, our team was drowning in repetitive tasks across tools and spreadsheets. After setup, most daily updates now run automatically and our team finally has time for strategic work.”

1/4

Installation

pnpm dlx shadcn@latest add @tween-ui/strip-wipe

Usage

app/page.tsx
app/page.tsx
import StripWipe from '@/components/tweenui/testimonial/strip-wipe';
 
export default function Page() {
  return <StripWipe />;
}

Pass your own quotes to make it yours. Set directional={false} to keep the original right-to-left split on every change:

app/page.tsx
app/page.tsx
import StripWipe from '@/components/tweenui/testimonial/strip-wipe';
 
const testimonials = [
  {
    id: 'maya',
    image: '/photos/maya.jpg',
    imageAlt: 'Maya, operations lead',
    quote: 'Handoffs used to live in three chats. Now the pipeline updates itself.',
  },
  {
    id: 'jon',
    image: '/photos/jon.jpg',
    imageAlt: 'Jon, founder',
    quote: 'We shipped the first automation in an afternoon and never looked back.',
  },
];
 
export default function Page() {
  return <StripWipe testimonials={testimonials} directional={false} />;
}

Props

PropTypeDefaultDescription
testimonialsTestimonialSlide[]4-slide sampleQuotes shown in the split slider.
directionalbooleantruePrev wipes right-to-left, next left-to-right. false keeps the original split.

Each TestimonialSlide is { id, image, imageAlt, quote }. Extends native <section> attributes (className, style, …).

Accessibility

Previous and next controls are real buttons with an aria-label and a visible focus ring. Hover pauses autoplay. Under prefers-reduced-motion: reduce the loop does not run and the photo tiles snap into place with no wipe.