Blocks
Testimonials
Two rows of quote cards drift past each other in opposite directions on a seamless loop, pausing under the cursor with soft fades at either edge.
Loved in the quiet hours
Notes from the teams shipping with Lumora — unedited, occasionally past midnight.
“Our landing page went from a weekend chore to an afternoon of arranging blocks. The motion defaults are the real product.”
“First library where I haven't had to argue with a spring. Everything settles exactly once, like it read our brand brief.”
“The token system survived our rebrand untouched. We changed six variables and the whole site followed.”
“Reduced-motion support out of the box closed an accessibility ticket we'd been carrying for two quarters.”
“I shipped a pricing page at 1am and it looked deliberate. That has never once happened to me before.”
“The glow is doing a lot of quiet work. Clients keep asking what agency did our site. It was one import.”
“We benchmarked the interactions at under a frame on a five-year-old laptop. Beautiful and boringly fast.”
“Onboarded two new engineers with zero docs reading. The props are shaped like the content. That's the whole trick.”
Install
Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.
npx lumora-ui@latest add testimonialsImport
Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.
import { Testimonials } from "@lumora/ui/blocks/testimonials";
// or from the barrel:
import { Testimonials } from "@lumora/ui";Props worth knowing
items ({ quote, name, role }) split evenly across two counter-drifting rows; speed sets the loop pace. Hover pauses the row under the cursor; reduced motion renders a static wrapped grid. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.