EmeraldHQ · WarningImHack3r · May 2, 2023 · Apr 29, 2023 · Apr 29, 2023 · Apr 29, 2023
@@ -14,8 +14,8 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
+		"@babeard/svelte-heroicons": "2.0.0-rc.0",
 		"@rgossiaux/svelte-headlessui": "^1.0.2",
-		"@rgossiaux/svelte-heroicons": "^0.1.2",
 		"@sveltejs/adapter-static": "^2.0.2",
 		"@sveltejs/kit": "^1.15.9",
 		"@types/node": "^18.16.3",
@@ -32,6 +32,7 @@
 		"svelte": "^3.58.0",
 		"svelte-check": "^3.2.0",
 		"tailwindcss": "^3.3.2",
+		"tailwindcss-3d": "^0.2.2",
 		"tslib": "^2.5.0",
 		"typescript": "^5.0.4",
 		"vite": "^4.3.3"

@@ -4,10 +4,9 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
 		<meta name="viewport" content="width=device-width" />
-		<title>Loading...</title>
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="bg-primary text-primary">
+	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
@@ -0,0 +1,105 @@
+<!-- Created from https://github.com/andrewwoan/magnetic-button-effect-tutorial-01 -->
+<script lang="ts">
+	import { createEventDispatcher, onMount } from "svelte";
+	import { useId } from "$lib/ts/id";
+
+	// Constants
+	const elementId = `svelte-magnetic-element-${useId()}`;
+	const dispatch = createEventDispatcher();
+
+	// Configuration
+	export let triggerArea = 200;
+	export let interpolationFactor = 0.8;
+
+	// Magnetic Object
+	class MagneticObject {
+		mousePosition: { x: number; y: number };
+		domElement: HTMLElement;
+		boundingClientRect: DOMRect;
+		inArea: boolean;
+		lerpingData: {
+			x: { current: number; target: number };
+			y: { current: number; target: number };
+		};
+
+		constructor(domElement: HTMLElement) {
+			this.domElement = domElement;
+			this.boundingClientRect = this.domElement.getBoundingClientRect();
+
+			this.mousePosition = { x: 0, y: 0 };
+			this.inArea = false;
+
+			this.lerpingData = {
+				x: { current: 0, target: 0 },
+				y: { current: 0, target: 0 }
+			};
+
+			this.render();
+			window.addEventListener("resize", () => {
+				this.boundingClientRect = this.domElement.getBoundingClientRect();
+			});
+			document.addEventListener("mousemove", (e) => {
+				this.mousePosition.x = e.pageX;
+				this.mousePosition.y = e.pageY;
+				this.render();
+			});
+		}
+
+		render() {
+			const distanceFromMouseToCenter = this.calculateDistance(
+				this.mousePosition.x,
+				this.mousePosition.y,
+				this.boundingClientRect.left + this.boundingClientRect.width / 2,
+				this.boundingClientRect.top + this.boundingClientRect.height / 2
+			);
+
+			let targetHolder = { x: 0, y: 0 };
+
+			if (distanceFromMouseToCenter < triggerArea) {
+				if (!this.inArea) {
+					this.inArea = true;
+					this.domElement.classList.add("in-zone");
+					dispatch("in_zone", { element: this.domElement });
+				}
+				targetHolder.x =
+					(this.mousePosition.x -
+						(this.boundingClientRect.left + this.boundingClientRect.width / 2)) *
+					0.2;
+				targetHolder.y =
+					(this.mousePosition.y -
+						(this.boundingClientRect.top + this.boundingClientRect.height / 2)) *
+					0.2;
+			} else if (this.inArea) {
+				this.inArea = false;
+				this.domElement.classList.remove("in-zone");
+				dispatch("out_zone", { element: this.domElement });
+			}
+			this.lerpingData["x"].target = targetHolder.x;
+			this.lerpingData["y"].target = targetHolder.y;
+
+			for (const item of Object.values(this.lerpingData)) {
+				const lerp = this.lerp(item.current, item.target, interpolationFactor);
+				item.current = Math.abs(lerp) < 0.1 ? 0 : lerp;
+			}
+
+			this.domElement.style.transform = `translate(${this.lerpingData["x"].current}px, ${this.lerpingData["y"].current}px)`;
+		}
+
+		private calculateDistance(x1: number, y1: number, x2: number, y2: number) {
+			return Math.hypot(x1 - x2, y1 - y2);
+		}
+
+		private lerp(current: number, target: number, factor: number) {
+			return current * (1 - factor) + target * factor;
+		}
+	}
+
+	onMount(() => {
+		const button = document.querySelector(`.${elementId} > *`);
+		new MagneticObject(<HTMLElement>button);
+	});
+</script>
+
+<div class="{elementId} {$$props.class}">
+	<slot />
+</div>
@@ -0,0 +1,77 @@
+<!-- Created from https://codepen.io/kevinpowell/pen/GRBdLEv -->
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { useId } from "$lib/ts/id";
+
+	const elementId = `svelte-mouse-tilt-${useId()}`;
+	let firstFire = true;
+	let isWorking = false;
+
+	// Svelte Props
+	export let initialX = 0;
+	export let initialY = 0;
+	export let intensity = 0.5;
+
+	// Rotate Element
+	async function rotateElement(event: MouseEvent, element: HTMLElement) {
+		if (isWorking) return;
+		function setProperties() {
+			element.style.setProperty("--rotateX", offsetX + "deg");
+			element.style.setProperty("--rotateY", -1 * offsetY + "deg");
+		}
+
+		// Get mouse position
+		const x = event.clientX;
+		const y = event.clientY;
+
+		// Find the middle
+		const middleX = window.innerWidth / 2;
+		const middleY = window.innerHeight / 2;
+
+		// Get offset from middle as a percentage
+		// and tone it down a little
+		const offsetX = ((x - middleX) / middleX) * (intensity * 100);
+		const offsetY = ((y - middleY) / middleY) * (intensity * 100);
+
+		// Set rotation
+		if (firstFire) {
+			setProperties();
+			isWorking = true;
+			// Caveat: Doesn't solve the problem if you move too much during the x ms
+			await new Promise<void>((resolve) =>
+				setTimeout(() => {
+					element.classList.remove("transition-transform", "duration-500");
+					resolve();
+				}, 500)
+			);
+			isWorking = false;
+			firstFire = false;
+		} else {
+			setProperties();
+		}
+	}
+
+	onMount(() => {
+		const element = document.querySelector(`.${elementId}`);
+		const listener = (e: MouseEvent) => rotateElement(e, <HTMLElement>element);
+		document.addEventListener("mousemove", listener);
+
+		return () => {
+			document.removeEventListener("mousemove", listener);
+		};
+	});
+</script>
+
+<div
+	class="{elementId} transition-transform duration-500 {$$props.class}"
+	style="
+				--rotateX: 0deg;
+				--rotateY: 0deg;
+				transform: perspective(312rem)
+									rotateX(calc({initialX}deg + var(--rotateY)))
+									rotateY(calc({initialY}deg + var(--rotateX)));
+				transform-style: preserve-3d;
+	"
+>
+	<slot />
+</div>
@@ -0,0 +1,8 @@
+<section id={$$props.id} class="child:mx-20 py-10">
+	{#if $$slots.title}
+		<h2 class="drop-shadow-lg pb-10 !ml-24 text-4xl">
+			<slot name="title" />
+		</h2>
+	{/if}
+	<slot />
+</section>
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { XIcon } from "@rgossiaux/svelte-heroicons/outline";
+	import { XMarkIcon } from "@babeard/svelte-heroicons/outline";
 	import {
 		Dialog,
 		DialogOverlay,
@@ -51,7 +51,7 @@
 										<div class="ml-3 flex h-7 items-center">
 											<button type="button" class="-m-2 p-2 hover:opacity-75" on:click={close}>
 												<span class="sr-only">Close panel</span>
-												<XIcon class="h-6 w-6" aria-hidden="true" />
+												<XMarkIcon class="h-6 w-6" aria-hidden="true" />
 											</button>
 										</div>
 									</div>

@@ -0,0 +1,10 @@
+// From https://github.com/rgossiaux/svelte-headlessui/blob/master/src/lib/hooks/use-id.ts
+let id = 0;
+
+function generateId() {
+	return ++id;
+}
+
+export function useId() {
+	return generateId();
+}
@@ -4,13 +4,26 @@
 
 {#if type === "primary"}
 	<button
-		class="font-medium text-lg text-inverted border-[1px] border-transparent bg-dominant rounded-xl py-1 px-3 transition-colors duration-300 hover:bg-inherit hover:border-dominant hover:text-dominant"
+		class="font-medium text-lg text-inverted
+		bg-dominant
+		border-transparent border-[1px]
+		py-1 px-3
+		inline-flex items-center gap-2
+		rounded-xl transition-colors duration-300
+		hover:bg-inherit hover:border-dominant hover:text-dominant
+	  {$$props.class}"
 	>
 		<slot />
 	</button>
 {:else if type === "secondary"}
 	<button
-		class="font-medium text-lg border-dominant border-[1px] text-dominant rounded-xl py-1 px-3 transition-colors duration-300 hover:border-primary hover:text-primary"
+		class="font-medium text-lg text-dominant
+		border-dominant border-[1px]
+		py-1 px-3
+		inline-flex items-center gap-2
+		rounded-xl transition-colors duration-300
+		hover:border-primary hover:text-primary
+	  {$$props.class}"
 	>
 		<slot />
 	</button>