Test Space | Component Library | Script Repository
Interactive Component Collection
Curated collection of interactive React components with live demos and complete code examples
Experiment with new UI elements and features
Ready-to-copy code snippets and scripts
Visual effects and animations showcase
Carousels, forms, FAQs, and navigation
Video embeds and media components
Calendly and third-party integrations
Advanced form components and integrations
Builder capabilities and limitations
Copy-Ready Code:
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3
rounded-lg transition-all duration-300 transform
hover:scale-105">Button</button>
Description of the feature or service.
Eye-catching gradient background card.
Card with colored left border accent.
Hover me for animation!
Pulsing element
// Smooth scroll to any section
function scrollToSection(sectionId) {
document.getElementById(sectionId)
.scrollIntoView({ behavior: 'smooth'
});
}
// Usage: scrollToSection('section-id');
// Typewriter effect
function typeWriter(elementId, text, speed = 50) {
let i = 0;
const element = document.getElementById(elementId);
function type() {
if (i < text.length) {
element.innerHTML +=
text.charAt(i);
i++;
setTimeout(type, speed);
}
}
type();
}
// Simple parallax effect
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const parallax =
document.querySelector('.parallax');
const speed = scrolled * 0.5;
parallax.style.transform =
`translateY(${speed}px)`;
});
// Copy text to clipboard
function copyToClipboard(text) {
navigator.clipboard.writeText(text)
.then(() => alert('Copied!'))
.catch(err => console.error('Error:',
err));
}
// Usage: copyToClipboard('Hello World');
.glassmorphism {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.floating {
animation: float 3s ease-in-out infinite;
}
.gradient-text {
background: linear-gradient(45deg, #ff6b6b,
#4ecdc4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: bold;
}
.glow-hover {
transition: all 0.3s ease;
}
.glow-hover:hover {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
transform: scale(1.05);
}
// Custom cursor that follows mouse
const cursor = document.createElement('div');
cursor.className = 'custom-cursor';
cursor.style.cssText = `
position: fixed; width: 20px; height: 20px;
background: radial-gradient(circle, #ff6b6b,
#4ecdc4);
border-radius: 50%; pointer-events: none;
z-index: 9999; transition: transform 0.1s ease;
`;
document.body.appendChild(cursor);
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX - 10 + 'px';
cursor.style.top = e.clientY - 10 + 'px';
});
// Animated particle background
function createParticles() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = 'fixed';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.zIndex = '-1';
document.body.appendChild(canvas);
// Particle animation logic here...
}
All code snippets above are ready to copy and paste into your projects!
How to use: Click and drag to select code → Ctrl+C to copy → Paste into your project
Every visual effect, animation, and design technique available - with live examples
Rainbow Gradient
Sunset Colors
Ocean Waves
Pulsing Text
Bouncing Text
Scale on Hover
Blue Glow
Pink Glow
Green Glow
Frosted glass effect with backdrop blur
Sunset Gradient
Ocean Gradient
Bouncing container
Hover to scale
Hover for glow
Hover to lift
Hover to rotate
Continuous bounce
Continuous rotation
Heartbeat effect
Notification style
First layer
Second layer
Interactive card effect
All effects are copy-ready and work with Tailwind CSS classes!
All functional components with working examples and implementation code
Beautiful gradient background with content
Vibrant colors and smooth transitions
Fully responsive and touch-friendly
<div class="overflow-hidden rounded-xl">
<div class="flex transition-transform duration-300 ease-in-out gap-4" data-landingsite-carousel>
<div class="min-w-full bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg p-12" data-landingsite-carousel-item>
<h5>Slide 1</h5>
</div>
<div class="min-w-full bg-gradient-to-br from-pink-500 to-orange-500 rounded-lg p-12" data-landingsite-carousel-item>
<h5>Slide 2</h5>
</div>
</div>
</div>
<!-- Navigation -->
<button data-landingsite-carousel-controls-left>Previous</button>
<button data-landingsite-carousel-controls-right>Next</button>
<!-- Dots Navigation -->
<ul data-landingsite-carousel-controls-index>
<li class="h-5 w-5 rounded-full bg-[#C9CECD]"></li>
</ul>
<form data-landingsite-contact-form>
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="your@email.com" required>
<input type="text" name="subject" placeholder="Subject">
<textarea name="message" placeholder="Message" required></textarea>
<button type="submit">Send Message</button>
</form>
<div data-landingsite-faq>
<div data-landingsite-faq-item>
<button data-landingsite-faq-question>
<span>Question text</span>
<i class="fas fa-chevron-down"></i>
</button>
<div data-landingsite-faq-answer class="hidden">
<p>Answer content</p>
</div>
</div>
</div>
<!-- Mobile Menu Toggle -->
<button data-landingsite-mobile-menu-toggle>
<i class="fas fa-bars"></i>
</button>
<!-- Mobile Menu -->
<nav class="hidden" data-landingsite-mobile-menu>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
data-landingsite-contact-form
on <form>
name
attribute
name="email"
type="submit"
action
or
method
attributes
data-landingsite-carousel
on main container
data-landingsite-carousel-item
on each slide
data-landingsite-carousel-controls-left
on prev button
data-landingsite-carousel-controls-right
on next button
data-landingsite-carousel-controls-index
on dots container
data-landingsite-faq
on parent container
data-landingsite-faq-item
on each FAQ item
data-landingsite-faq-question
on question element
data-landingsite-faq-answer
on answer element
class="hidden"
on answer by default
data-landingsite-mobile-menu-toggle
on toggle button
data-landingsite-mobile-menu
on menu container
class="hidden"
on menu by default
Complete video integration, header & footer examples, and media handling
<div class="relative aspect-video rounded-xl overflow-hidden">
<iframe
class="w-full h-full"
src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</div>
Integración completa de video, ejemplos de encabezados y pies de página, y manejo de medios
<div class="relative aspect-video rounded-xl overflow-hidden">
<iframe
class="w-full h-full"
src="https://www.youtube.com/embed/TU_ID_DE_VIDEO"
title="Reproductor de video de YouTube"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</div>
Unlimited integrations, custom functionality, and third-party tools - your website, your rules
The Custom Plugin system allows you to add ANY third-party script, integration, or custom functionality to your website without limitations.
Think of it as a universal connector that lets you integrate tools that don't have official Landingsite.ai plugins yet.
From any third-party service
Head section or Body section
It's live immediately
Examples:
"Add Google Analytics to my website"
"Install Intercom chatbot"
"Add Calendly booking widget"
"Install Facebook Pixel"
"Add custom CSS for animations"
✅ Pro Tip: I can install most integrations automatically and handle the technical setup for you!
Add to "Content in <head>" section:
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
<!-- Facebook Pixel -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments);}
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
<style>
.custom-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
Add to "Scripts in <body>" section:
<script>
window.intercomSettings = {
app_id: "YOUR_APP_ID"
};
</script>
<script>
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/YOUR_APP_ID';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
</script>
<!-- Calendly inline widget -->
<div class="calendly-inline-widget" data-url="https://calendly.com/your-username" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Custom Chat Widget -->
<div id="chat-widget" style="position:fixed;bottom:20px;right:20px;z-index:1000;">
<button id="chat-toggle" style="background:#007bff;color:white;border:none;padding:15px;border-radius:50px;cursor:pointer;">
💬 Chat
</button>
</div>
<script>
document.getElementById('chat-toggle').addEventListener('click', function() {
// Your custom chat logic here
alert('Chat feature activated!');
});
</script>
You can integrate with virtually any API using JavaScript:
<script>
fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY')
.then(response => response.json())
.then(data => {
document.getElementById('weather').innerHTML =
`Temperature: ${data.main.temp}°C`;
});
</script>
Build your own chatbot with these approaches:
<script>
const responses = {
'hello': 'Hi! How can I help you?',
'pricing': 'Our plans start at $9/month',
'contact': 'Email us at hello@company.com'
};
function chatBot(input) {
const key = input.toLowerCase();
return responses[key] || 'Sorry, I don\'t understand.';
}
</script>
Tell me what you want to integrate and I'll handle the setup!
Go to Settings → Advanced Settings to add your custom code.
Email support@landingsite.ai for official plugin requests.
See how easy it is to embed booking systems! This is your actual Calendly link working live.
https://calendly.com/sites-hea/30min
<div class="calendly-inline-widget"
data-url="https://calendly.com/sites-hea/30min"
style="min-width:320px;height:700px;">
</div>
<script type="text/javascript"
src="https://assets.calendly.com/assets/external/widget.js"
async>
</script>
<iframe src="https://calendly.com/sites-hea/30min"
width="100%"
height="700"
frameborder="0">
</iframe>
Why it works: Simple iframe loads Calendly directly without JavaScript dependencies
<a href="https://calendly.com/sites-hea/30min"
target="_blank">
Book Appointment
</a>
Why it works: Opens Calendly in new tab - 100% reliable, no scripts needed
<button onclick="Calendly.initPopupWidget({
url: 'https://calendly.com/sites-hea/30min'
});">
Book Appointment
</button>
Why it works: Uses Calendly's popup API - loads on demand, more reliable than inline
Opens in new tab
Opens in overlay
Full booking experience embedded directly in your page
Opens in a popup overlay when button is clicked
Simple button that opens your Calendly page
Experience seamless form integration with Tally - a powerful form builder that works perfectly with your website.
Embed forms directly into your website with just a URL - no complex setup required.
Forms automatically adapt to any screen size and device for optimal user experience.
Track form submissions and user engagement with built-in analytics and reporting.
Complete technical capabilities, limitations, and features reference