Initial version of lava lamp generator
This commit is contained in:
Dan
parent
b27f9cfb39
commit
a05e9bf10b
7 changed files with 1582 additions and 637 deletions
364
static/js/adoptables/lavalamp.js
Normal file
364
static/js/adoptables/lavalamp.js
Normal file
|
|
@ -0,0 +1,364 @@
|
|||
(function () {
|
||||
"use strict";
|
||||
|
||||
const currentScript = document.currentScript;
|
||||
if (!currentScript) {
|
||||
console.error("Lava Lamp: Could not find current script tag");
|
||||
return;
|
||||
}
|
||||
|
||||
// Read configuration from data attributes with defaults
|
||||
const config = {
|
||||
bgColor1: currentScript.dataset["bgColor-1"] || "#F8E45C",
|
||||
bgColor2: currentScript.dataset["bgColor-2"] || "#FF7800",
|
||||
blobColor1: currentScript.dataset["blobColor-1"] || "#FF4500",
|
||||
blobColor2: currentScript.dataset["blobColor-2"] || "#FF6347",
|
||||
caseColor: currentScript.dataset.caseColor || "#333333",
|
||||
blobCount: parseInt(currentScript.dataset.blobCount) || 6,
|
||||
speed: parseFloat(currentScript.dataset.speed) || 1.0,
|
||||
blobSize: parseFloat(currentScript.dataset.blobSize) || 1.0,
|
||||
pixelate: currentScript.dataset.pixelate === "true" || false,
|
||||
pixelSize: parseInt(currentScript.dataset.pixelSize) || 4,
|
||||
};
|
||||
|
||||
// Helper function to adjust color brightness
|
||||
function adjustBrightness(color, percent) {
|
||||
const num = parseInt(color.replace("#", ""), 16);
|
||||
const amt = Math.round(2.55 * percent);
|
||||
const R = (num >> 16) + amt;
|
||||
const G = ((num >> 8) & 0x00ff) + amt;
|
||||
const B = (num & 0x0000ff) + amt;
|
||||
return (
|
||||
"#" +
|
||||
(
|
||||
0x1000000 +
|
||||
(R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
|
||||
(G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
|
||||
(B < 255 ? (B < 1 ? 0 : B) : 255)
|
||||
)
|
||||
.toString(16)
|
||||
.slice(1)
|
||||
);
|
||||
}
|
||||
|
||||
// Create a host element with shadow DOM for isolation
|
||||
const host = document.createElement("div");
|
||||
host.style.width = "100%";
|
||||
host.style.height = "100%";
|
||||
host.style.display = "block";
|
||||
|
||||
if (config.pixelate) {
|
||||
host.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
// Attach shadow DOM
|
||||
const shadowRoot = host.attachShadow({ mode: "open" });
|
||||
|
||||
currentScript.parentNode.insertBefore(host, currentScript.nextSibling);
|
||||
|
||||
const gooFilterId = "goo-filter";
|
||||
|
||||
// Inject CSS into shadow DOM
|
||||
const style = document.createElement("style");
|
||||
style.textContent = `
|
||||
.lavalamp-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
${config.pixelate ? "filter: url(#pixelate-filter);" : ""}
|
||||
}
|
||||
|
||||
.lamp-cap {
|
||||
width: 60%;
|
||||
height: 8%;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50% 50% 0 0;
|
||||
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lamp-body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
clip-path: polygon(20% 0, 80% 0, 100% 101%, 0% 101%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lamp-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.15) 20%,
|
||||
rgba(255, 255, 255, 0.05) 40%,
|
||||
transparent 60%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.blobs-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
filter: url(#${gooFilterId});
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.blob {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
animation: lavalamp-float var(--duration) ease-in-out infinite;
|
||||
opacity: 0.95;
|
||||
mix-blend-mode: normal;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.lamp-base {
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
flex-shrink: 0;
|
||||
border-radius: 0 0 50% 50%;
|
||||
box-shadow:
|
||||
inset 0 2px 5px rgba(255, 255, 255, 0.2),
|
||||
inset 0 -2px 5px rgba(0, 0, 0, 0.5);
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes lavalamp-float {
|
||||
0%, 100% {
|
||||
transform: translate(var(--start-x), var(--start-y)) scale(1);
|
||||
}
|
||||
25% {
|
||||
transform: translate(var(--mid1-x), var(--mid1-y)) scale(var(--scale1, 1.1));
|
||||
}
|
||||
50% {
|
||||
transform: translate(var(--mid2-x), var(--mid2-y)) scale(var(--scale2, 0.9));
|
||||
}
|
||||
75% {
|
||||
transform: translate(var(--mid3-x), var(--mid3-y)) scale(var(--scale3, 1.05));
|
||||
}
|
||||
}
|
||||
`;
|
||||
shadowRoot.appendChild(style);
|
||||
|
||||
// Create the HTML structure
|
||||
const container = document.createElement("div");
|
||||
container.className = "lavalamp-container";
|
||||
|
||||
// SVG filters for goo effect and pixelation
|
||||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svg.style.position = "absolute";
|
||||
svg.style.width = "0";
|
||||
svg.style.height = "0";
|
||||
svg.innerHTML = `
|
||||
<defs>
|
||||
<filter id="${gooFilterId}">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
|
||||
<feColorMatrix
|
||||
in="blur"
|
||||
mode="matrix"
|
||||
values="
|
||||
1 0 0 0 0
|
||||
0 1 0 0 0
|
||||
0 0 1 0 0
|
||||
0 0 0 18 -7"
|
||||
result="goo"
|
||||
/>
|
||||
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
|
||||
</filter>
|
||||
${
|
||||
config.pixelate
|
||||
? `
|
||||
<filter id="pixelate-filter" x="0%" y="0%" width="100%" height="100%">
|
||||
<feFlood x="0" y="0" height="1" width="1"/>
|
||||
<feComposite width="${config.pixelSize}" height="${config.pixelSize}"/>
|
||||
<feTile result="a"/>
|
||||
<feComposite in="SourceGraphic" in2="a" operator="in"/>
|
||||
<feMorphology operator="dilate" radius="${Math.floor(config.pixelSize / 2)}"/>
|
||||
</filter>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</defs>
|
||||
`;
|
||||
|
||||
const lampCap = document.createElement("div");
|
||||
lampCap.className = "lamp-cap";
|
||||
lampCap.style.background = `linear-gradient(180deg, ${adjustBrightness(config.caseColor, 40)} 0%, ${config.caseColor} 50%, ${adjustBrightness(config.caseColor, -20)} 100%)`;
|
||||
|
||||
const lampBody = document.createElement("div");
|
||||
lampBody.className = "lamp-body";
|
||||
lampBody.style.background = `linear-gradient(180deg, ${config.bgColor1} 0%, ${config.bgColor2} 100%)`;
|
||||
|
||||
const blobsContainer = document.createElement("div");
|
||||
blobsContainer.className = "blobs-container";
|
||||
|
||||
const lampBase = document.createElement("div");
|
||||
lampBase.className = "lamp-base";
|
||||
lampBase.style.background = `linear-gradient(180deg, ${config.caseColor} 0%, ${adjustBrightness(config.caseColor, -20)} 40%, ${adjustBrightness(config.caseColor, -40)} 100%)`;
|
||||
lampBase.style.borderTop = `1px solid ${adjustBrightness(config.bgColor2, -30)}`;
|
||||
|
||||
// Assemble the structure
|
||||
lampBody.appendChild(blobsContainer);
|
||||
container.appendChild(svg);
|
||||
container.appendChild(lampCap);
|
||||
container.appendChild(lampBody);
|
||||
container.appendChild(lampBase);
|
||||
|
||||
// Append to shadow DOM
|
||||
shadowRoot.appendChild(container);
|
||||
|
||||
// Blob creation and animation
|
||||
let blobs = [];
|
||||
|
||||
function createBlob() {
|
||||
const blob = document.createElement("div");
|
||||
blob.className = "blob";
|
||||
|
||||
// Get container dimensions
|
||||
const containerWidth = lampBody.offsetWidth;
|
||||
const containerHeight = lampBody.offsetHeight;
|
||||
|
||||
// Size relative to container width (25-40% of width)
|
||||
const size =
|
||||
(Math.random() * 0.15 + 0.25) * containerWidth * config.blobSize;
|
||||
const duration = (Math.random() * 8 + 12) / config.speed;
|
||||
|
||||
// Max X position accounting for blob size and container margins
|
||||
const maxX = Math.max(0, containerWidth - size);
|
||||
const startX = maxX > 0 ? Math.random() * maxX : 0;
|
||||
|
||||
// Create gradient for blob
|
||||
const blobGradient = `radial-gradient(circle at 30% 30%, ${config.blobColor1}, ${config.blobColor2})`;
|
||||
|
||||
blob.style.width = `${size}px`;
|
||||
blob.style.height = `${size}px`;
|
||||
blob.style.left = `${startX}px`;
|
||||
blob.style.bottom = "10px";
|
||||
blob.style.position = "absolute";
|
||||
blob.style.background = blobGradient;
|
||||
blob.style.setProperty("--duration", `${duration}s`);
|
||||
blob.style.setProperty("--start-x", "0px");
|
||||
blob.style.setProperty("--start-y", "0px");
|
||||
|
||||
// Movement waypoints
|
||||
blob.style.setProperty(
|
||||
"--mid1-x",
|
||||
`${(Math.random() * 0.3 - 0.15) * containerWidth}px`,
|
||||
);
|
||||
blob.style.setProperty(
|
||||
"--mid1-y",
|
||||
`${-(Math.random() * 0.15 + 0.25) * containerHeight}px`,
|
||||
);
|
||||
|
||||
blob.style.setProperty(
|
||||
"--mid2-x",
|
||||
`${(Math.random() * 0.4 - 0.2) * containerWidth}px`,
|
||||
);
|
||||
blob.style.setProperty(
|
||||
"--mid2-y",
|
||||
`${-(Math.random() * 0.2 + 0.5) * containerHeight}px`,
|
||||
);
|
||||
|
||||
blob.style.setProperty(
|
||||
"--mid3-x",
|
||||
`${(Math.random() * 0.3 - 0.15) * containerWidth}px`,
|
||||
);
|
||||
blob.style.setProperty(
|
||||
"--mid3-y",
|
||||
`${-(Math.random() * 0.15 + 0.8) * containerHeight}px`,
|
||||
);
|
||||
|
||||
// Scale variations
|
||||
blob.style.setProperty("--scale1", (Math.random() * 0.3 + 1.0).toFixed(2));
|
||||
blob.style.setProperty("--scale2", (Math.random() * 0.3 + 0.85).toFixed(2));
|
||||
blob.style.setProperty("--scale3", (Math.random() * 0.3 + 0.95).toFixed(2));
|
||||
|
||||
// Random delay to stagger animations
|
||||
blob.style.animationDelay = `${Math.random() * -20}s`;
|
||||
|
||||
return blob;
|
||||
}
|
||||
|
||||
function updateBlobCount() {
|
||||
while (blobs.length > config.blobCount) {
|
||||
const blob = blobs.pop();
|
||||
blobsContainer.removeChild(blob);
|
||||
}
|
||||
while (blobs.length < config.blobCount) {
|
||||
const blob = createBlob();
|
||||
blobs.push(blob);
|
||||
blobsContainer.appendChild(blob);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize
|
||||
function init() {
|
||||
// Wait for container to have dimensions
|
||||
// Not sure if this is a great idea, what if this never happens for some reason
|
||||
// This is as good as I can come up with right now
|
||||
if (lampBody.offsetWidth === 0 || lampBody.offsetHeight === 0) {
|
||||
setTimeout(init, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
// Scale goo filter blur based on container width
|
||||
const containerWidth = lampBody.offsetWidth;
|
||||
|
||||
// Apply scaled goo filter
|
||||
let blurAmount, alphaMultiplier, alphaBias;
|
||||
|
||||
if (containerWidth < 80) {
|
||||
blurAmount = 3;
|
||||
alphaMultiplier = 12;
|
||||
alphaBias = -5;
|
||||
} else {
|
||||
blurAmount = Math.max(4, Math.min(7, containerWidth / 20));
|
||||
alphaMultiplier = 18;
|
||||
alphaBias = -7;
|
||||
}
|
||||
|
||||
const gooFilter = svg.querySelector(`#${gooFilterId} feGaussianBlur`);
|
||||
if (gooFilter) {
|
||||
gooFilter.setAttribute("stdDeviation", blurAmount);
|
||||
}
|
||||
|
||||
const colorMatrix = svg.querySelector(`#${gooFilterId} feColorMatrix`);
|
||||
if (colorMatrix) {
|
||||
colorMatrix.setAttribute(
|
||||
"values",
|
||||
`
|
||||
1 0 0 0 0
|
||||
0 1 0 0 0
|
||||
0 0 1 0 0
|
||||
0 0 0 ${alphaMultiplier} ${alphaBias}
|
||||
`,
|
||||
);
|
||||
}
|
||||
|
||||
updateBlobCount();
|
||||
}
|
||||
|
||||
// Start when DOM is ready
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
371
static/lavalamp-demo.html
Normal file
371
static/lavalamp-demo.html
Normal file
|
|
@ -0,0 +1,371 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Lava Lamp Adoptable - Demo Examples</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2.5rem;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
opacity: 0.9;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.demo-item {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lamp-container {
|
||||
background-image:
|
||||
linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
|
||||
linear-gradient(
|
||||
-45deg,
|
||||
rgba(255, 255, 255, 0.1) 25%,
|
||||
transparent 25%
|
||||
),
|
||||
linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position:
|
||||
0 0,
|
||||
0 10px,
|
||||
10px -10px,
|
||||
-10px 0px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.code-section {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.code-section h2 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.size-label {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.demo-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🌋 Lava Lamp Adoptable Demo</h1>
|
||||
<p class="subtitle">
|
||||
See the lava lamp in action at various sizes and color schemes!
|
||||
</p>
|
||||
|
||||
<div class="demo-grid">
|
||||
<!-- Classic Orange -->
|
||||
<div class="demo-item">
|
||||
<div class="demo-title">Classic Orange</div>
|
||||
<div class="lamp-container" style="width: 150px; height: 280px">
|
||||
<script
|
||||
src="/js/adoptables/lavalamp.js"
|
||||
data-bg-color-1="#F8E45C"
|
||||
data-bg-color-2="#FF7800"
|
||||
data-blob-color-1="#FF4500"
|
||||
data-blob-color-2="#FF6347"
|
||||
data-case-color="#333333"
|
||||
data-blob-count="6"
|
||||
data-speed="1.0"
|
||||
data-blob-size="1.0"
|
||||
></script>
|
||||
</div>
|
||||
<div class="size-label">150px × 280px</div>
|
||||
</div>
|
||||
|
||||
<!-- Purple Dreams -->
|
||||
<div class="demo-item">
|
||||
<div class="demo-title">Purple Dreams</div>
|
||||
<div class="lamp-container" style="width: 120px; height: 250px">
|
||||
<script
|
||||
src="/js/adoptables/lavalamp.js"
|
||||
data-bg-color-1="#9D50BB"
|
||||
data-bg-color-2="#6E48AA"
|
||||
data-blob-color-1="#DA22FF"
|
||||
data-blob-color-2="#9733EE"
|
||||
data-case-color="#1a0033"
|
||||
data-blob-count="5"
|
||||
data-speed="0.8"
|
||||
data-blob-size="1.2"
|
||||
></script>
|
||||
</div>
|
||||
<div class="size-label">120px × 250px</div>
|
||||
</div>
|
||||
|
||||
<!-- Ocean Blue -->
|
||||
<div class="demo-item">
|
||||
<div class="demo-title">Ocean Blue</div>
|
||||
<div class="lamp-container" style="width: 100px; height: 200px">
|
||||
<script
|
||||
src="/js/adoptables/lavalamp.js"
|
||||
data-bg-color-1="#4facfe"
|
||||
data-bg-color-2="#00f2fe"
|
||||
data-blob-color-1="#0066ff"
|
||||
data-blob-color-2="#00ccff"
|
||||
data-case-color="#001a33"
|
||||
data-blob-count="8"
|
||||
data-speed="1.2"
|
||||
data-blob-size="0.8"
|
||||
></script>
|
||||
</div>
|
||||
<div class="size-label">100px × 200px</div>
|
||||
</div>
|
||||
|
||||
<!-- Lava Red -->
|
||||
<div class="demo-item">
|
||||
<div class="demo-title">Lava Red</div>
|
||||
<div class="lamp-container" style="width: 180px; height: 320px">
|
||||
<script
|
||||
src="/js/adoptables/lavalamp.js"
|
||||
data-bg-color-1="#ff5858"
|
||||
data-bg-color-2="#c9184a"
|
||||
data-blob-color-1="#ff0000"
|
||||
data-blob-color-2="#cc0000"
|
||||
data-case-color="#2d0a0a"
|
||||
data-blob-count="7"
|
||||
data-speed="0.9"
|
||||
data-blob-size="1.3"
|
||||
></script>
|
||||
</div>
|
||||
<div class="size-label">180px × 320px</div>
|
||||
</div>
|
||||
|
||||
<!-- Mint Fresh -->
|
||||
<div class="demo-item">
|
||||
<div class="demo-title">Mint Fresh</div>
|
||||
<div class="lamp-container" style="width: 140px; height: 260px">
|
||||
<script
|
||||
src="/js/adoptables/lavalamp.js"
|
||||
data-bg-color-1="#a8edea"
|
||||
data-bg-color-2="#fed6e3"
|
||||
data-blob-color-1="#00d4aa"
|
||||
data-blob-color-2="#00aacc"
|
||||
data-case-color="#0d3d3d"
|
||||
data-blob-count="6"
|
||||
data-speed="1.1"
|
||||
data-blob-size="1.0"
|
||||
></script>
|
||||
</div>
|
||||
<div class="size-label">140px × 260px</div>
|
||||
</div>
|
||||
|
||||
<!-- Sunset Glow -->
|
||||
<div class="demo-item">
|
||||
<div class="demo-title">Sunset Glow</div>
|
||||
<div class="lamp-container" style="width: 110px; height: 220px">
|
||||
<script
|
||||
src="/js/adoptables/lavalamp.js"
|
||||
data-bg-color-1="#ffeaa7"
|
||||
data-bg-color-2="#fd79a8"
|
||||
data-blob-color-1="#ff6b6b"
|
||||
data-blob-color-2="#feca57"
|
||||
data-case-color="#2d3436"
|
||||
data-blob-count="5"
|
||||
data-speed="0.7"
|
||||
data-blob-size="1.5"
|
||||
></script>
|
||||
</div>
|
||||
<div class="size-label">110px × 220px</div>
|
||||
</div>
|
||||
|
||||
<!-- Cyber Green (Pixelated) -->
|
||||
<div class="demo-item">
|
||||
<div class="demo-title">Cyber Green (Pixelated)</div>
|
||||
<div class="lamp-container" style="width: 160px; height: 300px">
|
||||
<script
|
||||
src="/js/adoptables/lavalamp.js"
|
||||
data-bg-color-1="#38ef7d"
|
||||
data-bg-color-2="#11998e"
|
||||
data-blob-color-1="#00ff00"
|
||||
data-blob-color-2="#00cc66"
|
||||
data-case-color="#0a0a0a"
|
||||
data-blob-count="9"
|
||||
data-speed="1.3"
|
||||
data-blob-size="0.7"
|
||||
data-pixelate="true"
|
||||
data-pixel-size="6"
|
||||
></script>
|
||||
</div>
|
||||
<div class="size-label">160px × 300px (6px pixels)</div>
|
||||
</div>
|
||||
|
||||
<!-- Pink Bubble (Pixelated) -->
|
||||
<div class="demo-item">
|
||||
<div class="demo-title">Pink Bubble (Pixelated)</div>
|
||||
<div class="lamp-container" style="width: 130px; height: 240px">
|
||||
<script
|
||||
src="/js/adoptables/lavalamp.js"
|
||||
data-bg-color-1="#ffeef8"
|
||||
data-bg-color-2="#ffb3d9"
|
||||
data-blob-color-1="#ff1493"
|
||||
data-blob-color-2="#ff69b4"
|
||||
data-case-color="#4d1933"
|
||||
data-blob-count="4"
|
||||
data-speed="0.6"
|
||||
data-blob-size="1.8"
|
||||
data-pixelate="true"
|
||||
data-pixel-size="3"
|
||||
></script>
|
||||
</div>
|
||||
<div class="size-label">130px × 240px (3px pixels)</div>
|
||||
</div>
|
||||
|
||||
<!-- Tiny (Pixelated) -->
|
||||
<div class="demo-item">
|
||||
<div class="demo-title">Tiny Retro (Pixelated)</div>
|
||||
<div
|
||||
class="lamp-container"
|
||||
style="width: 40px; height: 80px; padding: 1px"
|
||||
>
|
||||
<script
|
||||
src="/js/adoptables/lavalamp.js"
|
||||
data-bg-color-1="#00d9ff"
|
||||
data-bg-color-2="#0099cc"
|
||||
data-blob-color-1="#ffcc00"
|
||||
data-blob-color-2="#ffcc00"
|
||||
data-case-color="#1a1a1a"
|
||||
data-blob-count="4"
|
||||
data-speed="1.5"
|
||||
data-blob-size="1.5"
|
||||
data-pixelate="true"
|
||||
data-pixel-size="3"
|
||||
></script>
|
||||
</div>
|
||||
<div class="size-label">40px × 80px (3px pixels)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-section">
|
||||
<h2>How to Use</h2>
|
||||
<p style="margin-bottom: 1rem">
|
||||
Simply copy and paste this code into your website. The lava lamp will
|
||||
scale to fit any container size you specify!
|
||||
</p>
|
||||
<pre><code><div style="width: 200px; height: 350px;">
|
||||
<script src="https://ritual.sh/js/adoptables/lavalamp.js"
|
||||
data-bg-color-1="#F8E45C"
|
||||
data-bg-color-2="#FF7800"
|
||||
data-blob-color-1="#FF4500"
|
||||
data-blob-color-2="#FF6347"
|
||||
data-case-color="#333333"
|
||||
data-blob-count="6"
|
||||
data-speed="1.0"
|
||||
data-blob-size="1.0"></script>
|
||||
</div></code></pre>
|
||||
|
||||
<h2 style="margin-top: 2rem">Customization Options</h2>
|
||||
<ul style="line-height: 2; margin-top: 1rem; margin-left: 1.5rem">
|
||||
<li>
|
||||
<code>data-bg-color-1</code> & <code>data-bg-color-2</code>:
|
||||
Background gradient colors
|
||||
</li>
|
||||
<li>
|
||||
<code>data-blob-color-1</code> & <code>data-blob-color-2</code>:
|
||||
Blob gradient colors
|
||||
</li>
|
||||
<li>
|
||||
<code>data-case-color</code>: Color for the top cap and bottom base
|
||||
</li>
|
||||
<li><code>data-blob-count</code>: Number of blobs (3-12)</li>
|
||||
<li>
|
||||
<code>data-speed</code>: Animation speed multiplier (0.5-1.5x)
|
||||
</li>
|
||||
<li><code>data-blob-size</code>: Blob size multiplier (0.5-2.0x)</li>
|
||||
</ul>
|
||||
|
||||
<p style="margin-top: 2rem; text-align: center; opacity: 0.8">
|
||||
🌟 Create your own custom lava lamp at
|
||||
<a
|
||||
href="/resources/adoptables/"
|
||||
style="color: #ffd700; text-decoration: none"
|
||||
>ritual.sh/resources/adoptables</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue