Stacked Toast

Stacked View

As each additional piece of toast is added, it is stacked downward by adjusting the scale, y, and opacity of the previous item. When folded, it only shows a maximum of three, but when unfolded, it shows all of them.

Hover Action

Hovering over the toast item list area expands the entire toast, and it remains expanded even when hovering between items. Hovering over the toast item list area expands the entire toast, and it remains expanded even when hovering between items. This is because the height of the 'ol', the parent component of the toast items, is set based on the number of toast items and their spacing.

Swipe

Use the drag gesture of framer-motion. Set dragConstraints to { left: 0, right: 300} and dragElastic to { right: 1} to allow only swipes in the right direction. In the onDragEnd handler, remove the toast if the offset is greater than 50.