Loved By Designers & Engineers
Here is what builders from Stripe, Linear, and Framer agency studios say about Kinetic UI.
“Kinetic UI helped us deliver an Awwwards-winning site in half the time. The spring damping is so polished.”
Sarah Connor
Creative Director · Linear Systems“The custom GLSL shaders and R3F canvas integrations compile to almost nothing. Our page speed stayed at 99.”
Alex Rivera
Lead Interactive Developer · VibeData“A complete cheat code for startups. We copy-paste premium components directly and customize them in Tailwind.”
Emily Chen
Co-Founder · Framer Agency“Kinetic UI helped us deliver an Awwwards-winning site in half the time. The spring damping is so polished.”
Sarah Connor
Creative Director · Linear Systems“The custom GLSL shaders and R3F canvas integrations compile to almost nothing. Our page speed stayed at 99.”
Alex Rivera
Lead Interactive Developer · VibeData“A complete cheat code for startups. We copy-paste premium components directly and customize them in Tailwind.”
Emily Chen
Co-Founder · Framer Agency“Kinetic UI helped us deliver an Awwwards-winning site in half the time. The spring damping is so polished.”
Sarah Connor
Creative Director · Linear Systems“The custom GLSL shaders and R3F canvas integrations compile to almost nothing. Our page speed stayed at 99.”
Alex Rivera
Lead Interactive Developer · VibeData“A complete cheat code for startups. We copy-paste premium components directly and customize them in Tailwind.”
Emily Chen
Co-Founder · Framer Agency“The attention to micro-interactions is phenomenal. The magnetic CTAs feel organic, not robotic.”
David K.
Design Engineer · Stripe Studio“The scroll storytelling layout alone saved me weeks of coding. The documentation is incredibly clear.”
Jessica Vance
Creative Technologist · Independent“Perfect Lighthouse scores out of the box. Highly recommend the Pro template starters.”
Michael Torres
Senior Developer · Nebula SaaS“The attention to micro-interactions is phenomenal. The magnetic CTAs feel organic, not robotic.”
David K.
Design Engineer · Stripe Studio“The scroll storytelling layout alone saved me weeks of coding. The documentation is incredibly clear.”
Jessica Vance
Creative Technologist · Independent“Perfect Lighthouse scores out of the box. Highly recommend the Pro template starters.”
Michael Torres
Senior Developer · Nebula SaaS“The attention to micro-interactions is phenomenal. The magnetic CTAs feel organic, not robotic.”
David K.
Design Engineer · Stripe Studio“The scroll storytelling layout alone saved me weeks of coding. The documentation is incredibly clear.”
Jessica Vance
Creative Technologist · Independent“Perfect Lighthouse scores out of the box. Highly recommend the Pro template starters.”
Michael Torres
Senior Developer · Nebula SaaSInstallation
npx kinetic-ui-cli@latest add testimonialsProps
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | - | Optional hex color to tint the star ratings, borders, and text accents. Defaults to primary CSS variables if omitted. |
speed | number | 1 | Multiplier for the scrolling animation speed. Higher is faster. |
scale | number | 1 | Scaling factor for the individual review cards. |
Overview
The Testimonials block provides an infinitely scrolling wall of customer reviews. It's built with CSS animations for perfect performance and features a premium frosted glass design that automatically adapts to your site's color scheme.
Usage
import { Testimonials } from "@/components/creative/testimonials";
export default function Page() {
return (
<Testimonials
color="#4f46e5"
speed={1.5}
scale={0.95}
/>
);
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { Testimonials } from "@/components/creative/testimonials";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { Testimonials } from "@/components/creative/testimonials";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<Testimonials
/>
</div>
);
}