This repository contains a high-fidelity, responsive client testimonials component designed for modern architectural and design portfolios. The module features dual-directional infinite vertical scrolling, CSS isolation for seamless integration, and a sophisticated aesthetic rooted in minimalist design principles.
The module is engineered using a CSS-only animation logic, eliminating the need for heavy JavaScript observers while maintaining smooth performance. It utilizes a "cloning" technique within the DOM to create a seamless loop.
- CSS Isolation: All styles are encapsulated using the
tz-prefix to prevent namespace collisions when integrated into existing projects. - Dynamic Layout: Built with CSS Grid and Flexbox, the component transitions from a 1.2:0.8 split-screen layout to a stacked vertical layout for mobile devices.
- Variable-Driven Design: Centralized theme management via
:rootCSS variables for rapid brand customization (colors, spacing, and typography).
The component employs two distinct animation paths:
tz-scroll-up: Translates the first column from0to-50%of its total height.tz-scroll-down: Translates the second column from-50%to0.- Pause on Interaction: The
animation-play-state: pausedproperty is triggered on hover to allow users to read specific testimonials without interruption.
This module is specifically optimized for:
- Architecture & Interior Design Portfolios: Highlighting high-end residential or commercial projects.
- SaaS Landing Pages: Showcasing social proof in a compact, high-energy format.
- Creative Agencies: Demonstrating attention to detail and interactive UI capabilities.
While built with vanilla HTML/CSS, this module is structured for easy porting into:
- React/Next.js: The internal structure can be mapped to a functional component where testimonial data is passed via a JSON object.
- Webflow: The CSS logic can be replicated using Webflow’s native Interaction API or custom code embeds.
- WordPress: Ideal for use as a custom Gutenberg block or within Elementor via HTML/CSS widgets.
To customize the component, modify the following variables in styles.css:
| Variable | Description |
|---|---|
--tz-color-accent |
Primary brand color used for the CTA and highlights. |
--tz-gap |
Controls the consistent gutter between all cards. |
--tz-border-radius-xl |
The curvature of the main component container. |
--tz-font-family |
Defaults to Inter Tight; can be replaced with any sans-serif stack. |
This project is licensed under the MIT License. You are free to use, modify, and distribute this component in both personal and commercial projects.