BackHave a question, a suggestion,
or just want to say hi?
Feel free to send me a message!
/* NOTE: Carrd puts this whole script on ONE line and cuts it at the first "less than" sign. So: only block comments like this one, and never use that sign (comparisons are written with the greater-than sign). */ (function () { var root = document.documentElement; if (root.getAttribute('data-fm')) return; root.setAttribute('data-fm', '1'); var wrap = document.querySelector('.fm-wrap'); /* an older copy of this glow embed marks the home block; if one is already running, leave the home page to it (no double lights) */ var older = wrap ? !!wrap.getAttribute('data-fm') : false; if (wrap) wrap.setAttribute('data-fm', '1'); if (older) wrap = null; /* entrance animation: hide first, then play once Carrd has finished loading the page */ var reduce = window.matchMedia ? matchMedia('(prefers-reduced-motion: reduce)').matches : false; if (wrap ? !reduce : false) { wrap.classList.add('fm-pre'); var start = function () { var tries = 0; (function check() { tries++; if (document.body.classList.contains('is-loading') ? 40 > tries : false) return setTimeout(check, 50); setTimeout(function () { wrap.classList.remove('fm-pre'); wrap.classList.add('fm-in'); }, 200); })(); }; if (document.readyState === 'complete') start(); else window.addEventListener('load', start); setTimeout(function () { wrap.classList.remove('fm-pre'); }, 4000); /* safety net */ } /* ---------- glowing background ---------- Spots in YOUR background picture, measured on the 1254 x 1254 original: [x, y, size] */ var GLOWS = [[968, 59, 10], [242, 157, 10], [38, 325, 9], [1200, 348, 10], [28, 807, 8], [1168, 899, 7], [938, 1041, 6], [166, 686, 3], [1189, 789, 4], [181, 910, 4], [303, 987, 3], [1053, 1027, 3]]; var SPARKLES = [[1041, 110, 16], [183, 308, 12], [1068, 310, 12], [122, 808, 13], [1093, 990, 17], [792, 1178, 20], [792, 1208, 44], [320, 1214, 20]]; var LOTUS = [1103, 1112, 330]; /* rising lights, all at fixed spots near the edges and the water: fireflies [x, y, size, how high they rise, seconds, delay, sway] */ var FLIES = [[90, 520, 6, 260, 9, 0, 14], [1160, 560, 6, 260, 10, 3, -14], [150, 760, 5, 240, 8.5, 5, 12], [1110, 760, 5, 240, 9.5, 1.5, -12], [60, 330, 4, 200, 8, 6, 10], [1200, 300, 4, 200, 9, 2.5, -10], [250, 1000, 5, 260, 10, 4, 12], [1020, 960, 5, 260, 9, 7, -12], [190, 200, 4, 180, 8.5, 1, 10], [1080, 180, 4, 180, 9.5, 5.5, -10]]; /* big soft out-of-focus glows [x, y, size, rise, seconds, delay, sway] */ var BOKEH = [[70, 700, 24, 220, 13, 0, 16], [1190, 500, 20, 220, 14, 6, -16], [330, 180, 16, 160, 12, 3, 10], [960, 1150, 22, 200, 13, 8, -12]]; /* specks rising from the water and lily pads [x, y, size, rise, seconds, delay, sway] */ var RISE = [[180, 1110, 3, 180, 6, 0, 10], [260, 1130, 3, 200, 7, 2.5, -10], [560, 1200, 3, 170, 6.5, 1.2, 8], [700, 1210, 3, 190, 7, 4, -8], [1020, 1110, 3, 180, 6, 3, 10], [1160, 1120, 3, 200, 7.5, .6, -10], [880, 1190, 3, 170, 6.5, 5, 8], [400, 1190, 3, 180, 7, 3.6, -8]]; var BASE = 1254; function splitLayers(v) { /* split "url(a), linear-gradient(b, c)" into layers */ var out = [], depth = 0, cur = ''; for (var i = 0; v.length > i; i++) { var c = v.charAt(i); if (c === '(') depth++; if (c === ')') depth--; if (c === ',' ? depth === 0 : false) { out.push(cur.trim()); cur = ''; } else cur += c; } out.push(cur.trim()); return out; } function findBg(anchor) { /* the element (or its ::before / ::after) that paints your background picture: your Container */ for (var el = anchor.parentElement; el; el = el.parentElement) { if (el === document.documentElement) break; var opts = [null, '::before', '::after']; for (var k = 0; opts.length > k; k++) { var cs = getComputedStyle(el, opts[k]); if (cs.backgroundImage.indexOf('url(') === -1) continue; var imgs = splitLayers(cs.backgroundImage), idx = -1; for (var j = 0; imgs.length > j; j++) if (imgs[j].indexOf('url(') === 0) { idx = j; break; } if (0 > idx) continue; var pick = function (v) { var l = splitLayers(v); return l[Math.min(idx, l.length - 1)]; }; return { el: el, url: imgs[idx].replace(/^url\(["']?/, '').replace(/["']?\)$/, ''), size: pick(cs.backgroundSize), px: pick(cs.backgroundPositionX), py: pick(cs.backgroundPositionY) }; } } return null; } function len(v, box, img) { /* background-position value to a px offset */ if (/%$/.test(v)) return (box - img) * parseFloat(v) / 100; if (/px$/.test(v)) return parseFloat(v); if (v === 'center') return (box - img) / 2; if (v === 'right') return box - img; if (v === 'bottom') return box - img; return 0; } function imageRect(bg, W, H, iw, ih) { /* where the picture is actually drawn inside the box */ var w, h, sz = bg.size.split(/\s+/); if (sz[0] === 'cover' ? true : sz[0] === 'contain') { var k = sz[0] === 'cover' ? Math.max(W / iw, H / ih) : Math.min(W / iw, H / ih); w = iw * k; h = ih * k; } else { var one = function (v, box) { if (v === 'auto' ? true : v == null) return null; return /%$/.test(v) ? box * parseFloat(v) / 100 : parseFloat(v); }; w = one(sz[0], W); h = one(sz[1], H); if (w == null ? h == null : false) { w = iw; h = ih; } else if (w == null) w = h * iw / ih; else if (h == null) h = w * ih / iw; } return { x: len(bg.px, W, w), y: len(bg.py, H, h), w: w, h: h }; } function add(layer, cls, x, y, d, vars) { /* one light, centred on picture point (x, y), d px wide */ var e = document.createElement('b'); e.className = cls; e.style.left = x.toFixed(1) + 'px'; e.style.top = y.toFixed(1) + 'px'; e.style.width = d.toFixed(1) + 'px'; e.style.height = d.toFixed(1) + 'px'; for (var key in vars) e.style.setProperty(key, vars[key]); layer.appendChild(e); return e; } function build(host, rect) { var old = host.querySelector(':scope > .fm-fx'); if (old) old.remove(); if (getComputedStyle(host).position === 'static') host.style.position = 'relative'; var kx = rect.w / BASE, ky = rect.h / BASE; var layer = document.createElement('div'); layer.className = 'fm-fx'; layer.setAttribute('aria-hidden', 'true'); layer.style.borderRadius = getComputedStyle(host).borderRadius; host.appendChild(layer); var X = function (x) { return rect.x + x * kx; }, Y = function (y) { return rect.y + y * ky; }; add(layer, 'fm-lotus', X(LOTUS[0]), Y(LOTUS[1]), LOTUS[2] * kx, {}); GLOWS.forEach(function (g, i) { var big = g[2] >= 6; add(layer, i % 2 ? 'fm-g2' : 'fm-g', X(g[0]), Y(g[1]), Math.max(g[2] * kx * (big ? 9 : 7), big ? 34 : 16), { '--d': (2.6 + (i * 0.37) % 1.6).toFixed(2) + 's', '--t': '-' + ((i * 0.9) % 3).toFixed(1) + 's' }); }); SPARKLES.forEach(function (s, i) { var e = add(layer, 'fm-s', X(s[0]), Y(s[1]), Math.max(s[2] * kx * 1.25, 9), { '--d': (2.2 + (i * 0.45) % 1.4).toFixed(2) + 's', '--t': '-' + ((i * 1.1) % 2.5).toFixed(1) + 's' }); e.appendChild(document.createElement('i')); }); function riser(cls, list, opacity) { list.forEach(function (f) { add(layer, cls, X(f[0]), Y(f[1]), Math.max(f[2] * kx, cls === 'fm-k' ? 10 : 2.5), { '--h': (f[3] * kx).toFixed(0) + 'px', '--d': f[4] + 's', '--t': '-' + f[5] + 's', '--sx': (f[6] * kx).toFixed(0) + 'px', '--o': opacity }); }); } riser('fm-f', FLIES, '1'); riser('fm-k', BOKEH, '.45'); riser('fm-m', RISE, '.9'); } /* lights on every page that has one of our blocks: the home page (.fm-wrap), the Paid Promo page (#pp) and the Contact page (#ct) */ function glowFor(anchor) { var bg = findBg(anchor); var host = bg ? bg.el : (anchor.closest('.container-component') || anchor.closest('.site-main') || document.body); if (host.getAttribute('data-fm-glow')) return; host.setAttribute('data-fm-glow', '1'); var nat = { w: BASE, h: BASE }; function place() { var W = host.clientWidth, H = host.clientHeight; if (W === 0) return; /* hidden right now (another page is open) */ /* no background picture found: spread the effect over the whole box */ var rect = bg ? imageRect(bg, W, H, nat.w, nat.h) : { x: 0, y: 0, w: W, h: H }; build(host, rect); } if (bg) { var probe = new Image(); probe.onload = function () { nat = { w: probe.naturalWidth, h: probe.naturalHeight }; place(); }; probe.onerror = place; probe.src = bg.url; } else place(); /* re-measure whenever the box changes size (images loading, fonts, screen rotation, switching pages) */ var lastSize = '', timer; function recheck() { var size = host.clientWidth + 'x' + host.clientHeight; if (size === lastSize) return; lastSize = size; clearTimeout(timer); timer = setTimeout(place, 120); } if (window.ResizeObserver) new ResizeObserver(recheck).observe(host); window.addEventListener('resize', recheck); window.addEventListener('load', recheck); } [].forEach.call(document.querySelectorAll(older ? '#pp, #ct' : '.fm-wrap, #pp, #ct'), glowFor); })();
