// Main Swift Search marketing site
const { useState, useEffect, useRef, useCallback, useLayoutEffect } = React;
const STORE_URL = 'https://chromewebstore.google.com/detail/swift-search/lididcfmfpaiaeapmjpddgicifbjelja?hl=en-US&utm_source=ext_sidebar';
/* ---------- Icons ---------- */
const Icon = {
chrome: () =>
,
bolt: () =>
,
layers: () =>
,
keyboard: () =>
,
clock: () =>
,
cursor: () =>
,
shield: () =>
,
sliders: () =>
,
sparkles: () =>
,
grab: () =>
,
plus: () =>
,
highlighter: () =>
,
queue: () =>
,
bookmark: () =>
,
findInPage: () =>
,
globe: () =>
,
pdf: () =>
,
book: () =>
,
palette: () =>
,
star: () => '★',
arrowRight: () =>
};
/* ---------- NAV ---------- */
const jumpTo = (id) => (e) => { const el = document.getElementById(id);
if (!el) return;
e.preventDefault();
const top = el.getBoundingClientRect().top + window.pageYOffset - 80;
window.scrollTo(0, top);
history.replaceState(null, '', '#' + id);
};
function Nav() {
return (
);
}
/* ---------- HERO ---------- */
function Hero() {
const gridRef = React.useRef(null);
React.useEffect(() => {
const g = gridRef.current;
if (!g || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const mk = g.querySelector(".hero-mark"), tx = g.querySelector(".hero-text");
mk.style.willChange = "transform"; tx.style.willChange = "transform,opacity"; const fx0 = g.querySelector(".hero-fx"); fx0.style.willChange = "transform"; fx0.firstChild.style.willChange = "transform"; [...fx0.firstChild.children].forEach((p) => { p.style.willChange = "transform"; });
Object.assign(fx0.style, { display: "block", visibility: "hidden", width: Math.min(620, g.getBoundingClientRect().width * 0.86) + "px", height: Math.min(620, g.getBoundingClientRect().width * 0.86) + "px" }); const pv = fx0.querySelector("video"); pv.load();
const ts = [];
ts.push(setTimeout(() => {
const ex = tx.animate([{ opacity: 1, transform: "none" }, { opacity: 0, transform: "translateX(12%)" }], { duration: 350, easing: "ease-in", fill: "forwards" });
ts.push(setTimeout(() => {
const a = mk.getBoundingClientRect();
g.classList.add("stack");
{ const S0 = mk.getBoundingClientRect().width, W0 = Math.min(620, g.getBoundingClientRect().width * 0.86); mk.style.margin = Math.max(0, (W0 - S0) / 2) + "px 0"; }
const b = mk.getBoundingClientRect();
const dx = a.left + a.width / 2 - (b.left + b.width / 2), dy = a.top + a.height / 2 - (b.top + b.height / 2), s = a.width / b.width;
let W = Math.min(620, g.getBoundingClientRect().width * 0.86), H = W;
const sx = W / b.width, sy = H / b.width;
const KF=[[0,0,0,0,0],[.15,0,-300,0,0],[.35,0,-620,0,0],[.5,0,-848,0,0],[.6,0,-1000,0,0],[.82,-8,-1300,0,0],[1,-14,-1440,0,0]];
const cw = document.createElement("div"), gr0 = g.getBoundingClientRect(), bw = b.width;
cw.className = "cube-spin";
Object.assign(cw.style, { position: "absolute", left: b.left - gr0.left + "px", top: b.top - gr0.top + "px", width: bw + "px", height: bw + "px", transformStyle: "preserve-3d", zIndex: 4, pointerEvents: "none", willChange: "transform" });
for (let i = 0; i < 4; i++) {
const f = document.createElement("div");
Object.assign(f.style, { position: "absolute", inset: 0, background: "#151518", backfaceVisibility: "hidden", transform: "rotateY(" + i * 90 + "deg) translateZ(" + bw / 2 + "px)" });
const cl = mk.cloneNode(true);
cl.removeAttribute("class"); cl.setAttribute("class", "hero-mark");
Object.assign(cl.style, { width: "100%", height: "100%", maxWidth: "none", margin: 0, display: "block", visibility: "visible" });
cl.querySelectorAll(".m-a,.m-bot").forEach((p) => { p.style.animation = "none"; p.style.transform = p.classList.contains("m-a") ? "translateY(9px)" : "translateY(-9px)"; });
cl.animate([{ transform: 'scaleY(1)' }, { transform: 'scaleY(1.1029)', offset: .5 }, { transform: 'scaleY(1.1029)' }], { duration: 3200, easing: 'cubic-bezier(.45,0,.2,1)', fill: 'forwards' });
f.appendChild(cl); cw.appendChild(f);
}
g.appendChild(cw); mk.style.visibility = "hidden";
const spin = cw.animate(KF.map(([o,rx,ry,rz,lift]) => ({ offset: o, transform: `translate(${dx * (1 - o)}px,${dy * (1 - o) - lift}px) scale3d(${s + (sx - s) * Math.min(1, o / .5)},${s + (sy - s) * Math.min(1, o / .5)},${s + (sx - s) * Math.min(1, o / .5)}) perspective(${1000 / (s + (sx - s) * Math.min(1, o / .5))}px) translateY(${bw / 2 * Math.sin(rx * Math.PI / 180)}px) translateZ(${bw / 2 * (1 - Math.cos(rx * Math.PI / 180)) - bw / 2}px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)` })), { duration: 3200, easing: "cubic-bezier(.45,0,.2,1)" });
let dead = false;
ts.push({ stop: () => { dead = true; } });
const place = () => {
const fx = g.querySelector(".hero-fx"), gr = g.getBoundingClientRect(), r = mk.getBoundingClientRect();
const cx = r.left - gr.left + r.width / 2, cy = r.top - gr.top + r.height / 2;
Object.assign(fx.style, { left: cx - W / 2 + "px", top: cy - H / 2 + "px", width: W + "px", height: H + "px" });
};
spin.finished.then(() => {
cw.remove(); window.__cubeSpun = true; window.dispatchEvent(new Event("cube-spun"));
const fx = g.querySelector(".hero-fx"), sc = fx.firstChild, ps = [...sc.children], vids = ps.map((p) => p.querySelector("video"));
const r0 = mk.getBoundingClientRect(), S = r0.width;
place();
fx.style.visibility = "visible";
mk.style.visibility = "hidden";
window.addEventListener("resize", place);
const R = W * 0.62, mv = "cubic-bezier(.65,0,.35,1)", T = (a) => "translateZ(" + -R + "px) rotateX(-14deg) rotateY(" + a + "deg) scale3d(1,1,1)";
const CY = "translateY(" + R * Math.sin(-14 * Math.PI / 180) + "px) translateZ(" + (R * (1 - Math.cos(-14 * Math.PI / 180)) - R) + "px) ", TA = (a) => CY + "rotateX(-14deg) rotateY(" + a + "deg) scale3d(1,1,1)";
const A = CY + "rotateX(-14deg) rotateY(0deg) scale3d(1,1,1)", D = 1050, e1 = { duration: 800, delay: D, easing: "cubic-bezier(.5,0,.2,1)", fill: "both" };
sc.animate([{ transform: "rotateX(-14deg) rotateY(0deg) scale3d(1,1,1)" }, { transform: A }], e1);
ps.forEach((p, i) => { p.animate([{ transform: "rotateY(" + i * 90 + "deg) translateZ(0px)" }, { transform: "rotateY(" + i * 90 + "deg) translateZ(" + R + "px)" }], e1); if (i) p.animate([{ opacity: 0 }, { opacity: 0, offset: .4 }, { opacity: 1 }], e1); });
const cap0 = ps[0].querySelector(".cube-cap"); let capTok = 0, capI = -1;
const fadeTo = (to, ms) => { const from = getComputedStyle(cap0).opacity; cap0.getAnimations().forEach((a) => { if (a.id !== "drift") a.cancel(); }); cap0.style.transition = "none"; cap0.style.opacity = to; return cap0.animate([{ opacity: from }, { opacity: to }], { duration: ms, easing: "ease-in-out" }).finished.catch(() => {}); };
const CAPS = [[1, "Highlight any text "], [4.5, "Select any website "], [7.3, "Your results appear instantly "]];
const setCap = async (n) => { const my = ++capTok; if (n < 0) { fadeTo(0, 350); return; } if (parseFloat(getComputedStyle(cap0).opacity) > 0.02) { await fadeTo(0, 450); if (my !== capTok) return; } cap0.innerHTML = "" + CAPS[n][1] + " "; cap0.getAnimations().forEach((a) => a.cancel()); cap0.style.transition = "none"; cap0.style.opacity = 1; if (!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches)) cap0.animate([{ opacity: 1, transform: "translateX(-100%)" }, { opacity: 1, transform: "translateX(0)" }], { duration: 900, easing: "cubic-bezier(0.16, 0.9, 0.25, 1)", fill: "both" }); (cap0.animate([{ translate: "0 0" }, { translate: "48px 0" }], { duration: 9000, delay: 900, easing: "cubic-bezier(0.2, 0.5, 0.3, 1)", fill: "both" }).id = "drift"); };
const hideCap = () => { capTok++; fadeTo(0, 300); };
if (cap0 && vids[0]) { const sync = () => { const t = vids[0].currentTime; let n = -1; CAPS.forEach((c, q) => { if (t >= c[0]) n = q; }); if (n === capI) return; capI = n; setCap(n); }; vids[0].addEventListener("timeupdate", sync); vids[0].addEventListener("seeked", sync); }
const face0 = ps[0], panel = document.createElement("div"); panel.className = "cube-stats"; face0.appendChild(panel);
const sroot = ReactDOM.createRoot(panel); let sn = 0;
const showStats = () => { if (cap0) hideCap(); sroot.render(
next Do more with your highlighted text Summarize it, rewrite it, fact-check it, simplify it Or ask your own question about it Built-in AI means you never leave the page to search or check something. "}}>
next Looking for something on the page you're on? Ask Slick Click. Ctrl+F only works if you know the exact words. Slick Click finds the part you mean. Just describe it. "}}>
next Can\u2019t find the unsubscribe button? Slick Click shows you where to click. Ask where to find something on a website and Slick Guide will highlight where you need to click. "}}>
next
Make your every click a slick click.
Highlight any text on any page and do more with it. Search it across your favourite sites, ask AI about it or save it for later. All without ever leaving the page.
);
}
/* ---------- LIVE DEMO ---------- */
const DEMO_ARTICLE = {
title: 'The little-known history of the typewriter',
byline: 'The Atlantic Monthly · 8 min read · by Eleanor Hayes',
paragraphs: [
'When Christopher Latham Sholes filed the first commercially viable typewriter patent in 1868, almost no one believed it would change anything. Writing, after all, had been a deeply personal craft for centuries: the slow flow of ink, the slight pressure of the nib, the smell of the paper. The idea that mechanical keys could replace this seemed ridiculous, even rude.',
'But within three decades, the machine had transformed offices, journalism, and literature. Mark Twain became one of the first novelists to submit a typewritten manuscript. Newsrooms re-engineered their floors around the clatter of keys. Whole new professions emerged, most famously the typist, a role that quietly opened white-collar work to a generation of women.',
'Today the QWERTY layout still sits beneath nearly every digital keyboard, a small monument to a 19th-century compromise between speed and mechanical reliability. Try selecting any phrase in this paragraph (your favorite word, an unfamiliar name, a date) to see how Slick Click would surface it across the web.']
};
function DemoVideo() {
const [phase, setPhase] = React.useState('intro');
const [needsTap, setNeedsTap] = React.useState(false);
const wrapRef = React.useRef(null);
const videoRef = React.useRef(null);
const frameRef = React.useRef(null);
const seenRef = React.useRef(false);
const playIntro = React.useCallback(() => {
const v = videoRef.current;
if (!v) return;
v.currentTime = 0;
setPhase('intro');
const p = v.play();
if (p && p.catch) p.catch(() => setNeedsTap(true));
}, []);
// start the cycle when the panel first scrolls into view
React.useEffect(() => {
const el = wrapRef.current;
if (!el) return;
if (!('IntersectionObserver' in window)) { seenRef.current = true; playIntro(); return; }
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting && !seenRef.current) { seenRef.current = true; playIntro(); io.disconnect(); }
});
}, { threshold: 0.35 });
io.observe(el);
return () => io.disconnect();
}, [playIntro]);
const toSting = React.useCallback(() => {
const f = frameRef.current;
if (f && f.contentWindow) f.contentWindow.postMessage({ type: 'sting:play' }, '*');
setPhase('sting');
}, []);
// the sting reports when it has finished; then the recording runs again
React.useEffect(() => {
const onMsg = (e) => {
if (!e.data || e.data.type !== 'sting:done') return;
const f = frameRef.current;
if (f && f.contentWindow) f.contentWindow.postMessage({ type: 'sting:reset' }, '*');
playIntro();
};
window.addEventListener('message', onMsg);
return () => window.removeEventListener('message', onMsg);
}, [playIntro]);
const fill = { width: '100%', height: '100%', border: 'none', display: 'block', position: 'absolute', inset: 0 };
const showSting = phase === 'sting';
return (
setNeedsTap(false)}
onEnded={toSting}
onError={toSting}
/>
{needsTap && !showSting && (
)}
);
}
function Popup({ data, engines, onPick, onClose }) {
if (!data) return null;
const visible = engines.filter((e) => e.on).slice(0, 6);
return (
e.stopPropagation()}>
SEARCH
"{data.text.length > 28 ? data.text.slice(0, 28) + '…' : data.text}"
{visible.map((e) =>
onPick(e)}>
{e.initial}
{e.name}
)}
Press Esc to close
Dismiss
{engine.initial}
{engine.name} · "{query}"
{engine.url}{encodeURIComponent(query)}
← Back to demo
{results.map((r, i) =>
{r.url}
{r.title}
{r.snippet}
)}
);
}
function Demo({ engines }) {
const shellRef = React.useRef(null);
React.useEffect(() => {
const el = shellRef.current;
if (!el) return;
let raf = 0;
const update = () => {
raf = 0;
const r = el.getBoundingClientRect();
const vh = window.innerHeight;
const start = vh, end = vh / 2 - r.height / 2;
const span = start - end;
const p = Math.min(1, Math.max(0, r.top >= end ? (start - r.top) / span : 1 - (end - r.top) / span));
el.style.setProperty('--grow', (1 - Math.pow(1 - p, 3)).toFixed(4));
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
update();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); };
}, []);
return (
Highlight. Pick. Done.
Select any text on the page and Slick Click pops up with your favorite websites. One click goes straight there. See it in action below.
);
}
/* ---------- FEATURES ---------- */
const FEATURE_GROUPS = [
{ label: 'Search anything, from anywhere', items: [
{ icon: 'layers', title: 'Search across sites', body: 'Send the same query to up to six sites at once, and compare what each one gives you.' },
{ icon: 'sparkles', title: 'Slick AI', body: 'Summarize, translate, rewrite or ask about anything you highlight. Choose Gemini, Grok or GLM. We never store what you send.' },
{ icon: 'findInPage', title: 'Find in page', body: "Search the page you're on. Exact matches, or describe what you're after and let Slick AI find it." },
{ icon: 'globe', title: 'Add any website', body: 'If a site has a search box, Slick Click can use it. It works out the search address for you.' },
{ icon: 'book', title: 'Definitions, instantly', body: 'Want to look up a word? Use the Define feature without losing your place on the page.' }] },
{ label: 'Keep what matters', items: [
{ icon: 'queue', title: 'Queue it up', body: "Reading and spot three things to look up? Add them to a queue as you go, search them when you're done." },
{ icon: 'bookmark', title: 'Highlight and keep', body: 'Mark passages that are still there when you come back. Save quotes to your Library with a link straight to the source.' }] },
{ label: 'Under your control', items: [
{ icon: 'pdf', title: 'Works in PDFs too', body: 'The same tools inside a document. Highlight, annotate and save exactly as you would on a webpage.' },
{ icon: 'shield', title: 'Privacy first', body: 'Your sites, settings, highlights and saved passages never leave your machine. No account needed for anything but AI features, and we never sell your data.' },
{ icon: 'palette', title: 'Make it yours', body: 'Customize the Slick Click menu with different themes, add or remove websites, rearrange their order or put them into groups.' }] }];
const BP_NOTES = [
{ t: 'Queue it up', side: 'top', x: 684, y: 192 },
{ t: 'Find in page', side: 'top', x: 763, y: 310 },
{ t: 'Search across sites', side: 'left', x: 551, y: 641, lane: 662 },
{ t: 'Highlight and keep', side: 'right', x: 1099, y: 350 },
{ t: 'Slick AI', side: 'right', x: 1051, y: 476 },
{ t: 'Definitions, instantly', side: 'right', x: 868, y: 541, lane: 556 },
{ t: 'Add any website', side: 'bottom', x: 708, y: 1276 }];
const fgToggle = (e) => {
const me = e.currentTarget, was = me.classList.contains('open');
const all = [...document.querySelectorAll('#features .feature')];
all.forEach((c) => { c.style.transition = 'none'; if (c.classList.contains('fg-card')) { c.classList.remove('open'); c.setAttribute('aria-expanded', 'false'); } });
if (!was) {
const r = me.getBoundingClientRect(), others = all.filter((c) => c !== me).map((c) => c.getBoundingClientRect());
let s = 1.35;
for (; s > 1.02; s -= 0.025) {
const w = r.width * (s - 1) / 2 + 10, h = r.height * (s - 1) / 2 + 10;
if (!others.some((o) => o.left < r.right + w && o.right > r.left - w && o.top < r.bottom + h && o.bottom > r.top - h)) break;
}
me.style.setProperty('--s', Math.max(s, 1.02));
me.classList.add('open'); me.setAttribute('aria-expanded', 'true');
}
void me.offsetWidth; all.forEach((c) => { c.style.transition = ''; });
};
const BP_ITEMS = BP_NOTES.map((n) => FEATURE_GROUPS.flatMap((g) => g.items).find((f) => f.title === n.t));
function BlueprintFeatures() {
const boxRef = React.useRef(null), imgRef = React.useRef(null), cardRefs = React.useRef([]);
const [paths, setPaths] = React.useState({ d: [], dots: [] });
const pathsRef = React.useRef([]);
React.useEffect(() => {
const calc = () => {
const box = boxRef.current, img = imgRef.current;
if (box && window.innerWidth <= 1100) box.style.marginBottom = '';
if (!box || !img || window.innerWidth <= 1100 || !img.naturalWidth) { setPaths({ d: [], dots: [] }); return; }
{ box.style.marginBottom = ''; const bt = box.getBoundingClientRect().top; const cb = Math.max(...[...box.querySelectorAll('.feature')].filter((c) => !c.classList.contains('open')).map((c) => c.getBoundingClientRect().bottom - bt)); box.style.marginBottom = Math.max(40, cb - box.offsetHeight + 40) + 'px'; }
const b = box.getBoundingClientRect(), r = img.getBoundingClientRect(), sc = r.width / 1166;
const L = r.left - b.left, T = r.top - b.top, R = L + r.width;
const rights = BP_NOTES.map((n, i) => i).filter((i) => BP_NOTES[i].side === 'right');
const d = [], dots = [];
BP_NOTES.forEach((nt, k) => {
const c = cardRefs.current[k]; if (!c) return;
const cr = c.getBoundingClientRect();
const cx = cr.left - b.left + cr.width / 2, cy = cr.top - b.top + cr.height / 2;
const tx = nt.side === 'bottom' ? cx : L + nt.x * sc, ty = T + nt.y * sc;
let p;
if (nt.side === 'top') { const sy = cr.bottom - b.top, jy = sy + 34; p = 'M' + cx + ' ' + sy + ' V' + jy + ' H' + tx + ' V' + ty; }
else if (nt.side === 'bottom') { const sy = cr.top - b.top; p = 'M' + cx + ' ' + sy + ' V' + ty; }
else if (nt.side === 'left') { const sx = cr.right - b.left, gx = L - 36, ly = T + nt.lane * sc; p = nt.lane ? 'M' + sx + ' ' + cy + ' H' + gx + ' V' + ly + ' H' + tx + ' V' + ty : 'M' + sx + ' ' + cy + ' H' + gx + ' V' + ty + ' H' + tx; }
else {
const sx = cr.left - b.left, idx = rights.indexOf(k), gx = R + 24 + (rights.length - 1 - idx) * 14;
p = 'M' + sx + ' ' + cy + ' H' + gx;
if (nt.lane) p += ' V' + (T + nt.lane * sc) + ' H' + tx + ' V' + ty; else p += ' V' + ty + ' H' + tx;
}
d.push(p); dots.push([tx, ty]);
});
pathsRef.current = d; setPaths({ d, dots });
};
calc();
const img = imgRef.current; if (img) img.addEventListener('load', calc);
window.addEventListener('resize', calc);
const t = setTimeout(calc, 700);
return () => { window.removeEventListener('resize', calc); if (img) img.removeEventListener('load', calc); clearTimeout(t); };
}, []);
const [open, setOpen] = React.useState({});
const tog = (k) => {
const cs = cardRefs.current.filter(Boolean);
const was = !!open[k];
let s = 1;
if (!was) {
cs.forEach((c) => { c.style.transition = 'none'; c.classList.remove('open'); c.style.removeProperty('--s'); });
const me = cardRefs.current[k], r = me.getBoundingClientRect(), others = cs.filter((c) => c !== me).map((c) => c.getBoundingClientRect());
const bx = boxRef.current.getBoundingClientRect(), segs = [];
pathsRef.current.forEach((d, pi) => {
if (pi === k) return;
const tk = d.split(/\s+/); let x = 0, y = 0, cmd = '';
tk.forEach((q) => { if (/^[MHV]/.test(q)) { cmd = q[0]; q = q.slice(1); } if (q === '') return; const v = parseFloat(q); let nx = x, ny = y;
if (cmd === 'M') { if (nx === x && !tk._m) { x = v; tk._m = 1; return; } y = v; tk._m = 0; return; }
if (cmd === 'H') nx = v; else if (cmd === 'V') ny = v;
segs.push([x + bx.left, y + bx.top, nx + bx.left, ny + bx.top]); x = nx; y = ny; });
});
for (s = 1.35; s > 1.02; s -= 0.025) {
const w = r.width * (s - 1) / 2 + 10, h = r.height * (s - 1) / 2 + 10;
const L = r.left - w, R = r.right + w, T = r.top - h, B = r.bottom + h;
if (!others.some((o) => o.left < R && o.right > L && o.top < B && o.bottom > T) && !segs.some(([x1, y1, x2, y2]) => Math.max(x1, x2) > L && Math.min(x1, x2) < R && Math.max(y1, y2) > T && Math.min(y1, y2) < B)) break;
}
cs.forEach((c) => { c.style.transition = ''; });
me.style.setProperty('--s', Math.max(s, 1.02));
}
setOpen(was ? {} : { [k]: true });
[0, 120, 300, 450].forEach((ms) => setTimeout(() => window.dispatchEvent(new Event('resize')), ms));
};
const card = (k) => {
const f = BP_ITEMS[k], on = !!open[k];
return (
(cardRefs.current[k] = el)} role="button" tabIndex={0} aria-expanded={on} onClick={() => tog(k)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); tog(k); } }}>
{f.title}
{f.body}
{side('top')}
{side('left')}
Built around you
{FEATURE_GROUPS.find((g) => g.label === 'Under your control').items.map((f, i) =>
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fgToggle(e); } }}>
{f.title} {f.body}
)}
{side('bottom')}
{side('right')}
{paths.d.map((p, i) =>
);
}
function Features() {
const cols = 4;
React.useEffect(() => {
const els = document.querySelectorAll('#features .feature.reveal');
if (!('IntersectionObserver' in window)) { els.forEach((e) => e.classList.add('in')); return; }
const io = new IntersectionObserver((ents) => ents.forEach((en) => { if (en.isIntersecting || en.boundingClientRect.top < 0) { en.target.classList.add('in'); io.unobserve(en.target); } }), { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
els.forEach((e) => io.observe(e));
return () => io.disconnect();
}, []);
return (
The fastest way to look things up.
Highlight text and the Slick Click menu appears. There when you need it, gone when you're done. Discreet by design. Never in the way. Always on hand.
{FEATURE_GROUPS.filter((g0) => g0.label !== 'Under your control').map((g0) => {
const g = { ...g0, items: g0.items.filter((f) => !BP_NOTES.some((n) => n.t === f.title)) };
if (!g.items.length) return null;
const rows = [];
for (let i = 0; i < g.items.length; i += cols) rows.push(g.items.slice(i, i + cols));
return (
{g.label}
{rows.map((row, ri) =>
{row.map((_, ci) =>
{row.map((f, i) => {
return (
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fgToggle(e); } }}>
{f.title}
{f.body}
);
})}
)}
);
})}
);
}
/* ---------- HOW IT WORKS ---------- */
function HowItWorks() {
const stepsRef = React.useRef(null);
React.useEffect(() => {
const el = stepsRef.current;
if (!el) return;
if (!('IntersectionObserver' in window)) { el.classList.add('in'); return; }
const io = new IntersectionObserver(([en]) => { if (en.isIntersecting) { el.classList.add('in'); io.disconnect(); } }, { threshold: 0.25 });
io.observe(el);
return () => io.disconnect();
}, []);
return (
Three steps. Two seconds.
01 / SELECT
Highlight anything.
Cross-reference a fact, check a source, find a definition, look up a quote, all without losing your place or your train of thought.
02 / PICK A WEBSITE
The menu appears.
A compact popup menu appears next to the highlighted text with your favorite engines.
03 / GO
One click. Done.
Click your website of choice and your highlighted text will be searched instantly on that site.
);
}
/* ---------- STATS ---------- */
function useCountUp(target, duration = 1400, started = false) {
const [val, setVal] = useState(0);
useEffect(() => {
if (!started) return;
if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setVal(target); return; }
let start = null;
const step = (ts) => {
if (!start) start = ts;
const progress = Math.min((ts - start) / duration, 1);
const ease = 1 - Math.pow(1 - progress, 3);
setVal(Math.round(ease * target));
if (progress < 1) requestAnimationFrame(step);
};
requestAnimationFrame(step);
}, [started, target, duration]);
return val;
}
function StatCard({ value, suffix, label, icon, color, delay = 0, started, tip }) {
const count = useCountUp(value, 1400 + delay, started);
const [tipOpen, setTipOpen] = useState(false); const tipRef = useRef(null);
useEffect(() => { if (!tipOpen) return; const f = (e) => { if (!tipRef.current || !tipRef.current.contains(e.target)) setTipOpen(false); }; document.addEventListener("click", f); return () => document.removeEventListener("click", f); }, [tipOpen]);
return (
{count} {suffix}
{label}
{tip &&
setTipOpen((o) => !o)}>? {tipOpen && {tip} }}
);
}
function CubeStats() {
const r = useRef(null);
useLayoutEffect(() => {
const q = (s) => r.current.querySelector(s), t = document.timeline.currentTime, all = [];
const go = (el, kf, o) => { const a = el.animate(kf, { fill: "both", ...o }); a.startTime = t; all.push(a); };
const soft = [{ opacity: 0, transform: "translateY(4px)" }, { opacity: 1, transform: "none" }], rise = [{ opacity: 0, transform: "translateY(7px)" }, { opacity: 1, transform: "none" }], wipe = [{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }];
go(q(".sq1"), soft, { duration: 1800, delay: 0, easing: "ease-in-out" });
go(q(".sq2"), soft, { duration: 1800, delay: 2500, easing: "ease-in-out" });
go(q(".sq3"), rise, { duration: 700, delay: 5000, easing: "cubic-bezier(.25,.46,.45,.94)" });
go(q(".sq1 .sq-k"), wipe, { duration: 1800, delay: 3000, easing: "cubic-bezier(.15,.55,.35,1)" });
go(q(".sq2 .sq-k"), wipe, { duration: 1800, delay: 5500, easing: "cubic-bezier(.15,.55,.35,1)" });
return () => all.forEach((a) => a.cancel());
}, []);
return (
No more copying
No more opening new tabs and pasting
With Slick Click,one click.
);
}
window.__CubeStats = CubeStats;
function Stats({ gate }) {
const ref = useRef(null);
const [started, setStarted] = useState(false);
const [counting, setCounting] = useState(false);
useEffect(() => { if (!started) return; const t = setTimeout(() => setCounting(true), gate ? 700 : 0); return () => clearTimeout(t); }, [started]);
useEffect(() => {
const el = ref.current;
if (!el) return;
let spun = !gate || !!window.__cubeSpun, seen = false;
const fire = () => { if (spun && seen) { setStarted(true); cleanup(); } };
const f = () => { spun = true; fire(); };
if (gate && !spun) window.addEventListener(gate, f);
const obs = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { seen = true; fire(); } }, { threshold: 0.6 });
obs.observe(el);
function cleanup() { obs.disconnect(); window.removeEventListener(gate, f); }
return cleanup;
}, []);
const StatIcon = {
clock: () => Icon.clock(),
cursor: () => Icon.cursor(),
key: () => Icon.keyboard(),
};
return (
Each search will save you, on average:
} color="var(--blue)" delay={0} started={counting}/>
} color="var(--blue)" delay={200} started={counting}/>
} color="var(--blue)" delay={400} started={counting}/>
);
}
/* ---------- FAQ ---------- */const FAQS = [
{ q: 'Is Slick Click free?', a: 'Yes. No ads, no in-app purchases, nothing to buy. The AI features run on a monthly allowance of credits, which is free too. Everything else is unlimited.' },
{ q: 'Do I need an account?', a: 'Only for the AI features, because those run on a server and the allowance has to be counted against someone. Searching, highlighting, saving, find-in-page and everything else works without signing in.' },
{ q: 'Does it track my searches?', a: "Your highlighted text stays on your device until you ask for something. Click a site and it goes straight to that site, not through us. Two things do leave: Define looks the word up with a dictionary service, and Slick AI sends your selection to your chosen model, through our server. We never store either. We also collect anonymous usage counts (how often features are used, never what you searched) to see what's worth improving." },
{ q: 'Is my data used to train AI models?', a: "No, and we don't keep your requests or the answers. They exist in memory for as long as the request takes and are never written to our database. Once a request reaches Google, xAI or Z.ai it's governed by their terms, so treat Slick AI like any other AI tool: don't put anything in it you wouldn't send to a third party." },
{ q: 'What happens when I run out of AI credits?', a: "Your allowance resets at the start of each month. Everything that isn't AI keeps working as normal in the meantime." },
{ q: "Can I add a site that isn't in the list?", a: "Yes. Open Settings, type the site's address (youtube.com is enough) and Slick Click works out how to search it. There's also a list of popular sites you can add with one click." },
{ q: 'Does it work on Firefox, Safari or Edge?', a: "Not yet. Slick Click is built for Chrome. Other Chromium browsers like Edge and Brave will run it, though Google sign-in, and so the AI features, may not work there. We hope to get Slick Click up and running on Firefox and Safari before the end of the year, so stay tuned for updates." },
{ q: 'Does it work in PDFs?', a: 'Yes, Slick Click is 100% compatible with PDFs.' },
{ q: 'Will it slow my browsing down?', a: "Slick Click is less than 7MiB and has been optimized to work as smoothly as possible on your system." },
{ q: "Something's broken. How do I get help?", a: "Email support@swiftsearch.online. We aim to respond within a couple of days." },
{ q: 'How do I uninstall?', a: 'Right-click the icon and choose "Remove from Chrome". That clears everything stored on your machine. If you made an account for the AI features, delete it separately first: Settings, then Membership, then Delete account.' }];
function FAQ() {
const [openIdx, setOpenIdx] = useState(0);
return (
Common questions.
{FAQS.map((f, i) =>
setOpenIdx(openIdx === i ? -1 : i)}>
{f.q}
{f.a}
)}
);
}
/* ---------- CTA + FOOTER ---------- */
function CTA() {
return (
The ultimate web browsing tool is here
Install Slick Click free. Highlight your first piece of text. You'll never copy-paste into Google again.
);
}
function Footer() {
return (
The fastest way to search the web. Highlight any text. Search anywhere. All in one click.
© 2026 Slick Click. All rights reserved.
Developed by
v.4.3.0. Last updated November 2026
);
}
/* ---------- COMPATIBILITY STRIP ---------- */
const COMPAT_ROW1 = [
{ domain: 'google.com', name: 'Google' },
{ domain: 'youtube.com', name: 'YouTube' },
{ domain: 'reddit.com', name: 'Reddit' },
{ domain: 'instagram.com', name: 'Instagram' },
{ domain: 'tiktok.com', name: 'TikTok' },
{ domain: 'amazon.com', name: 'Amazon' },
{ domain: 'chatgpt.com', name: 'ChatGPT' },
{ domain: 'x.com', name: 'X' },
{ domain: 'wikipedia.org', name: 'Wikipedia' },
{ domain: 'netflix.com', name: 'Netflix' }];
const COMPAT_ROW2 = [
{ domain: 'spotify.com', name: 'Spotify' },
{ domain: 'linkedin.com', name: 'LinkedIn' },
{ domain: 'github.com', name: 'GitHub' },
{ domain: 'stackoverflow.com', name: 'Stack Overflow' },
{ domain: 'imdb.com', name: 'IMDb' },
{ domain: 'maps.google.com', name: 'Google Maps' },
{ domain: 'twitch.tv', name: 'Twitch' },
{ domain: 'pinterest.com', name: 'Pinterest' },
{ domain: 'ebay.com', name: 'eBay' },
{ domain: 'tripadvisor.com', name: 'Tripadvisor' }];
const COMPAT_ALL = [...COMPAT_ROW1, ...COMPAT_ROW2];
const COMPAT_PAGES = (() => { const per = 10, n = Math.ceil(COMPAT_ALL.length / per), out = []; for (let p = 0; p < n; p++) { const pg = []; for (let i = 0; i < per; i++) pg.push(COMPAT_ALL[(p * per + i) % COMPAT_ALL.length]); out.push(pg); } return out; })();
function CompatChip({ s, k, n, first }) {
const [shown, setShown] = React.useState(s);
const [anim, setAnim] = React.useState(null);
const init = React.useRef(true);
React.useEffect(() => {
if (init.current) { init.current = false; return; }
if (shown.domain === s.domain) return;
const t1 = setTimeout(() => setAnim('pillFlipOut .15s ease-in both'), n * 110);
const t2 = setTimeout(() => { setShown(s); setAnim('pillFlip .15s ease-out both'); }, n * 110 + 150);
return () => { clearTimeout(t1); clearTimeout(t2); };
}, [s.domain]);
return (
{shown.name}
);
}
function CompatRow({ items, phase, base }) {
return (
{items.map((s, i) =>
);
}
function CompatibilityStrip() {
const [page, setPage] = React.useState(0);
const [phase, setPhase] = React.useState('idle');
const stageRef = React.useRef(null);
React.useEffect(() => {
const el = stageRef.current;
if (!el) return;
let done = false;
const go = () => { if (done) return; done = true; setPhase((p) => p === 'idle' ? 'in' : p); cleanup(); };
const check = () => { const r = el.getBoundingClientRect(); if (r.top < window.innerHeight * 0.85 && r.bottom > 0) go(); };
let io = null;
if ('IntersectionObserver' in window) { io = new IntersectionObserver(([en]) => { if (en.isIntersecting) go(); }, { threshold: 0.3 }); io.observe(el); }
window.addEventListener('scroll', check, { passive: true }); window.addEventListener('resize', check);
const fb = setTimeout(go, 6000);
function cleanup() { if (io) io.disconnect(); window.removeEventListener('scroll', check); window.removeEventListener('resize', check); clearTimeout(fb); }
check();
return cleanup;
}, []);
React.useEffect(() => {
let t;
if (phase === 'in') t = setTimeout(() => setPhase('hold'), 1200);
else if (phase === 'hold') t = setTimeout(() => { setPage((p) => (p + 1) % COMPAT_PAGES.length); setPhase('out'); }, 5000);
else if (phase === 'out') t = setTimeout(() => setPhase('hold'), 1500);
return () => clearTimeout(t);
}, [phase]);
const pg = COMPAT_PAGES[page];
return (
Works everywhere you search.
Tried and tested to work with 100s of the most popular websites on the web.
Add Google, Reddit, YouTube, Amazon, TikTok or any site you choose.
If it has a search bar, Slick Click can figure out how to search it automatically.
);
}
const KB_CARDS = [
{ side: 'left', k: 'esc', top: true, t: 'Close the menu', b: 'Esc closes the floating menu.' },
{ side: 'left', k: 'tab', t: 'Focus the site icons', b: 'Tab moves into the icons. Press again to cycle through them.' },
{ side: 'bottom', k: 'alt', t: 'Open from anywhere', b: 'Alt+S opens Slick Click on the current page. Alt+A opens the AI Box.' },
{ side: 'right', k: 'n9', top: true, t: 'Search instantly', b: 'Once an icon is focused, press 1 to 9 to search that numbered site.' },
{ side: 'right', k: 'enter', t: 'Search the focused site', b: 'Or your default site if none is focused.' },
{ side: 'bottom', k: 'arr', t: 'Move around', b: 'Arrow keys move focus between site icons, across and up or down a row.' }];
const KB_ROWS = [
[['Esc', 4, 'esc'], ...'123456789'.split('').map((c) => [c, 4, c === '9' ? 'n9' : '', 1]), ['0', 4], ['⌫', 8]],
[['Tab', 6, 'tab'], ...'QWERTYUIOP'.split('').map((c) => [c, 4]), ['\\', 6]],
[['Caps', 7], ['A', 4, 'a', 1], ['S', 4, 's', 1], ...'DFGHJKL'.split('').map((c) => [c, 4]), ['Enter', 9, 'enter']],
[['Alt', 6, 'alt'], ['', 28], ['Alt', 6], ['←', 4, '', 0], ['ud', 4, 'arr', 0], ['→', 4]]];
const KB_ON = ['Esc', 'Tab', 'Enter', 'Alt', '←', '→', 'ud'];
function KeyboardBlueprint() {
const boxRef = React.useRef(null), kbRef = React.useRef(null), cardRefs = React.useRef([]);
const [paths, setPaths] = React.useState({ d: [], dots: [] });
React.useEffect(() => {
const calc = () => {
const box = boxRef.current, kb = kbRef.current;
if (!box || window.innerWidth <= 1100) { setPaths({ d: [], dots: [] }); return; }
const b = box.getBoundingClientRect(), kr = kb.getBoundingClientRect();
const d = [], dots = [];
KB_CARDS.forEach((c, i) => {
const el = cardRefs.current[i], key = kb.querySelector('[data-k="' + c.k + '"]'); if (!el || !key) return;
const cr = el.getBoundingClientRect(), r = key.getBoundingClientRect();
const cy = cr.top - b.top + cr.height / 2, kx = r.left - b.left, ky = r.top - b.top + r.height / 2;
const kcx = r.left - b.left + r.width / 2, kt = r.top - b.top;
const left = c.side === 'left', sx = left ? cr.right - b.left : cr.left - b.left;
let p, tx, ty;
if (c.side === 'bottom') { const kb2 = r.bottom - b.top; tx = kcx; ty = kb2; p = 'M' + tx + ' ' + (cr.top - b.top) + ' V' + ty; }
else if (c.top) { tx = kcx; ty = kt; p = 'M' + sx + ' ' + cy + ' H' + tx + ' V' + ty; }
else {
const ex = left ? kx : r.right - b.left, gx = left ? kr.left - b.left - 28 : kr.right - b.left + 28;
tx = ex; ty = ky; p = 'M' + sx + ' ' + cy + ' H' + gx + ' V' + ty + ' H' + tx;
}
d.push(p); dots.push([tx, ty]);
});
const q = (k) => { const e = kb.querySelector('[data-k="' + k + '"]'); return e && e.getBoundingClientRect(); };
const al = q('alt'), ka = q('a'), ks = q('s');
if (al && ka && ks) {
const gy = ka.bottom - b.top + (al.top - ka.bottom) / 2, ax = al.left - b.left + al.width / 2, kax = ka.left - b.left + ka.width / 2, ksx = ks.left - b.left + ks.width / 2, kyb = ka.bottom - b.top;
const my = al.top - b.top + al.height / 2; d.push('M' + (al.right - b.left) + ' ' + my + ' H' + ksx + ' V' + kyb); d.push('M' + kax + ' ' + my + ' V' + kyb);
dots.push([kax, kyb], [ksx, kyb]);
}
setPaths({ d, dots });
};
calc(); window.addEventListener('resize', calc);
const t = setTimeout(calc, 600);
return () => { window.removeEventListener('resize', calc); clearTimeout(t); };
}, []);
const col = (side) => KB_CARDS.map((c, i) => c.side === side ?
(cardRefs.current[i] = el)}>
{c.t} {c.b}
{col('left')}
{KB_ROWS.map((row, ri) =>
{row.map(([l, u, id, hl], ki) => {
if (l === '' ) return
;
if (l === 'ud') return
↑ ↓ ;
const on = hl === 1 ? true : KB_ON.includes(l) && !(l === 'Enter' && false);
return (
{l === 'Tab' ? );
})}
)}
{col('right')}
{col('bottom')}
{paths.d.map((p, i) =>
);
}
function KeyboardShortcuts() {
return (
A few keys. A lot less clicking.
Slick Click has been optimized for keyboard users so you never have to break your flow.
);
}
function App() {
const [engines, setEngines] = useState(
ENGINES_INIT.map((e, i) => ({ ...e, on: i < 6 }))
);
useEffect(() => {
const id = (location.hash || '').slice(1);
if (!id) return;
const t = setTimeout(() => {
const el = document.getElementById(id);
if (el) window.scrollTo(0, el.getBoundingClientRect().top + window.pageYOffset - 80);
}, 200);
return () => clearTimeout(t);
}, []);
return (
<>
