🚀 nand-launcher v4.0.0

The ZERO-CODE LaunchScreen component for Vue.js 🎯

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

``vue



`

🎯 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

`bash
npm install nand-launcher
`

🎉 ULTRA-SIMPLE Usage

$3


`vue


`

$3


`vue

`

$3

`vue

`

$3

`vue


`

🦄 Using Unicorn Viewer Standalone

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

`vue



`

📋 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

$3


`vue
project-number="001"
display-mode="unicorn-center"
:duration="5000"
/>
`

$3

`vue
project-number="002"
display-mode="unicorn-background"
:duration="3000"
/>
`

$3

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

🦄 Unicorn Viewer Standalone

$3

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

$3

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

$3

`vue

`

🤖 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:


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

$3


`vue

`

$3

`vue

`

$3

`vue

`

$3

`vue

`

🚀 Key Features

$3

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

$3

`vue



`

$3

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

$3

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

$3

`vue

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

🔧 Advanced Options

$3

`vue


`

$3


`javascript
// 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

$3


`vue


`

$3

`vue

`

$3

`vue

``

📄 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!*