hoorayjs 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Clark Fannin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+lightweight, flexible confetti/burst effects with support for custom images/icons!

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "hoorayjs",
+  "version": "1.0.0",
+  "description": "lightweight confetti/burst effects with image support",
+  "type": "module",
+  "main": "src/hooray.js",
+  "module": "src/hooray.js",
+  "exports": {
+    ".": "./src/hooray.js",
+    "./hooray.css": "./src/hooray.css"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "demo": "python3 -m http.server"
+  },
+  "keywords": [
+    "confetti",
+    "burst",
+    "celebrate",
+    "animation",
+    "effects"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/clarkfannin/yayjs.git"
+  },
+  "author": "Clark Fannin",
+  "license": "MIT"
+}

package/src/hooray.css

@@ -0,0 +1,94 @@
+* {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    height: 100vh;
+}
+
+#hooray-form {
+    background-color: rgb(250, 249, 240);
+    border-radius: 16px;
+    border: 2px solid black;
+    box-shadow: 2px 2px 2px black;
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+}
+
+#hooray-form-title {
+    text-align: center;
+    margin: 0 auto 8px;
+    font-size: 42px;
+}
+
+#hooray-form-label {
+    display: inline-block;
+    max-width: 280px;
+    text-align: center;
+    font-size: 16px;
+    margin: 0 auto 16px;
+}
+
+#hooray-form-input {
+    border-radius: 8px;
+    font-size: 16px;
+    padding: 4px;
+}
+
+#hooray-form-input-wrapper {
+    margin: 0 auto;
+}
+
+#hooray-form-submit {
+    background: black;
+    border-radius: 8px;
+    color: rgb(250, 249, 240);
+    cursor: pointer;
+    font-size: 16px;
+    padding: 4px;
+}
+
+#hooray-form-submit:active {
+    padding: 3px;
+    margin: 1px;
+}
+
+.hooray-piece {
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    display: block;
+    position: fixed;
+    animation: hooray-fall var(--duration) ease-out both;
+}
+
+@keyframes hooray-fall {
+    0% {
+        transform: translate(0, 0) rotate(var(--rot));
+        animation-timing-function: ease-out;
+        opacity: 1;
+    }
+
+    15% {
+        transform: translate(var(--burst-x), var(--burst-y)) rotate(calc(var(--rot) + 120deg));
+        animation-timing-function: ease-in;
+    }
+
+    100% {
+        transform: translate(calc(var(--burst-x) + var(--fall-x)), calc(100vh + 100%)) rotate(calc(var(--rot) + 540deg));
+        opacity: 1;
+    }
+}

package/src/hooray.js

@@ -0,0 +1,138 @@
+class Hooray {
+	static #isPainting = false;
+
+	#pieces;
+	#target;
+	#options;
+
+	constructor(target, options = {}) {
+		this.#pieces = [];
+
+		this.#target = target;
+
+		this.#options = {
+			count: 100,
+			width: target.clientWidth / 4,
+			height: (target.clientWidth / 4) * 0.6,
+			duration: 3000,
+			spread: 200,
+			mobileSpread: 50,
+			...options,
+		};
+
+		if (this.#options.count > 2500) {
+			console.warn(
+				`hooray: count capped at 2500 (requested ${this.options.count})`,
+			);
+			this.options.count = 2500;
+		}
+
+		this.warn = () => {
+			if (this.#options.count > 1000)
+				console.warn(
+					"hooray: a high count > 1000 is likely to impact performance",
+				);
+		};
+		this.warn();
+	}
+
+	paint() {
+		if (Hooray.#isPainting) return;
+		Hooray.#isPainting = true;
+		for (let i = 0; i < this.#options.count; i++) {
+			const el = document.createElement("span");
+			el.classList.add("hooray-piece");
+
+			if (this.#options.image) {
+				// one value up front to retain image proportions
+				const rand = Math.random();
+				el.style.width = `${rand * this.#options.width}px`;
+				el.style.height = `${rand * this.#options.height}px`;
+
+				if (this.#options.color) {
+					el.style.backgroundColor = this.#options.color;
+					el.style.maskImage = `url(${this.#options.image})`;
+				} else {
+					el.style.backgroundImage = `url(${this.#options.image})`;
+				}
+			} else {
+				// randomize size if generating CSS confetti
+				el.style.width = `${Math.random() * this.#options.width}px`;
+				el.style.height = `${Math.random() * this.#options.height}px`;
+
+				// randomize color if generating CSS confetti
+				el.style.background = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;
+			}
+
+			const rect = this.#target.getBoundingClientRect();
+			el.style.left = `${rect.left + rect.width / 2}px`;
+			el.style.top = `${rect.top + rect.height / 2}px`;
+
+			const angle = Math.random() * Math.PI * 2;
+			const viewportWidth = window.innerWidth;
+			let distance;
+			if (viewportWidth < 800) {
+				distance = 80 + Math.random() * this.#options.mobileSpread;
+			} else {
+				distance = 80 + Math.random() * this.#options.spread;
+			}
+			el.style.setProperty(
+				`--burst-x`,
+				`${Math.random() * Math.cos(angle) * distance}px`,
+			);
+			el.style.setProperty(
+				`--burst-y`,
+				`${Math.random() * Math.sin(angle) * distance}px`,
+			);
+
+			el.style.setProperty(`--fall-x`, `0px`);
+			el.style.setProperty(`--rot`, `${Math.floor(Math.random() * 365)}deg`);
+
+			el.style.setProperty(
+				`--duration`,
+				`${(this.#options.duration / 1000).toFixed(2)}s`,
+			);
+			el.style.animationDelay = `${Math.random() * 0.1}s`;
+
+			this.#pieces.push(el);
+			document.body.append(el);
+		}
+
+		setTimeout(() => {
+			Hooray.#isPainting = false;
+			this.cleanup();
+		}, this.#options.duration);
+	}
+
+	cleanup() {
+		this.#pieces.forEach((piece) => {
+			piece.remove();
+		});
+	}
+}
+
+export const hooray = (target, options = {}) => {
+	const y = new Hooray(target, options);
+	y.paint();
+};
+
+document.querySelectorAll(".hooray-target").forEach((el) => {
+	el.addEventListener("click", (e) => {
+		hooray(e.target, {
+			count: 1000,
+			duration: 2500,
+			width: 10,
+			height: 10,
+			spread: 100,
+		});
+	});
+});
+
+/*
+options: {
+    count: 200, // number of pieces; density
+    width: target.clientWidth / 10, // width in px
+    height: (target.clientWidth / 10) * 0.6, // height in px
+    duration: 3000, // duration of the animation from start to finish
+}
+*/

package/src/images/heart.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="130"
+   height="130"
+   id="svg2">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <path
+     d="M 65,29 C 59,19 49,12 37,12 20,12 7,25 7,42 7,75 25,80 65,118 105,80 123,75 123,42 123,25 110,12 93,12 81,12 71,19 65,29 z"
+     id="path4"
+     style="fill:#ff0707" />
+</svg>

package/src/images/star.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800px" height="800px" viewBox="0 -0.5 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+    <title>star</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+    <g id="Vivid.JS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Vivid-Icons" transform="translate(-903.000000, -411.000000)" fill="#FF6E6E">
+            <g id="Icons" transform="translate(37.000000, 169.000000)">
+                <g id="star" transform="translate(858.000000, 234.000000)">
+                    <g transform="translate(7.000000, 8.000000)" id="Shape">
+                        <polygon points="27.865 31.83 17.615 26.209 7.462 32.009 9.553 20.362 0.99 12.335 12.532 10.758 17.394 0 22.436 10.672 34 12.047 25.574 20.22">
+
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>