Layout Patterns
Navigation systems, page layouts, and structural patterns for building cohesive interfaces.
Sticky Navigation
Header that transitions from transparent to frosted glass on scroll with smooth animations.
CSS Properties
position: stickybackdrop-filter: blur()transition: all 0.5sUse Cases
Vertical Timeline — Numbered Steps
Sequential steps with connector lines, perfect for process flows and onboarding.
Project Discovery
Understand requirements and define scope
Wireframing
Create low-fidelity layouts and user flows
UI Design
Develop visual design and component library
Development
Implement responsive frontend with animations
Testing & Launch
Quality assurance and deployment
Simple dots with connector lines
Click steps to expand details
Responsive horizontal layout
FAQ Accordion — Smooth Collapse
One-at-a-time accordion with smooth max-height transitions and proper accessibility.
This is a pure UI design pattern showcase built with Next.js 16, Tailwind CSS v4, and Framer Motion. It demonstrates various UI patterns for reference in future projects.
Absolutely! All patterns are built with production-ready code using accessible HTML, proper ARIA labels, and responsive design principles.
Colors are defined in the @theme blocks in globals.css. You can modify the color tokens there, and they'll propagate throughout the entire design system.
Yes, all patterns are fully responsive and tested on mobile, tablet, and desktop breakpoints using Tailwind's responsive utility classes.
Create a new page in the (marketing) directory following the existing pattern structure. Use the FadeUp and StaggerGroup components for consistent animations.
Split Layout — Text Left, Visual Right
Balanced content-visual split with responsive stacking on mobile.
Content-First Design
This split layout pattern prioritizes content on the left while using the right column for supporting visuals, demos, or interactive elements.