Asymmetric
Asymmetric gallery with dynamic positioning.
Main Features of Asymmetric
How to Use Asymmetric in Next.js
Installation Guide for Asymmetric
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | Array<{src: string, width?: string, height?: string, top?: string, left?: string, right?: string, bottom?: string, rotate?: number, label?: string, grayscale?: boolean, decoration?: React.ReactNode}> | [{src: '...', width: '300px', height: '350px', top: '20', left: '10', rotate: -6, label: 'Summer 23', grayscale: true}, ...] | Array of image objects with positioning and styling properties. |
backgroundColor | string | #fcf8f3 | Background color (hex, rgb, or hsl). |
patternUrl | string | https://www.transparenttextures.com/patterns/cubes.png | URL for background pattern texture. |
title | string | COLLAGE | Large background title text. |
titleColor | string | rgba(0,0,0,0.05) | Title text color (hex, rgb, or rgba). |
Related Components
When to Use
Ideal for creative studios, experimental art projects, and Next.js portfolios that want an organic 'Asymmetric' aesthetic. Use this layout for an engaging 'Collage' experience where content feels 'Mailed' and 'Drafted' by physical sketch lines.
Best Practices
Maintain scalable component architecture by keeping the sketch colors consistent with your primary palette. Follow React best practices by pairing this with bold, technical typography. Optimize for performance by managed the grid renders.
Why This Component Matters in Modern UI Development
Asymmetric collage animations create a sense of digital 'Authenticity' and human touch. This production-ready UI template helpsคุณ build an interface that feels alive and 'Drafted', adding a unique signatures to your brand structure.
Frequently Asked Questions
QWhy 'Asymmetric'?
The gallery features rough CSS borders and non-uniform positioning (top, left, rotate) to simulate the raw structural honesty of physical art boards.
QCan I adjust textures?
Absolutely, you can change both the `backgroundColor` and `patternUrl` to create 'Graph-Paper' or 'Industrial' sketch effects.
QIs it mobile responsive?
The grid spans and organic offsets scale for mobile, ensuring the 'Draft' narrative remains impactful and structural on small screens.