Initial version of lava lamp generator

content/resources/adoptables/index.md

@@ -0,0 +1,74 @@
+---
+title: "Adoptables"
+date: 2026-01-10
+description: "Customisable widgets and animations for your website"
+icon: "adoptables"
+draft: false
+---
+
+Welcome to my adoptables collection! These are customisable widgets you can embed on your own website. Each adoptable comes with a live preview and customisation options. Just configure it how you like, grab the code, and paste it into your site.
+
+All adoptables are:
+
+- **Free to use** - No attribution required (but appreciated!)
+- **Probably customisable** - Tweak your own colors and settings if applicable
+- **Self-contained** - Single script tag, no dependencies
+- **Responsive** - Scales to fit your layout
+
+---
+
+## Lava Lamp
+
+My brother had a blue and yellow lava lamp when I was younger and I was obsessed with it, so making one for my website was an obvious choice... and now I'd like to share it with everyone!
+
+Using the pixelation effect with very high contrast colours is going to result in an aura on the blobs due to the way the SVG filter works, I am trying to find a solution for this.
+
+{{< lavalamp-adoptable >}}
+
+---
+
+## Usage Instructions
+
+1. **Customise** - Use the controls to adjust colors, animation speed, and other settings
+2. **Get Code** - Click "Get Embed Code" to generate your custom script tag
+3. **Embed** - Copy the code and paste it anywhere in your HTML
+4. **Style** - Wrap it in a div and set width/height to control the lamp size
+
+### Example Container
+
+The lava lamp will scale to fit its container. You can control the size like this:
+
+```html
+<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>
+```
+
+### Customisation Options
+
+- `data-bg-color-1` & `data-bg-color-2`: Background gradient colors
+- `data-blob-color-1` & `data-blob-color-2`: Blob gradient colors
+- `data-case-color`: Color for the top cap and bottom base
+- `data-blob-count`: Number of blobs (3-12)
+- `data-speed`: Animation speed multiplier (0.5-1.5x)
+- `data-blob-size`: Blob size multiplier (0.5-2.0x)
+- `data-pixelate`: Set to "true" for a retro pixelated effect
+- `data-pixel-size`: Pixel size for pixelation effect (2-10, default 4)
+
+---
+
+## More Coming Soon
+
+The companion cube is coming soon!
+
+Got ideas for adoptables you'd like to see? Let me know!

content/resources/lavalamp/index.md

@@ -5,22 +5,23 @@ description: "A pure CSS lavalamp animation with floating blobs"
 icon: "lavalamp"
 demo_url: ""
 source_url: ""
-draft: true
+draft: false
 ---
 
-A mesmerizing lavalamp effect created entirely with HTML and CSS. Features smooth floating animations and gradient blobs that rise and fall like a classic lava lamp.
+A mesmerizing lavalamp effect created with HTML, CSS, and JavaScript. Features smooth floating animations and gradient blobs that rise and fall like a classic lava lamp.
+
+## Want Your Own Customizable Lava Lamp?
+
+Check out the [Adoptables page](/resources/adoptables/) where you can customize your own lava lamp with your choice of colors, blob count, and animation speed - then get the embed code to add it to your own website!
 
 ## Features
 
-- Pure CSS animation (no JavaScript required)
-- Customizable colors and blob shapes
 - Smooth, organic floating motion
+- Customizable colors and blob shapes
+- Adjustable animation speed and blob count
 - Responsive design
+- Self-contained embed code
 
 ## How It Works
 
-The animation uses CSS keyframes to create the illusion of blobs floating up and down. Multiple blob elements with different animation delays create a realistic lava lamp effect.
-
-## Usage
-
-Simply copy the HTML and CSS into your project. You can customize the colors by changing the gradient values and adjust the animation speed by modifying the animation duration.
+The animation uses CSS keyframes to create the illusion of blobs floating up and down. Multiple blob elements with different animation delays and paths create a realistic lava lamp effect. An SVG filter creates the "goo" effect that makes the blobs merge together smoothly.