:fallback-image="'/images/fallback.jpg'"
width="800px"
height="600px"
:autoplay="true"
:loop="true"
/>
A customizable, animated launch screen component with Unicorn Studio 3D animations support
npm install nand-launcherThe ZERO-CODE LaunchScreen component for Vue.js 🎯
Just import, add a single line, and you're done! ✨
``vue
`
- ✨ 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
`bash`
npm install nand-launcher
vue
`$3
`vue
`$3
`vue
`$3
`vue
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"
/>
`🦄 Using Unicorn Viewer Standalone
Want just the 3D animation without the loading screen? No problem!
`vue
:project-path="'/animations/awesome.json'"
:fallback-image="'/images/fallback.jpg'"
width="800px"
height="600px"
:autoplay="true"
:loop="true"
/>
`📋 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
:project-path="'/animations/background.json'"
width="100vw"
height="100vh"
:autoplay="true"
:loop="true"
/>
`🤖 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:
project-number="PROJECT-123"
:duration="3000"
display-mode="unicorn-center"
:show-scrolling-text="true"
/>
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
project-number="CORP2024"
display-mode="small-image"
:small-image-url="'/assets/brand-logo.svg'"
:duration="4000"
:show-scrolling-text="false"
/>
...
`$3
`vue
project-number="PORTFOLIO"
display-mode="unicorn-background"
:duration="5000"
:unicorn-project-path="'/assets/creative-showcase.json'"
:fallback-image="'/assets/portfolio-hero.jpg'"
/>
...
...
`$3
`vue
project-number="SaaS-APP"
display-mode="unicorn-center"
:duration="2000"
:show-scrolling-text="true"
/>
`$3
`vue
Amazing 3D Animation
:project-path="'/assets/product-demo.json'"
:fallback-image="'/assets/product.jpg'"
width="600px"
height="400px"
:autoplay="true"
:loop="true"
/>
Watch our product in action!
`🚀 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
ref="launchScreenRef"
:duration="5000"
/>
`$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
``MIT © NAND Studios
---
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!*