Design Lab

A working library of interface patterns, each with a live, interactive demo.

• UI Components — Sixteen everyday interface components, each one fully working
• Button Styles — Variants, sizes, states and a ripple effect
• Form Patterns — Sign-in, floating labels, live validation, search and file upload
• Progress Steppers — Eight ways to guide someone through a wizard
• Navigation Patterns — Responsive navbar, mega menu, breadcrumbs, tabs and mobile bars
• Interactive Components — Seven components driven by pointer, drag and keyboard
• Flexbox & Grid Playground — Change the properties and watch the layout respond
• Bento Grid — Resize the frame and watch the layout reflow
• Holy Grail Layout — Header, navigation, three-column body and footer
• Page Layouts — Sidebar, split screen, dashboard, magazine, masonry and reading patterns
• Responsive Techniques — Drag the width slider to see each technique respond
• Page Sections — Hero, features, pricing, testimonials, FAQ, stats, CTA and footer
• Visual Effects — Glass, soft UI, gradient mesh, 3D flip and theme switching
• Loading Animations — Fifteen lightweight loaders, no images or libraries
• Motion & Micro-interactions — Hover lift, text reveal, count-up numbers and scroll reveal
• AI Interface Components — Chat with streaming replies, prompt input and model selector
• Big-O Visualizer — Move the slider and see how each complexity class grows
• Game Playground — Arrow Puzzle and an endless runner, with keyboard, mouse and touch