Small laboratory of fine UI Website and components designed and built by mrncst mrncst mrncst mrncst mrncst mrncst mrncst Two-Step Popover Experimenting how a two-step popover can be implemented and getting a feeling of the transition. Not quite there yet but hey, all of this is experimental. react tailwindcss framer motion Action Toolbar Toolbar that changes state to notify and enable information and actions. Try clicking on the buttons to change the state of the toolbar. react tailwindcss framer motion Commit Analytics Upgrade 2e860de Failed Dynamic Settings Dynamic settings component using smooth transitions with elegant blur. react tailwindcss framer motion Add Style Learn how to animate components like these “Animations.dev is one of my go-to resources when people ask me how to upskill their UI components animations abilities.” Mariana Castilho, creator of uilabs Take the course Contextual Toolbar A toolbar that suggests and enables actions based on users' navigation. Suggestions are related to the current page and users can perform actions inside the component, without changing to another page or context. react tailwindcss framer motion Create Webhook Connect Repositories Create API Key Share Workspace /settings /create-project Beta Feedback I'm obsessed with reusing and transforming components to give them new meaning. What if you can share a feedback without triggering a modal or any additional component? react radixui framer motion Calendar Widget Calendar widget with clear timezone differences information. Try clicking on the widget and interacting with it. react tailwindcss framer motion In 15 mins Design Sync 1:30PM -> 2:30PM Guests 3 Flexbile Tags Container Dynamically expanding and shrinking the container as you manipulate tags. I wouldn't ship it in production because of the sudden change of position of the elements inside the component, but it was a fun exercise. react tailwindcss framer motion Elastic Card Enable actions inside the card to trigger a playful and informative interaction. react tailwindcss framer motion 03 Image Models Connect multiple image models Enable multiple image models at the same time with one click. Logged in as Mariana Authenticate to Enable Animated Cards A tiny set of animated cards. The idea is to bring a playful and informative way to showcase components. react tailwindcss Templates Components All 56 Components 01 Cards H1 02 Text 03 Icons Hello 04 Buttons Parameters iOS Slider Recreating iOS sliders in the web with Radix UI and Tailwind CSS. The idea is to bring the same interactions we have natively in iOS to the browser. react tailwindcss radixui Parameters Motion 50 Blur 50 Save Dynamic Header Dropdown An informative dynamic header that changes state as users hover on different options, providing additional context of each one of the options. This was actually shipped in a real Vercel project. react tailwindcss vercel Visited 1h ago ong-preview-feature/path-end Preview #34098 Branch Latest Deployment Comments 2 Clear Recent Dynamic Footer Widget What if we can bring external context to the actual widget state? Try hovering on the metrics. Inspired by a winner project I collaborated to for Vercel's 2023 Hackathon. react tailwindcss framer motion vercel Events Triggered */ Production analytics 12,403 +15% /wk emails 112,403 +15% /wk Total Events Triggered 35,968 Built with Next.js Mariana Castilho • 2024 12 Components