I specialize in ambiguous problems, highly crafted UI and dynamic interactions.
Currently Lead Product Designer at Mars Markets.
I’ve designed and shipped mobile and web products from 0-1, built and led cross-functional teams, and utilized design to achieve high-level objectives and create measurable impact.
My work has been dedicated to transforming ambiguous problems into elegantly designed user interfaces that are simple and user-friendly. I'm obsessed with the details.
Graduated Art Center College of Design with Honors. Passionate about digital products from a young age, I started coding and designing at age 10. At 14, I was invited to Microsoft’s campus for my work exploring web-based animation.
I specialize in ambiguous problems, highly crafted UI and dynamic interactions.
Currently Lead Product Designer at Mars Markets.
I’ve designed and shipped mobile and web products from 0-1, built and led cross-functional teams, and utilized design to achieve high-level objectives and create measurable impact.
My work has been dedicated to transforming ambiguous problems into elegantly designed user interfaces that are simple and user-friendly. I'm obsessed with the details.
Graduated Art Center College of Design with Honors. Passionate about digital products from a young age, I started coding and designing at age 10. At 14, I was invited to Microsoft’s campus for my work exploring web-based animation.
Recent Posts
Explorations
Projects
Articles
Projects
Explorations
Recent Posts
Explorations
Projects
Articles
Projects
Explorations
Recent Posts
Explorations
Projects
Articles
Projects
Explorations
Dynamic Cursor Tracking in Framer
November 2, 2023
Explorations
With this concept I set out to create a hover state that follows the user's cursor. This is not natively offered in Framer, so I had to find a custom way to create it.
Below is a live demo you can interact with to get a feel for it:
Hi, I'm Jamie
There's no easy way around it– as you probably guessed there are multiple hover states for each button.
The hover areas are highlighted green in the example below. There's 9 total hover areas:
After that you just need to duplicate the variant 9x times and connect them. Since there's 9 hover areas, each variant will have 9 connections like you can see in the default variant below:
Once you've done the hard work once, you can duplicate the component and create additional versions. Here's an example of a button with multiple component properties:
As you can see, Framer is really an amazing tool for building dynamic interactions like this without any code.
Dynamic Cursor Tracking in Framer
November 2, 2023
Explorations
With this concept I set out to create a hover state that follows the user's cursor. This is not natively offered in Framer, so I had to find a custom way to create it.
Below is a live demo you can interact with to get a feel for it:
Hi, I'm Jamie
There's no easy way around it– as you probably guessed there are multiple hover states for each button.
The hover areas are highlighted green in the example below. There's 9 total hover areas:
After that you just need to duplicate the variant 9x times and connect them. Since there's 9 hover areas, each variant will have 9 connections like you can see in the default variant below:
Once you've done the hard work once, you can duplicate the component and create additional versions. Here's an example of a button with multiple component properties:
As you can see, Framer is really an amazing tool for building dynamic interactions like this without any code.
Dynamic Cursor Tracking in Framer
November 2, 2023
Explorations
With this concept I set out to create a hover state that follows the user's cursor. This is not natively offered in Framer, so I had to find a custom way to create it.
Below is a live demo you can interact with to get a feel for it:
Hi, I'm Jamie
There's no easy way around it– as you probably guessed there are multiple hover states for each button.
The hover areas are highlighted green in the example below. There's 9 total hover areas:
After that you just need to duplicate the variant 9x times and connect them. Since there's 9 hover areas, each variant will have 9 connections like you can see in the default variant below:
Once you've done the hard work once, you can duplicate the component and create additional versions. Here's an example of a button with multiple component properties:
As you can see, Framer is really an amazing tool for building dynamic interactions like this without any code.