lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
141 lines (125 loc) • 5.76 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Marquee</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@3.0.0/src/lightswind.css">
<link rel="stylesheet" href="../../../../node_modules/lightwind/tailwind.css">
<!-- <style>
/* Marquee animation for smooth continuous scrolling from right to left */
@keyframes marquee-right-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.GlassMarqueeContainer {
display: flex;
width: 200%;
gap: 20px;
white-space: nowrap;
align-items: center;
animation: marquee-right-left 12s linear infinite;
}
.GlassMarqueeContainer:hover {
animation-play-state: paused;
}
.GlassMarqueeCard {
flex-shrink: 0;
transition: transform 0.3s, box-shadow 0.3s, brightness 0.3s;
}
.GlassMarqueeCard:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.4);
}
.GlassMarqueeEffect {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.15);
}
</style> -->
</head>
<body class="">
<div
class="flex items-center justify-center w-screen min-h-screen bg-white dark:bg-black overflow-hidden font-primarylw">
<!-- Marquee Wrapper -->
<div id="marquee-container" class="GlassMarqueeContainer text-gray-800 dark:text-gray-100"></div>
</div>
<script>
// JSON Data for the Cards with Indian names and Lightwind feedback
const cardData = [
{
name: 'Rajesh',
username: '@rajesh',
avatar: 'https://codewithmuhilan.com/Extra-Assets/lightwind-logo.png',
quote: "Lightwind has completely transformed my design workflow. The smooth animations and clean UI are incredible!"
},
{
name: 'Aishwarya',
username: '@aishwarya',
avatar: 'https://codewithmuhilan.com/Extra-Assets/lightwind-logo.png',
quote: "The user experience is top-notch. I love how everything feels so intuitive and responsive. Truly a game changer."
},
{
name: 'Vikram',
username: '@vikram',
avatar: 'https://codewithmuhilan.com/Extra-Assets/lightwind-logo.png',
quote: "I’m blown away by the sleek design and smooth transitions. Lightwind has set a new standard for web design!"
},
{
name: 'Priya',
username: '@priya',
avatar: 'https://codewithmuhilan.com/Extra-Assets/lightwind-logo.png',
quote: "A beautiful design experience. I can’t imagine working without Lightwind now. It’s so smooth and aesthetically pleasing."
},
{
name: 'Amit',
username: '@amit',
avatar: 'https://codewithmuhilan.com/Extra-Assets/lightwind-logo.png',
quote: "Lightwind has taken my projects to the next level. The responsiveness and performance are unbeatable!"
},
{
name: 'Neha',
username: '@neha',
avatar: 'https://codewithmuhilan.com/Extra-Assets/lightwind-logo.png',
quote: "Such a simple yet powerful tool. The design elements and animations are perfect for creating a premium feel!"
},
{
name: 'Suresh',
username: '@suresh',
avatar: 'https://codewithmuhilan.com/Extra-Assets/lightwind-logo.png',
quote: "I’m obsessed with how modern and clean the design is. Lightwind makes it so easy to create beautiful websites."
}
];
// Function to generate a card's HTML
function createCardHTML({ name, username, avatar, quote }) {
return [
'<figure class="GlassMarqueeCard w-72 h-44 cursor-pointer overflow-hidden rounded-xl p-5 backdrop-blur-lg GlassMarqueeEffect border border-black/30 dark:border-white/10 shadow-lg hover:brightness-110 hover:border-white/40 transition-all duration-300 dark:hover:brightness-110 dark:hover:border-white/40">',
'<div class="flex items-center gap-4">',
'<img class="rounded-full border-2 border-gray-500 dark:border-gray-100 w-10 h-10" alt="' + name + '" src="' + avatar + '">',
'<div class="flex flex-col">',
'<figcaption class="text-md font-bold text-black dark:text-gray-100">' + name + '</figcaption>',
'<p class="text-sm font-medium text-gray-700 dark:text-gray-400">' + username + '</p>',
'</div>',
'</div>',
'<blockquote class="mt-3 text-sm text-gray-700 dark:text-gray-300 line-clamp-3 whitespace-normal italic">',
'“' + quote + '”',
'</blockquote>',
'</figure>'
].join('');
}
// Get the marquee container
const marqueeContainer = document.getElementById('marquee-container');
// Map the cardData and append to the marquee container
function addCards() {
const cardsHTML = cardData.map(createCardHTML).join('');
marqueeContainer.innerHTML = cardsHTML + cardsHTML; // Add cards twice to create seamless effect
}
// Call addCards to initially load the cards
addCards();
</script>
</body>
</html>