gradient-hero-runtime
v1.0.4
Published
Embeddable animated gradient backgrounds powered by WebGL. Create stunning, flowing gradients for your website.
Maintainers
gradientheroReadme
Gradient Hero Runtime
Embeddable animated gradient backgrounds powered by WebGL. Create stunning, flowing gradients for your website.
Quick Start
<!-- Container for the gradient -->
<div id="my-gradient" style="width: 100%; height: 400px;"></div>
<!-- Load the runtime -->
<script src="https://unpkg.com/[email protected]"></script>
<!-- Initialize -->
<script>
GradientHero.init('#my-gradient', {
colors: ['#ff6b6b', '#4ecdc4', '#45b7d1'],
speed: 0.5
});
</script>API
GradientHero.init(selector, config)
Initialize a gradient in a container element.
Parameters:
selector- CSS selector string or DOM elementconfig- Configuration object (see options below)
Returns: An object with:
unmount()- Remove the gradientupdate(newConfig)- Update gradient settings
Configuration Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| colors | string[] | ['#ff0000', '#00ff00', '#0000ff'] | Array of hex colors |
| speed | number | 0.3 | Animation speed (0-1) |
| noiseStrength | number | 0.5 | Turbulence intensity |
| scale | number | 1 | Gradient scale |
| brightness | number | 1 | Overall brightness |
| contrast | number | 1 | Color contrast |
| grain | number | 0 | Film grain amount |
| bloom | number | 0 | Glow effect intensity |
Full Example
<!DOCTYPE html>
<html>
<head>
<style>
.hero-section {
width: 100%;
height: 100vh;
position: relative;
}
.hero-content {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
</style>
</head>
<body>
<div class="hero-section">
<div id="hero-gradient" style="width:100%;height:100%;position:absolute;"></div>
<div class="hero-content">
<h1>Welcome to My Site</h1>
</div>
</div>
<script src="https://unpkg.com/[email protected]"></script>
<script>
GradientHero.init('#hero-gradient', {
colors: ['#667eea', '#764ba2', '#f093fb'],
speed: 0.3,
bloom: 0.2
});
</script>
</body>
</html>Create Custom Gradients
Visit gradienthero.com to design your gradient visually, then export the embed code with your exact configuration.
License
MIT