---
title: "Emoji Wave — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Nostromo Studio · Buttons. About This Component Emoji Wave creates a dynamic, full-screen burst of emojis or images that animate across the viewport."
canonical: "https://framer.elliotli.dev/component/emoji-wave"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Emoji Wave

# Emoji Wave

Emoji & Image Burst on Click

[View on Framer](https://framer.com/marketplace/components/emoji-wave/?via=elliot-li)

![Emoji Wave preview image 1](https://framer.elliotli.dev/og/component/emoji-wave/fa5f623e09072641/1600x1200.jpg)

## Summary

About This Component Emoji Wave creates a dynamic, full-screen burst of emojis or images that animate across the viewport.

## Description

## About This Component

Emoji Wave creates a dynamic, full-screen burst of emojis or images that animate across the viewport.

You can trigger the animation using a built-in button or attach it to any component in your layout, making it easy to integrate playful interactions anywhere in your design.

It works with both native emojis and uploaded images (PNG, SVG, etc.), giving you full creative flexibility.

[Demo Preview](https://emojiwave-component.framer.website/)

[Trigger Mode](https://emojiwave-component.framer.website/trigger)

[More examples](https://emojiwave-component.framer.website/examples)

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-mey3tkc4-U1tOBeAavjKv7LM9RbDJaEGqy9tCEs)](https://emojiwave-component.framer.website/examples)

## Key Features

### Content

-   Use emoji characters or custom images (PNG, SVG)
    
-   **Single mode** for one repeated element
    
-   **Multiple mode** to mix different emojis and images for richer compositions
    

### Trigger System

-   Built-in clickable button (default)
    
-   Enable **Use Trigger** to attach the animation to any component
    
-   Works with buttons, cards, images, or custom UI elements
    

### Animation Controls

-   **Direction**: animate in any direction (up, down, left, right)
    
-   **Duration** controls how long the animation lasts
    
-   **Spread** controls how wide or tight the wave expands
    
-   **Sway** adds subtle horizontal or vertical movement for a more organic feel
    

### Size & Variation

-   **Count** controls how many elements are generated
    
-   **Min Size / Max Size** define the size range of each element
    
-   Each emoji or image is randomly scaled within this range
    
-   Creates a more natural and dynamic visual result
    

### Button (Default Mode)

-   Customizable padding
    
-   Customizable background color
    
-   Adjustable icon size
    

### Layout & Behavior

-   Animation is rendered above the entire page
    
-   Uses a portal system to ensure elements always appear on top
    
-   Works across the full viewport for maximum impact
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-mey3tkc4-XBBWtq16zTa5lpuwpVma333Hej93Ip)

## How to Set Up

1.  Drag **Emoji Wave** onto your canvas
    
2.  Choose emoji or image content
    
3.  Select Single or Multiple mode
    
4.  Customize animation (direction, spread, size, etc.)
    
5.  (Optional) Enable **Use Trigger** to attach it to any component
    
6.  Publish
    

## Refund Policy

All sales of digital products are final and non-refundable.

If you have any questions about the product, please contact me at [hellonostromostudio@gmail.com](mailto:hellonostromostudio@gmail.com) before completing your purchase. I’m happy to help.

Enjoy!

## Rank history [How rankings work →](/terms#rankings)

-   All · #9664

## Details

- **Author**: Nostromo Studio
- **Price**: $14.00
- **Published**: 2026-04-10
- **Updated**: 2026-04-21
- **Added**: 2026-03-31
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything