Testimonial cards laid on a plane tilted in 3D perspective, with columns scrolling up and down at different speeds behind a headline and rating card. Key phrases are underlined in the accent and the wall pauses on hover.
Wall of love
Twelve thousand engineering teams run production on Vantage. Here is what a few of them told us, unedited.
npx shadcn@latest add https://hyperblur.dev/r/proof-tilted-wall.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/proof-tilted-wall.tsx.
import { ProofTiltedWall } from "@/components/hyperblur/proof-tilted-wall"
<ProofTiltedWall title="Loved by builders" reviews={[{ quote: "Deploys went from an hour to a minute.", highlight: "an hour to a minute", name: "Ana Souza", role: "Platform, Copperline" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Wall of love" | Small label above the heading. Hidden when empty. |
| title | string | "Teams ship faster the week they switch" | Section heading. |
| subtitle | string | sample text | Supporting paragraph under the heading. |
| score | string | "4.9" | Average rating shown in the score card. Hidden when empty. |
| scoreNote | string | "Average from 2,180 verified reviews across three review sites" | Line next to the score. |
| reviews | { quote: string; name: string; role: string; highlight?: string; rating?: number }[] | 12 sample reviews | Cards dealt across the columns in order. highlight must be an exact substring of quote and gets the accent underline. |
| cta | { label: string; href: string } | null | { label: "Read all customer stories", href: "#stories" } | Link under the score card. Pass null to hide it. |
| columns | number | 4 | Number of columns on the tilted plane, from 2 to 5. Narrow containers show fewer. |
| speed | number | 46 | Seconds for one scroll loop of the first column. Other columns run a little faster or slower. |
| accent | string | "#8b5cf6" | Color of stars, highlights and the glow. |