Pin & Reveal
Pin and reveal gallery with interactive pinning effects.
Main Features of Pin & Reveal
How to Use Pin & Reveal in Next.js
Installation Guide for Pin & Reveal
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
cards | Array<{color: string, title: string, img: string}> | [{color: '#FF5733', title: 'Ignite', img: '...'}, ...] | Array of card objects with color (hex), title, and image URL. |
backgroundColor | string | #000000 | #000000 Background color (hex, rgb, or hsl). |
scrollHintText | string | Scroll Down | Scroll hint main text. |
scrollHintSubtext | string | ↓ | Scroll hint subtext/arrow. |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QWhat is 'Interactive Pinning'?
The component uses localized sticky triggers that 'Pin' content in place during scroll, allowing overlapping features to 'Reveal' themselves in a physical, stacked sequence.
QCan I adjust the speed?
Absolutely, both the reveal frequency and the scroll hint text can be configured to match your project's specific terminology.
QIs it dark mode only?
While optimized for the 'Onyx' (neutral-950) palette, the component's card colors and accents can be adjusted to fit other dark themes.