Arrange short attributed statements in vertically moving columns. Testimonial Columns supplies a reusable column whose list repeats and translates upward at a configurable duration; the surrounding example controls how several columns fit together. It is an animated presentation of supplied records, not a feed that discovers new customer reviews.
What you get
A React/TypeScript TestimonialsColumn component and a nine-record usage composition. Each record has text, image, name and role; the column accepts duration and className. Copy and maintain the source in your project rather than installing a versioned block package.
The demo splits nine records into three groups of three, with 15/19/17-second automatic loops. Each column duplicates its records and translates upward by42%, behind a top/bottom mask within a740 px maximum-height view. The second column appears from medium width and the third from large width; they are hidden, not merged into the first column, on smaller screens.
Editable source, theme/icon/imagery references and a source-check script. Portrait paths are present, but no image or WOFF2 font files are bundled in this ZIP. React, motion/react, host utility/theme styling and a resolved testimonial-record type are actual integration requirements.
The written visual contract defines warm paper/teal light tokens, dark roles, Outfit body type, Sora headings and a 0.875rem base radius. It specifies restrained motion and inline SVG icons with 1.5 px square-cap strokes; actual vendor marks should be monochrome and visibly named. Reconcile the copied source with those references, including fixed classes and dimensions.
Before you choose
Use a moving column for secondary, brief evidence and leave important information accessible without animation. A slow-looking stream can still give a long statement too little readable exposure, so check text rather than only the overall motion.
Good fit
You have several approved short quotes whose author and role should stay attached while a larger evidence section moves in the background of the page.
You want a reusable column rather than one fixed wall layout and can choose the surrounding column count and visibility for the page.
Your team prefers source it can inspect and maintain, with no managed review account or versioned npm service implied.
Not for
Automatically gathering statements, verifying identities or counting repeated list copies as additional independent customers.
An essential reading sequence that visitors must track while it moves, especially without a static or reduced-motion alternative.
A whole site with forms, navigation, authentication or checkout. The block only provides the testimonial presentation.
An unchanged drop-in match to every existing design system. Check palette, typography, component paths and motion dependencies in the host project.
How to use
You say/testimonial-columns Add the Testimonial Columns section to the landing page for [product name]. Use the quotes, names and portraits I provide; do not invent testimonials. Follow the existing page framework and styling.
Inspect the host framework, aliases and styling before copying the component and demo. Resolve React and motion/react. The column refers to typeof testimonials without declaring that name in its own file, and the demo exports an object containing Testimonials rather than a default component; adapt both in the actual integration. Other stacks require a genuine port, while standalone HTML is only for an explicit standalone deliverable.
Replace sample text, names, roles and portraits as complete approved records. Distribute them across the chosen columns deliberately, keeping actual customer counts separate from the copies used for the animation loop. The phone example displays only the first three records: provide a separate static/full reading path if all nine quotes must be available at every breakpoint.
The written visual contract defines warm paper/teal light tokens, dark roles, Outfit body type, Sora headings and a 0.875rem base radius. It specifies restrained motion and inline SVG icons with 1.5 px square-cap strokes; actual vendor marks should be monochrome and visibly named. Reconcile the copied source with those references, including fixed classes and dimensions. Supply actual local portraits and fonts; the referenced assets are not in the package. Keep author/role/quote/portrait pairings accurate. Follow portrait, special abstract blend/invert/contain and ordinary photo slot rules, using suitable delivery-sized WebP files.
Choose durations based on the longest quote and inspect the repeated list at its reset point. The percentage translation and duplicate height can behave differently after replacing text. Provide a readable path for visitors who do not use or follow the motion.
Run the supplied block check and separately test narrow screens, text bounds, image alternatives, motion preferences and the actual loop. Review type checking too: the inspected props refer to a testimonial type name that must resolve in the integrated source, not only look correct in a preview.
Requirements and costs
You bring
Not collected yet
Dependencies
Not collected yet
Outside costs
Not collected yet
Publisher testing
v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
FAQ
The supplied component is React and imports motion/react. The package asks the assistant to read the repository and adapt the code to its conventions; that is not unchanged cross-framework compatibility. A standalone HTML version is an alternative deliverable when explicitly requested.
No review-collection service is implemented. The source uses supplied records and local media paths, but actual portrait/font files are absent from the ZIP. Supply them locally and inspect the built host page’s requests before claiming it works offline.
Yes. Keep author, role, portrait and statement aligned. Follow the portrait and special blend-mode imagery rules, then recheck card height, reading time and loop continuity with the real text rather than assuming the sample spacing holds.
The list is rendered twice to support the vertical loop. That repeats the same record for display; it does not add another customer or another endorsement.
The inspected column animates automatically with an infinite linear transition. Manual reading controls, pause behavior and reduced-motion alternatives need to be reviewed or implemented for the actual page.
The demo hides the second column below medium width and the third below large width. With its three-group split, only the first three quotes remain on a phone. Use a deliberate mobile composition or static list when all records must be accessible.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.