# Crônica A testimonial in large type that appears word by word, with a giant number in the background that follows the mouse. > Crônica is a THM Componentes component for showing real testimonials in an editorial style: the quote appears in large type word by word, a giant faded number in the background follows the mouse and a strip of company names runs along the bottom. It advances every 6 seconds. It suits high-end company websites. - Category: Commerce and conversion - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/cronica/ ## What it looks like It looks like a page from a design magazine. The section fills the screen height: on the left, a vertical label and a thin line that fills as the testimonials advance. In the background, the testimonial number, such as 01, appears huge and almost transparent and drifts slightly toward the mouse with a springy feel. In the center sit a badge with the company name, the quote in large, light letters, each word flipping up as it enters, and the author with their role next to a short line. Two round buttons switch testimonials, and company names scroll slowly along the bottom. ## You may be looking for this if you asked for something like - “a testimonial in huge type like a magazine” - “an elegant testimonials section for a high-end company site” - “a client quote that appears word by word in big letters” - “a big number in the background that moves with the mouse” - “testimonials that rotate on their own with a progress line” - “a strip of company names scrolling under the testimonials” - “make my site's social proof look like a design studio did it” ## Also known as editorial testimonials, magazine-style testimonials, testimonial section, big type quote, magnetic parallax, kinetic typography ## When to use - High-end company websites, such as architecture, design and consulting - Agency or studio pages where typography is part of the brand - Social proof sections with a few short, strong testimonials ## When to avoid - Sites without real, approved testimonials, since sample texts must never pass as customer quotes - Long testimonials, which become huge at this type size - Phone screens without adjustments, since the layout uses fixed side spacing and fills the screen height ## How to ask your AI ```text Build an editorial testimonials section with my customers' real testimonials: the quote in large type appearing word by word, a background number with mouse parallax, a progress line, labeled arrow buttons, a layout adjusted for phones and a static version for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Crônica ### What content should go into Crônica? Add only real, approved testimonials: in Crônica, each item takes the quote, the author's name, the role and the company, which shows in the badge and in the bottom strip. Since the quote is set in very large type, keep it short. The demo texts are neutral placeholders and should never go live as testimonials. ### Does Crônica follow my site colors? Yes. Crônica uses the project theme variables for background, text, borders and accent, so it follows the light and dark modes defined there. The THM Componentes prompt asks your AI to install the animation base if it is missing, add those variables to the CSS and use the project color and typography tokens. ### Does Crônica work on phones and respect reduced motion? Crônica fills the screen height and uses fixed side spacing, so ask your AI to adjust it for narrow screens. The number effect follows only the mouse; on touch screens the arrows and autoplay remain. The original component always animates, and the THM Componentes prompt asks for a static version for reduced motion. ## Related components - [Causo](https://vibecode.thmtecnologia.com/en/components/causo/): Customer photos stacked at slight angles, with the testimonial quote appearing word by word beside them. - [Pêndulo](https://vibecode.thmtecnologia.com/en/components/pendulo/): One testimonial at a time, with a round photo swinging in an arc on each change and the quote sliding into place. - [Veredito](https://vibecode.thmtecnologia.com/en/components/veredito/): A customer reviews block with a star average, bars per rating, filters, sorting and a review form. - [Comboio](https://vibecode.thmtecnologia.com/en/components/comboio/): A row of logos, testimonials or tags that slides in a seamless loop, horizontally or vertically. - [Ditado](https://vibecode.thmtecnologia.com/en/components/ditado/): Words come out of a blur and appear one after another, as if the text were being generated live. - [Diorama](https://vibecode.thmtecnologia.com/en/components/diorama/): Scattered photos and shapes that shift at different speeds as the mouse moves, creating depth. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).