+
+ 
+
+
+
+
+
+ 11twink Colours
+ Farbe Kopiert:
+
+
+
+
+ Base Colours
+
+
+
+
+
+
+ Trans Pink
#F5A9B8
+ #F5A9B8
Trans Blue
#5BCFFA
+ #5BCFFA
Trans White
#FFFFFF
+ #FFFFFF
Text Colour
#F2F5F4
+ #F2F5F4
Background Colour
#161618
+ #161618
Jax' Colours
+
+
+
+
+
+
+ Skin
#A8C5DB
+ #A8C5DB
Tongue
#40397B
+ #40397B
Dyed Hair
#F5A9B8
+ #F5A9B8
Natural Hair
#12354B
+ #12354B
Eyes
#105522
+ #105522
Freckles
#12404B
+ #12404B
Overlay Colours
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/background.js b/js/background.js
new file mode 100644
index 0000000..91c4bf6
--- /dev/null
+++ b/js/background.js
@@ -0,0 +1,119 @@
+(() => {
+ document.addEventListener("DOMContentLoaded", () => {
+ const canvas = document.getElementById("backgroundCanvas");
+ if (!canvas) return;
+
+ if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+ const ctx = canvas.getContext("2d", { alpha: true, desynchronized: true });
+
+ const isMobile = window.matchMedia("(max-width: 768px)").matches;
+ const DPR_CAP = Math.min(1.5, isMobile ? 1.0 : 1.25);
+
+ const getOrbCount = () => {
+ const baseCount = Math.floor((window.innerWidth * window.innerHeight) / 40000);
+ return Math.min(Math.max(baseCount, isMobile ? 15 : 25), isMobile ? 30 : 50);
+ };
+
+ const R_MIN = isMobile ? 3 : 4;
+ const R_MAX = isMobile ? 8 : 12;
+ const SPEED = isMobile ? 0.08 : 0.12;
+
+ const PINK = [245, 169, 184];
+ const BLUE = [91, 207, 250];
+
+ let w = 0, h = 0, dpr = 1;
+ let orbs = [];
+ let raf = 0;
+ let last = 0;
+
+ function resize() {
+ w = window.innerWidth;
+ h = window.innerHeight;
+
+ dpr = Math.min(DPR_CAP, window.devicePixelRatio || 1);
+ canvas.width = Math.floor(w * dpr);
+ canvas.height = Math.floor(h * dpr);
+ canvas.style.width = w + "px";
+ canvas.style.height = h + "px";
+
+ ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+ createOrbs();
+ last = 0;
+ }
+
+ function createOrbs() {
+ const count = getOrbCount();
+ orbs = new Array(count);
+
+ for (let i = 0; i < count; i++) {
+ const r = Math.random() * (R_MAX - R_MIN) + R_MIN;
+ const color = Math.random() > 0.5 ? PINK : BLUE;
+ orbs[i] = {
+ x: Math.random() * w,
+ y: Math.random() * h,
+ r,
+ a: Math.random() * 0.15 + 0.4,
+ vx: (Math.random() - 0.5) * SPEED,
+ vy: (Math.random() - 0.5) * SPEED,
+ color: color
+ };
+ }
+ }
+
+ function step() {
+ ctx.clearRect(0, 0, w, h);
+
+ for (let i = 0; i < orbs.length; i++) {
+ const o = orbs[i];
+ o.x += o.vx;
+ o.y += o.vy;
+
+ const margin = o.r * 3;
+ if (o.x < -margin) o.x = w + margin;
+ else if (o.x > w + margin) o.x = -margin;
+ if (o.y < -margin) o.y = h + margin;
+ else if (o.y > h + margin) o.y = -margin;
+
+ ctx.beginPath();
+ ctx.arc(o.x, o.y, o.r, 0, Math.PI * 2);
+ ctx.fillStyle = `rgba(${o.color[0]}, ${o.color[1]}, ${o.color[2]}, ${o.a})`;
+ ctx.fill();
+ }
+ }
+
+ function tick(now) {
+ if (document.hidden) {
+ raf = 0;
+ return;
+ }
+
+ if (!last) last = now;
+ if (now - last >= 16) {
+ last = now;
+ step();
+ }
+
+ raf = requestAnimationFrame(tick);
+ }
+
+ let resizeTimer;
+ window.addEventListener("resize", () => {
+ clearTimeout(resizeTimer);
+ resizeTimer = setTimeout(resize, 150);
+ }, { passive: true });
+
+ document.addEventListener("visibilitychange", () => {
+ if (document.hidden) {
+ cancelAnimationFrame(raf);
+ raf = 0;
+ } else if (!raf) {
+ last = 0;
+ raf = requestAnimationFrame(tick);
+ }
+ });
+
+ resize();
+ raf = requestAnimationFrame(tick);
+ });
+})();
\ No newline at end of file
#C6F940
+ #6D51E3
+ #1D1E68
+ #255872
+ #FF5E9E
+ #FF95DA
+ #FFF8C8
+ #FF7B7C
+ #1D435C
+ #D47FBC
+