Logo reveal
The logo grid with an entrance: the hairline grid is there from the start and the logos rise into their cells in a short stagger, once, when the section first scrolls into view.
Dependencies
Interaction Type
A labelled section landmark with the logos in a list. Every logo keeps its brand name as alt text and is shown unaltered; only black marks flip to white in dark mode. Linked logos open the brand site in a new tab, each a full cell target with the accent focus ring. The first time the grid scrolls into view the logos rise, sharpen and fade in one after another; the observer then disconnects, so it never replays. Reduced motion shows them at once.
Props
Options you can pass to customize this component.
titleSection heading. Defaults to "Built on the tools you already ship".
descriptionSupporting text under the heading.
logosLogos in order. name is the alt text, invert flips a one color mark in that theme: "dark" turns a black mark white in dark mode, "light" turns a white mark black in light mode, href links it in a new tab. Defaults to the eight tools Nexvyn UI is built with.
classNameMerged onto the section with cn().
thresholdShare of the grid that must be visible before the reveal plays. Defaults to 0.25.
Installation
How to use
<SocialProofLogosReveal threshold={0.4} />Source Code
Click the code icon in the top-right corner to view the source code.
License & Usage
- •Free for personal and commercial use
- •No attribution required
- •Cannot be resold as a standalone product
- •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.Built on the tools you already ship
Written in TypeScript for React and Next.js, animated with Motion, shaped by Radix patterns and installed through the shadcn CLI.
