Summary
A playground for prototyping interaction design ideas with real code — nested selectors, data tables, and micro-interactions, all built and refined outside of client work.
Nested select
A two-panel nested selection component with country-level and location-level checkboxes, partial selection states, and a searchable location list.
Social comment translation
A social media comment card with a language toggle button. Click the button to cycle through English, Spanish, French, Italian, and Danish.
Just got back from the most incredible hike. The views from the top were absolutely breathtaking — I could see for miles in every direction. Highly recommend doing this before the summer crowds arrive.
Cross-filtering dropdowns
An optional secondary dropdown that allows you to cross-filter data. This came up as a concept for a cross-filtering feature we were working on at Zoios.
Empty state illustration
I designed this as an empty state illustration for a feature in Zoios called Groups. Because of the grows and transparency, I ended up using PNGs instead of SVGs. I used Framer Motion with the spring function for the animation.
Table component
This component started as a Figma design that I then converted to code using Meng To's Figma to AI Code plugin. I then used Cursor to add sorting by column, partial selection, and some styling.
Employees
Add or remove employees and modify the data of existing ones.
| Sarah Chen | sarah.chen@acme.co | Active | 34 | Engineering | Yes | |
| Marcus Rodriguez | m.rodriguez@acme.co | On Leave | 29 | Product | No |
Dynamic Island
Recreated the transitions of Apple's Dynamic Island. Click to cycle through the different sizes.
New slide
I was planning an animation that plays when a new page loads. For this prototype, I used staggerChildren to orchestrate the animation of the cards.
Progressive card
A two-step dialog that changes to accommodate different types of input. Made with Framer Motion, Tailwind and React.
Progressive card
This is the first page. It's simple and not very tall.
Quick menu
A concept for quickly jumping around a web app. Made with Framer Motion, Tailwind and React.