Girl in a jacket
Kings Ark Crest

The Kings Ark Mingle™

Decentralized • AI Powered • Universal

Estimated Trade: 0

Active Users: 0

Date: --

Time: --:--:--

Crest

The Kings Ark Mingle™

Decentralized • AI Powered • Universal

paulettebickfo | groups
The Kings Afk Mingle™ - Embed Code

🎮 The Kings Afk Mingle™

Complete Embed Code & Documentation

✨ Features Included

  • 💎 Heart Button - Cycles through 9 particle effects (hearts, rain, love, money, coins, Bitcoin, flowers, snow, stars) with rotation animations
  • 🎬 YouTube Button - Opens full YouTube clone with Live, Music, Movies, Shorts, thekingsark channel sections, voice search, and background music
  • 🌍 Globe Button - Opens thekingsark.world embed with animated neon frame
  • 🧠 AI Button - Opens ai.thekingsark.world embed with neon effects
  • 👑 Brands Button - Opens brands.thekingsark.world embed
  • 🎵 Music Player Button - Full music player with auto-next, navigation, and background play
  • 🎭 Pluto TV Button - Opens pluto.tv embed with fullscreen support
  • ✨ Neon Controls - Toggle and customize neon frame effects and intensity

📋 Full Embed Code

Copy and paste this code into your website where you want the interactive buttons to appear:

<!-- The Kings Afk Mingle™ Interactive Buttons --> <iframe src="YOUR_DEPLOYMENT_URL_HERE" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; border: none; background: transparent; pointer-events: none; z-index: 999999;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen; microphone" allowfullscreen allowtransparency="true" ></iframe> <style> /* Allow button interactions while keeping background transparent */ iframe[src*="YOUR_DEPLOYMENT_URL"] { pointer-events: auto !important; } </style>
⚠️ Important: Replace YOUR_DEPLOYMENT_URL_HERE with your actual Vercel deployment URL (e.g., https://your-app.vercel.app)
🔑 YouTube API Setup: Add your YouTube API key as an environment variable: YOUTUBE_API_KEY (without NEXT_PUBLIC prefix) in your Vercel project settings to enable real YouTube data fetching.

🎨 Alternative: Positioned Embed

If you want the buttons to appear in a specific location instead of fixed position:

<!-- Positioned Embed Version --> <div style="position: relative; width: 100%; height: 600px;"> <iframe src="YOUR_DEPLOYMENT_URL_HERE" style="width: 100%; height: 100%; border: none; background: transparent;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen; microphone" allowfullscreen allowtransparency="true" ></iframe> </div>

🚀 Deployment Instructions

  1. Click the "Publish" button in v0 to deploy to Vercel
  2. Add your YouTube API key in Vercel environment variables: YOUTUBE_API_KEY
  3. Copy your deployment URL (e.g., https://your-app.vercel.app)
  4. Replace YOUR_DEPLOYMENT_URL_HERE in the embed code above
  5. Paste the embed code into your website's HTML
  6. Test all buttons to ensure they work correctly

🎯 Button Functions

  • Heart (💎): Click to cycle through 9 particle effects with rotating animations. Each click changes the falling animation style. Particles stay off until clicked.
  • YouTube (🎬): Opens The Kings Afk Mingle™ YouTube clone with:
    • Featured Content carousel with auto-slide every 5 seconds
    • Live Now section with blinking LIVE indicators
    • YouTube Music section with auto-sliding content
    • Movies section with auto-sliding content
    • Shorts section with auto-sliding content
    • thekingsark Channel section with all videos auto-sliding
    • Voice search capability (click microphone icon)
    • Dark/Light/Glass mode toggle
    • Profile icon links to kingsideaconnections.org/welcome
    • Video player with navigation buttons (previous/next)
    • Auto-play next video feature
    • Play in background button to continue watching while browsing
    • Return to home button when playing videos
    • Mute button for background music (bottom right)
    • Neon scrollbars on all pages
    • Responsive video player that fits screen perfectly
  • Globe (🌍): Opens thekingsark.world in a modal with animated neon frame, new tab, close, and fullscreen buttons at top right.
  • AI (🧠): Opens ai.thekingsark.world with neon effects and fullscreen controls at top right.
  • Brands (👑): Opens brands.thekingsark.world with animated neon frame and controls at top right.
  • Music Player (🎵): Full-featured music player with:
    • 8 preloaded songs with auto-slider
    • Play, pause, skip forward, skip back controls
    • Shuffle and repeat modes
    • Volume control with mute button
    • Progress bar with seek functionality
    • Auto-play next song when current ends
    • Play in background button to continue music while browsing
    • Return to music home button
    • Voice search for music
    • Minimize/maximize controls
  • Pluto TV (🎭): Opens pluto.tv embed with fullscreen support, neon frame, and "Open in new tab" button that opens kingsideaconnections.org/Ark-Connect.
  • Neon (✨): Opens control panel to toggle neon effects on/off, change color schemes, and adjust intensity (0-100%).

💡 Neon Effects

The neon controls button allows you to customize the visual effects on all modals:

  • Rainbow Pulse: Cycles through all colors (pink → cyan → gold → purple)
  • Blue Cyan: Cool ocean vibes with pulsing blue and cyan
  • Pink Purple: Vibrant neon aesthetic with pink and purple
  • Gold Orange: Warm sunset glow with gold and orange
  • Green Teal: Matrix-style effects with green and teal
  • Intensity Slider: Adjust glow intensity from 0% to 100%
  • Toggle On/Off: Completely disable neon effects if desired

🎬 YouTube Features

The YouTube clone includes advanced features powered by YouTube Data API v3:

  • Real YouTube Data: Fetches actual trending videos, live streams, music, movies, shorts, and thekingsark channel videos
  • Auto-Sliding Carousels: All content sections auto-scroll every 5 seconds
  • Voice Search: Click the microphone icon to search using your voice
  • Blinking Menu: Mobile menu button has a pulsing animation
  • Dark/Light/Glass Mode: Toggle between themes with smooth transitions
  • Video Player: Embedded YouTube player with navigation controls
  • Auto-Play Next: Automatically plays the next video in the queue
  • Play in Background: Continue watching while browsing other sections
  • Neon Scrollbars: Vibrant animated scrollbars on all pages
  • Responsive Design: Adapts perfectly to all screen sizes
  • Background Music: Continues playing when YouTube modal is closed

🎵 Music Player Features

The music player is a full-featured audio player with:

  • Auto-Play Next: Automatically plays the next song when current ends
  • Navigation Controls: Previous and next buttons to skip songs
  • Shuffle Mode: Randomize playback order
  • Repeat Mode: Loop current song
  • Volume Control: Adjust volume with slider and mute button
  • Progress Bar: Seek to any position in the song
  • Play in Background: Continue listening while using other features
  • Return Home: Go back to music library from player
  • Auto-Sliding Carousel: Music library auto-scrolls every 4 seconds
  • Voice Search: Search for music using voice commands

🔧 Customization

You can customize various aspects of the embed:

/* Adjust button layering */ z-index: 999999; /* Change button position */ position: fixed; /* or absolute, relative */ right: 12px; /* buttons appear on right side */ /* Adjust transparency */ background: transparent; /* keeps it see-through */ /* Button size */ --orb-size: 32px; /* smaller buttons */

📱 Mobile Responsive

All buttons and modals are fully responsive and work perfectly on mobile devices:

  • Touch-optimized button sizes (32px)
  • Glass morphism effects adapt to screen size
  • Modals scale to 95% viewport on all devices
  • Swipe-friendly carousels
  • Mobile-optimized YouTube interface
  • Responsive video player that fits screen
💎 Pro Tip: The transparent background allows the buttons to overlay perfectly on any website design. The particle effects will appear behind your content while the buttons remain interactive. All modals feature animated neon frames that pulse with different colors! The neon frame has the lowest z-index and never blocks interactions with your site.

🎉 You're All Set!

Your interactive button system is ready to embed. All features are fully functional including:

  • ✅ Animated particle effects with 9 different styles and rotation (off by default)
  • ✅ Full YouTube clone with real API integration
  • ✅ Live channels with blinking LIVE indicators
  • ✅ YouTube Music, Movies, and Shorts sections with auto-slide
  • ✅ thekingsark Channel section with all videos auto-sliding
  • ✅ Voice search with microphone support
  • ✅ Dark/Light/Glass mode toggle
  • ✅ Profile icon links to kingsideaconnections.org/welcome
  • ✅ Video player with navigation buttons (previous/next)
  • ✅ Auto-play next video feature
  • ✅ Play in background for YouTube videos
  • ✅ Return to home button when playing videos
  • ✅ Full music player with auto-next and navigation
  • ✅ Play in background for music
  • ✅ Return to music home button
  • ✅ Multiple website embeds with animated neon frames
  • ✅ Pluto TV integration with Ark-Connect link
  • ✅ Customizable neon effects with 5 color schemes
  • ✅ Adjustable neon intensity (0-100%)
  • ✅ Fullscreen support for all modals
  • ✅ New tab, close, and fullscreen buttons at top right (0px)
  • ✅ Background music that continues when YouTube is closed
  • ✅ Glass morphism button design with colored icon glow effects
  • ✅ 100% transparent background for seamless integration
  • ✅ Auto-sliding content carousels (5 seconds for YouTube, 4 seconds for music)
  • ✅ Blinking mobile menu button
  • ✅ Neon scrollbars on all pages
  • ✅ Responsive video player that fits screen perfectly
  • ✅ Buttons on top of neon frame (never blocked)

Made with ✨ magic by v0