// Atmospheric — Crossing Cloud landing page // Full-bleed sky hero, glass UI, dreamy. Tweakable sky palette, accent, headline, weave intensity. const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "sky": "twilight", "accent": "amber", "weaveIntensity": 1, "headline": "Software\nthat respects\nyour time.", "italicWord": "", "showStars": false, "sectionOrder": "hero,studio,about,work,contact" } /*EDITMODE-END*/; const SKY_PRESETS = { twilight: { name: "Twilight", grad: "radial-gradient(ellipse 90% 70% at 50% 28%, #6FA3D8 0%, #3B7BBE 35%, #1F4E83 70%, #0E2540 100%)", night: "#0E2540", deep: "#1F4E83" }, dawn: { name: "Dawn", grad: "radial-gradient(ellipse 100% 80% at 30% 20%, #F4C9A2 0%, #C68DA8 28%, #6F7DB8 55%, #2E4476 85%, #14223D 100%)", night: "#14223D", deep: "#2E4476" }, overcast: { name: "Overcast", grad: "radial-gradient(ellipse 110% 80% at 50% 30%, #C9D7E5 0%, #8AA1BB 35%, #4F6584 70%, #2A3B55 100%)", night: "#2A3B55", deep: "#4F6584" }, midnight: { name: "Midnight", grad: "radial-gradient(ellipse 100% 80% at 50% 30%, #2A4A78 0%, #15294A 45%, #0A1528 100%)", night: "#0A1528", deep: "#15294A" } }; const ACCENT_PRESETS = { amber: { name: "Amber", color: "oklch(82% 0.13 70)", deep: "oklch(68% 0.14 55)", rgb: "232,170,108" }, rose: { name: "Rose", color: "oklch(80% 0.11 25)", deep: "oklch(64% 0.14 20)", rgb: "232,150,150" }, sage: { name: "Sage", color: "oklch(82% 0.07 145)", deep: "oklch(64% 0.10 145)", rgb: "160,200,170" }, paper: { name: "Paper", color: "oklch(95% 0.02 80)", deep: "oklch(78% 0.04 80)", rgb: "240,232,218" } }; function Atmospheric() { const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS); const sky = SKY_PRESETS[tw.sky] || SKY_PRESETS.twilight; const acc = ACCENT_PRESETS[tw.accent] || ACCENT_PRESETS.amber; // Expose accent & sky to descendants via inline CSS vars const pageStyle = { "--sky-night": sky.night, "--sky-deep": sky.deep, "--sky-grad": sky.grad, "--accent": acc.color, "--accent-deep": acc.deep, "--accent-rgb": acc.rgb }; return (
); } // Sticky mini-nav appears after scrolling past the hero function StickyNav() { const [show, setShow] = React.useState(false); React.useEffect(() => { const onScroll = () => setShow(window.scrollY > 700); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const link = { color: "rgba(255,255,255,0.85)", textDecoration: "none", fontSize: 13, padding: "8px 14px", borderRadius: 999 }; return (
Crossing Cloud {["Work", "About", "Contact"].map((t) => {t} )}
); } // ───────────────────────────────────────────────────────────── // NAV // ───────────────────────────────────────────────────────────── function Nav() { const link = { color: "rgba(255,255,255,0.85)", textDecoration: "none", fontSize: 14, letterSpacing: "-0.005em" }; return (
Crossing Cloud Say hello
); } // ───────────────────────────────────────────────────────────── // HERO // ───────────────────────────────────────────────────────────── function WeaveArc({ intensity = 1 }) { if (intensity <= 0) return null; return ( {/* Strand A — under at center. Animates: slow drift + a slow draw-on. */} {/* Strand B — over at center */} {/* second softer pair, offset, for depth */} ); } function Stars() { // a constellation of soft white pinpricks const pts = React.useMemo(() => { const seed = 1234; let s = seed; const rand = () => {s = (s * 9301 + 49297) % 233280;return s / 233280;}; return Array.from({ length: 70 }, () => ({ x: rand() * 100, y: rand() * 70, r: 0.6 + rand() * 1.2, o: 0.25 + rand() * 0.55 })); }, []); return ( {pts.map((p, i) => )} ); } function Hero({ tw, sky, acc }) { const lines = (tw.headline || "").split("\n"); const renderLine = (line, i) => { if (!tw.italicWord) return {line}; const idx = line.toLowerCase().indexOf(tw.italicWord.toLowerCase()); if (idx < 0) return {line}; const before = line.slice(0, idx); const target = line.slice(idx, idx + tw.italicWord.length); const after = line.slice(idx + tw.italicWord.length); return ( {before} {target} {after} ); }; return (
{tw.showStars && }
Independent software studio  ·  Salt Lake City

{lines.map(renderLine)}

Smart, useful, honest applications. Built with care. No nonsense.

{/* Glass status card — bottom right */}
Now in the workshop
Duly · Life admin made easy
Life admin the way it should be. No streaks. No nags. Just today, tended to.
In development 2026 ↗
); } // ───────────────────────────────────────────────────────────── // STUDIO // ───────────────────────────────────────────────────────────── function Studio({ acc }) { return (
{/* Top fade — mirrors the hero's bottom fade so the section boundary blends across a wide band of pure sky-night. */}
☁   The studio

The apps we use every day shouldn't exploit our attention, deal shadily with our data, or treat us like a metric to be optimized.

We aim to change that.

{[ ["Built with intent", "Made carefully, shipped ready."], ["You're not the product", "Your data isn't sold or mined."], ["You stay in control", "Tools that work for you."], ["No nags", "Built for focus, not engagement."]]. map(([t, d], i) =>
0{i + 1}
{t}
{d}
)}
); } // ───────────────────────────────────────────────────────────── // ABOUT // A more personal counterpoint to Studio. Lighter background to give // the page a clear breath between the two dark sections. // ───────────────────────────────────────────────────────────── function About() { return (
{/* Faint weave watermark */}
§ About
{/* Portrait card */}
Crossing Cloud
Crossing Cloud · 2026
{[ ["Founded", "2026"], ["Based", "Salt Lake City"]]. map(([k, v], i) =>
{k}
{v}
)}
{/* The note */}

After years of using management software and productivity apps, somewhere along the way it started feeling worse to use, not better.

Crossing Cloud is our answer to that. A software studio for people who'd rather use a small, finished thing than be stuck in a sprawling one. We design and build intuitive and useful apps — the kind your grandmother could open and use, the kind that still work when the cell tower is down.

Between our own products, we take on a small number of outside engagements — usually those who want a thoughtful first version, or teams who need an honest second opinion on software before they commit.

{/* Signature row */}
Zachary Ferries · Founder
Say hello →
); } // ───────────────────────────────────────────────────────────── // WORK // ───────────────────────────────────────────────────────────── function Work({ acc }) { return (
The work

01 / 01
{/* subtle weave on the card too */}
▲  Coming 2026

Duly

A life admin app for people who'd rather get on with their day. The recurring stuff, handled. Everything. On time.

{[ ["Platform", "iOS · Android"], ["Pricing", "Free with optional in app purchases"], ["Status", "In development - 2026 Release"]]. map(([k, v]) =>
{k} {v}
)}
Coming soon
Duly
); } // ───────────────────────────────────────────────────────────── // SERVICES // ───────────────────────────────────────────────────────────── function Services() { const items = [ ["Product partnership", "Design, code, and judgment from concept to ship.", "Monthly retainer"], ["Technical due diligence", "Honest written assessment of a codebase before you sign.", "Fixed engagement"], ["Native app rescue", "Slow, fragile, or stuck on a dead framework? We rebuild it.", "Project-based"]]; return (
Services

When the calendar allows, we take on a small number of outside engagements.

{items.map(([t, d, p]) =>

{t}

{d}

{p}
)}
); } // ───────────────────────────────────────────────────────────── // CONTACT + FOOTER // ───────────────────────────────────────────────────────────── function Contact({ acc }) { return (
Contact

Let's make
something
built right.

We read every email and we'll get back within a few business days. Usually with a real answer, not a discovery call.

email   contact@crossingcloud.dev
where   Salt Lake City, UT
© 2026 Crossing Cloud LLC Privacy Policy Terms of Use Made deliberately in Utah v1.0 · 04 May 2026
); } function ContactForm() { const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error const [error, setError] = React.useState(""); const onSubmit = async (e) => { e.preventDefault(); setStatus("sending"); setError(""); const fd = new FormData(e.target); const payload = { name: fd.get("name"), email: fd.get("email"), company: fd.get("company"), message: fd.get("message"), website: fd.get("website") // honeypot }; try { const resp = await fetch("/api/contact", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) }); const body = await resp.json().catch(() => ({})); if (!resp.ok) { setError(body.error || "Something went wrong. Please try again."); setStatus("error"); return; } setStatus("sent"); } catch { setError("Couldn't reach the server. Check your connection and try again."); setStatus("error"); } }; if (status === "sent") { return (
✓ Sent

Thanks — we'll be in touch.

We read every email and we'll get back within two business days. In the meantime, take care.

); } const sending = status === "sending"; return (
{[ ["Your name", "text", "name", true], ["Email", "email", "email", true], ["Company (optional)", "text", "company", false] ].map(([l, t, n, req]) => )}