I specialize in highly crafted UI, dynamic interactions and ambiguous problems.

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 simple, user-friendly solutions that are inclusive and accessible to all.


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.


Take a peek into my studio.

I specialize in highly crafted UI, dynamic interactions and ambiguous problems.

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 simple, user-friendly solutions that are inclusive and accessible to all.


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.


Take a peek into my studio.

Dynamic Cursor Tracking in Framer

November 2, 2023

2 MIN

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

2 MIN

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

2 MIN

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.