Popup with Heart Animation

summary

A modern popup featuring animated heart effects and a like counter.

prompt

Create a popup with a white background, featuring a black 1-pixel border. The popup should contain a button with the 'Like' icon, using the 'SF Pro Text Bold' font. The button should be a black rectangle with pressed state when clicked. Upon clicking the button, a red heart should animate out of the button following a sinusoidal path with a beautiful random effect. Multiple clicks result in multiple hearts, each fading out. The popup also displays a counter starting at '50 Likes'.

Structure:
- Popup: 300x200 pixels with rounded corners and a black 1-pixel border.
- Button: 100x40 pixels, black background with 'Like' text/icon.

Interaction:
- Button Click: Triggers heart animation; pressed button state (visual feedback).

Animation:
- Heart Animation: Rises in a sinusoidal path, fading after 2 seconds; supports multiple simultaneous animations.
- Like Counter: Increments upon each button click.

Requirements:
- Design: Modern, minimalist, with clear visual feedback.
- Functionality: Smooth animations, accurate counter update, and intuitive user interaction.

original prompt

Сделай на белом фоне поап с бордюром 1 пиксель черным; белый попап с кнопкой 􀊵 Like (шрифт SF Pro text bold)
кнопка прямогольная черная при нажатии есть состояние прессед
при нажатии на кнопку из кнопки должно вылетать красное сердечко по синусоиде рандомно красивый эффект. если много раз нажать то вылетят много сердечек и растворятся.

При этом на попапе меняется цифра с количеством 50 Likes

Q: Какой стиль должен быть у попапа и кнопки?
A: Попап 300x200 пикселей с закругленными углами, кнопка 100x40 пикселей.

Q: Как именно должна работать анимация с сердечком?
A: Сердечко должно подниматься вверх по синусоиде и исчезать через 2 секунды.

generation cost summary

model name: o3-mini-high

response time: 128.23 sec.

result tokens: 7,502

cost: $0.03367320