nostr plebs animation added

resources/views/livewire/nostr/plebs-overview.blade.php

@@ -5,6 +5,8 @@
     <div class="bg-21gray py-24 sm:py-32"
          wire:ignore
          x-data="{
+            text: 'Animate',
+            char: -1,
             width: '0',
             loading: true,
             loadingFollow: false,
@@ -55,6 +57,9 @@
                         });
                         await ndkUser.fetchProfile();
                         if (ndkUser.profile.image) {
+                            this.char = -1;
+                            this.text = ndkUser.profile.name;
+                            this.animate();
                             ndkUser.profile.npub = npub;
                             this.plebs.push(ndkUser);
                             this.width = Math.round(counter / length * 100);
@@ -127,6 +132,16 @@
                     window.$wireui.notify({title:'{{ __('Follow failed!') }}',icon:'error'});
                 }
             },
+            animate() {
+                let timer = setInterval(() => {
+                    this.char++;
+                    if (this.char == this.text.length) {
+                        clearInterval(timer);
+                        timer = null;
+                        return;
+                    }
+                }, 50);
+            }
         }"
     >
         <div class="mx-auto grid max-w-7xl gap-y-20 gap-x-8 px-6 lg:px-8 xl:grid-cols-2">
@@ -193,6 +208,10 @@
                 <div
                     x-show="loading"
                     class="relative block w-full rounded-lg border-2 border-dashed border-purple-300 p-12 text-center hover:border-purple-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                    <template x-for="(c, i) in text.split('')"><span
+                            x-text="c"
+                            class="opacity-0 transition ease-in text-2xl text-white"
+                            :class="{'opacity-100':char>=i}"></span></template>
                     <div
                         class="bg-purple-200 rounded h-6 mt-5"
                         role="progressbar"

vite.config.js

@@ -6,14 +6,10 @@ export default defineConfig({
     plugins: [
         viteStaticCopy({
             targets: [
-                {
-                    src: 'node_modules/disgus/dist/index.js',
-                    dest: 'disgus/index.js'
-                },
-                {
-                    src: 'node_modules/disgus/dist/style.css',
-                    dest: 'disgus/style.js'
-                }
+                // {
+                //     src: 'node_modules/js-confetti/dist/js-confetti.min.js',
+                //     dest: 'js-confetti/js-confetti.min.js'
+                // }
             ]
         }),
         laravel({

yarn.lock

@@ -3428,6 +3428,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-confetti@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "js-confetti@npm:0.11.0"
+  checksum: 6bd280952842bb9cf0587042fe8f716423bc1e8a652145aeaefb68c70480be4477ae9ff556e569a7fa05763e8e24d0d2700d9cf88e7f210261e83069deb74dbf
+  languageName: node
+  linkType: hard
+
 "js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
@@ -4925,6 +4932,7 @@ __metadata:
     "@tailwindcss/typography": ^0.5.0
     alpinejs: ^3.0.6
     autoprefixer: ^10.4.7
+    js-confetti: ^0.11.0
     laravel-echo: ^1.15.0
     laravel-vite-plugin: ^0.7.2
     leaflet.heat: ^0.2.0