Pin & Reveal
Uilora Pin & Reveal — sticky scroll sequence that stacks and pins full-screen cards.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| cards | Array<{color: string, title: string, img: string}> | [{color: '#c8a882', title: 'Uilora 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. |
When to Use
Excellent for technical dashboards, AI processing platforms, and Next.js applications that want a high-tech 'Pin & Reveal' aesthetic. Use this gallery to communicate power, security, and digital intelligence through dark themes and architectural sequences.
Best Practices
Maintain scalable component architecture by pairing this with sharp, technical typography. Follow React best practices by using Framer Motion for the pin reveal transitions. Optimize for performance by managed the layer renders.
Why This Component Matters
Pin-based reveal sequences communicate technical authority, sophistication, and digital craft. This Uilora-ready template helps you build an interface that feels organized and high-end, adding a unique signature to your brand.
FAQ
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.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.