${blobContainer}

${state.view === HOME ? `Nice to meet you` : `Awesome, welcome aboard` }

${state.view === HOME ? `We'd like you to be a part of the team` : `Let's build exciting things together! 🤟` }

${state.view === HOME ? buttonAccept : ''} ${state.view === HOME ? buttonDecline : ''} ${state.view === ACCEPT ? buttonBack : '' }

`; contentSearch.appendChild(iframe); const btnJournal = createButton(icons.journal, 'no-border'); const searchForm = html` `; const particles = settings.particles; const animationWrapper = html`

${new Array(particles).fill('').map(c => { const {x, size, color} = randomizeParticle(); const d = ~~(Math.random() * 11)/10 + 2; const d2 = d > 2 ? ~~(Math.random() * (11 - d)) / 10 : 0; return html`

` })}

` const view = html`

${animationWrapper}

${createMacOsWindowButton(colors.window.button1)} ${createMacOsWindowButton(colors.window.button2)} ${createMacOsWindowButton(colors.window.button3)}

${btnJournal} ${createButton(icons.chevronLeft, 'no-border')} ${createButton(icons.chevronRight, 'no-border')} ${searchForm}

${createButton(`3 Tabs ${icons.compass}`, 'compass')}

${state.view === HOME ? contentHome() : ''} ${state.view === SEARCH ? contentSearch : ''}

`; let width = document.body.clientWidth; const resizeFrame = () => { const googleMinSize = 1300; const lateralMargin = 0; const size = (width - lateralMargin * 2); const ratio = size / googleMinSize; iframe.style.transform = `scale(${ratio < 1 ? ratio : 1})`; iframe.style.width = `${ratio < 1 ? googleMinSize : size}px`; iframe.style.height = `${ratio < 1 ? 100 / ratio : 100}%`; } const resize = function resized() { const w = view.getBoundingClientRect().width; if (w !== width) { width = w; resizeFrame(); } } let iterations = 0; let remainingAnimations = 0; const updateView = (newView) => { let content; if (state.view !== newView) { state.view = newView; } switch (state.view) { case SEARCH: content = contentSearch; animationWrapper.style.setProperty('--count', 0); break; case ACCEPT: const updateAnim = (a1, a2, selector = '.stopped') => { animationWrapper.querySelectorAll(selector).forEach(e => { e.style.setProperty('--anim1', a1); e.style.setProperty('--anim2', a2); console.log(e.offsetWidth); }); }; animationWrapper.style.setProperty('--count', 'infinite'); animationWrapper.style.setProperty('display', 'block'); console.log(animationWrapper.offsetWidth); console.log('remaining on accept', remainingAnimations); iterations = 0; if (remainingAnimations === 0) { animationWrapper.style.setProperty('--anim1', 'none'); animationWrapper.style.setProperty('--anim2', 'none'); updateAnim('none', 'none', '.particle'); window.setTimeout(() => { animationWrapper.style.setProperty('--anim1', 'up'); animationWrapper.style.setProperty('--anim2', 'grow'); console.log(animationWrapper.offsetWidth); updateAnim('inherit', 'inherit', '.particle'); document.scrollingElement; }) } else { updateAnim('none', 'none'); window.setTimeout(() => updateAnim('inherit', 'inherit'), 0); document.scrollingElement; } searchForm.input.value = ''; content = contentHome(); break; default: console.log('remaining on back', remainingAnimations, 'stopping at iteration', Math.ceil(iterations / particles) + 1); animationWrapper.style.setProperty( '--count', Math.ceil(iterations / particles) + 1 ); window.setTimeout(() => animationWrapper.style.setProperty( '--state', 'running' ), 0); searchForm.input.value = ''; content = contentHome(); break; } view.lastElementChild.remove(); view.appendChild(content); resize(); } const handleClickJournal = (e) => { updateView(HOME); } btnJournal.addEventListener('click', handleClickJournal); const handleClickDecline = (e) => { window.setTimeout(() => view.querySelector('main p').innerHTML = `Let's pretend that did not happen 🧐`, 150); buttonDecline.style.animation = `shake 0.82s cubic-bezier(.36,.07,.19,.97) 0.05s both`; } const handleDeclineAnimationEnd = (e) => { window.setTimeout(() => { view.querySelector('main p').innerText = `We'd like you to be a part of the team`; }, 250); buttonDecline.style.animation = 'none'; } buttonDecline.addEventListener('click', handleClickDecline); buttonDecline.addEventListener('animationend', handleDeclineAnimationEnd); const handleAcceptAnimationIteration = (e) => { if (e.animationName === 'up') { console.log('Iteration'); iterations++; const {x, size, color} = randomizeParticle(); e.target.style.setProperty('--x', `${x}%`); e.target.style.setProperty('--size', `${size}em`); e.target.style.setProperty('--color', colors.gradient[color]); } // view.querySelector('main p').innerText = `We'd like you to be a part of the team`; // buttonDecline.style.animation = 'none'; } const handleAcceptAnimationStart = (e) => { if (e.animationName === 'up') { console.log('up started'); remainingAnimations++; e.target.classList.remove('stopped'); } } const handleAcceptAnimationEnd = (e) => { console.log(e.animationName); if (e.animationName === 'up') { console.log('up ended'); remainingAnimations--; e.target.classList.add('stopped'); } } animationWrapper.addEventListener('animationiteration', handleAcceptAnimationIteration); animationWrapper.addEventListener('animationstart', handleAcceptAnimationStart); animationWrapper.addEventListener('animationend', handleAcceptAnimationEnd); const handleClickAccept = (e) => { updateView(ACCEPT); } buttonAccept.addEventListener('click', handleClickAccept); const handleClickBack = (e) => { updateView(HOME); } buttonBack.addEventListener('click', handleClickBack); const handleSearchSubmit = (e) => { e.preventDefault(); state.isSearching = true; iframe.src = `https://www.google.com/search?igu=1&q=${searchForm.input.value}&hl=en` updateView(SEARCH); } searchForm.addEventListener('submit', handleSearchSubmit); const handleLoad = () => { console.log('load'); if (state.isSearching) { state.isSearching = false; } else { searchForm.input.value = 'https://beamapp.co'; } }; iframe.addEventListener('load', handleLoad); window.addEventListener('resize', resize); invalidation.then(() => { animationWrapper.removeEventListener('animationstart', handleAcceptAnimationStart); animationWrapper.removeEventListener('animationend', handleAcceptAnimationEnd); animationWrapper.removeEventListener('animationiteration', handleAcceptAnimationIteration); buttonAccept.removeEventListener('click', handleClickAccept); buttonBack.removeEventListener('click', handleClickBack); buttonDecline.removeEventListener('click', handleClickDecline); buttonDecline.removeEventListener('animationend', handleDeclineAnimationEnd); iframe.removeEventListener('load', handleLoad); searchForm.removeEventListener('submit', handleSearchSubmit); btnJournal.removeEventListener('click', handleClickJournal); window.removeEventListener('resize', resize) }); resize(); return html` ${injectFont()} ${inputStyle()} ${miscStyle()} ${view} `; }2f:Tde0,blob = { let frame; const amplitude = settings.amplitude; const boxWidth = settings.radius * 3; const boxHeight = settings.radius * 3; const xmlns = 'http://www.w3.org/2000/svg'; const s = document.createElementNS(xmlns, 'svg'); s.setAttributeNS(null, 'viewBox', `0 0 ${boxWidth} ${boxHeight}`); s.setAttributeNS(null, 'width', boxWidth); s.setAttributeNS(null, 'height', boxHeight); s.setAttributeNS(null, 'preserveAspectRatio', 'xMidYMid meet'); s.setAttributeNS(null, 'style', `width: 100%; height: auto; max-width: ${boxWidth}; box-sizing: border-box; overflow: visible`); const centerX = boxWidth / 2; const centerY = boxHeight / 2; const defs = document.createElementNS(xmlns, 'defs'); s.appendChild(defs); defs.appendChild( createGradient(xmlns, 'gradient', colors.gradient) ); defs.appendChild( createDropshadowFilter(xmlns, 'shadow', '#80FFF2') ); const g = document.createElementNS(xmlns, 'g'); g.setAttributeNS(null, 'style', `transform: scale(0.8, 1);`); s.appendChild(g); const path = document.createElementNS(xmlns, 'path'); path.setAttributeNS(null, 'fill', `#ffffff88`); path.setAttributeNS(null, 'stroke', `url(${window.location.href}#gradient)`); path.setAttributeNS(null, 'stroke-width', 6); path.setAttributeNS(null, 'style', `filter: url(${window.location.href}#shadow);`); path.setAttributeNS(null, 'd', bezierToPath(circle.bezier).join(' ') + 'Z'); g.appendChild(path); const curves = circle.bezier.map(c => ({...c})); const update = () => { cancelAnimationFrame(frame), frame = null; curves.forEach((curve, i, arr) => { const prevId = i !== 0 ? i - 1 : arr.length - 1; const prev = arr[prevId]; // console.log(curve, prev); if (!curve.p1.nextX) { curve.p1.nextX = curve.p1.x; curve.p1.baseX = curve.p1.x; } if (!curve.p1.nextY) { curve.p1.nextY = curve.p1.y; curve.p1.baseY = curve.p1.y; } if (Math.abs(curve.p1.nextX - curve.p1.x) < 1) { const shiftX = (~~(Math.random() * (settings.radius / 2)) - 2) * Math.random() * amplitude / 2; curve.p1.prevX = curve.p1.x; curve.p1.nextX = curve.p1.baseX + shiftX; } if (Math.abs(curve.p1.nextY - curve.p1.y) < 1) { const shiftY = (~~(Math.random() * (settings.radius / 2)) - 2) * Math.random() * amplitude / 2; curve.p1.prevY = curve.p1.y; curve.p1.nextY = curve.p1.baseY + shiftY; } const distanceX = curve.p1.nextX - curve.p1.prevX; const distanceY = curve.p1.nextY - curve.p1.prevY; const remainingDistanceX = curve.p1.nextX - curve.p1.x; const remainingDistanceY = curve.p1.nextY - curve.p1.y; let tX = 1 - remainingDistanceX / distanceX; let tY = 1 - remainingDistanceY / distanceY; const shiftX = ease(tX > 0 ? tX : 0.2) * distanceX; const shiftY = ease(tY > 0 ? tY : 0.2) * distanceY; curve.p1.x += shiftX; curve.p1.y += shiftY; curve.p1.cp.x += shiftX; curve.p1.cp.y += shiftY; prev.p2.x += shiftX; prev.p2.y += shiftY; prev.p2.mirror.x += shiftX; prev.p2.mirror.y += shiftY; }); // console.log(curves); path.setAttributeNS(null, 'd', bezierToPath(curves).join(' ') + 'Z'); frame = requestAnimationFrame(update); }; update(); // Cell invalidation - clean up event listeners invalidation.then(() => { cancelAnimationFrame(frame), frame = null; }); return s; }30:T1166,miscStyle = function() { return html` ` }31:T8e6,function inputStyle() { return html` ` }32:T837,icons = { return { search: color => ``, compass: ``, journal: ``, chevronLeft: ``, chevronRight: `` }; }33:Tadd,function createDropshadowFilter(xmlns, id) { const filter = svg` `; filter.setAttributeNS(null, 'id', id); filter.setAttributeNS(null, 'height', '200%'); filter.setAttributeNS(null, 'width', '200%'); filter.setAttributeNS(null, 'x', '-30%'); filter.setAttributeNS(null, 'y', '-30%'); filter.setAttributeNS(null, 'overflow', 'visible'); const blur = document.createElementNS(xmlns, 'feGaussianBlur'); blur.setAttributeNS(null, 'in', 'SourceGraphic'); blur.setAttributeNS(null, 'stdDeviation', effect.deviation); blur.setAttributeNS(null, 'result', 'offsetblur'); filter.appendChild(blur); const offset = document.createElementNS(xmlns, 'feOffset'); offset.setAttributeNS(null, 'dx', effect.dx); offset.setAttributeNS(null, 'dy', effect.dy); offset.setAttributeNS(null, 'result', 'offsetblur'); filter.appendChild(offset); filter.appendChild( svg`` ); const componentTransfer = document.createElementNS(xmlns, 'feComponentTransfer'); const funcA = document.createElementNS(xmlns, 'feFuncA'); funcA.setAttributeNS(null, 'type', 'linear'); funcA.setAttributeNS(null, 'slope', 1.5); componentTransfer.appendChild(funcA); const funcR = document.createElementNS(xmlns, 'feFuncR'); funcR.setAttributeNS(null, 'type', 'gamma'); funcR.setAttributeNS(null, 'exponent', effect.exponent); funcR.setAttributeNS(null, 'amplitude', effect.amplitude); componentTransfer.appendChild(funcR); const funcG = document.createElementNS(xmlns, 'feFuncG'); funcG.setAttributeNS(null, 'type', 'gamma'); funcG.setAttributeNS(null, 'exponent', effect.exponent); funcG.setAttributeNS(null, 'amplitude', effect.amplitude); componentTransfer.appendChild(funcG); const funcB = document.createElementNS(xmlns, 'feFuncB'); funcB.setAttributeNS(null, 'type', 'gamma'); funcB.setAttributeNS(null, 'exponent', effect.exponent); funcB.setAttributeNS(null, 'amplitude', effect.amplitude); componentTransfer.appendChild(funcB); filter.appendChild(componentTransfer); const composite = document.createElementNS(xmlns, 'feComposite'); composite.setAttributeNS(null, 'in2', 'offsetblur'); composite.setAttributeNS(null, 'operator', 'in'); filter.appendChild(composite); const merge = document.createElementNS(xmlns, 'feMerge'); const mergeNode1 = document.createElementNS(xmlns, 'feMergeNode'); const mergeNode2 = document.createElementNS(xmlns, 'feMergeNode'); mergeNode2.setAttributeNS(null, 'in', 'SourceGraphic'); merge.appendChild(mergeNode1); merge.appendChild(mergeNode2); filter.appendChild(merge); return filter; }34:[] 2c:{"id":"3212e9db7defcdc8","slug":"hello-beam","title":"Hello Beam","thumbnail":"b1115c6ea20fe4fb0422fe38ee806c1a601344b6217bd6ae2f1d18c40f4bd6a7","access_level":"public","create_time":"$D2021-04-03T12:23:36.410Z","update_time":"$D2021-08-25T09:33:02.884Z","view_time":null,"first_public_time":"$D2021-08-25T09:05:51.476Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"56478bd83f2190f0","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":"starter_2024"},"version":1738,"publish_version":1738,"role":null,"authored":false,"authors":[{"type":"individual","id":"e5f68da25a5a2366","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":null}],"members":[{"type":"individual","id":"e5f68da25a5a2366","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Hello Beam","cells":[{"id":1696,"value":"md`\n# Hello Beam\nI joined [Beam](https://beamapp.co/) on the 1st of July, and this is how I accepted the job offer, it was pretty fun to code this and I'm super excited to be building a new kind of browser with a stellar team. Stay tuned for what's next\n\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"md` \n \n \n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"function randomizeParticle() {\n const x = ~~(Math.random() * 110) - 5;\n const size = (~~(Math.random() * 4)) ** 2 + 1;\n const color = ~~(Math.random() * colors.gradient.length); \n return {x, size, color};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"md`### Blob`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"settings = {\n return {\n particles: 42,\n radius: 60,\n amplitude: 1.6,\n speed: 1,\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"effect = {\n return{\n amplitude: 25,\n deviation: 20,\n exponent: 11,\n dx: 2,\n dy: 2\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"function createMacOsWindowButton(color) {\n return html`\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"function createGradientButton(content, className, color, borderColor, gradient) {\n return html`\n \n \n \n ${content}\n \n \n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"function createButton(content, className) {\n return html`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"md`### iFrame`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"iframe = {\n return this || html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"function injectFont() {\n return html`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"function inlineSvg(svgString) {\n const encoded = escape(svgString);\n return `url('data:image/svg+xml;utf8,${encoded}')`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"colors = {\n return {\n window: {\n background: '#ffffff',\n button1: '#FF5F56',\n button2: '#FDBC2E',\n button3: '#2BC840'\n },\n input: {\n placeholder: '#AEB1B2'\n },\n text: {\n color: '#393E47'\n },\n gradient: [\n 'rgb(254, 213, 9)',\n 'rgb(254, 165, 1)',\n 'rgb(254, 101, 74)',\n 'rgb(225, 111, 134)',\n 'rgb(36, 153, 189)',\n 'rgb(0, 165, 134)',\n 'rgb(142, 210, 70)'\n ],\n pill: {\n background: '#F7F7F7',\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"circle = arc(settings.radius * 1.5, settings.radius * 1.5, settings.radius, 2 * Math.PI, 0, 5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"function ease (t) {\n return -(Math.cos(Math.PI / 2 * t * 5) - 2) / 256 * settings.speed;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"function createGradient(xmlns, id, colors) {\n const gradient = svg``;\n gradient.setAttributeNS(null, 'id', id);\n colors.forEach((c, i) => {\n const stop = svg``;\n gradient.appendChild(stop);\n });\n \n return gradient;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"cssGradient = createCssGradient(colors.gradient);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"function createCssGradient(colors) {\n const cols = [...colors, ...colors];\n return cols.map((c, i) => (\n `${c} ${\n i < cols.length - 1\n ? `${(i) / (cols.length - 1) * 100}%`\n : ''\n }`\n )).join(', ');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"import {arc, bezierToPath} from \"@daformat/rounding-polygon-corners\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2d:"$2c:body"