MotionCraft Logo

Collection of UI experiments

Designed and built by

Fluid Focus Navigation

A friendly tab system that helps guide your attention naturally. As you move between tabs, a gentle highlight follows your cursor or keyboard focus, making it clear where you are without being distracting.

reacttailwindframer

Contextual Preview Dropdown

A dropdown menu that gives you a peek at what's inside before you click. The header smoothly updates as you hover, helping you understand what each option means.

reacttailwindframer
Project Settings
Configure your workspace
Settings
Theme
Export
ShareNew
Favorites
Quick Actions

Progressive Search States

A search interface that keeps you company while you wait. Instead of a simple loading spinner, it shares what it's doing through gentle text transitions.

reacttailwindframer

Expandable Tabs

A toolbar that grows gracefully when you need more options. When expanded, new items slide in smoothly while keeping you oriented.

reacttailwindframer

State-Aware Notifications

A toast notification system that keeps you in the loop. Status changes flow smoothly between states, keeping you informed without being intrusive.

reacttailwindframer
Unsaved changes

Directional Content Flow

A panel system that helps you track content changes. Content slides in from meaningful directions, helping you keep track of where you came from.

reacttailwindframer
1/4

Module Not Found

Cannot find module 'react' from 'src/main.jsx'. This usually means you are missing a dependency or have a typo in your import. The module resolution process failed after checking all possible locations in your node_modules directory and project structure. This error typically occurs when: 1. The package is not installed in your project 2. There's a typo in the import statement 3. The package is installed but not listed in your dependencies 4. The package is installed but needs to be rebuilt To resolve this: 1. Check your package.json for the dependency 2. Run npm install or yarn install 3. Clear your node_modules and reinstall 4. Check for case sensitivity in the import path 5. Verify the package is compatible with your project's Node.js version

See more info here: https://vitejs.dev/guide/troubleshooting.html#module-not-found

1 | import React from 'react';
              |        ^^^^^
  2 | import { createRoot } from 'react-dom/client';
  3 | import App from './App';
  4 | import './index.css';
  5 | import { BrowserRouter } from 'react-router-dom';
  6 | import { Provider } from 'react-redux';
  7 | import store from './store';
  8 | import { ThemeProvider } from '@mui/material';
  9 | import theme from './theme';
 10 | import { QueryClient, QueryClientProvider } from 'react-query';

Progressive Confirmation

A thoughtful way to handle important actions like deletion. Instead of interrupting you with a popup, it asks you to hold briefly to confirm.

reacttailwindframer

Depth-Based Content Rotation

A card carousel that naturally shows what's coming next. Cards shift and scale smoothly to show their relationships, making it easy to browse through content.

reacttailwindframer
The most innovative solutions emerge from the strictest constraints. A well-structured design system isn't a cage that limits creativity—it's a foundation that enables it.

On Constraints

Design Systems

Motion in interfaces isn't decoration—it's a language of meaning. Every transition should carry purpose, guiding users through state changes in ways that feel natural and intuitive.

On Motion

Interface Dynamics

The goal isn't to make something simple—it's to make something clear. Complex systems can be necessary; our job is to make them approachable through thoughtful design.

On Complexity

System Architecture

White space isn't empty space—it's a powerful tool for directing attention. In a world of increasing information density, the ability to guide through emptiness is vital.

On White Space

Visual Hierarchy

Elastic Volume Control

A volume slider that feels satisfying to use. The slider has a subtle bounce when you reach its limits, and the icons respond playfully to your adjustments.

reacttailwindframerradix-ui

Interactive Dropdown

A dropdown menu that makes managing favorites feel natural. Toggle, edit, and remove items with smooth transitions that make each action feel intentional.

reacttailwindframer


Springy Input Feedback

An OTP input that makes verification feel less mechanical. Numbers bounce in playfully as you type, making the process more engaging.

reacttailwindframer

Spatial Context Expansion

A toolbar that grows gracefully when you need more options. When expanded, new items slide in smoothly while keeping you oriented.

reacttailwindframer

Intelligent Date Picking

A date input that speaks your language. Type 'next Friday' or 'tomorrow,' and watch it understand and confirm your input naturally.

reacttailwindframerchrono-node

Ambient Glow Response

A thoughtful text input that brings your words to life. As you submit your thoughts, a gentle gradient glow emerges and dances around your message, creating a moment of delight and acknowledgment.

reacttailwindframer

Animated Stepper Input

A playful number input that combines direct editing with smooth animations. Watch numbers bounce and slide as you increment or decrement using the stepper controls.

reacttailwindframer
0
0

Interactive Management Bar

A space-efficient interface that combines pagination with contextual actions. Buttons expand on hover to reveal their purpose, perfect for data tables and file managers where space is limited but functionality needs to be accessible.

reacttailwindframer
01234567890123456789/ 10

Dynamic Pin List

A list interface that makes organizing content feel natural. Items smoothly animate between pinned and unpinned sections, with visual feedback that helps you understand the current state and available actions.

reacttailwindframer

Pinned Items

Project Documentation
Updated 2 hours ago
Design Assets
Updated 1 day ago

All Items

Audio Files
Updated 3 days ago
Video Content
Updated 1 week ago

Apple Wheel Picker

Apple's signature wheel picker component built in React. Smooth scrolling through options with native iOS-style animations and visual feedback that feels familiar and intuitive.

reacttailwind@ncdai/react-wheel-picker
  • 08
  • 09
  • 10
  • 11
  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 01
  • 55
  • 56
  • 57
  • 58
  • 59
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 59
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 00
  • AM
  • PM
  • AM
  • PM
18 components
Back to top