svelte-confetti-explosion 0.0.1 → 0.0.2

package/ConfettiExplosion.svelte

@@ -0,0 +1,302 @@
+<script  context="module">const ROTATION_SPEED_MIN = 200; // minimum possible duration of single particle full rotation
+const ROTATION_SPEED_MAX = 800; // maximum possible duration of single particle full rotation
+const CRAZY_PARTICLES_FREQUENCY = 0.1; // 0-1 frequency of crazy curvy unpredictable particles
+const CRAZY_PARTICLE_CRAZINESS = 0.3; // 0-1 how crazy these crazy particles are
+const BEZIER_MEDIAN = 0.5; // utility for mid-point bezier curves, to ensure smooth motion paths
+const FORCE = 0.5; // 0-1 roughly the vertical force at which particles initially explode
+const SIZE = 12; // max height for particle rectangles, diameter for particle circles
+const FLOOR_HEIGHT = 800; // pixels the particles will fall from initial explosion point
+const FLOOR_WIDTH = 1600; // horizontal spread of particles in pixels
+const PARTICLE_COUNT = 150;
+const DURATION = 3500;
+const COLORS = ['#FFC700', '#FF0000', '#2E3191', '#41BBC7'];
+const createParticles = (count, colors) => {
+    const increment = 360 / count;
+    return Array.from({ length: count }, (_, i) => ({
+        color: colors[i % colors.length],
+        degree: i * increment,
+    }));
+};
+const waitFor = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+// From here: https://stackoverflow.com/a/11832950
+function round(num, precision = 2) {
+    return Math.round((num + Number.EPSILON) * 10 ** precision) / 10 ** precision;
+}
+function arraysEqual(a, b) {
+    if (a === b)
+        return true;
+    if (a == null || b == null)
+        return false;
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++)
+        if (a[i] !== b[i])
+            return false;
+    return true;
+}
+const mapRange = (value, x1, y1, x2, y2) => ((value - x1) * (y2 - x2)) / (y1 - x1) + x2;
+const rotate = (degree, amount) => {
+    const result = degree + amount;
+    return result > 360 ? result - 360 : result;
+};
+const coinFlip = () => Math.random() > 0.5;
+// avoid this for circles, as it will have no visual effect
+const zAxisRotation = [0, 0, 1];
+const rotationTransforms = [
+    // dual axis rotations (a bit more realistic)
+    [1, 1, 0],
+    [1, 0, 1],
+    [0, 1, 1],
+    // single axis rotations (a bit dumber)
+    [1, 0, 0],
+    [0, 1, 0],
+    zAxisRotation,
+];
+const shouldBeCircle = (rotationIndex) => !arraysEqual(rotationTransforms[rotationIndex], zAxisRotation) && coinFlip();
+const isUndefined = (value) => typeof value === 'undefined';
+const error = (message) => {
+    console.error(message);
+};
+function validate(particleCount, duration, colors, particleSize, force, floorHeight, floorWidth) {
+    const isSafeInteger = Number.isSafeInteger;
+    if (!isUndefined(particleCount) && isSafeInteger(particleCount) && particleCount < 0) {
+        error('particleCount must be a positive integer');
+        return false;
+    }
+    if (!isUndefined(duration) && isSafeInteger(duration) && duration < 0) {
+        error('duration must be a positive integer');
+        return false;
+    }
+    if (!isUndefined(colors) && !Array.isArray(colors)) {
+        error('colors must be an array of strings');
+        return false;
+    }
+    if (!isUndefined(particleSize) && isSafeInteger(particleSize) && particleSize < 0) {
+        error('particleSize must be a positive integer');
+        return false;
+    }
+    if (!isUndefined(force) && isSafeInteger(force) && (force < 0 || force > 1)) {
+        error('force must be a positive integer and should be within 0 and 1');
+        return false;
+    }
+    if (!isUndefined(floorHeight) &&
+        typeof floorHeight === 'number' &&
+        isSafeInteger(floorHeight) &&
+        floorHeight < 0) {
+        error('floorHeight must be a positive integer');
+        return false;
+    }
+    if (!isUndefined(floorWidth) &&
+        typeof floorWidth === 'number' &&
+        isSafeInteger(floorWidth) &&
+        floorWidth < 0) {
+        error('floorWidth must be a positive integer');
+        return false;
+    }
+    return true;
+}
+</script>
+
+<script >import { onMount } from 'svelte';
+/**
+ * Number of confetti particles to create
+ *
+ * @default 150
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion particleCount={200} />
+ * ```
+ */
+export let particleCount = PARTICLE_COUNT;
+/**
+ * Duration of the animation in milliseconds
+ *
+ * @default 3500
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion duration={5000} />
+ * ```
+ */
+export let duration = DURATION;
+/**
+ * Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors,
+ * CSS Variables, literally anything valid in plain CSS.
+ *
+ * @default ['#FFC700', '#FF0000', '#2E3191', '#41BBC7']
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
+ * ```
+ */
+export let colors = COLORS;
+/**
+ * Size of the confetti particles in pixels
+ *
+ * @default 12
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion particleSize={20} />
+ * ```
+ */
+export let particleSize = SIZE;
+/**
+ * Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force.
+ *
+ * @default 0.5
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion force={0.8} />
+ * ```
+ */
+export let force = FORCE;
+/**
+ * Height of the floor in pixels. Confetti will only fall within this height.
+ *
+ * @default 800
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion floorHeight={500} />
+ * ```
+ */
+export let floorHeight = FLOOR_HEIGHT;
+/**
+ * Width of the floor in pixels. Confetti will only fall within this width.
+ *
+ * @default 1600
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion floorWidth={1000} />
+ * ```
+ */
+export let floorWidth = FLOOR_WIDTH;
+/**
+ * Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to preserve memory.
+ *
+ * @default true
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion shouldDestroyAfterDone={false} />
+ * ```
+ */
+export let shouldDestroyAfterDone = true;
+let isVisible = true;
+$: particles = createParticles(particleCount, colors);
+$: isValid = validate(particleCount, duration, colors, particleSize, force, floorHeight, floorWidth);
+onMount(async () => {
+    await waitFor(duration);
+    if (shouldDestroyAfterDone) {
+        isVisible = false;
+    }
+});
+function confettiStyles(node, { degree }) {
+    // Get x landing point for it
+    const landingPoint = mapRange(Math.abs(rotate(degree, 90) - 180), 0, 180, -floorWidth / 2, floorWidth / 2);
+    // Crazy calculations for generating styles
+    const rotation = Math.random() * (ROTATION_SPEED_MAX - ROTATION_SPEED_MIN) + ROTATION_SPEED_MIN;
+    const rotationIndex = Math.round(Math.random() * (rotationTransforms.length - 1));
+    const durationChaos = duration - Math.round(Math.random() * 1000);
+    const shouldBeCrazy = Math.random() < CRAZY_PARTICLES_FREQUENCY;
+    const isCircle = shouldBeCircle(rotationIndex);
+    // x-axis disturbance, roughly the distance the particle will initially deviate from its target
+    const x1 = shouldBeCrazy ? round(Math.random() * CRAZY_PARTICLE_CRAZINESS, 2) : 0;
+    const x2 = x1 * -1;
+    const x3 = x1;
+    // x-axis arc of explosion, so 90deg and 270deg particles have curve of 1, 0deg and 180deg have 0
+    const x4 = round(Math.abs(mapRange(Math.abs(rotate(degree, 90) - 180), 0, 180, -1, 1)), 4);
+    // roughly how fast particle reaches end of its explosion curve
+    const y1 = round(Math.random() * BEZIER_MEDIAN, 4);
+    // roughly maps to the distance particle goes before reaching free-fall
+    const y2 = round(Math.random() * force * (coinFlip() ? 1 : -1), 4);
+    // roughly how soon the particle transitions from explosion to free-fall
+    const y3 = BEZIER_MEDIAN;
+    // roughly the ease of free-fall
+    const y4 = round(Math.max(mapRange(Math.abs(degree - 180), 0, 180, force, -force), 0), 4);
+    const setCSSVar = (key, val) => node.style.setProperty(key, val + '');
+    setCSSVar('--x-landing-point', `${landingPoint}px`);
+    setCSSVar('--duration-chaos', `${durationChaos}ms`);
+    setCSSVar('--x1', `${x1}`);
+    setCSSVar('--x2', `${x2}`);
+    setCSSVar('--x3', `${x3}`);
+    setCSSVar('--x4', `${x4}`);
+    setCSSVar('--y1', `${y1}`);
+    setCSSVar('--y2', `${y2}`);
+    setCSSVar('--y3', `${y3}`);
+    setCSSVar('--y4', `${y4}`);
+    // set --width and --height here
+    setCSSVar('--width', `${isCircle ? particleSize : Math.round(Math.random() * 4) + particleSize / 2}px`);
+    setCSSVar('--height', (isCircle ? particleSize : Math.round(Math.random() * 2) + particleSize) + 'px');
+    setCSSVar('--rotation', `${rotationTransforms[rotationIndex].join()}`);
+    setCSSVar('--rotation-duration', `${rotation}ms`);
+    setCSSVar('--border-radius', `${isCircle ? '50%' : '0'}`);
+}
+</script>
+
+{#if isVisible && isValid}
+	<div class="container" style="--floor-height: {floorHeight}px;">
+		{#each particles as { color, degree }}
+			<div class="particle" use:confettiStyles={{ degree }}>
+				<div style="--bgcolor: {color};" />
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style >@keyframes y-axis {
+  to {
+    transform: translate3d(0, var(--floor-height), 0);
+  }
+}
+@keyframes x-axis {
+  to {
+    transform: translate3d(var(--x-landing-point), 0, 0);
+  }
+}
+@keyframes rotation {
+  to {
+    transform: rotate3d(var(--rotation), 360deg);
+  }
+}
+.container {
+  width: 0;
+  height: 0;
+  overflow: visible;
+  position: relative;
+  z-index: 1200;
+}
+
+.particle {
+  animation: x-axis var(--duration-chaos) forwards cubic-bezier(var(--x1), var(--x2), var(--x3), var(--x4));
+}
+.particle div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  animation: y-axis var(--duration-chaos) forwards cubic-bezier(var(--y1), var(--y2), var(--y3), var(--y4));
+  width: var(--width);
+  height: var(--height);
+}
+.particle div:before {
+  display: block;
+  height: 100%;
+  width: 100%;
+  content: "";
+  background-color: var(--bgcolor);
+  animation: rotation var(--rotation-duration) infinite linear;
+  border-radius: var(--border-radius);
+}</style>

package/ConfettiExplosion.svelte.d.ts

@@ -0,0 +1,104 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+             * Number of confetti particles to create
+             *
+             * @default 150
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion particleCount={200} />
+             * ```
+             */ particleCount?: number;
+        /**
+             * Duration of the animation in milliseconds
+             *
+             * @default 3500
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion duration={5000} />
+             * ```
+             */ duration?: number;
+        /**
+             * Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors,
+             * CSS Variables, literally anything valid in plain CSS.
+             *
+             * @default ['#FFC700', '#FF0000', '#2E3191', '#41BBC7']
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
+             * ```
+             */ colors?: string[];
+        /**
+             * Size of the confetti particles in pixels
+             *
+             * @default 12
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion particleSize={20} />
+             * ```
+             */ particleSize?: number;
+        /**
+             * Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force.
+             *
+             * @default 0.5
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion force={0.8} />
+             * ```
+             */ force?: number;
+        /**
+             * Height of the floor in pixels. Confetti will only fall within this height.
+             *
+             * @default 800
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion floorHeight={500} />
+             * ```
+             */ floorHeight?: number;
+        /**
+             * Width of the floor in pixels. Confetti will only fall within this width.
+             *
+             * @default 1600
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion floorWidth={1000} />
+             * ```
+             */ floorWidth?: number;
+        /**
+             * Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to preserve memory.
+             *
+             * @default true
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion shouldDestroyAfterDone={false} />
+             * ```
+             */ shouldDestroyAfterDone?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ConfettiExplosionProps = typeof __propDef.props;
+export declare type ConfettiExplosionEvents = typeof __propDef.events;
+export declare type ConfettiExplosionSlots = typeof __propDef.slots;
+export default class ConfettiExplosion extends SvelteComponentTyped<ConfettiExplosionProps, ConfettiExplosionEvents, ConfettiExplosionSlots> {
+}
+export {};

package/index.js

@@ -0,0 +1 @@
+export { default as ConfettiExplosion } from './ConfettiExplosion.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-confetti-explosion",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "svelte": "./ConfettiExplosion.svelte",
   "devDependencies": {
     "@sveltejs/kit": "^1.0.0-next.197",
@@ -15,14 +15,8 @@
     "typescript": "^4.5.2"
   },
   "type": "module",
-  "scripts": {
-    "dev": "svelte-kit dev",
-    "build": "svelte-kit build",
-    "package": "svelte-kit package",
-    "preview": "svelte-kit preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
-    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./index.js"
   }
 }

package/.prettierrc

@@ -1,5 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"printWidth": 100
-}