diff --git a/.idea/alpine-confetti.iml b/.idea/alpine-confetti.iml index c956989..94b5823 100644 --- a/.idea/alpine-confetti.iml +++ b/.idea/alpine-confetti.iml @@ -1,7 +1,9 @@ - + + + diff --git a/assets/art.psd b/assets/art.psd new file mode 100644 index 0000000..4cc6eee Binary files /dev/null and b/assets/art.psd differ diff --git a/assets/bg1.png b/assets/bg1.png new file mode 100644 index 0000000..3c74e9b Binary files /dev/null and b/assets/bg1.png differ diff --git a/assets/bg2.png b/assets/bg2.png new file mode 100644 index 0000000..da5f665 Binary files /dev/null and b/assets/bg2.png differ diff --git a/demo.html b/demo.html index 32b57c5..de34d93 100644 --- a/demo.html +++ b/demo.html @@ -10,65 +10,174 @@ - -
+ +
+
+ +
-
+

Confetti

-
-

Use $confetti to celebrate an interaction with your Alpine component.

+
+

+ Use $confetti to celebrate an interaction with your Alpine component. + By default it creates a burst of confetti originating from the target element, but you can create + custom effects by passing an object with options. +

-
+
+ + + +
+
+ + <button x-on:click="$confetti()"> ... </button> + +
-
+

Starbust

-

Use $starburst to add a little magic to your UI.

+

+ Use the $starburst preset to add a little magic to your UI. + Specify the number of stars, or pass an object for more control and customization. +

-
+
+ + +
+
+ + <button x-on:click="$starburst(10)"> ... </button> +
-
+

Emojify

-

Use $emojify to surprise and/or annoy your users.

+

+ Use $emojify to surprise and/or annoy your users. Pass an array of emojis + or an object to customize further. Use responsibly! (Or not... ๐Ÿคช) +

-
+
+
+
+ + <button x-on:click="$emojify(['๐Ÿ˜Ž', '๐Ÿš€'])"> ... </button> + +
-