A curated catalog of premium, hyper-interactive 2.5D & mid-depth user interface components built using React, Framer Motion, and Tailwind CSS. These components bring tactile depth, layered interfaces, micro-interactions, and visual elegance to typical web elements without sacrificing utility or performance.
🚀 Designed to replace standard flat UI with tactile, layered depth layouts.
- Tactile 2.5D Layering: Custom 3D tilt effects, layered hover states, and parallax depth shadows.
- Dynamic Theme Engine: Integrated 5-theme accent color sync (Neon Teal, Cyber Rose, Toxic Lime, Amber Glow, Orbit Indigo) matching active states.
- Framer Motion Physics: Spring-based physics, morphing layouts, liquid ripples, and kinetic feedback.
- Completely Modular: Clean JSX components that you can drop directly into your project.
- Vite Powered HMR: Ultra-fast development previewer and code copy tools built directly into the showcase app
Below is the directory of all interactive components built so far. Each is designed for production use, accessibility, and high performance.
| ID | Component Name | Description | Key Features | Tags |
|---|---|---|---|---|
| 01 | Floating Auth Gateway | Glassmorphic 2.5D Auth modal with depth-switching forms. | Parallax tilt, 3D flip card, active swatch controller | Auth, Forms, Glassmorphic |
| 02 | Kinetic Pricing Matrix | Premium 3-tier product subscription plans. | Cascade layout entry, hover lifts, neon CTAs | Pricing, Cards, E-commerce |
| 03 | Layered Waitlist Teaser | High-conversion waiting list teaser page. | Floating custom color orbs, accent selector | Waitlist, Teaser, Glow-Orbs |
| 04 | Crisp Bento User Profile | Dashboard layout showing profile metrics in a Bento grid. | Dynamic elevation, multi-tab stats, theme switcher | Dashboard, Bento-Grid, Profile |
| 05 | Sliding Configurator | Flow customizer with sliding scale options. | Step indicators, AnimatePresence transitions | Configurator, Multi-Step |
| 06 | Bento Notification Center | Dynamic dashboard notifications center in a bento tile. | Jelly-stretch buttons, clear-all morphs, tabs | Dashboard, Notifications |
| 07 | Kinetic Media Slider | Showcase carousel with shutter reveal transitions. | 2.5D parallax images, kinetic title letters | Slider, Carousel, Media |
| 08 | Multi-Step Checkout Drawer | Complete checkout drawer with credit card visualizer. | Orbiting neon boundary, active card 3D tilt, validation shake | Checkout, Cart, Interactive |
| 09 | Interactive Pricing Table | Feature matrix with monthly/yearly price toggles. | Smooth numerical counters, active tier layering | Pricing, Cards, Comparison |
| 10 | User Onboarding Wizard | Onboarding wizard with staggered form elements. | Snappy spring entrances, progress bar morphing | Onboarding, Multi-Step, Wizard |
| 11 | Rich Mega-Menu Navbar | Expanded interactive navigation bar. | Layout-morph transitions, magnetic submenu pills | Navigation, Navbar, Menu |
| 12 | Advanced Filter Sidebar | E-commerce multi-metric navigation panel. | Path-drawn checkboxes, neon glowing dual price track | Sidebar, Filters, Catalog |
| 13 | Product Variant Configurator | Customized watches with depth configurations. | Watch vectors, sweeping light reflect effects | E-commerce, Configurator |
| 14 | Multi-Select Tag Input | Keyboard-navigable autocomplete tag creator. | Staggered pop entry, backspace shake delete | Input, Form, Keyboard |
| 15 | Interactive Skeleton Loader | Cohesive dashboard skeletons morphing to actual data. | Unified angled sheen, stable layout transitions | Dashboard, Skeleton, Loader |
| 16 | Elevated 2.5D Kinetic Data Grid | High-tech server status grid with Z-axis row lifting. | Sorting spring reordering, nested SVG diagnostics charts, batch actions | Dashboard, Data Grid, Interactive |
| 17 | 3D Layered Metric Widgets | Tactile dashboard metrics with 3D-angled chart surfaces. | Floating SVG graphs, spring-loaded neon coordinate tracking, glass tooltips | Dashboard, Charts, Interactive |
| 18 | Tactile Elastic FAQ Accordion Stack | Physical support accordion cards with spring-loaded push-down physics. | Helpful rating counters, emoji particle splashes, elastic transitions | FAQ, Accordion, Micro-interactions |
| 19 | Kinetic Release Notes Feed | Flat-layered changelog feed with a continuous tracking timeline. | Vertical tracking line, staggered horizontal reveal, cascading details, magnetic tags | Changelog, Timeline, Interactive |
| 20 | Kinetic OTP Verification | Flat-layered 2FA validation card with swatch-selected theme engine. | Quick box bouncing, automatic focus forwarding, validation success ripples, error haptic shake | Auth, Validation, Form |
| 21 | High-Conversion Newsletter CTA | Inline newsletter block with physics particle explosions. | Floating active placeholder labels, morphing actions, custom theme swatches | Form, Input, Glow-Orbs |
| 22 | Elastic 2.5D Kanban Board | Collaborative board with Z-axis cursor-tilt cards. | Drag-and-drop column overlays, check-to-complete, inline task creation | Kanban, Workflow, Interactive |
| 23 | Dynamic Content Card Grid | Responsive card grid with category filter switcher. | Stagger-fade scroll entries, image zooms, active color overlays, magnetic read-more arrow | Grid, Cards, Interactive |
| 24 | Floating Support Messenger Widget | Floating messenger window with bottom-anchored spring morphs. | Open-close spring layouts, slide-up message bubbles, sequential agent typing dots, scale bounces | Messenger, Chat, Interactive |
| 25 | Nested Threaded Discussion Board | Threaded comments section with recursive indentation guides. | Indented reply lines, layout-morph reply reveals, micro-jump upvotes, background highlights | Discussion, Comments, Interactive |
| 26 | Step-by-Step Interactive Product Tour | Contextual overlay walkthrough. | Elastic outlines morphing x/y/w/h, snappy spring tooltip positioning, skip tour horizontal slide indicators | Onboarding, Tour, Interactive |
| 27 | Kinetic Hero Product Carousel | Auto-advancing hero catalog. | Horizontal slides, cylinder roll text overlays, pause-on-hover filling progress dots, diagonal gloss sweep button | Carousel, Landing Page, Interactive |
| 28 | Sticky E-commerce Action Bar | Scroll-activated shopping bar. | Slide-in threshold triggers, color variant thumbnail flips, morphing loading and checkmark button states | E-commerce, Sticky, Form |
| 29 | Dynamic Mega Footer & Newsletter | Detailed flat-layered site footer. | Path animated link underlines, social icon hover bounces, SVG boundary input tracers, success ripples | Footer, Layout, Interactive |
| 30 | Support Ticketing System | Fluid interface for managing customer support tickets. | Interactive status morphing, reply sliding drawers | Support, Dashboard, Interactive |
| 31 | Empty State Recovery | Engaging zero-data states to guide user actions. | Ghost element floating, bouncy call-to-actions | Layout, Empty State, UX |
| 32 | Account Settings Hub | Unified profile and security preference panel. | Vertical smooth tabbing, inline toggle snaps | Settings, Profile, Form |
| 33 | Event Registration Form | Visually striking multi-step event sign-up. | Ticket tear animations, floating confetti physics | Forms, Events, Interactive |
-
Clone the Repository:
git clone https://github.com/Saadi-Creative/mid-depth-ui-components.git cd mid-depth-ui-components -
Install Dependencies:
npm install
-
Run Development Server:
npm run dev
-
Open in Browser: Go to
http://localhost:5173/to view the comprehensive showcase dashboard, or navigate directly to/preview/:id(e.g.,/preview/08) to preview a component stand-alone.
We are building towards 50 fully interactive elements. Our planned next additions focus on standard web layout structures that are historically rigid or flat, reinventing them with beautiful 2.5D physics and high real-world utility:
- A fully dynamic shopping cart checkout with interactive credit card physics and smooth transition states for payment success.
- A data visualization globe to show regional metrics with glowing map nodes and draggable rotations.
- Customer testimonials that fan out when scrolled, applying physics-based hover states.
This repository is licensed under the MIT License. See LICENSE for more information.
⭐ If you find this project helpful or beautiful, please give it a star on GitHub!