From 3d3f3834294e4e6c304ae9c1c6f17bef49cd2b35 Mon Sep 17 00:00:00 2001 From: oppiliappan Date: Mon, 5 Oct 2026 11:31:48 +0100 Subject: [PATCH] web/home: close the page with a cta inside a halftone sphere the sphere is the hero's, so its lighting moves into halftone.ts. the flat halftone backdrop goes from the cta and the footer. Signed-off-by: oppiliappan --- .../components/home/CircularTimeline.svelte | 26 +----------- web/src/lib/components/home/Halftone.svelte | 37 ---------------- web/src/lib/components/home/HomeCta.svelte | 42 +++++++++++++++---- .../lib/components/home/MarketingHome.svelte | 2 + web/src/lib/components/home/halftone.ts | 31 ++++++++++++++ web/src/lib/components/shell/Footer.svelte | 2 - 6 files changed, 69 insertions(+), 71 deletions(-) delete mode 100644 web/src/lib/components/home/Halftone.svelte diff --git a/web/src/lib/components/home/CircularTimeline.svelte b/web/src/lib/components/home/CircularTimeline.svelte index add33a098..081908b72 100644 --- a/web/src/lib/components/home/CircularTimeline.svelte +++ b/web/src/lib/components/home/CircularTimeline.svelte @@ -10,7 +10,7 @@ import { onMount, type Component } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements"; import { deg } from "$lib/components/home/globe"; - import { PITCH, sphere as dotted, type Normal } from "$lib/components/home/halftone"; + import { litSphere } from "$lib/components/home/halftone"; import type * as ShTangledActorDefs from "$lib/api/lexicons/types/sh/tangled/actor/defs"; import type * as ShTangledRepoDefs from "$lib/api/lexicons/types/sh/tangled/repo/defs"; import type * as ShTangledFeedGetTimeline from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline"; @@ -96,12 +96,6 @@ create: { icon: BookPlus, verb: "created" }, follow: { icon: UserPlus, verb: "followed" } }; - const SPHERE = { - light: { x: 0, y: -0.45, z: 0.89 }, - from: 0.2, - pitch: 2 * PITCH, - dot: { min: PITCH * 0.06, max: PITCH * 0.44 } - }; const TAU = 2 * Math.PI; const DEGREES = 360; const APPEAR = { duration: 800, delay: 200, stagger: 180 }; @@ -139,26 +133,10 @@ }); const cy = $derived(size.height - floor - inner); - const shade = ({ x, y, z }: Normal) => { - const { light } = SPHERE; - const lit = x * light.x + y * light.y + z * light.z; - return Math.min(1, Math.max(0, (1 - lit - SPHERE.from) / (1 - SPHERE.from))); - }; - const sphere = $derived.by(() => { const radius = inner - CARD.height / 2 - RING.margin; if (!size.width || radius <= 0) return ""; - return dotted( - size.width, - size.height, - { x: cx, y: cy }, - radius, - (normal) => { - const t = shade(normal); - return t > 0 ? SPHERE.dot.min + (SPHERE.dot.max - SPHERE.dot.min) * t : 0; - }, - SPHERE.pitch - ); + return litSphere(size.width, size.height, { x: cx, y: cy }, radius); }); let measure = $state((text) => text.length * TEXT.char); diff --git a/web/src/lib/components/home/Halftone.svelte b/web/src/lib/components/home/Halftone.svelte deleted file mode 100644 index 5fda9bf06..000000000 --- a/web/src/lib/components/home/Halftone.svelte +++ /dev/null @@ -1,37 +0,0 @@ - - - diff --git a/web/src/lib/components/home/HomeCta.svelte b/web/src/lib/components/home/HomeCta.svelte index 365b26670..ad246bc05 100644 --- a/web/src/lib/components/home/HomeCta.svelte +++ b/web/src/lib/components/home/HomeCta.svelte @@ -1,16 +1,42 @@ -
- +
+
-

Come get tangled.

-

- Make an account in seconds, or bring the AT Protocol account you already have. We'll - also keep you posted on what we're shipping. +

+

+ Come get tangled +

+

+ Host an account with us, or bring your own AT Protocol account.

- +
diff --git a/web/src/lib/components/home/MarketingHome.svelte b/web/src/lib/components/home/MarketingHome.svelte index 1fe549348..6c4a6190b 100644 --- a/web/src/lib/components/home/MarketingHome.svelte +++ b/web/src/lib/components/home/MarketingHome.svelte @@ -3,6 +3,7 @@ import FeatureStack from "$lib/components/home/FeatureStack.svelte"; import HackableSection from "$lib/components/home/HackableSection.svelte"; import Hero from "$lib/components/home/Hero.svelte"; + import HomeCta from "$lib/components/home/HomeCta.svelte"; import SelfHostSection from "$lib/components/home/SelfHostSection.svelte"; import SocialWall from "$lib/components/home/SocialWall.svelte"; import { socialPosts } from "$lib/components/home/content"; @@ -18,4 +19,5 @@ + diff --git a/web/src/lib/components/home/halftone.ts b/web/src/lib/components/home/halftone.ts index 467751c33..d80e1d452 100644 --- a/web/src/lib/components/home/halftone.ts +++ b/web/src/lib/components/home/halftone.ts @@ -65,3 +65,34 @@ export const sphere = ( } return out.join(""); }; + +const LIT = { + light: { x: 0, y: -0.45, z: 0.89 }, + from: 0.2, + pitch: 2 * PITCH, + dot: { min: PITCH * 0.06, max: PITCH * 0.44 } +}; + +const shade = ({ x, y, z }: Normal, light: Normal) => { + const lit = x * light.x + y * light.y + z * light.z; + return Math.min(1, Math.max(0, (1 - lit - LIT.from) / (1 - LIT.from))); +}; + +export const litSphere = ( + width: number, + height: number, + center: { x: number; y: number }, + radius: number, + light: Normal = LIT.light +): string => + sphere( + width, + height, + center, + radius, + (normal) => { + const t = shade(normal, light); + return t > 0 ? LIT.dot.min + (LIT.dot.max - LIT.dot.min) * t : 0; + }, + LIT.pitch + ); diff --git a/web/src/lib/components/shell/Footer.svelte b/web/src/lib/components/shell/Footer.svelte index 8a42f7bab..34008668a 100644 --- a/web/src/lib/components/shell/Footer.svelte +++ b/web/src/lib/components/shell/Footer.svelte @@ -1,5 +1,4 @@