Hugging Face's logo

Spaces:
vikashpatel
/
newbeam
Running

App Files Community
newbeam / index.html
vikashpatel's picture
vikashpatel
Add 3 files
dae3dc9 verified
raw
history blame contribute delete
68.6 kB
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BeamGen - Animated Beam Generator</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
dark: {
800: '#1e293b',
900: '#0f172a',
}
},
animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'float': 'float 6s ease-in-out infinite',
'spin-slow': 'spin 3s linear infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
}
}
}
}
</script>
<style>
.gradient-beam {
position: relative;
height: 2px;
overflow: hidden;
}
.gradient-beam::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
animation: beam-animation 2s ease-in-out infinite;
}
@keyframes beam-animation {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.canvas-container {
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
}
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
.tab-active {
position: relative;
}
.tab-active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: #0ea5e9;
}
.dot-grid {
background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 10px 10px;
}
.draggable {
cursor: move;
touch-action: none;
user-select: none;
}
#beamPath {
stroke-linecap: round;
}
.color-preview {
transition: all 0.2s ease;
}
.color-preview:hover {
transform: scale(1.1);
}
</style>
</head>
<body class="bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-200 transition-colors duration-200">
<!-- Navigation -->
<nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-dark-800/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-white">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</div>
<span class="ml-2 text-xl font-bold dark:text-white">BeamGen</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-primary-500 text-white">Editor</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700">Gallery</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700">Docs</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700">Pricing</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button type="button" class="p-1 rounded-full text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none">
<span class="sr-only">Dark mode</span>
<i class="fas fa-moon" id="dark-mode-toggle"></i>
</button>
<button class="ml-4 px-4 py-2 rounded-md text-sm font-medium border border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white transition-colors">
Sign in
</button>
<button class="ml-2 px-4 py-2 rounded-md text-sm font-medium bg-primary-500 text-white hover:bg-primary-600 transition-colors">
Sign up
</button>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="pt-16 pb-12 flex flex-col h-screen">
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar -->
<div class="w-64 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-800 overflow-y-auto custom-scrollbar">
<div class="p-4">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold">Beam Properties</h2>
<button class="text-xs text-primary-500 hover:text-primary-600" id="reset-btn">Reset</button>
</div>
<div class="space-y-6">
<!-- Path Type -->
<div>
<h3 class="text-sm font-medium mb-2">Path Type</h3>
<div class="grid grid-cols-3 gap-2" id="path-type-buttons">
<button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center path-type-btn" data-type="straight">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16" />
</svg>
<span class="text-xs mt-1">Straight</span>
</button>
<button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center path-type-btn" data-type="curved">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5l7 7-7 7" />
</svg>
<span class="text-xs mt-1">Curved</span>
</button>
<button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center path-type-btn" data-type="zigzag">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14m7-7H5" />
</svg>
<span class="text-xs mt-1">Zigzag</span>
</button>
<button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center path-type-btn" data-type="circular">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="text-xs mt-1">Circular</span>
</button>
<button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center path-type-btn" data-type="spline">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
</svg>
<span class="text-xs mt-1">Spline</span>
</button>
<button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center path-type-btn" data-type="3d">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
</svg>
<span class="text-xs mt-1">3D</span>
</button>
</div>
</div>
<!-- Color Settings -->
<div>
<h3 class="text-sm font-medium mb-2">Color</h3>
<div class="flex space-x-2 mb-2" id="color-type-buttons">
<button class="px-3 py-1 text-xs rounded-md bg-gray-100 dark:bg-gray-700 color-type-btn" data-type="solid">Solid</button>
<button class="px-3 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600 color-type-btn" data-type="gradient">Gradient</button>
<button class="px-3 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600 color-type-btn" data-type="animated">Animated</button>
</div>
<div class="flex items-center space-x-2">
<div class="w-8 h-8 rounded-md bg-gradient-to-r from-purple-500 to-pink-500 cursor-pointer color-preview" id="color-picker-btn"></div>
<input type="text" value="#0ea5e9" class="flex-1 text-xs px-2 py-1 border rounded-md dark:bg-gray-700" id="color-input">
</div>
<div class="mt-2 hidden" id="gradient-controls">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 rounded-md bg-gradient-to-r from-purple-500 to-pink-500 cursor-pointer color-preview" id="gradient-color-picker-btn"></div>
<input type="text" value="#ec4899" class="flex-1 text-xs px-2 py-1 border rounded-md dark:bg-gray-700" id="gradient-color-input">
</div>
<div class="mt-2">
<div class="flex justify-between items-center mb-1">
<span class="text-xs">Direction</span>
<span class="text-xs" id="gradient-direction-value">90°</span>
</div>
<input type="range" min="0" max="360" value="90" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700" id="gradient-direction">
</div>
</div>
</div>
<!-- Width Slider -->
<div>
<div class="flex justify-between items-center mb-1">
<h3 class="text-sm font-medium">Width</h3>
<span class="text-xs" id="width-value">4px</span>
</div>
<input type="range" min="1" max="20" value="4" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700" id="width-slider">
</div>
<!-- Opacity Slider -->
<div>
<div class="flex justify-between items-center mb-1">
<h3 class="text-sm font-medium">Opacity</h3>
<span class="text-xs" id="opacity-value">80%</span>
</div>
<input type="range" min="0" max="100" value="80" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700" id="opacity-slider">
</div>
<!-- Animation Settings -->
<div>
<h3 class="text-sm font-medium mb-2">Animation</h3>
<div class="grid grid-cols-2 gap-2 mb-2" id="animation-trigger-buttons">
<button class="px-2 py-1 text-xs rounded-md bg-gray-100 dark:bg-gray-700 animation-trigger-btn" data-trigger="load">On Load</button>
<button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600 animation-trigger-btn" data-trigger="hover">On Hover</button>
<button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600 animation-trigger-btn" data-trigger="click">On Click</button>
<button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600 animation-trigger-btn" data-trigger="scroll">On Scroll</button>
</div>
<div class="flex justify-between items-center mb-1">
<span class="text-xs">Speed</span>
<span class="text-xs" id="speed-value">Medium</span>
</div>
<input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700" id="speed-slider">
</div>
<!-- Effects -->
<div>
<h3 class="text-sm font-medium mb-2">Effects</h3>
<div class="space-y-2">
<label class="flex items-center space-x-2">
<input type="checkbox" class="rounded text-primary-500 effect-checkbox" data-effect="pulsing">
<span class="text-sm">Pulsing</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" class="rounded text-primary-500 effect-checkbox" data-effect="sparkling">
<span class="text-sm">Sparkling</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" class="rounded text-primary-500 effect-checkbox" data-effect="glow" checked>
<span class="text-sm">Glow</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" class="rounded text-primary-500 effect-checkbox" data-effect="particles">
<span class="text-sm">Particles</span>
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Main Canvas -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Toolbar -->
<div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-800 p-2 flex items-center justify-between">
<div class="flex space-x-2">
<button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</button>
<button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</button>
<div class="border-l border-gray-200 dark:border-gray-700 mx-2"></div>
<button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</button>
<button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
</svg>
</button>
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 text-sm rounded-md border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700" id="export-btn">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Export
</button>
<button class="px-3 py-1 text-sm rounded-md bg-primary-500 text-white hover:bg-primary-600" id="save-btn">
Save
</button>
</div>
</div>
<!-- Canvas Area -->
<div class="flex-1 overflow-auto canvas-container dot-grid relative" id="canvas">
<svg width="100%" height="100%" class="absolute inset-0">
<path id="beamPath" stroke="url(#beamGradient)" fill="none" stroke-width="4" stroke-opacity="0.8" filter="url(#glowFilter)"></path>
<defs>
<linearGradient id="beamGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#0ea5e9" />
<stop offset="100%" stop-color="#0ea5e9" />
</linearGradient>
<filter id="glowFilter" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
</svg>
<!-- Draggable Points -->
<div class="absolute w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center cursor-move shadow-lg draggable" id="startPoint" style="left: 25%; top: 40%;">
<div class="w-3 h-3 bg-white rounded-full"></div>
</div>
<div class="absolute w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center cursor-move shadow-lg draggable" id="endPoint" style="left: 75%; top: 60%;">
<div class="w-3 h-3 bg-white rounded-full"></div>
</div>
<div class="absolute w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center cursor-move shadow-lg draggable control-point" id="controlPoint1" style="left: 40%; top: 30%;">
<div class="w-2 h-2 bg-white rounded-full"></div>
</div>
<div class="absolute w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center cursor-move shadow-lg draggable control-point" id="controlPoint2" style="left: 60%; top: 70%;">
<div class="w-2 h-2 bg-white rounded-full"></div>
</div>
</div>
<!-- Properties Panel -->
<div class="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-800 p-4">
<div class="flex border-b border-gray-200 dark:border-gray-700">
<button class="px-4 py-2 text-sm font-medium tab-active" data-tab="beam">Beam</button>
<button class="px-4 py-2 text-sm font-medium" data-tab="path">Path</button>
<button class="px-4 py-2 text-sm font-medium" data-tab="effects">Effects</button>
<button class="px-4 py-2 text-sm font-medium" data-tab="export">Export</button>
</div>
<div class="mt-4 grid grid-cols-2 gap-4" id="beam-tab">
<div>
<label class="block text-sm font-medium mb-1">Direction</label>
<select class="w-full text-sm border rounded-md px-3 py-2 dark:bg-gray-700" id="direction-select">
<option value="forward">Forward</option>
<option value="reverse">Reverse</option>
<option value="bidirectional">Bidirectional</option>
<option value="pingpong">Ping Pong</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1">Easing</label>
<select class="w-full text-sm border rounded-md px-3 py-2 dark:bg-gray-700" id="easing-select">
<option value="linear">Linear</option>
<option value="ease-in">Ease In</option>
<option value="ease-out">Ease Out</option>
<option value="ease-in-out">Ease In Out</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1">Duration (ms)</label>
<input type="number" value="2000" class="w-full text-sm border rounded-md px-3 py-2 dark:bg-gray-700" id="duration-input">
</div>
<div>
<label class="block text-sm font-medium mb-1">Delay (ms)</label>
<input type="number" value="0" class="w-full text-sm border rounded-md px-3 py-2 dark:bg-gray-700" id="delay-input">
</div>
</div>
</div>
</div>
<!-- Export Panel -->
<div class="w-80 flex-shrink-0 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-800 overflow-y-auto custom-scrollbar" id="export-panel">
<div class="p-4">
<h2 class="text-lg font-semibold mb-4">Export Settings</h2>
<div class="space-y-6">
<!-- Framework Selection -->
<div>
<h3 class="text-sm font-medium mb-2">Framework</h3>
<div class="grid grid-cols-2 gap-2" id="framework-buttons">
<button class="px-2 py-2 text-xs rounded-md bg-gray-100 dark:bg-gray-700 flex flex-col items-center framework-btn" data-framework="react">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
<span class="mt-1">React</span>
</button>
<button class="px-2 py-2 text-xs rounded-md border border-gray-200 dark:border-gray-600 flex flex-col items-center framework-btn" data-framework="vue">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
<span class="mt-1">Vue</span>
</button>
<button class="px-2 py-2 text-xs rounded-md border border-gray-200 dark:border-gray-600 flex flex-col items-center framework-btn" data-framework="svelte">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
<span class="mt-1">Svelte</span>
</button>
<button class="px-2 py-2 text-xs rounded-md border border-gray-200 dark:border-gray-600 flex flex-col items-center framework-btn" data-framework="js">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
<span class="mt-1">JS</span>
</button>
</div>
</div>
<!-- Export Format -->
<div>
<h3 class="text-sm font-medium mb-2">Format</h3>
<div class="grid grid-cols-3 gap-2" id="format-buttons">
<button class="px-2 py-1 text-xs rounded-md bg-gray-100 dark:bg-gray-700 format-btn" data-format="code">Code</button>
<button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600 format-btn" data-format="svg">SVG</button>
<button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600 format-btn" data-format="css">CSS</button>
<button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600 format-btn" data-format="gif">GIF</button>
<button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600 format-btn" data-format="mp4">MP4</button>
<button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600 format-btn" data-format="webm">WebM</button>
</div>
</div>
<!-- Code Preview -->
<div>
<h3 class="text-sm font-medium mb-2">Code Preview</h3>
<div class="bg-gray-800 text-gray-200 p-3 rounded-md text-xs font-mono overflow-x-auto" id="code-preview">
<pre><code id="code-content">import React from 'react';
import './Beam.css';
const AnimatedBeam = () => {
return (
&lt;div className="beam-container"&gt;
&lt;div className="gradient-beam" /&gt;
&lt;/div&gt;
);
};
export default AnimatedBeam;</code></pre>
</div>
<button class="mt-2 w-full py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 flex items-center justify-center" id="copy-code-btn">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
</svg>
Copy Code
</button>
</div>
<!-- Download Options -->
<div>
<h3 class="text-sm font-medium mb-2">Download</h3>
<div class="space-y-2">
<button class="w-full py-2 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center" id="download-svg-btn">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Download SVG
</button>
<button class="w-full py-2 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center" id="download-gif-btn">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Download GIF
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// State management
const state = {
pathType: 'curved',
colorType: 'solid',
color: '#0ea5e9',
gradientColor: '#ec4899',
gradientDirection: 90,
width: 4,
opacity: 80,
animationTrigger: 'load',
animationSpeed: 50,
effects: {
pulsing: false,
sparkling: false,
glow: true,
particles: false
},
direction: 'forward',
easing: 'linear',
duration: 2000,
delay: 0,
framework: 'react',
exportFormat: 'code',
points: {
start: { x: 25, y: 40 },
end: { x: 75, y: 60 },
control1: { x: 40, y: 30 },
control2: { x: 60, y: 70 }
}
};
// DOM elements
const elements = {
beamPath: document.getElementById('beamPath'),
beamGradient: document.querySelector('#beamGradient'),
glowFilter: document.querySelector('#glowFilter'),
startPoint: document.getElementById('startPoint'),
endPoint: document.getElementById('endPoint'),
controlPoint1: document.getElementById('controlPoint1'),
controlPoint2: document.getElementById('controlPoint2'),
canvas: document.getElementById('canvas'),
exportPanel: document.getElementById('export-panel'),
codePreview: document.getElementById('code-preview'),
codeContent: document.getElementById('code-content'),
gradientControls: document.getElementById('gradient-controls'),
colorInput: document.getElementById('color-input'),
gradientColorInput: document.getElementById('gradient-color-input'),
gradientDirection: document.getElementById('gradient-direction'),
gradientDirectionValue: document.getElementById('gradient-direction-value'),
widthSlider: document.getElementById('width-slider'),
widthValue: document.getElementById('width-value'),
opacitySlider: document.getElementById('opacity-slider'),
opacityValue: document.getElementById('opacity-value'),
speedSlider: document.getElementById('speed-slider'),
speedValue: document.getElementById('speed-value'),
directionSelect: document.getElementById('direction-select'),
easingSelect: document.getElementById('easing-select'),
durationInput: document.getElementById('duration-input'),
delayInput: document.getElementById('delay-input'),
colorPickerBtn: document.getElementById('color-picker-btn'),
gradientColorPickerBtn: document.getElementById('gradient-color-picker-btn'),
colorPreview: document.getElementById('color-picker-btn'),
gradientColorPreview: document.getElementById('gradient-color-picker-btn')
};
// Initialize the app
function init() {
setupEventListeners();
updateBeam();
updateUI();
updateCodePreview();
}
// Set up event listeners
function setupEventListeners() {
// Path type buttons
document.querySelectorAll('.path-type-btn').forEach(btn => {
btn.addEventListener('click', () => {
state.pathType = btn.dataset.type;
updateBeam();
updateUI();
});
});
// Color type buttons
document.querySelectorAll('.color-type-btn').forEach(btn => {
btn.addEventListener('click', () => {
state.colorType = btn.dataset.type;
updateBeam();
updateUI();
});
});
// Animation trigger buttons
document.querySelectorAll('.animation-trigger-btn').forEach(btn => {
btn.addEventListener('click', () => {
state.animationTrigger = btn.dataset.trigger;
updateBeam();
updateUI();
});
});
// Effect checkboxes
document.querySelectorAll('.effect-checkbox').forEach(checkbox => {
checkbox.addEventListener('change', () => {
state.effects[checkbox.dataset.effect] = checkbox.checked;
updateBeam();
updateUI();
});
});
// Framework buttons
document.querySelectorAll('.framework-btn').forEach(btn => {
btn.addEventListener('click', () => {
state.framework = btn.dataset.framework;
updateUI();
updateCodePreview();
});
});
// Format buttons
document.querySelectorAll('.format-btn').forEach(btn => {
btn.addEventListener('click', () => {
state.exportFormat = btn.dataset.format;
updateUI();
updateCodePreview();
});
});
// Input fields
elements.colorInput.addEventListener('input', () => {
state.color = elements.colorInput.value;
updateBeam();
updateUI();
});
elements.gradientColorInput.addEventListener('input', () => {
state.gradientColor = elements.gradientColorInput.value;
updateBeam();
updateUI();
});
elements.gradientDirection.addEventListener('input', () => {
state.gradientDirection = elements.gradientDirection.value;
updateBeam();
updateUI();
});
elements.widthSlider.addEventListener('input', () => {
state.width = elements.widthSlider.value;
updateBeam();
updateUI();
});
elements.opacitySlider.addEventListener('input', () => {
state.opacity = elements.opacitySlider.value;
updateBeam();
updateUI();
});
elements.speedSlider.addEventListener('input', () => {
state.animationSpeed = elements.speedSlider.value;
updateBeam();
updateUI();
});
elements.directionSelect.addEventListener('change', () => {
state.direction = elements.directionSelect.value;
updateBeam();
updateUI();
});
elements.easingSelect.addEventListener('change', () => {
state.easing = elements.easingSelect.value;
updateBeam();
updateUI();
});
elements.durationInput.addEventListener('input', () => {
state.duration = elements.durationInput.value;
updateBeam();
updateUI();
});
elements.delayInput.addEventListener('input', () => {
state.delay = elements.delayInput.value;
updateBeam();
updateUI();
});
// Color picker buttons
elements.colorPickerBtn.addEventListener('click', () => {
elements.colorInput.value = '#38bdf8';
state.color = '#38bdf8';
updateBeam();
updateUI();
});
elements.gradientColorPickerBtn.addEventListener('click', () => {
elements.gradientColorInput.value = '#ec4899';
state.gradientColor = '#ec4899';
updateBeam();
updateUI();
});
// Copy code button
document.getElementById('copy-code-btn').addEventListener('click', () => {
navigator.clipboard.writeText(elements.codeContent.textContent);
alert('Code copied to clipboard!');
});
// Export buttons
document.getElementById('export-btn').addEventListener('click', () => {
elements.exportPanel.classList.toggle('hidden');
});
// Download buttons
document.getElementById('download-svg-btn').addEventListener('click', () => {
alert('SVG download would start here in a real implementation');
});
document.getElementById('download-gif-btn').addEventListener('click', () => {
alert('GIF download would start here in a real implementation');
});
// Reset button
document.getElementById('reset-btn').addEventListener('click', () => {
resetToDefaults();
updateBeam();
updateUI();
});
// Tab buttons
document.querySelectorAll('[data-tab]').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('[data-tab]').forEach(t => t.classList.remove('tab-active'));
tab.classList.add('tab-active');
});
});
// Dark mode toggle
document.getElementById('dark-mode-toggle').addEventListener('click', toggleDarkMode);
// Draggable points
setupDraggablePoints();
}
// Set up draggable points
function setupDraggablePoints() {
const draggables = document.querySelectorAll('.draggable');
draggables.forEach(draggable => {
let isDragging = false;
let offsetX, offsetY;
draggable.addEventListener('mousedown', (e) => {
isDragging = true;
const rect = draggable.getBoundingClientRect();
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
draggable.style.zIndex = '100';
e.preventDefault();
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const canvasRect = elements.canvas.getBoundingClientRect();
const maxX = canvasRect.width - draggable.offsetWidth;
const maxY = canvasRect.height - draggable.offsetHeight;
let x = e.clientX - canvasRect.left - offsetX;
let y = e.clientY - canvasRect.top - offsetY;
// Constrain to canvas
x = Math.max(0, Math.min(x, maxX));
y = Math.max(0, Math.min(y, maxY));
// Update position
draggable.style.left = `${(x / canvasRect.width) * 100}%`;
draggable.style.top = `${(y / canvasRect.height) * 100}%`;
// Update state
const pointId = draggable.id.replace('Point', '').toLowerCase();
if (pointId === 'start') {
state.points.start.x = (x / canvasRect.width) * 100;
state.points.start.y = (y / canvasRect.height) * 100;
} else if (pointId === 'end') {
state.points.end.x = (x / canvasRect.width) * 100;
state.points.end.y = (y / canvasRect.height) * 100;
} else if (pointId === 'control1') {
state.points.control1.x = (x / canvasRect.width) * 100;
state.points.control1.y = (y / canvasRect.height) * 100;
} else if (pointId === 'control2') {
state.points.control2.x = (x / canvasRect.width) * 100;
state.points.control2.y = (y / canvasRect.height) * 100;
}
updateBeam();
});
document.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
draggable.style.zIndex = '';
}
});
});
}
// Update the beam based on current state
function updateBeam() {
// Update path
let pathData;
const canvasRect = elements.canvas.getBoundingClientRect();
const startX = (state.points.start.x / 100) * canvasRect.width;
const startY = (state.points.start.y / 100) * canvasRect.height;
const endX = (state.points.end.x / 100) * canvasRect.width;
const endY = (state.points.end.y / 100) * canvasRect.height;
const control1X = (state.points.control1.x / 100) * canvasRect.width;
const control1Y = (state.points.control1.y / 100) * canvasRect.height;
const control2X = (state.points.control2.x / 100) * canvasRect.width;
const control2Y = (state.points.control2.y / 100) * canvasRect.height;
switch (state.pathType) {
case 'straight':
pathData = `M${startX},${startY} L${endX},${endY}`;
break;
case 'curved':
pathData = `M${startX},${startY} C${control1X},${control1Y} ${control2X},${control2Y} ${endX},${endY}`;
break;
case 'zigzag':
const midX1 = startX + (endX - startX) * 0.3;
const midY1 = startY + (endY - startY) * 0.7;
const midX2 = startX + (endX - startX) * 0.7;
const midY2 = startY + (endY - startY) * 0.3;
pathData = `M${startX},${startY} L${midX1},${midY1} L${midX2},${midY2} L${endX},${endY}`;
break;
case 'circular':
const radius = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2)) / 2;
const centerX = (startX + endX) / 2;
const centerY = (startY + endY) / 2;
pathData = `M${startX},${startY} A${radius},${radius} 0 0,1 ${endX},${endY}`;
break;
case 'spline':
pathData = `M${startX},${startY} Q${control1X},${control1Y} ${endX},${endY}`;
break;
case '3d':
// Simplified 3D effect with two curves
const depth = 50;
const midX = (startX + endX) / 2;
const midY = (startY + endY) / 2;
pathData = `M${startX},${startY} C${midX},${midY - depth} ${midX},${midY - depth} ${endX},${endY}`;
break;
default:
pathData = `M${startX},${startY} L${endX},${endY}`;
}
elements.beamPath.setAttribute('d', pathData);
// Update color
if (state.colorType === 'solid') {
elements.beamGradient.innerHTML = `
<stop offset="0%" stop-color="${state.color}" />
<stop offset="100%" stop-color="${state.color}" />
`;
} else if (state.colorType === 'gradient') {
elements.beamGradient.innerHTML = `
<stop offset="0%" stop-color="${state.color}" />
<stop offset="100%" stop-color="${state.gradientColor}" />
`;
elements.beamGradient.setAttribute('x1', '0%');
elements.beamGradient.setAttribute('y1', '0%');
elements.beamGradient.setAttribute('x2', `${Math.cos((state.gradientDirection - 90) * Math.PI / 180) * 100}%`);
elements.beamGradient.setAttribute('y2', `${Math.sin((state.gradientDirection - 90) * Math.PI / 180) * 100}%`);
} else { // animated
elements.beamGradient.innerHTML = `
<stop offset="0%" stop-color="${state.color}" />
<stop offset="50%" stop-color="${state.gradientColor}" />
<stop offset="100%" stop-color="${state.color}" />
`;
}
// Update width and opacity
elements.beamPath.setAttribute('stroke-width', state.width);
elements.beamPath.setAttribute('stroke-opacity', state.opacity / 100);
// Update effects
if (state.effects.glow) {
elements.beamPath.setAttribute('filter', 'url(#glowFilter)');
elements.glowFilter.innerHTML = `
<feGaussianBlur stdDeviation="${state.width / 2}" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
`;
} else {
elements.beamPath.removeAttribute('filter');
}
// Update animation
const animationDuration = (2 - (state.animationSpeed / 100) * 1.8).toFixed(2); // 0.2s to 2s
// Remove existing style element if it exists
const existingStyle = document.getElementById('beamAnimationStyle');
if (existingStyle) {
existingStyle.remove();
}
// Add new animation style
const style = document.createElement('style');
style.id = 'beamAnimationStyle';
style.textContent = `
@keyframes beam-animation {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
#beamPath::after {
animation: beam-animation ${animationDuration}s ease-in-out infinite;
}
`;
document.head.appendChild(style);
// Show/hide control points based on path type
document.querySelectorAll('.control-point').forEach(point => {
point.style.display = state.pathType === 'curved' || state.pathType === 'spline' ? 'flex' : 'none';
});
}
// Update UI based on current state
function updateUI() {
// Update active buttons
document.querySelectorAll('.path-type-btn').forEach(btn => {
btn.classList.toggle('border-primary-500', btn.dataset.type === state.pathType);
btn.classList.toggle('bg-primary-50', btn.dataset.type === state.pathType);
btn.classList.toggle('dark:bg-primary-900/30', btn.dataset.type === state.pathType);
});
document.querySelectorAll('.color-type-btn').forEach(btn => {
btn.classList.toggle('bg-gray-100', btn.dataset.type === state.colorType);
btn.classList.toggle('dark:bg-gray-700', btn.dataset.type === state.colorType);
btn.classList.toggle('border-primary-500', btn.dataset.type === state.colorType);
});
document.querySelectorAll('.animation-trigger-btn').forEach(btn => {
btn.classList.toggle('bg-gray-100', btn.dataset.trigger === state.animationTrigger);
btn.classList.toggle('dark:bg-gray-700', btn.dataset.trigger === state.animationTrigger);
btn.classList.toggle('border-primary-500', btn.dataset.trigger === state.animationTrigger);
});
document.querySelectorAll('.framework-btn').forEach(btn => {
btn.classList.toggle('bg-gray-100', btn.dataset.framework === state.framework);
btn.classList.toggle('dark:bg-gray-700', btn.dataset.framework === state.framework);
});
document.querySelectorAll('.format-btn').forEach(btn => {
btn.classList.toggle('bg-gray-100', btn.dataset.format === state.exportFormat);
btn.classList.toggle('dark:bg-gray-700', btn.dataset.format === state.exportFormat);
});
// Update effect checkboxes
document.querySelectorAll('.effect-checkbox').forEach(checkbox => {
checkbox.checked = state.effects[checkbox.dataset.effect];
});
// Update input values
elements.colorInput.value = state.color;
elements.gradientColorInput.value = state.gradientColor;
elements.gradientDirection.value = state.gradientDirection;
elements.gradientDirectionValue.textContent = `${state.gradientDirection}°`;
elements.widthSlider.value = state.width;
elements.widthValue.textContent = `${state.width}px`;
elements.opacitySlider.value = state.opacity;
elements.opacityValue.textContent = `${state.opacity}%`;
elements.speedSlider.value = state.animationSpeed;
elements.speedValue.textContent = getSpeedLabel(state.animationSpeed);
elements.directionSelect.value = state.direction;
elements.easingSelect.value = state.easing;
elements.durationInput.value = state.duration;
elements.delayInput.value = state.delay;
// Update color preview
elements.colorPreview.style.background = state.color;
elements.gradientColorPreview.style.background = state.gradientColor;
// Show/hide gradient controls
elements.gradientControls.style.display = state.colorType === 'gradient' || state.colorType === 'animated' ? 'block' : 'none';
}
// Update code preview
function updateCodePreview() {
let code = '';
if (state.exportFormat === 'code') {
if (state.framework === 'react') {
code = `import React from 'react';\n\n`;
code += `const AnimatedBeam = () => {\n`;
code += ` return (\n`;
code += ` <div className="beam-container">\n`;
code += ` <svg width="100%" height="100%">\n`;
code += ` <path d="${elements.beamPath.getAttribute('d')}" stroke="url(#beamGradient)" fill="none" stroke-width="${state.width}" stroke-opacity="${state.opacity / 100}" />\n`;
code += ` <defs>\n`;
code += ` <linearGradient id="beamGradient" x1="0%" y1="0%" x2="100%" y2="0%">\n`;
code += ` <stop offset="0%" stop-color="${state.color}" />\n`;
code += ` <stop offset="100%" stop-color="${state.gradientColor}" />\n`;
code += ` </linearGradient>\n`;
code += ` </defs>\n`;
code += ` </svg>\n`;
code += ` </div>\n`;
code += ` );\n`;
code += `};\n\n`;
code += `export default AnimatedBeam;`;
} else if (state.framework === 'vue') {
code = `<template>\n`;
code += ` <div class="beam-container">\n`;
code += ` <svg width="100%" height="100%">\n`;
code += ` <path d="${elements.beamPath.getAttribute('d')}" stroke="url(#beamGradient)" fill="none" stroke-width="${state.width}" stroke-opacity="${state.opacity / 100}" />\n`;
code += ` <defs>\n`;
code += ` <linearGradient id="beamGradient" x1="0%" y1="0%" x2="100%" y2="0%">\n`;
code += ` <stop offset="0%" stop-color="${state.color}" />\n`;
code += ` <stop offset="100%" stop-color="${state.gradientColor}" />\n`;
code += ` </linearGradient>\n`;
code += ` </defs>\n`;
code += ` </svg>\n`;
code += ` </div>\n`;
code += `</template>\n\n`;
code += `<script>\n`;
code += `export default {\n`;
code += ` name: 'AnimatedBeam'\n`;
code += `};\n`;
code += `<\/script>`;
} else if (state.framework === 'svelte') {
code = `<script>\n`;
code += ` // Svelte component logic here\n`;
code += `<\/script>\n\n`;
code += `<div class="beam-container">\n`;
code += ` <svg width="100%" height="100%">\n`;
code += ` <path d="${elements.beamPath.getAttribute('d')}" stroke="url(#beamGradient)" fill="none" stroke-width="${state.width}" stroke-opacity="${state.opacity / 100}" />\n`;
code += ` <defs>\n`;
code += ` <linearGradient id="beamGradient" x1="0%" y1="0%" x2="100%" y2="0%">\n`;
code += ` <stop offset="0%" stop-color="${state.color}" />\n`;
code += ` <stop offset="100%" stop-color="${state.gradientColor}" />\n`;
code += ` </linearGradient>\n`;
code += ` </defs>\n`;
code += ` </svg>\n`;
code += `</div>`;
} else { // plain JS
code = `const beam = document.createElement('div');\n`;
code += `beam.className = 'beam-container';\n\n`;
code += `const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n`;
code += `svg.setAttribute('width', '100%');\n`;
code += `svg.setAttribute('height', '100%');\n\n`;
code += `const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n`;
code += `path.setAttribute('d', '${elements.beamPath.getAttribute('d')}');\n`;
code += `path.setAttribute('stroke', 'url(#beamGradient)');\n`;
code += `path.setAttribute('fill', 'none');\n`;
code += `path.setAttribute('stroke-width', '${state.width}');\n`;
code += `path.setAttribute('stroke-opacity', '${state.opacity / 100}');\n\n`;
code += `const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');\n`;
code += `const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');\n`;
code += `gradient.setAttribute('id', 'beamGradient');\n`;
code += `gradient.setAttribute('x1', '0%');\n`;
code += `gradient.setAttribute('y1', '0%');\n`;
code += `gradient.setAttribute('x2', '100%');\n`;
code += `gradient.setAttribute('y2', '0%');\n\n`;
code += `const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');\n`;
code += `stop1.setAttribute('offset', '0%');\n`;
code += `stop1.setAttribute('stop-color', '${state.color}');\n\n`;
code += `const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');\n`;
code += `stop2.setAttribute('offset', '100%');\n`;
code += `stop2.setAttribute('stop-color', '${state.gradientColor}');\n\n`;
code += `gradient.appendChild(stop1);\n`;
code += `gradient.appendChild(stop2);\n`;
code += `defs.appendChild(gradient);\n`;
code += `svg.appendChild(path);\n`;
code += `svg.appendChild(defs);\n`;
code += `beam.appendChild(svg);\n\n`;
code += `// Add to your document\n`;
code += `document.body.appendChild(beam);`;
}
} else if (state.exportFormat === 'svg') {
code = `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">\n`;
code += ` <path d="${elements.beamPath.getAttribute('d')}" stroke="url(#beamGradient)" fill="none" stroke-width="${state.width}" stroke-opacity="${state.opacity / 100}" />\n`;
code += ` <defs>\n`;
code += ` <linearGradient id="beamGradient" x1="0%" y1="0%" x2="100%" y2="0%">\n`;
code += ` <stop offset="0%" stop-color="${state.color}" />\n`;
code += ` <stop offset="100%" stop-color="${state.gradientColor}" />\n`;
code += ` </linearGradient>\n`;
code += ` </defs>\n`;
code += `</svg>`;
} else if (state.exportFormat === 'css') {
code = `.gradient-beam {\n`;
code += ` position: relative;\n`;
code += ` height: ${state.width}px;\n`;
code += ` background: linear-gradient(90deg, ${state.color} 0%, ${state.gradientColor} 100%);\n`;
code += ` opacity: ${state.opacity / 100};\n`;
code += ` overflow: hidden;\n`;
code += `}\n\n`;
code += `.gradient-beam::after {\n`;
code += ` content: '';\n`;
code += ` position: absolute;\n`;
code += ` top: 0;\n`;
code += ` left: 0;\n`;
code += ` right: 0;\n`;
code += ` bottom: 0;\n`;
code += ` background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);\n`;
code += ` animation: beam-animation ${(2 - (state.animationSpeed / 100) * 1.8).toFixed(2)}s ease-in-out infinite;\n`;
code += `}\n\n`;
code += `@keyframes beam-animation {\n`;
code += ` 0% { transform: translateX(-100%); }\n`;
code += ` 100% { transform: translateX(100%); }\n`;
code += `}`;
}
elements.codeContent.textContent = code;
}
// Get speed label
function getSpeedLabel(speed) {
if (speed < 20) return 'Very Slow';
if (speed < 40) return 'Slow';
if (speed < 60) return 'Medium';
if (speed < 80) return 'Fast';
return 'Very Fast';
}
// Reset to defaults
function resetToDefaults() {
state.pathType = 'curved';
state.colorType = 'solid';
state.color = '#0ea5e9';
state.gradientColor = '#ec4899';
state.gradientDirection = 90;
state.width = 4;
state.opacity = 80;
state.animationTrigger = 'load';
state.animationSpeed = 50;
state.effects = {
pulsing: false,
sparkling: false,
glow: true,
particles: false
};
state.direction = 'forward';
state.easing = 'linear';
state.duration = 2000;
state.delay = 0;
state.framework = 'react';
state.exportFormat = 'code';
state.points = {
start: { x: 25, y: 40 },
end: { x: 75, y: 60 },
control1: { x: 40, y: 30 },
control2: { x: 60, y: 70 }
};
// Update positions of draggable points
elements.startPoint.style.left = `${state.points.start.x}%`;
elements.startPoint.style.top = `${state.points.start.y}%`;
elements.endPoint.style.left = `${state.points.end.x}%`;
elements.endPoint.style.top = `${state.points.end.y}%`;
elements.controlPoint1.style.left = `${
</html>