🚀 nand-launcher v4.0.0

The ZERO-CODE LaunchScreen component for Vue.js 🎯

Just import, add a single line, and you're done! ✨

<template>
  <div>
    <!-- That's it! No extra code needed! -->
    <LaunchScreen project-number="001" />
  </div>
</template>

<script setup>
import { LaunchScreen } from 'nand-launcher'
import 'nand-launcher/style.css'
</script>

🎯 What's NEW in v4.0.0

• ✨ Improved Reload Logic: Now matches production behavior perfectly
• ⏱️ Built-in Duration: Just set :duration="3000"
• 🔄 Smart Navigation: Shows only on page reload, not on internal navigation
• 🎭 Internal Transitions: Smooth fade-in/out automatically
• 🦄 Standalone Unicorn Viewer: Use 3D animations alone!
• 🚫 Session-Free: Removed session storage blocking - works on every reload

📦 Installation

npm install nand-launcher

🎉 ULTRA-SIMPLE Usage

1. Basic Setup (1 Line!)

<template>
  <div>
    <!-- Just this line! -->
    <LaunchScreen />
  </div>
</template>

<script setup>
import { LaunchScreen } from 'nand-launcher'
import 'nand-launcher/style.css'
</script>

2. With Custom Duration

<template>
  <div>
    <!-- 3 seconds instead of default 5 -->
    <LaunchScreen :duration="3000" />
  </div>
</template>

3. Different Display Modes

<template>
  <div>
    <!-- 3D animation in center -->
    <LaunchScreen display-mode="unicorn-center" />

    <!-- Fullscreen 3D background -->
    <LaunchScreen display-mode="unicorn-background" />

    <!-- Simple logo -->
    <LaunchScreen display-mode="small-image" :small-image-url="'/logo.svg'" />
  </div>
</template>

4. Complete Customization

<template>
  <div>
    <LaunchScreen
      project-number="PROJECT-2024"
      display-mode="unicorn-center"
      :duration="4000"
      :unicorn-project-path="'/animations/splash.json'"
      :fallback-image="'/images/loading.jpg'"
      :show-scrolling-text="true"
    />
  </div>
</template>

<script setup>
import { LaunchScreen } from 'nand-launcher'
import 'nand-launcher/style.css'
</script>

🦄 Using Unicorn Viewer Standalone

Want just the 3D animation without the loading screen? No problem!

<template>
  <div class="page-content">
    <!-- Just the 3D viewer -->
    <UnicornViewer
      :project-path="'/animations/awesome.json'"
      :fallback-image="'/images/fallback.jpg'"
      width="800px"
      height="600px"
      :autoplay="true"
      :loop="true"
    />
  </div>
</template>

<script setup>
import { UnicornViewer } from 'nand-launcher'
import 'nand-launcher/style.css'
</script>

📋 Props Reference

| Prop | Type | Default | Description | |------|------|---------|-------------| | projectNumber | string | '001' | Project number in scrolling text | | displayMode | 'unicorn-center' \| 'unicorn-background' \| 'small-image' | 'unicorn-center' | Display mode | | duration | number | 5000 | Show time in milliseconds (NEW!) | | unicornProjectPath | string | 'https://json.cdn.nand-studios.com/nsvbs3' | 3D animation JSON path | | smallImageUrl | string | '/logo.png' | Image for small-image mode | | fallbackImage | string | '/logo.png' | Fallback image | | showScrollingText | boolean | true | Show scrolling text |

🎨 Display Modes

Mode 1: Unicorn Center (Default)

<LaunchScreen
  project-number="001"
  display-mode="unicorn-center"
  :duration="5000"
/>

Mode 2: Unicorn Background

<LaunchScreen
  project-number="002"
  display-mode="unicorn-background"
  :duration="3000"
/>

Mode 3: Small Image

<LaunchScreen
  project-number="003"
  display-mode="small-image"
  :small-image-url="'/images/your-logo.svg'"
  :duration="2000"
  :show-scrolling-text="false"
/>

🦄 Unicorn Viewer Standalone

Basic 3D Animation

<UnicornViewer
  :project-path="'/animations/your-project.json'"
  width="100%"
  height="400px"
  :autoplay="true"
  :loop="true"
/>

With Fallback Image

<UnicornViewer
  :project-path="'/animations/awesome.json'"
  :fallback-image="'/images/loading.jpg'"
  width="800px"
  height="600px"
  :autoplay="true"
  :loop="true"
/>

Fullscreen Background

<template>
  <div class="hero-section">
    <UnicornViewer
      :project-path="'/animations/background.json'"
      width="100vw"
      height="100vh"
      :autoplay="true"
      :loop="true"
    />
  </div>
</template>

🤖 AI Assistant Prompt

Copy-paste this perfect prompt for AI assistants:

I want to add a beautiful loading screen to my Vue.js app using nand-launcher. Here's what I need:

1. Install the package:
npm install nand-launcher

2. Add to my component:
<template>
  <div>
    <LaunchScreen
      project-number="PROJECT-123"
      :duration="3000"
      display-mode="unicorn-center"
      :show-scrolling-text="true"
    />
    <div class="app-content">
      <!-- My app content -->
    </div>
  </div>
</template>

<script setup>
import { LaunchScreen } from 'nand-launcher'
import 'nand-launcher/style.css'
</script>

That's all! The component automatically:
- Shows only on page reload (not navigation)
- Has built-in fade transitions
- Auto-hides after the duration
- Handles all the complex logic internally

🎯 Real-World Examples

Corporate Website

<template>
  <div>
    <!-- Professional branding -->
    <LaunchScreen
      project-number="CORP2024"
      display-mode="small-image"
      :small-image-url="'/assets/brand-logo.svg'"
      :duration="4000"
      :show-scrolling-text="false"
    />

    <!-- Website content -->
    <nav>...</nav>
    <main>...</main>
  </div>
</template>

Creative Portfolio

<template>
  <div>
    <!-- Immersive experience -->
    <LaunchScreen
      project-number="PORTFOLIO"
      display-mode="unicorn-background"
      :duration="5000"
      :unicorn-project-path="'/assets/creative-showcase.json'"
      :fallback-image="'/assets/portfolio-hero.jpg'"
    />

    <!-- Portfolio -->
    <header>...</header>
    <section>...</section>
  </div>
</template>

SaaS Application

<template>
  <div>
    <!-- Quick brand loading -->
    <LaunchScreen
      project-number="SaaS-APP"
      display-mode="unicorn-center"
      :duration="2000"
      :show-scrolling-text="true"
    />

    <!-- App -->
    <Sidebar />
    <MainContent />
  </div>
</template>

Just 3D Animation (No Loading Screen)

<template>
  <div class="showcase">
    <h1>Amazing 3D Animation</h1>
    <UnicornViewer
      :project-path="'/assets/product-demo.json'"
      :fallback-image="'/assets/product.jpg'"
      width="600px"
      height="400px"
      :autoplay="true"
      :loop="true"
    />
    <p>Watch our product in action!</p>
  </div>
</template>

🚀 Key Features

✅ Zero Code Required

• Just import and use
• No setup functions needed
• No external state management
• Built-in transitions

⏱️ Smart Duration Control

<!-- 1 second -->
<LaunchScreen :duration="1000" />

<!-- 10 seconds -->
<LaunchScreen :duration="10000" />

🔄 Smart Navigation Detection

• Shows on page reload
• Skips internal navigation
• Uses performance API for accurate detection
• No extra code needed

🎭 Beautiful Transitions

• Smooth fade-in: 0.5s
• Smooth fade-out: 1.5s
• Built-in CSS animations
• No manual transition code

🦄 Standalone 3D Viewer

<!-- Just the animation, no loading screen -->
<UnicornViewer
  :project-path="'/animations/your-3d.json'"
  width="100%"
  height="400px"
  :autoplay="true"
  :loop="true"
/>

🔧 Advanced Options

Manual Control (if needed)

<template>
  <div>
    <LaunchScreen
      ref="launchScreenRef"
      :duration="5000"
    />

    <button @click="showLaunch">Show Loading</button>
    <button @click="hideLaunch">Hide Loading</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { LaunchScreen } from 'nand-launcher'
import 'nand-launcher/style.css'

const launchScreenRef = ref()

const showLaunch = () => launchScreenRef.value?.show()
const hideLaunch = () => launchScreenRef.value?.hide()
</script>

Vue Plugin Installation

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import LaunchScreen from 'nand-launcher'

const app = createApp(App)
app.use(LaunchScreen) // Global registration
app.mount('#app')

📱 Browser Support

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Edge 79+
• ⚠️ IE 11 (requires polyfills)

🔗 Quick Links

• Install: npm install nand-launcher
• NPM: https://www.npmjs.com/package/nand-launcher
• Unicorn Studio: https://unicorn.studio/
• Documentation: https://nand-studios.com/launch-screen

🆘 Quick Troubleshooting

LaunchScreen doesn't appear?

<!-- Make sure you import both -->
<script setup>
import { LaunchScreen } from 'nand-launcher'
import 'nand-launcher/style.css'  // Don't forget this!
</script>

Hide scrolling text?

<LaunchScreen :show-scrolling-text="false" />

Need a different duration?

<LaunchScreen :duration="10000" /> <!-- 10 seconds -->

📄 License

MIT © NAND Studios

🎉 That's it! You're ready!

Just import, add one line, and you have a beautiful, professional launch screen! 🚀

*Made with ❤️ by NAND Studios - The most user-friendly launch screen component!