Small laboratory of fine UI

Website and components designed and built by

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
2e860de

Dynamic Settings

Dynamic settings component using smooth transitions with elegant blur.

react
tailwindcss
framer motion

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

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
User avatar
User avatar
User avatar

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.
User's avatar
Logged in as Mariana

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

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
11 Components