VibeCoderzVibeCoderz
Telegram
All Prompts
Animated Background Component preview
backgroundanimatedfullscreengradientmaskmodern

Animated Background Component

Компонент полноэкранного анимированного фона с градиентной маской. Интеграция с библиотеками анимации для иммерсивных визуальных эффектов.

Prompt

<!-- Full-screen Unicorn background with bottom fade -->
<div class="fixed inset-0 -z-10 bg-black">
  <div class="aura-background-component absolute inset-0 w-full h-full" data-alpha-mask="80" style="
      /* Fade from solid to transparent near bottom */
      -webkit-mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%);
              mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%);
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
              mask-size: 100% 100%;
    ">
    <div data-us-project="XxCmD31vVBmiINgvYCho" class="absolute inset-0 w-full h-full bg-neutral-950">
    </div>
    <script type="text/javascript">
      !function () {
        if (!window.UnicornStudio) {
          window.UnicornStudio = { isInitialized: !1 };
          var i = document.createElement("script");
          i.src = "https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js",
          i.onload = function () {
            window.UnicornStudio.isInitialized || (UnicornStudio.init(), window.UnicornStudio.isInitialized = !0)
          },
          (document.head || document.body).appendChild(i)
        }
      }();
    </script>
  </div>
</div>
All Prompts