Gummy Bearverse — Playful Gummy-Themed Website

A lightweight static site showcasing a playful gummy-bear background, an embedded video window, a small interactive "Gummy Burst" effect, and a responsive gallery. This repository contains the HTML, CSS, and JavaScript used to run the demo locally.

Dedication

This website was created as part of a birthday gift / playful prank for one of my friends.

Important: asset copyright

• Some image assets in assets/ were sourced from the internet and are not owned by the repository author. Those images may be copyrighted and are included for demonstration only. If you plan to publish or redistribute this project, replace those images with assets you own or with appropriately licensed (e.g., CC0 / public domain) images. The repository author has not granted permission to reuse third-party images.

Features

• JS/CSS-driven falling gummy background (#gummy-fall-root) that spawns individual gummy images from assets/gummy_bear_images/.
• 'Gummy Burst' button that explodes a gummy into smaller pieces mid-fall.
• Responsive gallery of gummy images.
• YouTube embed with lazy-loading feature-detection and an IntersectionObserver fallback for older browsers.
• Accessibility: falls back when the user prefers reduced motion (prefers-reduced-motion).

Quick demo

• Open index.html in a browser (best experienced served over HTTP to avoid origin restrictions on embeds).

Run locally (recommended)

Open PowerShell and run the built-in Python HTTP server from the project folder:

cd "<Your-Folder-Location>"
python -m http.server 8000
# Then open http://localhost:8000 in your browser

Customization

• Change the displayed YouTube video by editing the data-video-id attribute on the div.video-window in index.html, or update the script that sets the iframe src.
• Tweak spawn frequency, maximum active gummy count, and sizes in script.js.
• Colors and background settings live in styles.css under :root variables.

Assets & Licensing

Code: This project's code is provided under the MIT License. See the LICENSE file. You may use, copy, modify, and distribute the code provided you include the copyright notice and license text (this preserves attribution to the repository owner: we09532). Images: The image files under assets/ were acquired from the internet and are likely copyrighted by their original authors. You should not assume they are free to reuse. Replace them with your own images or obtain proper licenses before publishing.

Video attribution

The code in this repository is licensed under the MIT License (see LICENSE). Images and other third-party assets included for demonstration are not licensed by default and should be replaced with appropriately licensed assets before redistribution. - Video link: https://www.youtube.com/watch?v=1iBThaP_TaY - Channel: https://www.youtube.com/@NileRed - This project only embeds the video for demonstration; no ownership or license to the video content is claimed. If you publish or redistribute the site, respect YouTube's terms and NileRed's rights.

What changed recently

• Falling gummies no longer disappear until they are fully off-screen.
• Spawning now distributes gummies evenly across the top of the viewport and starts gummies slightly above the visible area so the entry animation is fluid.
• The YouTube iframe lazy-loading is applied dynamically with a fallback for older browsers.
• Explosion pieces are constrained in size and appended after their images load to avoid visual glitches.

Contributing

• If you'd like to contribute: replace the demo images with licensed or original artwork, open issues with proposed UX improvements, or file a pull request with a small change.

Updates

Embed troubleshooting & notes:

• The page now loads the YouTube player dynamically (via script.js) to avoid loading a shorts URL or blocked embed initially. Use the data-video-id attribute on the div.video-window to specify the YouTube video id.
• Some videos (or YouTube Shorts URLs) are blocked from being embedded by the video owner; if that happens, the site will show a fallback link to open the video on YouTube directly.
• If viewing the site via file:// (opening the HTML directly in the browser), some embedded content may have origin-related restrictions — it's recommended to serve via a local HTTP server (see above).

Falling gummy background:

• The site now uses a JS/CSS-driven falling gummy background (#gummy-fall-root) that spawns individual gummy images (not the sprite gummy_bears.png) from assets/gummy_bear_images.
• The effect is animated via CSS keyframes and JS spawns to avoid animating a single giant element and to offer varied sizes/timings. You can tune spawn frequency, max elements, and sizes in script.js.
• These gummies now fall on top of all page elements (a high z-index) while remaining non-interactive so clicks and focus on page content still work (pointer-events:none).

Accessibility & reduced-motion:

• The effect is disabled automatically for users who request reduced motion via the operating system (prefers-reduced-motion).

Removal behavior:

• Each falling gummy is only removed from the DOM after two conditions: the CSS animation completes, and then the element is fully off the visible viewport. This ensures gummy bears don't disappear prematurely while still visually present during rotation.

Spawn distribution:

• Falling gummies spawn from a random horizontal position across the top by calculating a random percentage and centering each element based on its computed width. This ensures the distribution is even across the viewport and not clustered in one corner.

Spawn start offset:

• Each falling gummy now starts a bit higher off the top of the page to ensure the entry animation appears smooth and they don't briefly appear in the viewport before the fall. This offset scales with gummy size, so larger gummies start further off-screen by default.

Button explosion behavior:

• The 'Gummy Burst' button now triggers a visual effect plus spawns a random falling gummy that explodes mid-fall into smaller gummy images, producing a delightful small-explosion effect. Explosion pieces are images pulled from assets/gummy_bear_images and cleaned up after animation.

Site backdrop update:

• The background has been changed from the simple linear gradient to a photographic backdrop: assets/gummy_bear_backdrop.jpg. The CSS continues to provide the previous gradient as a fallback behind the image so the site still looks good if the image can't be loaded

Fix: gummies briefly pausing at the top

• Some browsers would briefly render a gummy at the top if the animation wasn't applied immediately after insertion; we now apply the element's initial transform to match the keyframe starting position and only set the animation after the element has been appended, ensuring it begins off-screen and animates down properly.