/* ---- valori da cambiare ---- */ const BRAND = 'Larkhill Press'; /* the small name of the letter press over the title */ const TITLE = 'The Sunday letter'; /* the title of the form */ const SUB = 'One short letter a week, no noise.'; /* the line under the title */ const BUTTON = 'Subscribe'; /* the text of the pill */ const DONE_TITLE = 'You’re on the list.'; /* the thank you once subscribed */ const DONE_SUB = 'The first letter comes on Sunday.'; /* the line under the thank you */ const ERROR = 'That address needs a domain.'; /* the line under the field when the address is wrong */ const LOCAL_LEN = 6; /* how many characters before the @ draw the whole inner bowl */ const DOMAIN_LEN = 9; /* how many characters after the @ draw most of the tail */ const DRAW = 0.55; /* the seconds the line takes to catch up with what you type */ const SPIN = 0.95; /* the seconds of the turn of the at sign when you subscribe */ const RESET = 3.4; /* the seconds before the form comes back empty */ /* The newsletter form with the at sign that draws itself The sign-up of a small letter press, on white, in one colour. Next to the email field a large at sign waits as a faint ghost. Typing draws it with a single thin line: every character before the @ draws a piece of the inner bowl, every character of the domain a piece of the long tail around it, and the line always lags a little behind, like a pen catching up. A real address closes the tail in vermilion and the sign settles with a small swing. Subscribe turns the at sign once on itself, the typed address rises away and the thank you arrives letter by letter; a wrong address unwinds the tail a little and the sign shakes no. The form comes back empty after a while. */ (() => { const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const HOVER = matchMedia('(hover: hover)').matches; const panel = document.querySelector('[data-panel]'); const $ = (s) => panel.querySelector(s); const input = $('[data-input]'); const bowl = $('[data-bowl]'); const tail = $('[data-tail]'); const mark = $('[data-mark]'); const fill = $('[data-fill]'); const go = $('[data-go]'); const goBg = go.querySelector('.go__bg'); const goText = $('[data-go-text]'); const note = $('[data-note]'); const done = $('[data-done]'); const doneTitle = $('[data-done-title]'); const doneSub = $('[data-done-sub]'); const field = $('[data-field]'); const line = field.querySelector('.field__line'); $('[data-brand]').textContent = BRAND; $('[data-title]').textContent = TITLE; $('[data-sub]').textContent = SUB; goText.textContent = BUTTON; doneSub.textContent = DONE_SUB; doneTitle.textContent = ''; [...DONE_TITLE].forEach((c) => { const s = document.createElement('span'); s.className = 'ch'; s.textContent = c; doneTitle.appendChild(s); }); const chars = [...doneTitle.querySelectorAll('.ch')]; const LB = bowl.getTotalLength(); const LT = tail.getTotalLength(); bowl.style.strokeDasharray = LB; tail.style.strokeDasharray = LT; const INK = getComputedStyle(document.documentElement).getPropertyValue('--inchiostro').trim() || '#161514'; const ACC = getComputedStyle(document.documentElement).getPropertyValue('--accento').trim() || '#e2452f'; const st = { b: 0, t: 0, f: 0 }; let valid = false; let busy = false; function render() { bowl.style.strokeDashoffset = LB * (1 - st.b); tail.style.strokeDashoffset = LT * (1 - st.t); fill.style.transform = `scaleX(${st.f})`; } render(); const isValid = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v); function targets(v) { const at = v.indexOf('@'); const local = at < 0 ? v : v.slice(0, at); const domain = at < 0 ? '' : v.slice(at + 1); const ok = isValid(v); const b = at < 0 ? Math.min(0.94, local.length / LOCAL_LEN) : 1; const t = ok ? 1 : at < 0 ? 0 : Math.min(0.9, 0.12 + domain.length / DOMAIN_LEN * 0.78); const f = ok ? 1 : Math.min(0.92, v.length / (LOCAL_LEN + DOMAIN_LEN + 2)); return { b, t, f, ok }; } function update() { if (busy) return; const v = input.value.trim(); const g = targets(v); note.textContent = ''; if (REDUCED) { Object.assign(st, { b: g.b, t: g.t, f: g.f }); render(); } else { gsap.to(st, { b: g.b, t: g.t, f: g.f, duration: DRAW, ease: 'power3.out', overwrite: true, onUpdate: render }); } if (g.ok !== valid) { valid = g.ok; const col = valid ? ACC : INK; gsap.to([bowl, tail], { stroke: col, duration: REDUCED ? 0.2 : 0.35, ease: 'power2.out' }); gsap.to(fill, { backgroundColor: col, duration: 0.35 }); if (valid && !REDUCED) { gsap.fromTo(mark, { rotation: -9 }, { rotation: 0, duration: 1.1, ease: 'elastic.out(1, 0.38)', transformOrigin: '50% 50%' }); gsap.fromTo(mark, { scale: 1.06 }, { scale: 1, duration: 0.7, ease: 'back.out(3)' }); } } } input.addEventListener('input', update); /* the pill: the word widens on its width axis on a spring, and gives a little when pressed */ if (HOVER) { go.addEventListener('pointerenter', () => { if (!busy) gsap.to(goText, { '--w': 116, duration: 0.6, ease: 'elastic.out(1, 0.45)' }); }); go.addEventListener('pointerleave', () => gsap.to(goText, { '--w': 100, duration: 0.5, ease: 'power3.out' })); } go.addEventListener('pointerdown', () => gsap.to(goBg, { scale: 0.95, duration: 0.12, ease: 'power2.out' })); const lift = () => gsap.to(goBg, { scale: 1, duration: 0.6, ease: 'elastic.out(1, 0.4)' }); go.addEventListener('pointerup', lift); go.addEventListener('pointerleave', lift); function refuse() { note.textContent = ERROR; const g = targets(input.value.trim()); const t = Math.max(0, g.t - 0.38); if (REDUCED) { st.t = t; render(); return; } gsap.to(st, { t, duration: 0.5, ease: 'power3.out', overwrite: true, onUpdate: render, onComplete: () => gsap.to(st, { t: g.t, duration: 0.9, delay: 0.5, ease: 'power2.inOut', onUpdate: render }) }); gsap.fromTo(mark, { x: 0 }, { keyframes: { x: [-5, 4, -3, 2, -1, 0] }, duration: 0.5, ease: 'none' }); gsap.fromTo(note, { opacity: 0, y: 4 }, { opacity: 1, y: 0, duration: 0.35, ease: 'power2.out' }); } let resetCall = null; function succeed() { busy = true; input.blur(); input.readOnly = true; note.textContent = ''; const tl = gsap.timeline(); if (REDUCED) { tl.to(field, { opacity: 0, duration: 0.3 }) .set(done, { visibility: 'visible' }) .fromTo(done, { opacity: 0 }, { opacity: 1, duration: 0.4 }) .set(chars, { opacity: 1 }, '<'); } else { tl.to(mark, { rotation: 360, duration: SPIN, ease: 'power3.inOut', transformOrigin: '50% 50%' }, 0) .to(mark, { keyframes: { scale: [1, 0.86, 1.04, 1] }, duration: SPIN + 0.25, ease: 'power2.out' }, 0) .to(input, { y: -10, opacity: 0, duration: 0.45, ease: 'power2.in' }, 0.1) .to(line, { scaleX: 0, transformOrigin: '100% 50%', duration: 0.5, ease: 'power3.in' }, 0.15) .to(goText, { opacity: 0.4, duration: 0.3 }, 0.1) .set(done, { visibility: 'visible' }, 0.45) .fromTo(chars, { opacity: 0, y: 12, rotation: 4 }, { opacity: 1, y: 0, rotation: 0, duration: 0.7, stagger: 0.025, ease: 'back.out(2.2)' }, 0.5) .fromTo(doneSub, { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.6, ease: 'power2.out' }, 0.85) .set(mark, { rotation: 0 }); } resetCall = gsap.delayedCall(RESET + (REDUCED ? 0.6 : SPIN), reset); } function reset() { const tl = gsap.timeline({ onComplete: () => { busy = false; input.readOnly = false; } }); tl.to(done, { opacity: 0, duration: 0.35, ease: 'power2.in' }) .set(done, { visibility: 'hidden', opacity: 1 }) .set(chars, { opacity: 0 }) .set(doneSub, { opacity: 0 }) .add(() => { input.value = ''; valid = false; }) .to([bowl, tail], { stroke: INK, duration: 0.3 }, '<') .to(fill, { backgroundColor: INK, duration: 0.3 }, '<') .to(st, { b: 0, t: 0, f: 0, duration: REDUCED ? 0.01 : 0.7, ease: 'power2.inOut', onUpdate: render }, '<') .to(input, { y: 0, opacity: 1, duration: 0.4, ease: 'power2.out' }, '-=0.3') .to(goText, { opacity: 1, duration: 0.3 }, '<') .to(field, { opacity: 1, duration: 0.3 }, '<') .fromTo(line, { scaleX: 0, transformOrigin: '0% 50%' }, { scaleX: 1, duration: 0.6, ease: 'power3.out' }, '<'); } panel.addEventListener('submit', (e) => { e.preventDefault(); if (busy) return; if (isValid(input.value.trim())) succeed(); else refuse(); }); /* the preview: a pretend hand types an address without its domain, tries, then finishes it and subscribes. It stops for good as soon as someone really touches the form. */ let hand = true; let handTl = null; const stopHand = (e) => { if (!e.isTrusted || !hand) return; hand = false; if (handTl) handTl.kill(); if (resetCall && busy === false) resetCall.kill(); }; ['pointerdown', 'keydown', 'focusin'].forEach((t) => panel.addEventListener(t, stopHand, true)); function typeInto(tl, text, gap) { [...text].forEach((c) => { tl.call(() => { input.value += c; update(); }, null, `+=${gap}`); }); } function runHand() { if (!hand) return; handTl = gsap.timeline({ delay: 0.9, onComplete: () => gsap.delayedCall(RESET + SPIN + 1.6, runHand) }); typeInto(handTl, 'ada@larkhill', 0.1); handTl.call(() => { gsap.to(goBg, { scale: 0.95, duration: 0.12, yoyo: true, repeat: 1 }); refuse(); }, null, '+=0.55'); typeInto(handTl, '.press', 0.12); handTl.to({}, { duration: 0.7 }); handTl.call(() => { gsap.to(goBg, { scale: 0.95, duration: 0.12, yoyo: true, repeat: 1 }); succeed(); }); } if (REDUCED) { input.value = 'ada@larkhill.press'; update(); } else { gsap.from(panel.children, { opacity: 0, y: 10, duration: 0.8, stagger: 0.06, ease: 'power3.out' }); runHand(); } })();