feat: particle cloud (no discrete dots) + geo-IP country preselect on login
All checks were successful
Deploy to Production / deploy (push) Successful in 1m1s

Two coordinated polish moves the owner asked for.

## 1. Hero particle field — "no white dots, just a glow that follows the mouse and is always in motion"

Previous tuning (uPointSize 2.8, uBaseAlpha 0.6) gave discrete indigo
dots that additively saturated to near-white in dense clusters. The
owner wanted no granular dots visible at all — a continuous indigo
cloud that the cursor pulls toward itself.

Changes:

- **Render fragment**: replaced the anti-aliased disc SDF
  (`smoothstep(0.5, 0.42, d)` — hard edge) with a Gaussian falloff
  (`exp(-d * d * 6.0)` — smooth blob, no edge). Each particle is now
  a soft volume that blends seamlessly with neighbours.

- **Sim fragment**: replaced the outward-gradient ring push with a
  mouse-halo attraction. Particles drift toward an ideal radius
  (~0.20) around the cursor, with exp-bell falloff so they don't
  collapse onto the cursor or feel influenced from across the canvas.
  `ringField()` helper is now unused but kept for future use.

- **JS uniforms**: `uPointSize` 2.8→14 (256-tier) / 3.6→20 (128-tier);
  `uBaseAlpha` 0.6→0.055. Individual particles are below the
  perception threshold for "dot" but 65k of them additively composite
  into a continuous cloud. With the much lower per-particle alpha,
  the cumulative brightness never saturates to white.

- **ParticleField tick loop**: asymmetric ring-active fade — `alpha
  = 0.14` ramping in (fast cursor response), `0.012` decaying out
  (slow glow trail after the pointer moves away). Matches the brief
  "glow longer + attractive to mouse but always in motion".

- **ParticleHero index.tsx**: added an always-on indigo radial
  gradient behind the WebGL canvas, so the hero never reads as
  visually empty between frames — the canvas additively paints the
  dynamic cloud on top. Removed the white-dot stipple from the
  static fallback (it was the most likely source of the "weisse
  punkte" complaint for any visitor on the fallback path).

## 2. SMS login — pre-select country picker from visitor's geo-IP

The country picker on `/login` previously defaulted to `'CH'` for
everyone. Visitors from DE / AT / US / etc. had to manually scroll
to their dial code — small friction but it sits on the highest-stakes
conversion step in the funnel.

- **New API route** `apps/api/src/routes/geo.ts` →
  `GET /v1/geo/country` returns `{ country: 'CH' | 'DE' | … | null }`
  by reading Cloudflare's `CF-IPCountry` header. Public, no auth —
  reading a 2-letter country code from a geo-IP header isn't PII
  under GDPR / DSG. `'XX'` and `'T1'` (CF's "unknown" + Tor) are
  normalised to `null`. Outside CF (dev), header is missing → null.

- **Login page** picks up the result in the existing `useEffect`,
  guards against codes not in our country list, and calls `setCountry`
  to override the `'CH'` default. Stays at `'CH'` if the detection
  fails or the visitor is on a Tor exit. Verified live: the endpoint
  returns `{"country":"DE"}` from CF's German edge.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Sadjadi
2026-05-27 13:17:20 +02:00
parent 035e55f00c
commit 6197ee7f5e
17 changed files with 1053 additions and 164 deletions

View File

@@ -162,18 +162,18 @@ export const simFragment = /* glsl */ `
float n2 = snoise(pos * 1.6 + vec2(0.0, driftTime * 0.045) + 53.7);
vec2 driftVel = vec2(-n2, n1) * 0.028 * uMotionScale; // curl-like rotation
// --- Ring push: gradient of the ring field, pointing outward ---
float h = 0.003;
float fx0 = ringField(pos - vec2(h, 0.0));
float fx1 = ringField(pos + vec2(h, 0.0));
float fy0 = ringField(pos - vec2(0.0, h));
float fy1 = ringField(pos + vec2(0.0, h));
vec2 grad = vec2(fx1 - fx0, fy1 - fy0) / (2.0 * h);
float fieldHere = ringField(pos);
// Push along gradient — particles get nudged away from the ring crest.
// Magnitude is scaled by uMotionScale so reduced-motion users get a
// softer shove while the ring position still tracks at full fidelity.
vec2 ringVel = grad * fieldHere * 0.55 * uMotionScale;
// --- Mouse halo pull (attraction, not repulsion) ---
// Particles are drawn toward a soft halo orbiting the cursor —
// strongest at ~0.20 distance, fading both closer and farther.
// Closer-fade prevents the cloud from collapsing onto the cursor;
// farther-fade keeps the influence local. The result is a moving
// bright spot that follows the pointer with a continuous breathing
// ring of indigo around it, rather than the old outward push that
// hollowed the cloud where the cursor sat.
vec2 toMouse = uRingPos - pos;
float distToMouse = length(toMouse) + 0.001;
float halo = exp(-pow(distToMouse - 0.20, 2.0) * 22.0);
vec2 ringVel = (toMouse / distToMouse) * halo * 0.05 * uRingActive * uMotionScale;
// --- Soft containment toward origin if particle escaped ---
float r = length(pos);
@@ -247,14 +247,19 @@ export const renderFragment = /* glsl */ `
varying float vScale;
void main() {
// Disc SDF — anti-aliased round dot.
// Soft Gaussian blob — no hard disc edge. Combined with the bigger
// uPointSize on the JS side (14-20px vs the old 2.8) and the much
// lower uBaseAlpha (0.05 vs 0.6), individual particles disappear
// into a continuous indigo cloud. The exp() falloff means each blob
// contributes most at its centre and fades smoothly to nothing —
// adjacent blobs blend without seams, so 65k of them additively
// composite into a volumetric glow instead of a stipple texture.
float d = length(gl_PointCoord - 0.5);
float a = smoothstep(0.5, 0.42, d);
float a = exp(-d * d * 6.0);
if (a <= 0.001) discard;
// Velocity-driven mix: pin to indigo for typical drift, lerp toward
// green only on real shoves. The 0.04..0.18 band is roughly where
// ring pushes live; idle drift stays below 0.03.
// Velocity-driven mix kept, but with the new low base alpha the
// green tint is barely visible — by design. The cloud is calm.
float t = smoothstep(0.04, 0.18, vVel);
vec3 col = mix(uColorCalm, uColorHot, t);